kirbyup 4.0.0-alpha.3 → 4.0.0-alpha.4

package/dist/node/cli.mjs

@@ -1,4 +1,4 @@
-import { a as version, i as name, n as serve, r as handleError, t as build } from "../node-DxNmVk8V.mjs";
+import { a as version, i as name, n as serve, r as handleError, t as build } from "../node-GoJ-fFA1.mjs";
 import { cac } from "cac";
 
 //#region src/node/cli-start.ts

package/dist/node/index.mjs

@@ -1,3 +1,3 @@
-import { n as serve, t as build } from "../node-DxNmVk8V.mjs";
+import { n as serve, t as build } from "../node-GoJ-fFA1.mjs";
 
 export { build, serve };

package/dist/{node-DxNmVk8V.mjs → node-GoJ-fFA1.mjs}

@@ -18,7 +18,7 @@ import { gzip } from "node:zlib";
 
 //#region package.json
 var name = "kirbyup";
-var version = "4.0.0-alpha.3";
+var version = "4.0.0-alpha.4";
 
 //#endregion
 //#region src/node/config.ts
@@ -72,109 +72,149 @@ function kirbyupBuildCleanupPlugin(options) {
 
 //#endregion
 //#region src/node/plugins/utils.ts
-const HMR_RUNTIME_ID = "\0plugin-vue2:hmr-runtime";
-const JSX_HMR_RUNTIME_ID = "plugin-vue2-jsx:hmr-runtime";
-function isHmrRuntimeId(id) {
-	return id === HMR_RUNTIME_ID || id === JSX_HMR_RUNTIME_ID;
-}
 /**
-* This code is injected into the HMR runtime of plugin-vue2(-jsx).
+* This code is injected into Vue 3 components to wrap the global HMR runtime.
 *
-* All `.vue` components register themselves once with the HMR runtime, so their exported
-* component definitions can be stored in a map, alongside the rendered component instances
-* that are based off this definition. When a module is updated, the runtime applies all
-* changes from the updated module to the stored definition, then re-renders the instances.
+* All `.vue` components register themselves with the HMR runtime (`__VUE_HMR_RUNTIME__`),
+* which stores their component definitions in a map. When a module is updated, the runtime
+* applies changes to the stored definition and re-renders component instances.
 *
+* In Vue 3, the HMR map structure is:
 * ```js
 * {
-*   [id]: { options: ComponentDefinition, instances: [...] }
+*   [id]: { initialDef: ComponentDefinition, instances: Set<ComponentInstance> }
 * }
 * ```
 *
-* However, in some cases (sections and blocks) Kirby does not actually register the
-* object that is exported from a `.vue` file (and stored as definition) as component,
-* instead it creates a new object and merges the definition from the `.vue` file in:
-* https://github.com/getkirby/kirby/blob/main/panel/public/js/plugins.js#L22-L25
-* After changes, the runtime updates the definition and re-renders the instances, but since
-* they are derived from the object created by Kirby, not the stored definition, nothing happens.
-* To fix that, we wrap `rerender()` and `reload()` so that before applying the updates, we first check
-* if the updated definition belongs to a component added by a Kirby plugin. To do so, we can check
-* whether the `__file` (added by plugin-vue2) or `__hmrId` (added by plugin-vue2-jsx) properties of the
-* updated module and the plugin component match. If so, we look up the component definition that is
-* _actually_ used by component instances rendered on the page (`window.panel.app.$options.components`)
-* and if it differs from the one stored in the HMR runtime's map, we updates the map's reference.
+* However, Kirby does not register the exact object exported from a `.vue` file.
+* Instead, it creates a new object and merges the definition in:
+* https://github.com/getkirby/kirby/blob/main/panel/public/js/plugins.js
+*
+* After HMR changes, the runtime updates the stored definition and re-renders instances,
+* but since they are derived from Kirby's modified object (not the stored definition),
+* updates may not apply correctly.
+*
+* To fix this, we wrap `__VUE_HMR_RUNTIME__.rerender()` and `__VUE_HMR_RUNTIME__.reload()`:
+*
+* 1. **Before updates**, we check if the component belongs to a Kirby plugin by matching
+*    the `__hmrId` or `__file` properties against registered plugin components.
+*
+* 2. **If matched**, we look up the actual component definition used by Kirby
+*    (`window.panel.app.config.globalProperties.$root.$options.components`)
+*    and update the HMR map's reference to point to it.
+*
+* 3. **For section components** (detected by `k-*-section` name pattern), we add a
+*    `$_isSection` flag for special treatment in `$_applyKirbyModifications()`.
 *
-* We also check the component name and add a `$_isSection` flag if it's `k-something-section`, because
-* section components are hard to detect and need special treatment in `$_applyKirbyModifications`.
+* `$_applyKirbyModifications()`:
 *
-* `$_applyKirbyModifications`:
+* Kirby modifies component definitions before registration:
+* - Adds the section mixin to section components
+* - Gives templates priority over render functions
+* - Resolves component names in `extends` to their definition objects
 *
-* Kirby modifies component definitions before registering components.
-* This includes adding the section mixin to section components,
-* giving templates priority over render functions if both exist
-* and resolving component names in `extends` to their definition object:
-* https://github.com/getkirby/kirby/blob/2965c3124e3b141072a2d46c798a327dda710060/panel/src/panel/plugins.js
-* When a module is reloaded, Vue receives a fresh component definition that is
-* missing these modifications. We need to re-apply them, else the runtime will
-* prune them when patching the stored definition to match the newer one.
+* When a module hot reloads, Vue 3 receives a fresh component definition missing
+* these modifications. We re-apply them to ensure the runtime doesn't prune them
+* when patching the stored definition with the updated one.
 *
-* The call to `$_applyKirbyModifications()` is injected into `__VUE_HMR_RUNTIME__.reload()`
-* at the appropriate position using a RegExp in the Vite plugin's transform method.
+* This code uses a singleton pattern (`__KIRBYUP_HMR_WRAPPED__`) to ensure the
+* wrapper is installed only once, even though it's injected into every component.
 */
-const __INJECTED_HMR_CODE__ = `
-/** - injected by kirbyup - */
-for (const methodName of ['rerender', 'reload']) {
-  const original = __VUE_HMR_RUNTIME__[methodName]
+const __HMR_INJECTION_CODE__ = `
+/** - injected by kirbyup for Vue 3 HMR - */
+if (typeof __VUE_HMR_RUNTIME__ !== 'undefined' && !window.__KIRBYUP_HMR_WRAPPED__) {
+  window.__KIRBYUP_HMR_WRAPPED__ = true;
 
-  __VUE_HMR_RUNTIME__[methodName] = function (id, updatedDef) {
-    const key = updatedDef?.__file ? '__file' : updatedDef?.__hmrId ? '__hmrId' : null
+  const originalRerender = __VUE_HMR_RUNTIME__.rerender;
+  const originalReload = __VUE_HMR_RUNTIME__.reload;
+
+  __VUE_HMR_RUNTIME__.rerender = function(id, newRender) {
+    $_syncKirbyComponent(id);
+    return originalRerender.call(this, id, newRender);
+  };
+
+  __VUE_HMR_RUNTIME__.reload = function(id, newComp) {
+    const record = $_getHmrRecord(id);
+    if (record) {
+      $_syncKirbyComponent(id, record.initialDef);
+      $_applyKirbyModifications(record.initialDef, newComp);
+    }
+    return originalReload.call(this, id, newComp);
+  };
+
+  function $_getHmrRecord(id) {
+    // Vue 3's HMR map is not exposed, so we maintain our own parallel map
+    // by wrapping \`createRecord\` to track component definitions
+    if (!window.__KIRBYUP_MAP__) {
+      window.__KIRBYUP_MAP__ = new Map();
+      const originalCreate = __VUE_HMR_RUNTIME__.createRecord;
+      __VUE_HMR_RUNTIME__.createRecord = function(id, initialDef) {
+        window.__KIRBYUP_MAP__.set(id, { initialDef });
+        return originalCreate.call(this, id, initialDef);
+      };
+    }
+    return window.__KIRBYUP_MAP__.get(id);
+  }
 
-    if (key) {
-      const pluginComponents = window.panel.plugins.components
-      // const usedComponentDefs = window.panel.app.$options.components
-      const usedComponentDefs = window.panel.app._vnode.componentInstance.$options.components // #33
+  function $_syncKirbyComponent(id, activeDef) {
+    const pluginComponents = window.panel?.plugins?.components;
+    const usedComponentDefs = window.panel?.app?.config?.globalProperties?.$root?.$options?.components;
 
-      for (const componentName in pluginComponents) {
-        if (updatedDef[key] === pluginComponents[componentName][key]) {
-          const usedDefinition = usedComponentDefs[componentName].options
+    if (!pluginComponents || !usedComponentDefs) return;
 
-          if (map[id].options !== usedDefinition)
-            map[id].options = usedDefinition
+    const record = $_getHmrRecord(id);
+    if (!record) return;
 
-          if (typeof map[id].options.$_isSection !== 'boolean')
-            map[id].options.$_isSection = /^k-.*-section$/.test(componentName)
+    for (const componentName in pluginComponents) {
+      const pluginComp = pluginComponents[componentName];
 
-          break
+      if (pluginComp.__hmrId === id || pluginComp.__file === record.initialDef?.__file) {
+        const usedDef = usedComponentDefs[componentName];
+
+        if (usedDef && record.initialDef !== usedDef) {
+          record.initialDef = usedDef;
+        }
+
+        if (activeDef && typeof activeDef.$_isSection !== 'boolean') {
+          activeDef.$_isSection = /^k-.*-section$/.test(componentName);
         }
+
+        break;
       }
     }
-
-    return original.apply(this, arguments)
   }
-}
 
-function $_applyKirbyModifications(activeDef, newDef) {
-  const usedComponentDefs = window.panel.app.$options.components
+  function $_applyKirbyModifications(activeDef, newDef) {
+    const usedComponentDefs = window.panel?.app?.config?.globalProperties?.$root?.$options?.components;
 
-  if (newDef.template)
-    newDef.render = null
+    if (!usedComponentDefs) return;
 
-  if (activeDef.$_isSection)
-    newDef.$_isSection = true
-  if (newDef.$_isSection && !newDef.mixins?.[0]?.methods?.load)
-    newDef.mixins = [activeDef.mixins[0], ...(newDef.mixins || [])]
+    // Give templates priority over render functions
+    if (newDef.template) {
+      newDef.render = null;
+    }
 
-  if (typeof newDef.extends === 'string') {
-    if (newDef.extends === activeDef.extends?.options?.name) {
-      newDef.extends = activeDef.extends
+    // Re-apply section mixin for section components
+    if (activeDef.$_isSection) {
+      newDef.$_isSection = true;
+      if (!newDef.mixins?.[0]?.methods?.load) {
+        const sectionMixin = activeDef.mixins?.[0];
+        if (sectionMixin) {
+          newDef.mixins = [sectionMixin, ...(newDef.mixins || [])];
+        }
+      }
     }
-    else if (usedComponentDefs[newDef.extends]) {
-      newDef.extends = usedComponentDefs[newDef.extends].extend({
-        options: newDef,
-        components: { ...usedComponentDefs, ...(newDef.components || {}) },
-      })
+
+    // Resolve component name in extends to definition object
+    if (typeof newDef.extends === 'string') {
+      if (newDef.extends === activeDef.extends?.name) {
+        newDef.extends = activeDef.extends;
+      } else if (usedComponentDefs[newDef.extends]) {
+        newDef.extends = usedComponentDefs[newDef.extends];
+      } else {
+        newDef.extends = null;
+      }
     }
-    else { newDef.extends = null }
   }
 }
 /** -- */
@@ -195,7 +235,14 @@ function kirbyupHmrPlugin(options) {
 			devIndexPath = resolve(config.root, options.outDir || "", "index.dev.mjs");
 		},
 		transform(code, id) {
-			if (isHmrRuntimeId(id)) return code.replace(/^.*=\s*record\.Ctor\.super\.extend\(options\)/m, "$_applyKirbyModifications(record.Ctor.options, options) // injected by kirbyup\n$&") + __INJECTED_HMR_CODE__;
+			if (!id.endsWith(".vue")) return;
+			if (!code.includes("__VUE_HMR_RUNTIME__.createRecord")) return;
+			const injectionPoint = code.indexOf("import.meta.hot.accept");
+			if (injectionPoint === -1) return;
+			return {
+				code: `${code.slice(0, injectionPoint) + __HMR_INJECTION_CODE__}\n${code.slice(injectionPoint)}`,
+				map: null
+			};
 		},
 		configureServer(server) {
 			if (!server.httpServer) return;
@@ -389,7 +436,7 @@ function getViteConfig(command, options) {
 	const mode = options.watch ? "development" : "production";
 	return mergeConfig(mergeConfig(sharedConfig, {
 		mode,
-		plugins: [kirbyupBuildCleanupPlugin(options)],
+		plugins: [kirbyupBuildCleanupPlugin(options), options.watch && kirbyupRunningMarkerPlugin({ outDir: options.outDir })].filter(Boolean),
 		build: {
 			lib: {
 				entry: resolve(options.cwd, options.entry),
@@ -412,8 +459,8 @@ async function generate(options) {
 	try {
 		result = await build(config);
 	} catch (error) {
-		consola.error("Build failed");
 		if (config.mode === "production") throw error;
+		else consola.error(error);
 	}
 	if (result && !options.watch) {
 		const { output } = toArray(result)[0];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kirbyup",
   "type": "module",
-  "version": "4.0.0-alpha.3",
+  "version": "4.0.0-alpha.4",
   "packageManager": "pnpm@10.25.0",
   "description": "Zero-config bundler for Kirby Panel plugins",
   "author": {
@@ -84,7 +84,6 @@
     "perfect-debounce": "^2.0.0",
     "postcss": "^8.5.6",
     "postcss-load-config": "^6.0.1",
-    "rollup-plugin-external-globals": "^0.13.0",
     "sass": "^1.95.1",
     "vite": "^7.2.7",
     "vite-plugin-full-reload": "^1.2.0",