@matthesketh/utopia-vite-plugin 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Matt Hesketh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,61 @@
+# @matthesketh/utopia-vite-plugin
+
+Vite plugin for UtopiaJS. Transforms `.utopia` single-file components, extracts and injects CSS through Vite's virtual module pipeline, provides granular HMR support (style-only hot updates), and handles the SSR runtime swap.
+
+## Install
+
+```bash
+pnpm add -D @matthesketh/utopia-vite-plugin
+```
+
+Requires `vite` ^6.0.0 as a peer dependency.
+
+## Usage
+
+```ts
+// vite.config.ts
+import { defineConfig } from '@matthesketh/utopia-vite-plugin';
+
+export default defineConfig();
+```
+
+Or with the plugin directly:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+import utopia from '@matthesketh/utopia-vite-plugin';
+
+export default defineConfig({
+  plugins: [utopia()],
+});
+```
+
+## API
+
+| Export | Description |
+|--------|-------------|
+| `default (utopiaPlugin)` | The Vite plugin factory. Accepts `UtopiaPluginOptions`. |
+| `defineConfig(userConfig?)` | Create a Vite config pre-configured for UtopiaJS (plugin, extensions, SSR settings). |
+
+**UtopiaPluginOptions:**
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `include` | `FilterPattern` | `'**/*.utopia'` | Glob patterns to include |
+| `exclude` | `FilterPattern` | -- | Glob patterns to exclude |
+| `sourceMap` | `boolean` | `true` (dev) | Generate source maps |
+
+**Features:**
+
+- Compiles `.utopia` files via `@matthesketh/utopia-compiler`
+- Extracts CSS to virtual modules processed by Vite's CSS pipeline
+- Granular HMR: style-only changes skip component re-render
+- SSR alias: swaps `@matthesketh/utopia-runtime` to `@matthesketh/utopia-server/ssr-runtime` in SSR builds and dev SSR
+- Resolves `.utopia` as a file extension for bare imports
+
+See [docs/architecture.md](../../docs/architecture.md) and [docs/ssr.md](../../docs/ssr.md) for details.
+
+## License
+
+MIT

package/dist/index.cjs

@@ -0,0 +1,282 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  default: () => utopiaPlugin,
+  defineConfig: () => defineConfig
+});
+module.exports = __toCommonJS(index_exports);
+var import_utopia_compiler = require("@matthesketh/utopia-compiler");
+var import_vite = require("vite");
+var import_node_path = __toESM(require("path"), 1);
+var UTOPIA_EXT = ".utopia";
+var CSS_SUFFIX = ".css";
+var VIRTUAL_PREFIX = "\0";
+var cssCache = /* @__PURE__ */ new Map();
+function toCssId(utopiaId) {
+  return utopiaId + CSS_SUFFIX;
+}
+function isVirtualCssId(id) {
+  return id.endsWith(UTOPIA_EXT + CSS_SUFFIX);
+}
+function stripVirtualPrefix(id) {
+  return id.startsWith(VIRTUAL_PREFIX) ? id.slice(VIRTUAL_PREFIX.length) : id;
+}
+function cssIdToUtopiaId(cssId) {
+  const raw = stripVirtualPrefix(cssId);
+  return raw.slice(0, -CSS_SUFFIX.length);
+}
+function utopiaPlugin(options = {}) {
+  const {
+    include = `**/*${UTOPIA_EXT}`,
+    exclude
+  } = options;
+  let filter;
+  let server;
+  const prevDescriptors = /* @__PURE__ */ new Map();
+  return {
+    name: "utopia",
+    /**
+     * Enforce the plugin to run before Vite's internal transforms so that
+     * `.utopia` files are compiled before any further processing.
+     */
+    enforce: "pre",
+    // -------------------------------------------------------------------
+    // Config — SSR alias resolution
+    // -------------------------------------------------------------------
+    config(userConfig, env) {
+      if (env.isSsrBuild) {
+        return {
+          resolve: {
+            alias: {
+              "@matthesketh/utopia-runtime": "@matthesketh/utopia-server/ssr-runtime"
+            }
+          }
+        };
+      }
+    },
+    configResolved() {
+      filter = (0, import_vite.createFilter)(include, exclude);
+    },
+    // -------------------------------------------------------------------
+    // Dev server – store reference for HMR
+    // -------------------------------------------------------------------
+    configureServer(_server) {
+      server = _server;
+    },
+    // -------------------------------------------------------------------
+    // Resolve virtual CSS modules + SSR runtime alias
+    // -------------------------------------------------------------------
+    resolveId(id, importer, options2) {
+      if (options2?.ssr && id === "@matthesketh/utopia-runtime") {
+        return this.resolve("@matthesketh/utopia-server/ssr-runtime", importer, {
+          skipSelf: true,
+          ...options2
+        });
+      }
+      if (isVirtualCssId(id)) {
+        if (import_node_path.default.isAbsolute(id)) {
+          return VIRTUAL_PREFIX + id;
+        }
+        if (importer) {
+          const dir = import_node_path.default.dirname(importer);
+          const resolved = import_node_path.default.resolve(dir, id);
+          return VIRTUAL_PREFIX + resolved;
+        }
+      }
+      return void 0;
+    },
+    // -------------------------------------------------------------------
+    // Load virtual CSS modules
+    // -------------------------------------------------------------------
+    load(id) {
+      if (!id.startsWith(VIRTUAL_PREFIX)) return void 0;
+      const raw = stripVirtualPrefix(id);
+      if (isVirtualCssId(raw)) {
+        const utopiaId = cssIdToUtopiaId(raw);
+        const css = cssCache.get(utopiaId) ?? "";
+        return css;
+      }
+      return void 0;
+    },
+    // -------------------------------------------------------------------
+    // Transform .utopia files
+    // -------------------------------------------------------------------
+    transform(code, id) {
+      if (!id.endsWith(UTOPIA_EXT)) return void 0;
+      if (!filter(id)) return void 0;
+      const result = (0, import_utopia_compiler.compile)(code, {
+        filename: id
+      });
+      if (result.css) {
+        cssCache.set(id, result.css);
+      } else {
+        cssCache.delete(id);
+      }
+      try {
+        const descriptor = (0, import_utopia_compiler.parse)(code, id);
+        prevDescriptors.set(id, descriptor);
+      } catch {
+      }
+      let output = result.code;
+      if (result.css) {
+        const cssImportId = toCssId(id);
+        output += `
+import ${JSON.stringify(cssImportId)};
+`;
+      }
+      return {
+        code: output,
+        map: null
+      };
+    },
+    // -------------------------------------------------------------------
+    // HMR
+    // -------------------------------------------------------------------
+    handleHotUpdate(ctx) {
+      const { file, read, server: hmrServer, modules } = ctx;
+      if (!file.endsWith(UTOPIA_EXT)) return void 0;
+      return (async () => {
+        const source = await read();
+        let newDescriptor;
+        try {
+          newDescriptor = (0, import_utopia_compiler.parse)(source, file);
+        } catch {
+          return void 0;
+        }
+        const oldDescriptor = prevDescriptors.get(file);
+        prevDescriptors.set(file, newDescriptor);
+        const templateChanged = didBlockChange(
+          oldDescriptor?.template,
+          newDescriptor.template
+        );
+        const scriptChanged = didBlockChange(
+          oldDescriptor?.script,
+          newDescriptor.script
+        );
+        const styleChanged = didBlockChange(
+          oldDescriptor?.style,
+          newDescriptor.style
+        );
+        if (styleChanged && !templateChanged && !scriptChanged) {
+          const result = (0, import_utopia_compiler.compile)(source, {
+            filename: file
+          });
+          if (result.css) {
+            cssCache.set(file, result.css);
+          } else {
+            cssCache.delete(file);
+          }
+          const cssId = VIRTUAL_PREFIX + toCssId(file);
+          const cssModule = hmrServer.moduleGraph.getModuleById(cssId);
+          if (cssModule) {
+            hmrServer.moduleGraph.invalidateModule(cssModule);
+            return [cssModule];
+          }
+        }
+        const affectedModules = [];
+        for (const mod of modules) {
+          hmrServer.moduleGraph.invalidateModule(mod);
+          affectedModules.push(mod);
+        }
+        if (styleChanged) {
+          const result = (0, import_utopia_compiler.compile)(source, {
+            filename: file
+          });
+          if (result.css) {
+            cssCache.set(file, result.css);
+          } else {
+            cssCache.delete(file);
+          }
+          const cssId = VIRTUAL_PREFIX + toCssId(file);
+          const cssModule = hmrServer.moduleGraph.getModuleById(cssId);
+          if (cssModule) {
+            hmrServer.moduleGraph.invalidateModule(cssModule);
+            affectedModules.push(cssModule);
+          }
+        }
+        return affectedModules.length > 0 ? affectedModules : void 0;
+      })();
+    }
+  };
+}
+function didBlockChange(oldBlock, newBlock) {
+  if (!oldBlock && !newBlock) return false;
+  if (!oldBlock || !newBlock) return true;
+  return oldBlock.content !== newBlock.content;
+}
+function defineConfig(userConfig = {}) {
+  const {
+    plugins: userPlugins = [],
+    resolve: userResolve,
+    optimizeDeps: userOptimizeDeps,
+    ...rest
+  } = userConfig;
+  const hasUtopiaPlugin = userPlugins.some(
+    (p) => p && typeof p === "object" && "name" in p && p.name === "utopia"
+  );
+  const plugins = hasUtopiaPlugin ? userPlugins : [utopiaPlugin(), ...userPlugins];
+  return {
+    ...rest,
+    plugins,
+    resolve: {
+      ...userResolve,
+      // Ensure `.utopia` is resolvable as an extension so bare imports work
+      // (e.g. `import App from './App'` resolves to `./App.utopia`).
+      extensions: mergeUnique(
+        userResolve?.extensions ?? [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
+        [UTOPIA_EXT]
+      )
+    },
+    optimizeDeps: {
+      ...userOptimizeDeps,
+      // Exclude UtopiaJS packages from Vite's dependency pre-bundling so
+      // they go through the normal plugin pipeline.
+      exclude: mergeUnique(
+        userOptimizeDeps?.exclude ?? [],
+        ["@matthesketh/utopia-core", "@matthesketh/utopia-runtime", "@matthesketh/utopia-router", "@matthesketh/utopia-server"]
+      )
+    },
+    ssr: {
+      // Ensure UtopiaJS packages are bundled during SSR builds so the
+      // runtime swap alias is applied correctly.
+      noExternal: ["@matthesketh/utopia-core", "@matthesketh/utopia-runtime", "@matthesketh/utopia-router", "@matthesketh/utopia-server"]
+    }
+  };
+}
+function mergeUnique(base, additions) {
+  const set = /* @__PURE__ */ new Set([...base, ...additions]);
+  return [...set];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  defineConfig
+});

