feat: create vite-null-export package

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/src/routes/layout.tsx

@@ -9,6 +9,7 @@ import {
   useNavigation,
   useRouteError,
 } from "react-router-dom";
+import { getRequestContext } from "../server/request-context";
 import { useEffectNoStrict } from "../utils/misc-react";
 import { ReactQueryWrapper } from "../utils/react-query-utils";
 
@@ -17,6 +18,9 @@ export const handle = "root-handle";
 export function Component() {
   useTopProgressBar();
 
+  // test viteNullExportPlugin
+  import.meta.env.SSR && console.log(getRequestContext().url);
+
   return (
     <ReactQueryWrapper>
       <Toaster

packages/demo/vite.config.ts

@@ -1,10 +1,11 @@
 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";
-import { FilterPattern, type Plugin, createFilter, defineConfig } from "vite";
+import { defineConfig } from "vite";
 
 export default defineConfig((ctx) => ({
   plugins: [
@@ -18,7 +19,7 @@ export default defineConfig((ctx) => ({
       handlerEntry:
         process.env["SERVER_ENTRY"] ?? "./src/server/adapter-connect.ts",
     }),
-    viteEmptifyModulePlugin(),
+    viteNullExportPlugin(),
   ],
   build: {
     outDir: ctx.ssrBuild ? "dist/server" : "dist/client",
@@ -33,38 +34,3 @@ export default defineConfig((ctx) => ({
     : undefined,
   clearScreen: false,
 }));
-
-// similar to 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.
-function viteEmptifyModulePlugin(pluginOptions?: {
-  clientOnly?: FilterPattern;
-  serverOnly?: FilterPattern;
-  exclude?: FilterPattern;
-}): Plugin {
-  const exclude = pluginOptions?.exclude ?? ["**/node_modules/**"];
-  const serverOnly = createFilter(
-    pluginOptions?.serverOnly ?? ["**/server/**", "**/*.server.*"],
-    exclude
-  );
-  const clientOnly = createFilter(
-    pluginOptions?.clientOnly ?? ["**/client/**", "**/*.client.*"],
-    exclude
-  );
-  return {
-    name: viteEmptifyModulePlugin.name,
-    enforce: "pre",
-    async transform(code, id, options) {
-      if (options?.ssr ? clientOnly(id) : serverOnly(id)) {
-        const lib = await import("es-module-lexer");
-        await lib.init;
-        const [_import, exports] = lib.parse(code);
-        return exports
-          .map((e) =>
-            e.n === "default" ? `export default {}` : `export var ${e.n} = {}`
-          )
-          .join("\n");
-      }
-      return undefined;
-    },
-  };
-}

packages/vite-null-export/README.md

@@ -0,0 +1,8 @@
+# vite-null-export
+
+Vite port of remix's server/client-only file convention plugin https://github.com/remix-run/remix/blob/80c6842f547b7e83b58f1963894b07ad18c2dfe2/packages/remix-dev/compiler/plugins/emptyModules.ts#L10
+
+```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,43 @@
+import * as esModuleLexer from "es-module-lexer";
+import { type FilterPattern, type Plugin, 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(pluginOptions?: {
+  clientOnly?: FilterPattern;
+  serverOnly?: FilterPattern;
+  exclude?: FilterPattern;
+}): Plugin {
+  const exclude = pluginOptions?.exclude ?? ["**/node_modules/**"];
+  const serverOnly = createFilter(
+    pluginOptions?.serverOnly ?? ["**/server/**", "**/*.server.*"],
+    exclude
+  );
+  const clientOnly = createFilter(
+    pluginOptions?.clientOnly ?? ["**/client/**", "**/*.client.*"],
+    exclude
+  );
+  return {
+    name: packageName,
+
+    // we don't enforce "pre" since es-module-lexer cannot reliably parse typescript file.
+    // so we rely on vite's default typescript transpilation.
+
+    async transform(code, id, options) {
+      if (options?.ssr ? clientOnly(id) : 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,
+});