speed up lucide-solid loading (#280)

Author: brenelz

frameworks/solid/add-ons/start/assets/vite.config.ts.ejs

@@ -7,9 +7,10 @@ import { tanstackStart } from "@tanstack/solid-start/plugin/vite";
 import solidPlugin from 'vite-plugin-solid';
 <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportContent(integration) %>
 <% } %>
+import lucidePreprocess from "vite-plugin-lucide-preprocess";
 
 export default defineConfig({
-  plugins: [devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
+  plugins: [lucidePreprocess(), devtools(), <% for(const integration of integrations.filter(i => i.type === 'vite-plugin')) { %><%- integrationImportCode(integration) %>,<% } %>
     // this is the plugin that enables path aliases
     viteTsConfigPaths({
       projects: ['./tsconfig.json'],

frameworks/solid/add-ons/start/package.json

@@ -9,6 +9,7 @@
     "vite": "^7.1.7",
     "vite-tsconfig-paths": "^5.1.4",
     "lucide-solid": "^0.544.0",
-    "@tanstack/solid-router-ssr-query": "^1.132.25"
+    "@tanstack/solid-router-ssr-query": "^1.132.25",
+    "vite-plugin-lucide-preprocess": "^1.4.6"
   }
 }

frameworks/solid/tests/snapshots/solid/solid-cr-ts-start-npm.json

@@ -13,9 +13,9 @@
     "/src/routes/index.tsx": "import { createFileRoute } from '@tanstack/solid-router'\nimport { For } from 'solid-js'\nimport {\n  Zap,\n  Server,\n  Route as RouteIcon,\n  Shield,\n  Waves,\n  Sparkles,\n} from 'lucide-solid'\n\nexport const Route = createFileRoute('/')({ component: App })\n\nfunction App() {\n  const features = [\n    {\n      icon: <Zap class=\"w-12 h-12 text-cyan-400\" />,\n      title: 'Powerful Server Functions',\n      description:\n        'Write server-side code that seamlessly integrates with your client components. Type-safe, secure, and simple.',\n    },\n    {\n      icon: <Server class=\"w-12 h-12 text-cyan-400\" />,\n      title: 'Flexible Server Side Rendering',\n      description:\n        'Full-document SSR, streaming, and progressive enhancement out of the box. Control exactly what renders where.',\n    },\n    {\n      icon: <RouteIcon class=\"w-12 h-12 text-cyan-400\" />,\n      title: 'API Routes',\n      description:\n        'Build type-safe API endpoints alongside your application. No separate backend needed.',\n    },\n    {\n      icon: <Shield class=\"w-12 h-12 text-cyan-400\" />,\n      title: 'Strongly Typed Everything',\n      description:\n        'End-to-end type safety from server to client. Catch errors before they reach production.',\n    },\n    {\n      icon: <Waves class=\"w-12 h-12 text-cyan-400\" />,\n      title: 'Full Streaming Support',\n      description:\n        'Stream data from server to client progressively. Perfect for AI applications and real-time updates.',\n    },\n    {\n      icon: <Sparkles class=\"w-12 h-12 text-cyan-400\" />,\n      title: 'Next Generation Ready',\n      description:\n        'Built from the ground up for modern web applications. Deploy anywhere JavaScript runs.',\n    },\n  ]\n\n  return (\n    <div class=\"min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900\">\n      <section class=\"relative py-20 px-6 text-center overflow-hidden\">\n        <div class=\"absolute inset-0 bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-purple-500/10\"></div>\n        <div class=\"relative max-w-5xl mx-auto\">\n          <div class=\"flex items-center justify-center gap-6 mb-6\">\n            <img\n              src=\"/tanstack-circle-logo.png\"\n              alt=\"TanStack Logo\"\n              class=\"w-24 h-24 md:w-32 md:h-32\"\n            />\n            <h1 class=\"text-6xl md:text-7xl font-black text-white [letter-spacing:-0.08em]\">\n              <span class=\"text-gray-300\">TANSTACK</span>{' '}\n              <span class=\"bg-gradient-to-r from-cyan-400 to-blue-400 bg-clip-text text-transparent\">\n                START\n              </span>\n            </h1>\n          </div>\n          <p class=\"text-2xl md:text-3xl text-gray-300 mb-4 font-light\">\n            The framework for next generation AI applications\n          </p>\n          <p class=\"text-lg text-gray-400 max-w-3xl mx-auto mb-8\">\n            Full-stack framework powered by TanStack Router for React and Solid.\n            Build modern applications with server functions, streaming, and type\n            safety.\n          </p>\n          <div class=\"flex flex-col items-center gap-4\">\n            <a\n              href=\"https://tanstack.com/start\"\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n              class=\"px-8 py-3 bg-cyan-500 hover:bg-cyan-600 text-white font-semibold rounded-lg transition-colors shadow-lg shadow-cyan-500/50\"\n            >\n              Documentation\n            </a>\n            <p class=\"text-gray-400 text-sm mt-2\">\n              Begin your TanStack Start journey by editing{' '}\n              <code class=\"px-2 py-1 bg-slate-700 rounded text-cyan-400\">\n                /src/routes/index.tsx\n              </code>\n            </p>\n          </div>\n        </div>\n      </section>\n\n      <section class=\"py-16 px-6 max-w-7xl mx-auto\">\n        <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6\">\n          <For each={features}>\n            {(feature) => (\n              <div class=\"bg-slate-800/50 backdrop-blur-sm border border-slate-700 rounded-xl p-6 hover:border-cyan-500/50 transition-all duration-300 hover:shadow-lg hover:shadow-cyan-500/10\">\n                <div class=\"mb-4\">{feature.icon}</div>\n                <h3 class=\"text-xl font-semibold text-white mb-3\">\n                  {feature.title}\n                </h3>\n                <p class=\"text-gray-400 leading-relaxed\">\n                  {feature.description}\n                </p>\n              </div>\n            )}\n          </For>\n        </div>\n      </section>\n    </div>\n  )\n}\n",
     "/src/styles.css": "@import \"tailwindcss\";\n\nbody {\n  @apply m-0;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Roboto\", \"Oxygen\",\n    \"Ubuntu\", \"Cantarell\", \"Fira Sans\", \"Droid Sans\", \"Helvetica Neue\",\n    sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\ncode {\n  font-family: source-code-pro, Menlo, Monaco, Consolas, \"Courier New\",\n    monospace;\n}\n",
     "README.md": "Welcome to your new TanStack app! \n\n# Getting Started\n\nTo run this application:\n\n```bash\nnpm install\nnpm run dev\n```\n\n# Building For Production\n\nTo build this application for production:\n\n```bash\nnpm run build\n```\n\n## Styling\n\nThis project uses [Tailwind CSS](https://tailwindcss.com/) for styling.\n\n\n\n## Routing\nThis project uses [TanStack Router](https://tanstack.com/router). The initial setup is a file based router. Which means that the routes are managed as files in `src/routes`.\n\n### Adding A Route\n\nTo add a new route to your application just add another a new file in the `./src/routes` directory.\n\nTanStack will automatically generate the content of the route file for you.\n\nNow that you have two routes you can use a `Link` component to navigate between them.\n\n### Adding Links\n\nTo use SPA (Single Page Application) navigation you will need to import the `Link` component from `@tanstack/solid-router`.\n\n```tsx\nimport { Link } from \"@tanstack/solid-router\";\n```\n\nThen anywhere in your JSX you can use it like so:\n\n```tsx\n<Link to=\"/about\">About</Link>\n```\n\nThis will create a link that will navigate to the `/about` route.\n\nMore information on the `Link` component can be found in the [Link documentation](https://tanstack.com/router/v1/docs/framework/solid/api/router/linkComponent).\n\n### Using A Layout\n\nIn the File Based Routing setup the layout is located in `src/routes/__root.tsx`. Anything you add to the root route will appear in all the routes. The route content will appear in the JSX where you use the `<Outlet />` component.\n\nHere is an example layout that includes a header:\n\n```tsx\nimport { Outlet, createRootRoute } from '@tanstack/solid-router'\nimport { TanStackRouterDevtools } from '@tanstack/solid-router-devtools'\n\nimport { Link } from \"@tanstack/solid-router\";\n\nexport const Route = createRootRoute({\n  component: () => (\n    <>\n      <header>\n        <nav>\n          <Link to=\"/\">Home</Link>\n          <Link to=\"/about\">About</Link>\n        </nav>\n      </header>\n      <Outlet />\n      <TanStackRouterDevtools />\n    </>\n  ),\n})\n```\n\nThe `<TanStackRouterDevtools />` component is not required so you can remove it if you don't want it in your layout.\n\nMore information on layouts can be found in the [Layouts documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/routing-concepts#layouts).\n\n## Data Fetching\n\nThere are multiple ways to fetch data in your application. You can use TanStack Query to fetch data from a server. But you can also use the `loader` functionality built into TanStack Router to load the data for a route before it's rendered.\n\nFor example:\n\n```tsx\nconst peopleRoute = createRoute({\n  getParentRoute: () => rootRoute,\n  path: \"/people\",\n  loader: async () => {\n    const response = await fetch(\"https://swapi.dev/api/people\");\n    return response.json() as Promise<{\n      results: {\n        name: string;\n      }[];\n    }>;\n  },\n  component: () => {\n    const data = peopleRoute.useLoaderData();\n    return (\n      <ul>\n        {data.results.map((person) => (\n          <li key={person.name}>{person.name}</li>\n        ))}\n      </ul>\n    );\n  },\n});\n```\n\nLoaders simplify your data fetching logic dramatically. Check out more information in the [Loader documentation](https://tanstack.com/router/latest/docs/framework/solid/guide/data-loading#loader-parameters).\n\n# Demo files\n\nFiles prefixed with `demo` can be safely deleted. They are there to provide a starting point for you to play around with the features you've installed.\n\n\n\n# Learn More\n\nYou can learn more about all of the offerings from TanStack in the [TanStack documentation](https://tanstack.com).\n",
-    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite dev --port 3000\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\",\n    \"test\": \"vitest run\",\n    \"start\": \"node .output/server/index.mjs\"\n  },\n  \"dependencies\": {\n    \"@tailwindcss/vite\": \"^4.0.6\",\n    \"@tanstack/router-plugin\": \"^1.133.21\",\n    \"@tanstack/solid-router\": \"^1.133.20\",\n    \"@tanstack/solid-router-devtools\": \"^1.133.20\",\n    \"@tanstack/solid-router-ssr-query\": \"^1.132.25\",\n    \"@tanstack/solid-start\": \"^1.132.25\",\n    \"lucide-solid\": \"^0.544.0\",\n    \"solid-js\": \"^1.9.9\",\n    \"tailwindcss\": \"^4.0.6\",\n    \"vite\": \"^7.1.7\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n  },\n  \"devDependencies\": {\n    \"@tanstack/devtools-vite\": \"^0.3.11\",\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^7.1.7\",\n    \"vite-plugin-solid\": \"^2.11.10\"\n  }\n}",
+    "package.json": "{\n  \"name\": \"TEST\",\n  \"private\": true,\n  \"type\": \"module\",\n  \"scripts\": {\n    \"dev\": \"vite dev --port 3000\",\n    \"build\": \"vite build\",\n    \"preview\": \"vite preview\",\n    \"test\": \"vitest run\",\n    \"start\": \"node .output/server/index.mjs\"\n  },\n  \"dependencies\": {\n    \"@tailwindcss/vite\": \"^4.0.6\",\n    \"@tanstack/router-plugin\": \"^1.133.21\",\n    \"@tanstack/solid-router\": \"^1.133.20\",\n    \"@tanstack/solid-router-devtools\": \"^1.133.20\",\n    \"@tanstack/solid-router-ssr-query\": \"^1.132.25\",\n    \"@tanstack/solid-start\": \"^1.132.25\",\n    \"lucide-solid\": \"^0.544.0\",\n    \"solid-js\": \"^1.9.9\",\n    \"tailwindcss\": \"^4.0.6\",\n    \"vite\": \"^7.1.7\",\n    \"vite-plugin-lucide-preprocess\": \"^1.4.6\",\n    \"vite-tsconfig-paths\": \"^5.1.4\"\n  },\n  \"devDependencies\": {\n    \"@tanstack/devtools-vite\": \"^0.3.11\",\n    \"typescript\": \"^5.7.2\",\n    \"vite\": \"^7.1.7\",\n    \"vite-plugin-solid\": \"^2.11.10\"\n  }\n}",
     "tsconfig.json": "{\n  \"include\": [\"**/*.ts\", \"**/*.tsx\"],\n  \"compilerOptions\": {\n    \"target\": \"ES2022\",\n    \"jsx\": \"preserve\",\n    \"jsxImportSource\": \"solid-js\",\n    \"module\": \"ESNext\",\n    \"lib\": [\"ES2022\", \"DOM\", \"DOM.Iterable\"],\n    \"types\": [\"vite/client\"],\n\n    /* Bundler mode */\n    \"moduleResolution\": \"bundler\",\n    \"allowImportingTsExtensions\": true,\n    \"verbatimModuleSyntax\": true,\n    \"noEmit\": true,\n\n    /* Linting */\n    \"skipLibCheck\": true,\n    \"strict\": true,\n    \"noUnusedLocals\": true,\n    \"noUnusedParameters\": true,\n    \"noFallthroughCasesInSwitch\": true,\n    \"noUncheckedSideEffectImports\": true\n  }\n}\n",
-    "vite.config.ts": "import { defineConfig } from 'vite'\nimport { devtools } from '@tanstack/devtools-vite'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\nimport tailwindcss from '@tailwindcss/vite'\n\nimport { tanstackStart } from '@tanstack/solid-start/plugin/vite'\nimport solidPlugin from 'vite-plugin-solid'\n\nexport default defineConfig({\n  plugins: [\n    devtools(),\n    // this is the plugin that enables path aliases\n    viteTsConfigPaths({\n      projects: ['./tsconfig.json'],\n    }),\n    tailwindcss(),\n    tanstackStart(),\n    solidPlugin({ ssr: true }),\n  ],\n})\n"
+    "vite.config.ts": "import { defineConfig } from 'vite'\nimport { devtools } from '@tanstack/devtools-vite'\nimport viteTsConfigPaths from 'vite-tsconfig-paths'\nimport tailwindcss from '@tailwindcss/vite'\n\nimport { tanstackStart } from '@tanstack/solid-start/plugin/vite'\nimport solidPlugin from 'vite-plugin-solid'\n\nimport lucidePreprocess from 'vite-plugin-lucide-preprocess'\n\nexport default defineConfig({\n  plugins: [\n    lucidePreprocess(),\n    devtools(),\n    // this is the plugin that enables path aliases\n    viteTsConfigPaths({\n      projects: ['./tsconfig.json'],\n    }),\n    tailwindcss(),\n    tanstackStart(),\n    solidPlugin({ ssr: true }),\n  ],\n})\n"
   },
   "commands": [
     "git init",