feat: create vite-null-export package (#105)

Author: hi-ogawa

packages/demo/package.json

@@ -31,6 +31,7 @@
     "@hiogawa/utils-hattip": "0.0.1-pre.1",
     "@hiogawa/vite-glob-routes": "workspace:*",
     "@hiogawa/vite-import-dev-server": "workspace:*",
+    "@hiogawa/vite-null-export": "workspace:*",
     "@iconify-json/ri": "^1.1.9",
     "@tanstack/react-query": "^4.29.14",
     "@tanstack/react-query-devtools": "^4.29.14",

packages/demo/vite.config.ts

@@ -1,6 +1,7 @@
 import process from "node:process";
 import globRoutesPlugin from "@hiogawa/vite-glob-routes";
 import { importDevServerPlugin } from "@hiogawa/vite-import-dev-server";
+import { viteNullExportPlugin } from "@hiogawa/vite-null-export";
 import vaviteConnect from "@vavite/connect";
 import react from "@vitejs/plugin-react";
 import unocss from "unocss/vite";
@@ -18,6 +19,10 @@ export default defineConfig((ctx) => ({
       handlerEntry:
         process.env["SERVER_ENTRY"] ?? "./src/server/adapter-connect.ts",
     }),
+    viteNullExportPlugin({
+      serverOnly: "**/server/**",
+      debug: true,
+    }),
   ],
   build: {
     outDir: ctx.ssrBuild ? "dist/server" : "dist/client",

packages/vite-null-export/README.md

@@ -0,0 +1,31 @@
+# vite-null-export
+
+Vite port of remix's server-only file convention
+
+- https://remix.run/docs/en/main/file-conventions/-server
+- https://remix.run/docs/en/main/guides/gotchas#server-code-in-client-bundles
+- https://github.com/remix-run/remix/blob/80c6842f547b7e83b58f1963894b07ad18c2dfe2/packages/remix-dev/compiler/plugins/emptyModules.ts#L10
+
+## example
+
+```tsx
+// vite.config.ts
+
+import { defineConfig } from "vite";
+import { viteNullExportPlugin } from "@hiogawa/vite-null-export";
+
+export default defineConfig({
+  plugins: [
+    viteNullExportPlugin({
+      serverOnly: ["**/server/**", "**/*.server.*"],
+    }),
+  ],
+});
+```
+
+## development
+
+```sh
+pnpm build
+pnpm release
+```

packages/vite-null-export/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hiogawa/vite-null-export",
+  "version": "0.0.0",
+  "homepage": "https://github.com/hi-ogawa/vite-plugins/tree/main/packages/vite-null-export",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hi-ogawa/vite-plugins",
+    "directory": "packages/vite-null-export"
+  },
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "release": "pnpm publish --no-git-checks --access public"
+  },
+  "dependencies": {
+    "es-module-lexer": "^1.3.1"
+  },
+  "devDependencies": {
+    "vite": "^4.4.4"
+  },
+  "peerDependencies": {
+    "vite": "*"
+  }
+}

packages/vite-null-export/src/index.ts

@@ -0,0 +1,61 @@
+import * as esModuleLexer from "es-module-lexer";
+import {
+  type FilterPattern,
+  type Plugin,
+  type ResolvedConfig,
+  createFilter,
+} from "vite";
+import { name as packageName } from "../package.json";
+
+// similar to remix's https://github.com/remix-run/remix/blob/80c6842f547b7e83b58f1963894b07ad18c2dfe2/packages/remix-dev/compiler/plugins/emptyModules.ts#L10
+// but for vite, we needs to fake esm exports so we use es-module-lexer to extract export names.
+
+export function viteNullExportPlugin(pluginOpts?: {
+  serverOnly?: FilterPattern;
+  serverOnlyExclude?: FilterPattern;
+  clientOnly?: FilterPattern;
+  clientOnlyExclude?: FilterPattern;
+  debug?: boolean;
+}): Plugin {
+  const serverOnly = pluginOpts?.serverOnly
+    ? createFilter(pluginOpts?.serverOnly, pluginOpts?.serverOnlyExclude)
+    : () => false;
+  const clientOnly = pluginOpts?.clientOnly
+    ? createFilter(pluginOpts?.clientOnly, pluginOpts?.clientOnlyExclude)
+    : () => false;
+
+  let logger!: ResolvedConfig["logger"];
+
+  return {
+    // we don't enforce "pre" since es-module-lexer cannot reliably parse typescript file.
+    // so we rely on vite's default typescript transpilation.
+
+    name: packageName,
+
+    configResolved(config) {
+      logger = config.logger;
+    },
+
+    async transform(code, id, options) {
+      if (options?.ssr ? clientOnly(id) : serverOnly(id)) {
+        if (pluginOpts?.debug) {
+          logger.info(
+            `[DEBUG:${packageName}:${
+              options?.ssr ? "clientOnly" : "serverOnly"
+            }] ${id}`
+          );
+        }
+        await esModuleLexer.init;
+        const [_import, exports] = esModuleLexer.parse(code);
+        return exports
+          .map((e) =>
+            e.n === "default"
+              ? `export default null;\n`
+              : `export var ${e.n} = null;\n`
+          )
+          .join("");
+      }
+      return undefined;
+    },
+  };
+}

packages/vite-null-export/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src"]
+}

packages/vite-null-export/tsup.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+  entry: ["src/index.ts"],
+  format: ["esm", "cjs"],
+  dts: true,
+});