kirbyup 2.1.3 → 2.2.0-beta.1

package/README.md

@@ -17,7 +17,7 @@ The fastest and leanest way to bundle your Kirby Panel plugins. No configuration
 
 ## Requirements
 
-- Node 16 (active LTS) or newer
+- Node 16 or newer
 
 ## Get Started Right Away
 
@@ -43,7 +43,7 @@ If you want to use kirbyup right away, there is no need to install it. Simply ca
 
 > If `npx` doesn't use the latest kirbyup version, although it is available, run `npx -y kirbyup@latest` instead or delete the `~/.npm/_npx` cache folder.
 
-While kirbyup will stay backwards compatible, exact build reproducibility may be of importance to you. If so, I recommend to target a specific package version, rather than using `npx`. Install kirbyup with a package manager of your choice locally to your project:
+While kirbyup will stay backwards compatible, exact build reproducibility may be of importance to you. If so, I recommend targeting a specific package version, rather than using `npx`. Install kirbyup with a package manager of your choice locally to your project:
 
 ```bash
 npm i kirbyup --save-dev
@@ -184,7 +184,7 @@ 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 { resolve } from 'path'
+import { resolve } from 'node:path'
 import { defineConfig } from 'kirbyup/config'
 
 export default defineConfig({

package/dist/cli.d.ts

@@ -1 +1,2 @@
 
+export { }

package/dist/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.7be0137b.mjs';
+import { n as name, b as build, s as serve, v as version, h as handleError } from './shared/kirbyup.6fa783f0.mjs';
 import 'node:fs';
 import 'node:fs/promises';
 import 'pathe';
@@ -14,9 +14,9 @@ import 'vite-plugin-full-reload';
 import 'postcss-load-config';
 import 'postcss-logical';
 import 'postcss-dir-pseudo-class';
-import 'zlib';
-import 'util';
-import 'fs';
+import 'node:zlib';
+import 'node:util';
+import 'node:buffer';
 import 'unconfig';
 import 'magic-string';
 import 'detect-package-manager';
@@ -28,9 +28,13 @@ async function startCli(cwd = process.cwd(), argv = process.argv) {
     "Watch for file changes. If no path is specified, the folder of the input file will be watched",
     { default: false }
   ).example("kirbyup src/index.js").example("kirbyup src/index.js --out-dir ~/kirby-site/site/plugins/demo").example("kirbyup src/index.js --watch src/**/*.{js,css} --watch assets/*\n").action(async (file, options) => {
+    if (!process.env.NODE_ENV)
+      process.env.NODE_ENV = options.watch ? "development" : "production";
     await build({ cwd, entry: file, ...options });
   });
   cli.command("serve <file>", "Start development server with live reload").option("--no-watch", "Don't watch .php files for changes", { default: "\0" }).option("-w, --watch <path>", "Watch additional files", { default: "./**/*.php" }).option("-p, --port <number>", "Port for the development server", { default: 5177 }).option("-d, --out-dir <dir>", "Output directory").example("kirbyup serve src/index.js").example("kirbyup serve src/index.js --no-watch --port 3003").example("kirbyup serve src/index.js --watch snippets/*.php --watch templates/*.php\n").action(async (file, options) => {
+    if (!process.env.NODE_ENV)
+      process.env.NODE_ENV = "development";
     const server = await serve({ cwd, entry: file, ...options });
     const exitProcess = async () => {
       try {

package/dist/index.mjs

@@ -12,10 +12,10 @@ import 'vite-plugin-full-reload';
 import 'postcss-load-config';
 import 'postcss-logical';
 import 'postcss-dir-pseudo-class';
-export { b as build, s as serve } from './shared/kirbyup.7be0137b.mjs';
-import 'zlib';
-import 'util';
-import 'fs';
+export { b as build, s as serve } from './shared/kirbyup.6fa783f0.mjs';
+import 'node:zlib';
+import 'node:util';
+import 'node:buffer';
 import 'unconfig';
 import 'magic-string';
 import 'detect-package-manager';

package/dist/plugin.mjs

@@ -1,5 +1,11 @@
-const getComponentName = (path) => path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf(".")).toLowerCase();
 const kirbyup = Object.freeze({
+  /**
+   * Auto-import Kirby Panel components, will be transformed by
+   * kirbyup's auto import plugin for Vite
+   *
+   * @example
+   * kirbyup.import('./components/blocks/*.vue')
+   */
   import(glob) {
     const modules = glob;
     return Object.entries(modules).reduce(
@@ -11,5 +17,8 @@ const kirbyup = Object.freeze({
     );
   }
 });
+function getComponentName(path) {
+  return path.substring(path.lastIndexOf("/") + 1, path.lastIndexOf(".")).toLowerCase();
+}
 
 export { kirbyup };

package/dist/shared/{kirbyup.7be0137b.mjs → kirbyup.6fa783f0.mjs}

@@ -1,4 +1,4 @@
-import { existsSync as existsSync$1, unlinkSync } from 'node:fs';
+import { existsSync, statSync, unlinkSync } from 'node:fs';
 import { writeFile, readFile } from 'node:fs/promises';
 import { normalize, relative, resolve, dirname, basename } from 'pathe';
 import consola from 'consola';
@@ -12,15 +12,15 @@ import fullReloadPlugin from 'vite-plugin-full-reload';
 import postcssrc from 'postcss-load-config';
 import postcssLogical from 'postcss-logical';
 import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
-import { gzip } from 'zlib';
-import { promisify } from 'util';
-import { existsSync, statSync } from 'fs';
+import { gzip } from 'node:zlib';
+import { promisify } from 'node:util';
+import { Buffer } from 'node:buffer';
 import { createConfigLoader } from 'unconfig';
 import MagicString from 'magic-string';
 import { detect } from 'detect-package-manager';
 
 const name = "kirbyup";
-const version = "2.1.3";
+const version = "2.2.0-beta.1";
 
 class PrettyError extends Error {
   constructor(message) {
@@ -101,7 +101,9 @@ const multilineCommentsRE = /\/\*(.|[\r\n])*?\*\//gm;
 const singlelineCommentsRE = /\/\/.*/g;
 const HMR_RUNTIME_ID = "\0plugin-vue2:hmr-runtime";
 const JSX_HMR_RUNTIME_ID = "plugin-vue2-jsx:hmr-runtime";
-const isHmrRuntimeId = (id) => id === HMR_RUNTIME_ID || id === JSX_HMR_RUNTIME_ID;
+function isHmrRuntimeId(id) {
+  return id === HMR_RUNTIME_ID || id === JSX_HMR_RUNTIME_ID;
+}
 const __INJECTED_HMR_CODE__ = `
 /** - injected by kirbyup - */
 for (const methodName of ['rerender', 'reload']) {
@@ -120,7 +122,7 @@ for (const methodName of ['rerender', 'reload']) {
 
           if (map[id].options !== usedDefinition)
             map[id].options = usedDefinition
-          
+
           if (typeof map[id].options.$_isSection !== 'boolean')
             map[id].options.$_isSection = /^k-.*-section$/.test(componentName)
 
@@ -168,42 +170,32 @@ function kirbyupAutoImportPlugin() {
       config = resolvedConfig;
     },
     async transform(code) {
-      if (code.includes("kirbyup.import")) {
-        const kirbyupImportRE = /\bkirbyup\.import\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*\)/g;
-        const noCommentsCode = code.replace(multilineCommentsRE, (m) => " ".repeat(m.length)).replace(singlelineCommentsRE, (m) => " ".repeat(m.length));
-        let s = null;
-        let match;
-        while (match = kirbyupImportRE.exec(noCommentsCode)) {
-          const { 0: exp, 1: rawPath, index } = match;
-          if (!s)
-            s = new MagicString(code);
-          s.overwrite(
-            index,
-            index + exp.length,
-            `kirbyup.import(import.meta.glob(${rawPath}, { eager: true }))`
-          );
-        }
-        if (s) {
-          return {
-            code: s.toString(),
-            map: config.build.sourcemap ? s.generateMap({ hires: true }) : null
-          };
-        }
+      if (!code.includes("kirbyup.import"))
+        return;
+      const kirbyupImportRE = /\bkirbyup\.import\s*\(\s*('[^']+'|"[^"]+"|`[^`]+`)\s*\)/g;
+      const noCommentsCode = code.replace(multilineCommentsRE, (m) => " ".repeat(m.length)).replace(singlelineCommentsRE, (m) => " ".repeat(m.length));
+      let s;
+      let match;
+      while (match = kirbyupImportRE.exec(noCommentsCode)) {
+        const { 0: exp, 1: rawPath, index } = match;
+        if (!s)
+          s = new MagicString(code);
+        s.overwrite(
+          index,
+          index + exp.length,
+          `kirbyup.import(import.meta.glob(${rawPath}, { eager: true }))`
+        );
+      }
+      if (s) {
+        return {
+          code: s.toString(),
+          map: config.build.sourcemap ? s.generateMap({ hires: true }) : void 0
+        };
       }
-      return null;
     }
   };
 }
 
-const getViteProxyModule = (entryUrl, pm) => `
-try {
-  await import("${entryUrl}");
-} catch (err) {
-  console.error(
-    "[kirbyup] Couldn't connect to the development server. Run \`${pm} run serve\` to start Vite or build the plugin with \`${pm} run build\` so Kirby uses the production version."
-  );
-  throw err;
-}`.trim();
 function kirbyupHmrPlugin(options) {
   let config;
   let entry;
@@ -219,6 +211,7 @@ function kirbyupHmrPlugin(options) {
     transform(code, id) {
       if (isHmrRuntimeId(id)) {
         return code.replace(
+          // https://github.com/vitejs/vite-plugin-vue2/blob/06ede94/src/utils/hmrRuntime.ts#L173
           /^.*=\s*record\.Ctor\.super\.extend\(options\)/m,
           "$_applyKirbyModifications(record.Ctor.options, options) // injected by kirbyup\n$&"
         ) + __INJECTED_HMR_CODE__;
@@ -238,11 +231,22 @@ function kirbyupHmrPlugin(options) {
       });
     },
     closeBundle() {
-      if (existsSync$1(indexMjs))
+      if (existsSync(indexMjs))
         unlinkSync(indexMjs);
     }
   };
 }
+function getViteProxyModule(entryUrl, pm) {
+  return `
+try {
+  await import("${entryUrl}");
+} catch (err) {
+  console.error(
+    "[kirbyup] Couldn't connect to the development server. Run \`${pm} run serve\` to start Vite or build the plugin with \`${pm} run build\` so Kirby uses the production version."
+  );
+  throw err;
+}`.trim();
+}
 
 function kirbyupBuildCleanupPlugin(options) {
   let config;
@@ -254,7 +258,7 @@ function kirbyupBuildCleanupPlugin(options) {
       indexMjs = resolve(config.root, options.outDir, "index.dev.mjs");
     },
     writeBundle() {
-      if (existsSync$1(indexMjs))
+      if (existsSync(indexMjs))
         unlinkSync(indexMjs);
     }
   };
@@ -267,9 +271,15 @@ function getViteConfig(command, options) {
   const { alias = {}, extendViteConfig = {} } = resolvedKirbyupConfig;
   const baseConfig = {
     resolve: {
-      alias: { "~/": `${aliasDir}/`, "@/": `${aliasDir}/`, ...alias }
+      alias: {
+        "~/": `${aliasDir}/`,
+        "@/": `${aliasDir}/`,
+        ...alias
+      }
     },
     plugins: [
+      // Explicitly pass the compiler, since the plugin's resolving of the compiler
+      // looks in the current directory and breaks `npx kirbyup`
       vuePlugin({ compiler: vueCompilerSfc }),
       vueJsxPlugin(),
       kirbyupAutoImportPlugin()
@@ -285,7 +295,9 @@ function getViteConfig(command, options) {
         kirbyupHmrPlugin(options),
         watch && fullReloadPlugin(watch)
       ],
+      // Input needs to be specified so dep pre-bundling works
       build: { rollupOptions: { input: resolve(options.cwd, options.entry) } },
+      // Specify origin so asset URLs include Vite server host
       server: { port, strictPort: true, origin: `http://localhost:${port}` }
     });
     return mergeConfig(serveConfig, extendViteConfig);
@@ -336,6 +348,7 @@ async function generate(options) {
     for (const {
       fileName,
       type,
+      // @ts-expect-error: `code` not available in `OutputAsset`
       code
     } of output) {
       await printFileInfo(
@@ -361,6 +374,7 @@ async function build(options) {
     if (!/No PostCSS Config found/.test(err.message))
       throw err;
     resolvedPostCssConfig = {
+      // @ts-expect-error: types won't match
       plugins: [postcssLogical(), postcssDirPseudoClass()]
     };
   }
@@ -379,6 +393,7 @@ async function build(options) {
     const { watch } = await import('chokidar');
     const ignored = [
       "**/{.git,node_modules}/**",
+      // Always ignore out files
       "index.{css,js}"
     ];
     const watchPaths = typeof options.watch === "boolean" ? dirname(options.entry) : Array.isArray(options.watch) ? options.watch.filter(
@@ -422,6 +437,7 @@ async function serve(options) {
     if (!/No PostCSS Config found/.test(err.message))
       throw err;
     resolvedPostCssConfig = {
+      // @ts-expect-error: types won't match
       plugins: [postcssLogical(), postcssDirPseudoClass()]
     };
   }
@@ -435,7 +451,7 @@ async function serve(options) {
   return server;
 }
 function ensureEntry(options) {
-  if (!existsSync$1(resolve(options.cwd, options.entry)))
+  if (!existsSync(resolve(options.cwd, options.entry)))
     throw new PrettyError(`Cannot find "${options.entry}"`);
 }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "kirbyup",
-  "version": "2.1.3",
-  "packageManager": "pnpm@7.24.3",
+  "version": "2.2.0-beta.1",
+  "packageManager": "pnpm@8.1.1",
   "description": "Zero-config bundler for Kirby Panel plugins",
   "author": {
     "name": "Johann Schopplich",
@@ -75,33 +75,33 @@
     "chokidar": "^3.5.3",
     "consola": "^2.15.3",
     "detect-package-manager": "^2.0.1",
-    "magic-string": "^0.27.0",
-    "pathe": "^1.0.0",
+    "magic-string": "^0.30.0",
+    "pathe": "^1.1.0",
     "perfect-debounce": "^0.1.3",
     "picocolors": "^1.0.0",
-    "postcss": "^8.4.20",
-    "postcss-dir-pseudo-class": "^6.0.5",
+    "postcss": "^8.4.21",
+    "postcss-dir-pseudo-class": "^7.0.2",
     "postcss-load-config": "^4.0.1",
-    "postcss-logical": "^5.0.4",
-    "sass": "^1.56.2",
+    "postcss-logical": "^6.1.0",
+    "sass": "^1.61.0",
     "unconfig": "^0.3.7",
-    "vite": "^3.2.4",
+    "vite": "^4.2.1",
     "vite-plugin-full-reload": "^1.0.5",
     "vue": "^2.7.14"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.33.1",
-    "@types/fs-extra": "^9.0.13",
-    "@types/node": "^18.11.13",
-    "@types/prompts": "^2.4.2",
-    "bumpp": "^8.2.1",
-    "eslint": "^8.29.0",
+    "@antfu/eslint-config": "^0.38.4",
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^18.15.11",
+    "@types/prompts": "^2.4.4",
+    "bumpp": "^9.1.0",
+    "eslint": "^8.37.0",
     "fast-glob": "^3.2.12",
-    "fs-extra": "^11.1.0",
+    "fs-extra": "^11.1.1",
     "simple-git-hooks": "^2.8.1",
-    "typescript": "^4.9.4",
-    "unbuild": "^1.0.2",
-    "vitest": "^0.25.6"
+    "typescript": "^5.0.3",
+    "unbuild": "^1.2.0",
+    "vitest": "^0.29.8"
   },
   "simple-git-hooks": {
     "commit-msg": "node scripts/verifyCommit.mjs $1"