package/dist/index.d.cts

@@ -0,0 +1,61 @@
+import { FilterPattern, Plugin, UserConfig } from 'vite';
+
+/**
+ * Options for the UtopiaJS Vite plugin.
+ */
+interface UtopiaPluginOptions {
+    /**
+     * Glob patterns to include when transforming `.utopia` files.
+     * @default '**\/*.utopia'
+     */
+    include?: FilterPattern;
+    /**
+     * Glob patterns to exclude from transformation.
+     * @default undefined
+     */
+    exclude?: FilterPattern;
+}
+/**
+ * Vite plugin for UtopiaJS.
+ *
+ * Transforms `.utopia` single-file components using `@matthesketh/utopia-compiler`,
+ * extracts and injects CSS through Vite's virtual module pipeline, and
+ * provides granular HMR support (style-only hot updates when only the
+ * `<style>` block changes).
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import utopia from '@matthesketh/utopia-vite-plugin'
+ *
+ * export default {
+ *   plugins: [utopia()],
+ * }
+ * ```
+ *
+ * @param options - Optional configuration.
+ * @returns A Vite plugin object.
+ */
+declare function utopiaPlugin(options?: UtopiaPluginOptions): Plugin;
+/**
+ * Create a Vite configuration pre-configured for an UtopiaJS project.
+ *
+ * Merges the Utopia Vite plugin and sensible defaults into an optional
+ * user-provided Vite configuration.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from '@matthesketh/utopia-vite-plugin'
+ *
+ * export default defineConfig({
+ *   // your overrides here
+ * })
+ * ```
+ *
+ * @param userConfig - Optional Vite `UserConfig` to merge.
+ * @returns A complete Vite `UserConfig` ready to use.
+ */
+declare function defineConfig(userConfig?: UserConfig): UserConfig;
+
+export { type UtopiaPluginOptions, utopiaPlugin as default, defineConfig };

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+import { FilterPattern, Plugin, UserConfig } from 'vite';
+
+/**
+ * Options for the UtopiaJS Vite plugin.
+ */
+interface UtopiaPluginOptions {
+    /**
+     * Glob patterns to include when transforming `.utopia` files.
+     * @default '**\/*.utopia'
+     */
+    include?: FilterPattern;
+    /**
+     * Glob patterns to exclude from transformation.
+     * @default undefined
+     */
+    exclude?: FilterPattern;
+}
+/**
+ * Vite plugin for UtopiaJS.
+ *
+ * Transforms `.utopia` single-file components using `@matthesketh/utopia-compiler`,
+ * extracts and injects CSS through Vite's virtual module pipeline, and
+ * provides granular HMR support (style-only hot updates when only the
+ * `<style>` block changes).
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import utopia from '@matthesketh/utopia-vite-plugin'
+ *
+ * export default {
+ *   plugins: [utopia()],
+ * }
+ * ```
+ *
+ * @param options - Optional configuration.
+ * @returns A Vite plugin object.
+ */
+declare function utopiaPlugin(options?: UtopiaPluginOptions): Plugin;
+/**
+ * Create a Vite configuration pre-configured for an UtopiaJS project.
+ *
+ * Merges the Utopia Vite plugin and sensible defaults into an optional
+ * user-provided Vite configuration.
+ *
+ * @example
+ * ```ts
+ * // vite.config.ts
+ * import { defineConfig } from '@matthesketh/utopia-vite-plugin'
+ *
+ * export default defineConfig({
+ *   // your overrides here
+ * })
+ * ```
+ *
+ * @param userConfig - Optional Vite `UserConfig` to merge.
+ * @returns A complete Vite `UserConfig` ready to use.
+ */
+declare function defineConfig(userConfig?: UserConfig): UserConfig;
+
+export { type UtopiaPluginOptions, utopiaPlugin as default, defineConfig };

