chore: move to package

packages/app/package.json

@@ -19,6 +19,7 @@
     "@hiogawa/tiny-store": "0.0.1-pre.1",
     "@hiogawa/tiny-toast": "workspace:*",
     "@hiogawa/tiny-transition": "workspace:*",
+    "@hiogawa/vite-runtime-error-overlay": "workspace:*",
     "@hiogawa/unocss-preset-antd": "workspace:*",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/app/vite.config.ts

@@ -1,8 +1,9 @@
 import { execSync } from "node:child_process";
 import { themeScriptPlugin } from "@hiogawa/theme-script/dist/vite";
 import { vitePluginTinyRefresh } from "@hiogawa/tiny-refresh/dist/vite";
+import { viteRuntimeErrorOverlayPlugin } from "@hiogawa/vite-runtime-error-overlay";
 import unocss from "unocss/vite";
-import { type Plugin, WebSocketClient, defineConfig } from "vite";
+import { type Plugin, defineConfig } from "vite";
 
 export default defineConfig({
   build: {
@@ -12,7 +13,7 @@ export default defineConfig({
     unocss(),
     unocssDepHmrPlugin([require.resolve("@hiogawa/unocss-preset-antd")]),
     vitePluginTinyRefresh(),
-    runtimeErrorOverlayPlugin(),
+    viteRuntimeErrorOverlayPlugin(),
     themeScriptPlugin({
       storageKey: "unocss-preset-antd-app:theme",
     }),
@@ -41,79 +42,3 @@ export function unocssDepHmrPlugin(deps: string[]): Plugin {
     },
   };
 }
-
-// based on the idea in
-// https://github.com/vitejs/vite/pull/6274#issuecomment-1087749460
-// https://github.com/vitejs/vite/issues/2076
-export function runtimeErrorOverlayPlugin(): Plugin {
-  return {
-    name: "local:" + runtimeErrorOverlayPlugin.name,
-
-    apply(_config, env) {
-      return env.command === "serve" && !env.ssrBuild;
-    },
-
-    transformIndexHtml() {
-      return [
-        {
-          tag: "script",
-          attrs: { type: "module" },
-          children: RUNTIME_ERROR_OVERLAY_CLIENT_SCRIPT,
-        },
-      ];
-    },
-
-    configureServer(server) {
-      server.ws.on(
-        RUNTIME_ERROR_OVERLAY_MESSAGE_TYPE,
-        (data: unknown, client: WebSocketClient) => {
-          // deserialize error
-          const error = Object.assign(new Error(), data);
-
-          // TODO: utility to construct "frame" https://github.com/vitejs/vite/pull/6274
-          // getStackLineInformation
-          // generateErrorPayload
-          // generateFrame
-
-          // https://vitejs.dev/guide/api-plugin.html#client-server-communication
-          // https://github.com/vitejs/vite/blob/5b58eca05939c0667cf9698e83f4f4849f3296f4/packages/vite/src/node/server/middlewares/error.ts#L54-L57
-          client.send({
-            type: "error",
-            err: {
-              message: error.message,
-              stack: error.stack ?? "",
-            },
-          });
-        }
-      );
-    },
-  };
-}
-
-const RUNTIME_ERROR_OVERLAY_MESSAGE_TYPE = "custom:runtime-error";
-
-const RUNTIME_ERROR_OVERLAY_CLIENT_SCRIPT = /* js */ `
-import { createHotContext } from "/@vite/client";
-
-// dummy file name to instantiate import.meta.hot
-const hot = createHotContext("/__runtimeErrorOverlayPlugin__.js");
-
-function sendError(error) {
-  if (!(error instanceof Error)) {
-    error = new Error("(unknown runtime error)");
-  }
-  const serialized = {
-    message: error.message,
-    stack: error.stack,
-  };
-  hot.send("${RUNTIME_ERROR_OVERLAY_MESSAGE_TYPE}", serialized);
-}
-
-window.addEventListener("error", (evt) => {
-  sendError(evt.error);
-});
-
-window.addEventListener("unhandledrejection", (evt) => {
-  sendError(evt.reason);
-});
-`;

packages/vite-runtime-error-overlay/README.md

@@ -0,0 +1,15 @@
+# vite-runtime-error-overlay
+
+Vite plugin to show client runtime error via vite error overlay.
+Based on the idea from https://github.com/vitejs/vite/pull/6274#issuecomment-1087749460
+
+## demo
+
+TODO
+
+## development
+
+```sh
+pnpm build
+pnpm release
+```

packages/vite-runtime-error-overlay/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@hiogawa/vite-runtime-error-overlay",
+  "version": "0.0.0-pre.0",
+  "homepage": "https://github.com/hi-ogawa/unocss-preset-antd/tree/main/packages/vite-runtime-error-overlay",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hi-ogawa/unocss-preset-antd/",
+    "directory": "packages/vite-runtime-error-overlay"
+  },
+  "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"
+  },
+  "devDependencies": {
+    "vite": "^4.4.9"
+  },
+  "peerDependencies": {
+    "vite": "*"
+  }
+}

packages/vite-runtime-error-overlay/src/index.ts

@@ -0,0 +1,78 @@
+import { type Plugin, type WebSocketClient } from "vite";
+import { name as packageName } from "../package.json";
+
+// based on the idea in
+// https://github.com/vitejs/vite/pull/6274#issuecomment-1087749460
+// https://github.com/vitejs/vite/issues/2076
+
+// TODO: the PR has utility to construct "frame"
+// getStackLineInformation
+// generateErrorPayload
+// generateFrame
+
+export function viteRuntimeErrorOverlayPlugin(): Plugin {
+  return {
+    name: packageName,
+
+    apply(_config, env) {
+      return env.command === "serve" && !env.ssrBuild;
+    },
+
+    transformIndexHtml() {
+      return [
+        {
+          tag: "script",
+          attrs: { type: "module" },
+          children: CLIENT_SCRIPT,
+        },
+      ];
+    },
+
+    configureServer(server) {
+      server.ws.on(MESSAGE_TYPE, (data: unknown, client: WebSocketClient) => {
+        // deserialize error
+        const error = Object.assign(new Error(), data);
+
+        // https://vitejs.dev/guide/api-plugin.html#client-server-communication
+        // https://github.com/vitejs/vite/blob/5b58eca05939c0667cf9698e83f4f4849f3296f4/packages/vite/src/node/server/middlewares/error.ts#L54-L57
+        client.send({
+          type: "error",
+          err: {
+            message: error.message,
+            stack: error.stack ?? "",
+          },
+        });
+      });
+    },
+  };
+}
+
+const MESSAGE_TYPE = `${packageName}:error`;
+
+const CLIENT_SCRIPT = /* js */ `
+
+import { createHotContext } from "/@vite/client";
+
+// dummy file path to instantiate import.meta.hot
+const hot = createHotContext("/__runtimeErrorOverlayPlugin__.js");
+
+function sendError(error) {
+  if (!(error instanceof Error)) {
+    error = new Error("(unknown runtime error)");
+  }
+  const serialized = {
+    message: error.message,
+    stack: error.stack,
+  };
+  hot.send("${MESSAGE_TYPE}", serialized);
+}
+
+window.addEventListener("error", (evt) => {
+  sendError(evt.error);
+});
+
+window.addEventListener("unhandledrejection", (evt) => {
+  sendError(evt.reason);
+});
+
+`;

packages/vite-runtime-error-overlay/tsconfig.json

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

packages/vite-runtime-error-overlay/tsup.config.ts

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