fix: use vite to create the bundles and externalize solid-js

Author: aminya

package.json

@@ -34,30 +34,28 @@
     "@types/workerpool": "^6.1.1",
     "@typescript-eslint/eslint-plugin": "^5.50.0",
     "@typescript-eslint/parser": "^5.50.0",
-    "@vitest/coverage-c8": "^0.28.3",
+    "@vitest/coverage-c8": "^0.28.4",
     "arg": "^5.0.2",
     "chalk": "^5.2.0",
     "cheerio": "^1.0.0-rc.12",
     "dotenv": "^16.0.3",
-    "esbuild": "^0.17.5",
-    "esbuild-plugin-solid": "0.5.0",
     "eslint": "^8.33.0",
     "eslint-config-prettier": "^8.6.0",
     "fs-extra": "^11.1.0",
     "jsdom": "^21.1.0",
     "prettier": "2.8.3",
     "rgb-hex": "^4.0.0",
-    "rollup": "^3.12.0",
+    "rollup": "^3.13.0",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-preset-solid": "^2.0.1",
     "solid-js": "1.6.10",
     "svgo": "3.0.2",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.0",
     "typescript": "^4.9.5",
-    "vite": "^4.0.4",
+    "vite": "^4.1.1",
     "vite-plugin-solid": "2.5.0",
-    "vitest": "0.28.3",
+    "vitest": "0.28.4",
     "workerpool": "^6.3.1"
   },
   "engines": {

src/build/lib-files.ts

@@ -34,7 +34,7 @@ function getPackageExports(
 ): PackageJSONExport {
   const exportsPayload = JSON.parse(`{
       "browser": "./${current.shortName}/index.js",
-      "node": "./${current.shortName}/index.cjs"
+      "node": "./${current.shortName}/index.ssr.js"
     }`);
 
   return {
@@ -75,7 +75,7 @@ async function writeAssetsFiles() {
 const ignoredIcons = ["ImPagebreak"]; // due to the name conflict with ImPagebreak
 
 const postBuildPool = pool("./src/build/post-build.js", {
-  maxWorkers: Math.min(8, cpus - 1),
+  maxWorkers: Math.min(4, cpus - 1),
 });
 
 async function writeEachPack(pack: PackAttachedIcons) {
@@ -113,7 +113,7 @@ async function writeEachPack(pack: PackAttachedIcons) {
   );
   // add types for the bundles
   await fs.copyFile(bundlePath, `${packFolder}/index.d.ts`);
-  await fs.copyFile(bundlePath, `${packFolder}/index.d.cts`);
+  await fs.copyFile(bundlePath, `${packFolder}/index.ssr.d.ts`);
 
   // replace the ts file with the web js bundle
   const postBuildWorker = await postBuildPool.proxy<{

src/build/post-build.ts

@@ -1,37 +1,52 @@
-import { build, BuildOptions } from "esbuild";
-import { solidPlugin } from "esbuild-plugin-solid";
+import { dirname } from "path";
+import { build, InlineConfig } from "vite";
+import solidPlugin from "vite-plugin-solid";
 import { worker } from "workerpool";
 
+function getOptions(filePath: string, server: boolean): InlineConfig {
+  return {
+    build: {
+      lib: {
+        entry: filePath,
+        formats: ["es"],
+      },
+      outDir: dirname(filePath),
+      minify: true,
+      sourcemap: true,
+      write: true,
+      emptyOutDir: false,
+      rollupOptions: {
+        input: filePath,
+        external: ["solid-js", "solid-js/web"],
+        output: {
+          entryFileNames: server ? "index.ssr.js" : "index.js",
+        },
+      },
+      ssr: server,
+    },
+    plugins: [
+      solidPlugin({
+        babel: { compact: true },
+        solid: { hydratable: !server, generate: server ? "ssr" : "dom" },
+        ssr: server,
+        dev: false,
+      }),
+    ],
+  };
+}
+
 /**
+ * Bundle the icons with vite and vite-plugin-solid
+ *
+ * This builds two bundles, one for the client and one for the server.
  */
 export async function postBuild(filePath: string) {
-  // build the tsx file with esbuild
-  const esbuildOptions: BuildOptions = {
-    entryPoints: [filePath],
-    bundle: true,
-    minify: true,
-    sourcemap: true,
-    target: "es2021",
-    write: true,
-  };
+  process.env.NODE_ENV = "production";
   await Promise.all([
-    build({
-      ...esbuildOptions,
-      format: "esm",
-      outfile: filePath.replace(".ts", ".js"),
-      plugins: [solidPlugin({ babel: { compact: true } })],
-    }),
-    build({
-      ...esbuildOptions,
-      format: "cjs",
-      outfile: filePath.replace(".ts", ".cjs"),
-      plugins: [
-        solidPlugin({
-          babel: { compact: true },
-          solid: { generate: "ssr", hydratable: true },
-        }),
-      ],
-    }),
+    // Build the client bundle
+    build(getOptions(filePath, false)),
+    // Build the server bundle
+    build(getOptions(filePath, true)),
   ]);
 }