package/dist/index.js

@@ -0,0 +1,247 @@
+// src/index.ts
+import { compile, parse } from "@matthesketh/utopia-compiler";
+import { createFilter } from "vite";
+import path from "path";
+var UTOPIA_EXT = ".utopia";
+var CSS_SUFFIX = ".css";
+var VIRTUAL_PREFIX = "\0";
+var cssCache = /* @__PURE__ */ new Map();
+function toCssId(utopiaId) {
+  return utopiaId + CSS_SUFFIX;
+}
+function isVirtualCssId(id) {
+  return id.endsWith(UTOPIA_EXT + CSS_SUFFIX);
+}
+function stripVirtualPrefix(id) {
+  return id.startsWith(VIRTUAL_PREFIX) ? id.slice(VIRTUAL_PREFIX.length) : id;
+}
+function cssIdToUtopiaId(cssId) {
+  const raw = stripVirtualPrefix(cssId);
+  return raw.slice(0, -CSS_SUFFIX.length);
+}
+function utopiaPlugin(options = {}) {
+  const {
+    include = `**/*${UTOPIA_EXT}`,
+    exclude
+  } = options;
+  let filter;
+  let server;
+  const prevDescriptors = /* @__PURE__ */ new Map();
+  return {
+    name: "utopia",
+    /**
+     * Enforce the plugin to run before Vite's internal transforms so that
+     * `.utopia` files are compiled before any further processing.
+     */
+    enforce: "pre",
+    // -------------------------------------------------------------------
+    // Config — SSR alias resolution
+    // -------------------------------------------------------------------
+    config(userConfig, env) {
+      if (env.isSsrBuild) {
+        return {
+          resolve: {
+            alias: {
+              "@matthesketh/utopia-runtime": "@matthesketh/utopia-server/ssr-runtime"
+            }
+          }
+        };
+      }
+    },
+    configResolved() {
+      filter = createFilter(include, exclude);
+    },
+    // -------------------------------------------------------------------
+    // Dev server – store reference for HMR
+    // -------------------------------------------------------------------
+    configureServer(_server) {
+      server = _server;
+    },
+    // -------------------------------------------------------------------
+    // Resolve virtual CSS modules + SSR runtime alias
+    // -------------------------------------------------------------------
+    resolveId(id, importer, options2) {
+      if (options2?.ssr && id === "@matthesketh/utopia-runtime") {
+        return this.resolve("@matthesketh/utopia-server/ssr-runtime", importer, {
+          skipSelf: true,
+          ...options2
+        });
+      }
+      if (isVirtualCssId(id)) {
+        if (path.isAbsolute(id)) {
+          return VIRTUAL_PREFIX + id;
+        }
+        if (importer) {
+          const dir = path.dirname(importer);
+          const resolved = path.resolve(dir, id);
+          return VIRTUAL_PREFIX + resolved;
+        }
+      }
+      return void 0;
+    },
+    // -------------------------------------------------------------------
+    // Load virtual CSS modules
+    // -------------------------------------------------------------------
+    load(id) {
+      if (!id.startsWith(VIRTUAL_PREFIX)) return void 0;
+      const raw = stripVirtualPrefix(id);
+      if (isVirtualCssId(raw)) {
+        const utopiaId = cssIdToUtopiaId(raw);
+        const css = cssCache.get(utopiaId) ?? "";
+        return css;
+      }
+      return void 0;
+    },
+    // -------------------------------------------------------------------
+    // Transform .utopia files
+    // -------------------------------------------------------------------
+    transform(code, id) {
+      if (!id.endsWith(UTOPIA_EXT)) return void 0;
+      if (!filter(id)) return void 0;
+      const result = compile(code, {
+        filename: id
+      });
+      if (result.css) {
+        cssCache.set(id, result.css);
+      } else {
+        cssCache.delete(id);
+      }
+      try {
+        const descriptor = parse(code, id);
+        prevDescriptors.set(id, descriptor);
+      } catch {
+      }
+      let output = result.code;
+      if (result.css) {
+        const cssImportId = toCssId(id);
+        output += `
+import ${JSON.stringify(cssImportId)};
+`;
+      }
+      return {
+        code: output,
+        map: null
+      };
+    },
+    // -------------------------------------------------------------------
+    // HMR
+    // -------------------------------------------------------------------
+    handleHotUpdate(ctx) {
+      const { file, read, server: hmrServer, modules } = ctx;
+      if (!file.endsWith(UTOPIA_EXT)) return void 0;
+      return (async () => {
+        const source = await read();
+        let newDescriptor;
+        try {
+          newDescriptor = parse(source, file);
+        } catch {
+          return void 0;
+        }
+        const oldDescriptor = prevDescriptors.get(file);
+        prevDescriptors.set(file, newDescriptor);
+        const templateChanged = didBlockChange(
+          oldDescriptor?.template,
+          newDescriptor.template
+        );
+        const scriptChanged = didBlockChange(
+          oldDescriptor?.script,
+          newDescriptor.script
+        );
+        const styleChanged = didBlockChange(
+          oldDescriptor?.style,
+          newDescriptor.style
+        );
+        if (styleChanged && !templateChanged && !scriptChanged) {
+          const result = compile(source, {
+            filename: file
+          });
+          if (result.css) {
+            cssCache.set(file, result.css);
+          } else {
+            cssCache.delete(file);
+          }
+          const cssId = VIRTUAL_PREFIX + toCssId(file);
+          const cssModule = hmrServer.moduleGraph.getModuleById(cssId);
+          if (cssModule) {
+            hmrServer.moduleGraph.invalidateModule(cssModule);
+            return [cssModule];
+          }
+        }
+        const affectedModules = [];
+        for (const mod of modules) {
+          hmrServer.moduleGraph.invalidateModule(mod);
+          affectedModules.push(mod);
+        }
+        if (styleChanged) {
+          const result = compile(source, {
+            filename: file
+          });
+          if (result.css) {
+            cssCache.set(file, result.css);
+          } else {
+            cssCache.delete(file);
+          }
+          const cssId = VIRTUAL_PREFIX + toCssId(file);
+          const cssModule = hmrServer.moduleGraph.getModuleById(cssId);
+          if (cssModule) {
+            hmrServer.moduleGraph.invalidateModule(cssModule);
+            affectedModules.push(cssModule);
+          }
+        }
+        return affectedModules.length > 0 ? affectedModules : void 0;
+      })();
+    }
+  };
+}
+function didBlockChange(oldBlock, newBlock) {
+  if (!oldBlock && !newBlock) return false;
+  if (!oldBlock || !newBlock) return true;
+  return oldBlock.content !== newBlock.content;
+}
+function defineConfig(userConfig = {}) {
+  const {
+    plugins: userPlugins = [],
+    resolve: userResolve,
+    optimizeDeps: userOptimizeDeps,
+    ...rest
+  } = userConfig;
+  const hasUtopiaPlugin = userPlugins.some(
+    (p) => p && typeof p === "object" && "name" in p && p.name === "utopia"
+  );
+  const plugins = hasUtopiaPlugin ? userPlugins : [utopiaPlugin(), ...userPlugins];
+  return {
+    ...rest,
+    plugins,
+    resolve: {
+      ...userResolve,
+      // Ensure `.utopia` is resolvable as an extension so bare imports work
+      // (e.g. `import App from './App'` resolves to `./App.utopia`).
+      extensions: mergeUnique(
+        userResolve?.extensions ?? [".mjs", ".js", ".mts", ".ts", ".jsx", ".tsx", ".json"],
+        [UTOPIA_EXT]
+      )
+    },
+    optimizeDeps: {
+      ...userOptimizeDeps,
+      // Exclude UtopiaJS packages from Vite's dependency pre-bundling so
+      // they go through the normal plugin pipeline.
+      exclude: mergeUnique(
+        userOptimizeDeps?.exclude ?? [],
+        ["@matthesketh/utopia-core", "@matthesketh/utopia-runtime", "@matthesketh/utopia-router", "@matthesketh/utopia-server"]
+      )
+    },
+    ssr: {
+      // Ensure UtopiaJS packages are bundled during SSR builds so the
+      // runtime swap alias is applied correctly.
+      noExternal: ["@matthesketh/utopia-core", "@matthesketh/utopia-runtime", "@matthesketh/utopia-router", "@matthesketh/utopia-server"]
+    }
+  };
+}
+function mergeUnique(base, additions) {
+  const set = /* @__PURE__ */ new Set([...base, ...additions]);
+  return [...set];
+}
+export {
+  utopiaPlugin as default,
+  defineConfig
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@matthesketh/utopia-vite-plugin",
+  "version": "0.0.1",
+  "description": "Vite plugin for UtopiaJS .utopia files",
+  "type": "module",
+  "license": "MIT",
+  "author": "Matt <matt@matthesketh.pro>",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/wrxck/utopiajs.git",
+    "directory": "packages/vite-plugin"
+  },
+  "homepage": "https://github.com/wrxck/utopiajs/tree/main/packages/vite-plugin",
+  "keywords": [
+    "vite",
+    "plugin",
+    "hmr",
+    "transform",
+    "utopiajs"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@matthesketh/utopia-compiler": "0.0.1"
+  },
+  "peerDependencies": {
+    "vite": "^6.0.0 || ^7.0.0"
+  },
+  "devDependencies": {
+    "vite": "^7.3.1"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --dts --watch"
+  }
+}