kirbyup 3.1.0 → 3.1.2

package/README.md

@@ -9,17 +9,13 @@ The fastest and leanest way to bundle your Kirby Panel plugins. No configuration
 
 - 🍂 Lightweight, robust and tested
 - ⚡️ Fast compilation with Vite/esbuild
-- 🔄 Hot Module Replacement and watch mode (requires Kirby v3.7.4+)
+- 🔄 Hot module replacement and watch mode
 - \*️⃣ `kirbyup.import` to [auto-import blocks & fields](#auto-import-blocks-and-fields)
 - 🎒 [PostCSS support](#postcss)
 - 🧭 [Path resolve aliases](#path-resolve-aliases)
 - 🔌 [Env variables support](#env-variables)
 - 🦔 [Extendable configuration with `kirbyup.config.js`](#extendable-configuration-with-kirbyupconfigjs)
 
-## Requirements
-
-- Latest Node.js LTS version (currently v18)
-
 ## Get Started Right Away
 
 … With one of the following Panel plugin kits:
@@ -36,8 +32,7 @@ If you want to use kirbyup right away, there is no need to install it. Simply ca
 ```json
 {
   "scripts": {
-    "dev": "npx -y kirbyup src/index.js --watch",
-    "serve": "npx -y kirbyup serve src/index.js",
+    "dev": "npx -y kirbyup serve src/index.js",
     "build": "npx -y kirbyup src/index.js"
   }
 }
@@ -57,8 +52,7 @@ Example package configuration:
 ```json
 {
   "scripts": {
-    "dev": "kirbyup src/index.js --watch",
-    "serve": "kirbyup serve src/index.js",
+    "dev": "kirbyup serve src/index.js",
     "build": "kirbyup src/index.js"
   },
   "devDependencies": {
@@ -75,9 +69,6 @@ Global installation is supported as well, but not recommended.
 
 Start a development server for the Panel plugin:
 
-> [!NOTE]
-> This feature requires Kirby v3.7.4+.
-
 ```bash
 kirbyup serve src/index.js
 ```
@@ -163,9 +154,9 @@ window.panel.plugin('kirbyup/example', {
 
 kirbyup exposes env variables on the special `import.meta.env` object. Some built-in variables are available in all cases:
 
-- **`import.meta.env.MODE`**: {`development` | `production`} the mode kirbyup is running in.
-- **`import.meta.env.PROD`**: {boolean} whether kirbyup is running in production.
-- **`import.meta.env.DEV`**: {boolean} whether kirbyup is running in development (always the opposite of `import.meta.env.PROD`)
+- **`import.meta.env.MODE`** (`development` | `production`): the mode kirbyup is running in.
+- **`import.meta.env.PROD`** (`boolean`): whether kirbyup is running in production.
+- **`import.meta.env.DEV`** (`boolean`): whether kirbyup is running in development (always the opposite of `import.meta.env.PROD`)
 
 During production, these env variables are **statically replaced**. It is therefore necessary to always reference them using the full static string. For example, dynamic key access like `import.meta.env[key]` will not work.
 
@@ -189,20 +180,19 @@ Only `KIRBYUP_SOME_KEY` will be exposed as `import.meta.env.VITE_SOME_KEY` to yo
 Create a `kirbyup.config.js` or `kirbyup.config.ts` configuration file the root-level of your project to customize kirbyup.
 
 ```js
+import { fileURLToPath } from 'node:url'
 import { resolve } from 'node:path'
 import { defineConfig } from 'kirbyup/config'
 
-const currentDir = new URL('.', import.meta.url).pathname
+const currentDir = fileURLToPath(new URL('.', import.meta.url))
 
 export default defineConfig({
   alias: {
-    '#deep/': `${resolve(currentDir, 'src/deep')}/`
+    '#plugin/': `${resolve(currentDir, 'src/plugin')}/`
   },
-  extendViteConfig: {
-    build: {
-      lib: {
-        name: 'myPlugin'
-      }
+  vite: {
+    define: {
+      __PLAYGROUND__: JSON.stringify(process.env.PLAYGROUND)
     }
   }
 })
@@ -212,7 +202,7 @@ export default defineConfig({
 
 When aliasing to file system paths, always use absolute paths. Relative alias values will be used as-is and will not be resolved into file system paths.
 
-#### `extendViteConfig`
+#### `vite`
 
 You can build upon the defaults kirbup uses and extend the Vite configuration with custom plugins etc.
 
@@ -257,7 +247,6 @@ Disables the default behavior of watching all PHP files for changes.
 ## Credits
 
 - [Vite](https://vitejs.dev) by Evan You and all of its contributors.
-- [EGOIST](https://github.com/egoist) for his inspirational work on [tsup](https://github.com/egoist/tsup).
 
 ## License
 

package/dist/client/config.d.mts

@@ -1,4 +1,4 @@
-import { U as UserConfig } from '../shared/kirbyup.cf02d174.mjs';
+import { U as UserConfig } from '../shared/kirbyup.1d99eeee.mjs';
 import 'vite';
 
 declare function defineConfig(config: UserConfig): UserConfig;

package/dist/client/config.d.ts

@@ -1,4 +1,4 @@
-import { U as UserConfig } from '../shared/kirbyup.cf02d174.js';
+import { U as UserConfig } from '../shared/kirbyup.1d99eeee.js';
 import 'vite';
 
 declare function defineConfig(config: UserConfig): UserConfig;

package/dist/node/cli.mjs

@@ -1,5 +1,5 @@
 import { cac } from 'cac';
-import { n as name, b as build, s as serve, v as version, h as handleError } from '../shared/kirbyup.9b5c1ecd.mjs';
+import { n as name, b as build, s as serve, v as version, h as handleError } from '../shared/kirbyup.5312ccaa.mjs';
 import 'node:fs';
 import 'node:fs/promises';
 import 'pathe';
@@ -20,7 +20,7 @@ import 'node:util';
 import 'node:buffer';
 import 'c12';
 import 'magic-string';
-import 'detect-package-manager';
+import 'node:module';
 
 async function startCli(cwd = process.cwd(), argv = process.argv) {
   const cli = cac(name);

package/dist/node/index.d.mts

@@ -1,5 +1,5 @@
 import * as vite from 'vite';
-import { B as BuildOptions, S as ServeOptions } from '../shared/kirbyup.cf02d174.mjs';
+import { B as BuildOptions, S as ServeOptions } from '../shared/kirbyup.1d99eeee.mjs';
 
 declare function build(options: BuildOptions): Promise<void>;
 declare function serve(options: ServeOptions): Promise<vite.ViteDevServer>;

package/dist/node/index.d.ts

@@ -1,5 +1,5 @@
 import * as vite from 'vite';
-import { B as BuildOptions, S as ServeOptions } from '../shared/kirbyup.cf02d174.js';
+import { B as BuildOptions, S as ServeOptions } from '../shared/kirbyup.1d99eeee.js';
 
 declare function build(options: BuildOptions): Promise<void>;
 declare function serve(options: ServeOptions): Promise<vite.ViteDevServer>;

package/dist/node/index.mjs

@@ -13,10 +13,10 @@ import 'rollup-plugin-external-globals';
 import 'postcss-load-config';
 import 'postcss-logical';
 import 'postcss-dir-pseudo-class';
-export { b as build, s as serve } from '../shared/kirbyup.9b5c1ecd.mjs';
+export { b as build, s as serve } from '../shared/kirbyup.5312ccaa.mjs';
 import 'node:zlib';
 import 'node:util';
 import 'node:buffer';
 import 'c12';
 import 'magic-string';
-import 'detect-package-manager';
+import 'node:module';

package/dist/shared/{kirbyup.cf02d174.d.mts → kirbyup.1d99eeee.d.mts}

@@ -14,11 +14,6 @@ interface BuildOptions extends BaseOptions {
     watch: boolean | string | string[];
 }
 interface UserConfig {
-    /**
-     * Load from config files
-     * Set to `false` to disable
-     */
-    configFile?: string | false;
     /**
      * Specifies an `Object`, or an `Array` of `Object`,
      * which defines aliases used to replace values in `import` statements.
@@ -28,7 +23,19 @@ interface UserConfig {
     alias?: AliasOptions;
     /**
      * Extends Vite's configuration. Will be merged with kirbyup's
-     * default configuration. Be careful what to extend.
+     * default configuration. For example, you can define global constant replacements.
+     *
+     * @example
+     * export default defineConfig({
+     *   vite: {
+     *    define: {
+     *     __TEST__: JSON.stringify(process.env.TEST === 'true'),
+     *   },
+     * })
+     */
+    vite?: InlineConfig;
+    /**
+     * @deprecated Use `vite` instead.
      */
     extendViteConfig?: InlineConfig;
 }

package/dist/shared/{kirbyup.cf02d174.d.ts → kirbyup.1d99eeee.d.ts}

@@ -14,11 +14,6 @@ interface BuildOptions extends BaseOptions {
     watch: boolean | string | string[];
 }
 interface UserConfig {
-    /**
-     * Load from config files
-     * Set to `false` to disable
-     */
-    configFile?: string | false;
     /**
      * Specifies an `Object`, or an `Array` of `Object`,
      * which defines aliases used to replace values in `import` statements.
@@ -28,7 +23,19 @@ interface UserConfig {
     alias?: AliasOptions;
     /**
      * Extends Vite's configuration. Will be merged with kirbyup's
-     * default configuration. Be careful what to extend.
+     * default configuration. For example, you can define global constant replacements.
+     *
+     * @example
+     * export default defineConfig({
+     *   vite: {
+     *    define: {
+     *     __TEST__: JSON.stringify(process.env.TEST === 'true'),
+     *   },
+     * })
+     */
+    vite?: InlineConfig;
+    /**
+     * @deprecated Use `vite` instead.
      */
     extendViteConfig?: InlineConfig;
 }

package/dist/shared/{kirbyup.9b5c1ecd.mjs → kirbyup.5312ccaa.mjs}

@@ -1,6 +1,6 @@
 import { existsSync, unlinkSync } from 'node:fs';
-import { writeFile, readFile } from 'node:fs/promises';
-import { normalize, relative, resolve, dirname, basename } from 'pathe';
+import { readFile, writeFile } from 'node:fs/promises';
+import { normalize, relative, resolve, join, dirname, basename } from 'pathe';
 import { consola } from 'consola';
 import { colors } from 'consola/utils';
 import { debounce } from 'perfect-debounce';
@@ -18,10 +18,10 @@ import { promisify } from 'node:util';
 import { Buffer } from 'node:buffer';
 import { loadConfig as loadConfig$1 } from 'c12';
 import MagicString from 'magic-string';
-import { detect } from 'detect-package-manager';
+import 'node:module';
 
 const name = "kirbyup";
-const version = "3.1.0";
+const version = "3.1.2";
 
 class PrettyError extends Error {
   constructor(message) {
@@ -88,7 +88,8 @@ for (const methodName of ['rerender', 'reload']) {
 
     if (key) {
       const pluginComponents = window.panel.plugins.components
-      const usedComponentDefs = window.panel.$vue._vnode.componentInstance.$options.components
+      // const usedComponentDefs = window.panel.app.$options.components
+      const usedComponentDefs = window.panel.app._vnode.componentInstance.$options.components // #33
 
       for (const componentName in pluginComponents) {
         if (updatedDef[key] === pluginComponents[componentName][key]) {
@@ -110,7 +111,7 @@ for (const methodName of ['rerender', 'reload']) {
 }
 
 function $_applyKirbyModifications(activeDef, newDef) {
-  const usedComponentDefs = window.panel.$vue.$options.components
+  const usedComponentDefs = window.panel.app.$options.components
 
   if (newDef.template)
     newDef.render = null
@@ -170,6 +171,92 @@ function kirbyupAutoImportPlugin() {
   };
 }
 
+async function findup(cwd, match, options = {}) {
+  const segments = normalize(cwd).split("/");
+  while (segments.length > 0) {
+    const path = segments.join("/");
+    const result = await match(path);
+    if (result || !options.includeParentDirs) {
+      return result;
+    }
+    segments.pop();
+  }
+}
+
+const packageManagers = [
+  { name: "npm", command: "npm", lockFile: "package-lock.json" },
+  {
+    name: "pnpm",
+    command: "pnpm",
+    lockFile: "pnpm-lock.yaml",
+    files: ["pnpm-workspace.yaml"]
+  },
+  {
+    name: "bun",
+    command: "bun",
+    lockFile: "bun.lockb"
+  },
+  {
+    name: "yarn",
+    command: "yarn",
+    majorVersion: "1.0.0",
+    lockFile: "yarn.lock"
+  },
+  {
+    name: "yarn",
+    command: "yarn",
+    majorVersion: "3.0.0",
+    lockFile: "yarn.lock",
+    files: [".yarnrc.yml"]
+  }
+];
+async function detectPackageManager(cwd, options = {}) {
+  const detected = await findup(
+    cwd,
+    async (path) => {
+      if (!options.ignorePackageJSON) {
+        const packageJSONPath = join(path, "package.json");
+        if (existsSync(packageJSONPath)) {
+          const packageJSON = JSON.parse(
+            await readFile(packageJSONPath, "utf8")
+          );
+          if (packageJSON?.packageManager) {
+            const [name, version = "0.0.0"] = packageJSON.packageManager.split("@");
+            const majorVersion = version.split(".")[0];
+            const packageManager = packageManagers.find(
+              (pm) => pm.name === name && pm.majorVersion === majorVersion
+            ) || packageManagers.find((pm) => pm.name === name);
+            return {
+              ...packageManager,
+              name,
+              command: name,
+              version,
+              majorVersion
+            };
+          }
+        }
+      }
+      if (!options.ignoreLockFile) {
+        for (const packageManager of packageManagers) {
+          const detectionsFiles = [
+            packageManager.lockFile,
+            ...packageManager.files || []
+          ].filter(Boolean);
+          if (detectionsFiles.some((file) => existsSync(resolve(path, file)))) {
+            return {
+              ...packageManager
+            };
+          }
+        }
+      }
+    },
+    {
+      includeParentDirs: options.includeParentDirs ?? true
+    }
+  );
+  return detected;
+}
+
 function kirbyupHmrPlugin(options) {
   let config;
   let entry;
@@ -200,7 +287,7 @@ function kirbyupHmrPlugin(options) {
         const hostname = family === "IPv6" ? `[${address}]` : address;
         const baseUrl = `http://${hostname}:${port}${config.base}`;
         const entryUrl = new URL(entryPath, baseUrl).href;
-        const pm = await detect().catch(() => "npm");
+        const pm = await detectPackageManager(config.root);
         await writeFile(indexMjs, getViteProxyModule(entryUrl, pm));
       });
     },
@@ -210,7 +297,8 @@ function kirbyupHmrPlugin(options) {
     }
   };
 }
-function getViteProxyModule(entryUrl, pm) {
+function getViteProxyModule(entryUrl, packageManager) {
+  const pm = packageManager?.name || "npm";
   return `
 try {
   await import("${entryUrl}");
@@ -242,7 +330,8 @@ let resolvedKirbyupConfig;
 let resolvedPostCssConfig;
 function getViteConfig(command, options) {
   const aliasDir = resolve(options.cwd, dirname(options.entry));
-  const { alias = {}, extendViteConfig = {} } = resolvedKirbyupConfig;
+  const { alias = {}, vite, extendViteConfig } = resolvedKirbyupConfig;
+  const userConfig = vite ?? extendViteConfig ?? {};
   const baseConfig = {
     resolve: {
       alias: {
@@ -275,7 +364,7 @@ function getViteConfig(command, options) {
       // Specify origin so asset URLs include Vite server host
       server: { port, strictPort: true, origin: `http://localhost:${port}` }
     });
-    return mergeConfig(serveConfig, extendViteConfig);
+    return mergeConfig(serveConfig, userConfig);
   }
   const mode = options.watch ? "development" : "production";
   const buildConfig = mergeConfig(baseConfig, {
@@ -291,10 +380,14 @@ function getViteConfig(command, options) {
       minify: mode === "production",
       outDir: options.outDir,
       emptyOutDir: false,
-      rollupOptions: { output: { assetFileNames: "index.[ext]" } }
+      rollupOptions: {
+        output: {
+          assetFileNames: "index.[ext]"
+        }
+      }
     }
   });
-  return mergeConfig(buildConfig, extendViteConfig);
+  return mergeConfig(buildConfig, userConfig);
 }
 async function generate(options) {
   const config = getViteConfig("build", options);
@@ -337,16 +430,7 @@ async function build(options) {
   const { cwd } = options;
   const { config, configFile } = await loadConfig(cwd);
   resolvedKirbyupConfig = config ?? {};
-  try {
-    resolvedPostCssConfig = await postcssrc(void 0, void 0, { stopDir: cwd });
-  } catch (err) {
-    if (!/No PostCSS Config found/.test(err.message))
-      throw err;
-    resolvedPostCssConfig = {
-      // @ts-expect-error: types won't match
-      plugins: [postcssLogical(), postcssDirPseudoClass()]
-    };
-  }
+  resolvedPostCssConfig = await resolvePostCSSConfig(cwd);
   {
     consola.log(colors.green(`${name} v${version}`));
     consola.start(`Building ${colors.cyan(options.entry)}`);
@@ -400,16 +484,7 @@ async function serve(options) {
   const { cwd } = options;
   const { config } = await loadConfig(cwd);
   resolvedKirbyupConfig = config ?? {};
-  try {
-    resolvedPostCssConfig = await postcssrc(void 0, void 0, { stopDir: cwd });
-  } catch (err) {
-    if (!/No PostCSS Config found/.test(err.message))
-      throw err;
-    resolvedPostCssConfig = {
-      // @ts-expect-error: types won't match
-      plugins: [postcssLogical(), postcssDirPseudoClass()]
-    };
-  }
+  resolvedPostCssConfig = await resolvePostCSSConfig(cwd);
   {
     consola.log(colors.green(`${name} v${version}`));
     consola.info("Starting development server...");
@@ -423,5 +498,17 @@ function ensureEntry(options) {
   if (!existsSync(resolve(options.cwd, options.entry)))
     throw new PrettyError(`Cannot find "${options.entry}"`);
 }
+async function resolvePostCSSConfig(cwd) {
+  try {
+    const config = await postcssrc(void 0, void 0, { stopDir: cwd });
+    return config;
+  } catch (error) {
+    if (!error.message.includes("No PostCSS Config found"))
+      throw error;
+    return {
+      plugins: [postcssLogical(), postcssDirPseudoClass()]
+    };
+  }
+}
 
 export { build as b, handleError as h, name as n, serve as s, version as v };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "kirbyup",
   "type": "module",
-  "version": "3.1.0",
-  "packageManager": "pnpm@8.11.0",
+  "version": "3.1.2",
+  "packageManager": "pnpm@8.15.1",
   "description": "Zero-config bundler for Kirby Panel plugins",
   "author": {
     "name": "Johann Schopplich",
@@ -64,45 +64,45 @@
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "release": "bumpp --commit --push --tag",
-    "test": "vitest",
+    "test": "vitest --no-isolate",
     "test:types": "tsc --noEmit",
     "prepare": "simple-git-hooks"
   },
   "dependencies": {
     "@vitejs/plugin-vue2": "2.2.0",
     "@vitejs/plugin-vue2-jsx": "1.1.0",
-    "@vue/compiler-sfc": "^2.7.15",
-    "c12": "^1.5.1",
+    "@vue/compiler-sfc": "^2.7.16",
+    "c12": "^1.6.1",
     "cac": "^6.7.14",
     "chokidar": "^3.5.3",
     "consola": "^3.2.3",
-    "detect-package-manager": "^3.0.1",
     "magic-string": "^0.30.5",
-    "pathe": "^1.1.1",
+    "pathe": "^1.1.2",
     "perfect-debounce": "^1.0.0",
-    "postcss": "^8.4.32",
-    "postcss-dir-pseudo-class": "^8.0.0",
+    "postcss": "^8.4.33",
+    "postcss-dir-pseudo-class": "^8.0.1",
     "postcss-load-config": "^5.0.2",
-    "postcss-logical": "^7.0.0",
-    "rollup-plugin-external-globals": "^0.9.1",
-    "sass": "^1.69.5",
-    "vite": "^5.0.6",
+    "postcss-logical": "^7.0.1",
+    "rollup-plugin-external-globals": "^0.9.2",
+    "sass": "^1.70.0",
+    "vite": "^5.0.12",
     "vite-plugin-full-reload": "^1.1.0",
-    "vue": "^2.7.15"
+    "vue": "^2.7.16"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.3.4",
+    "@antfu/eslint-config": "^2.6.3",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.10.4",
+    "@types/node": "^20.11.10",
     "@types/prompts": "^2.4.9",
-    "bumpp": "^9.2.0",
-    "eslint": "^8.55.0",
+    "bumpp": "^9.3.0",
+    "eslint": "^8.56.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
+    "nypm": "^0.3.6",
     "simple-git-hooks": "^2.9.0",
     "typescript": "~5.3.3",
     "unbuild": "^2.0.0",
-    "vitest": "^1.0.1"
+    "vitest": "^1.2.2"
   },
   "simple-git-hooks": {
     "commit-msg": "node scripts/verifyCommit.mjs $1"