kirbyup 0.20.1 → 0.22.1

package/README.md

@@ -11,8 +11,9 @@ The fastest and leanest way to bundle your Kirby Panel plugins. No configuration
 - 🔍 Watch mode
 - \*️⃣ `kirbyup.import` to [auto-import blocks & fields](#auto-import-blocks-and-fields)
 - 🎒 [PostCSS support](#postcss)
-- 🧭 [`~/` path resolve alias](#path-resolve-alias)
+- 🧭 [Path resolve aliases](#path-resolve-aliases)
 - 🔌 [Env variables support](#env-variables)
+- 🦔 [Extendable configuration with `kirbyup.config.js`](#extendable-configuration-with-kirbyupconfigjs)
 
 ## Requirements
 
@@ -58,7 +59,7 @@ Example package configuration:
     "build": "kirbyup src/index.js"
   },
   "devDependencies": {
-    "kirbyup": "^0.20.0"
+    "kirbyup": "latest"
   }
 }
 ```
@@ -106,7 +107,7 @@ If no configuration file is found, kirbyup will apply two PostCSS plugins which
 - [postcss-logical](https://github.com/csstools/postcss-logical) lets you use logical, rather than physical, direction and dimension mappings in CSS, following the [CSS Logical Properties and Values](https://drafts.csswg.org/css-logical/) specification.
 - [postcss-dir-pseudo-class](https://github.com/csstools/postcss-dir-pseudo-class) lets you style by directionality using the `:dir()` pseudo-class in CSS, following the [Selectors](https://www.w3.org/TR/selectors-4/#the-dir-pseudo) specification. It gives you the same syntax Kirby uses for full compatibility with RTL localizations of the Panel.
 
-### Path Resolve Alias
+### Path Resolve Aliases
 
 Import certain modules more easily by using the `~/` path alias. It will resolve to the directory of your input file, for example `src` when building `kirbyup src/index.js`.
 
@@ -187,6 +188,38 @@ KIRBYUP_SOME_KEY=123
 
 Only `KIRBYUP_SOME_KEY` will be exposed as `import.meta.env.VITE_SOME_KEY` to your plugin's source code, but `DB_PASSWORD` will not.
 
+### Extendable Configuration With `kirbyup.config.js`
+
+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 { defineConfig } from 'kirbyup'
+
+export default defineConfig({
+  alias: {
+    '#deep/': `${resolve(__dirname, 'src/deep')}/`
+  },
+  extendViteConfig: {
+    build: {
+      lib: {
+        name: 'myPlugin'
+      }
+    }
+  }
+})
+```
+
+#### `alias`
+
+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`
+
+You can build upon the defaults kirbup uses and extend the Vite configuration with custom plugins etc.
+
+For a complete list of options, take a look at the [Vite configuration options](https://vitejs.dev/config/).
+
 ## Options
 
 > Inspect all available options with `kirbyup --help`.
@@ -206,4 +239,4 @@ Sets the watch mode. If no path is specified, kirbyup watches the folder of the
 
 ## License
 
-MIT
+[MIT](./LICENSE) License © 2021 [Johann Schopplich](https://github.com/johannschopplich)

package/bin/kirbyup.cjs

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+require('../dist/cli.cjs')

package/dist/chunks/index.mjs

@@ -0,0 +1,283 @@
+import { resolve, dirname, normalize, relative, basename } from 'pathe';
+import { existsSync, statSync } from 'fs';
+import { build as build$1, mergeConfig } from 'vite';
+import { createVuePlugin } from 'vite-plugin-vue2';
+import MagicString from 'magic-string';
+import { createConfigLoader as createConfigLoader$1 } from 'unconfig';
+import postcssrc from 'postcss-load-config';
+import postcssLogical from 'postcss-logical';
+import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
+import consola from 'consola';
+import { white, dim, cyan, magenta, green } from 'colorette';
+import { readFile } from 'fs/promises';
+import { gzip } from 'zlib';
+import { promisify } from 'util';
+
+const multilineCommentsRE = /\/\*(.|[\r\n])*?\*\//gm;
+const singlelineCommentsRE = /\/\/.*/g;
+
+function kirbyupAutoImportPlugin() {
+  let config;
+  return {
+    name: "kirbyup:auto-import",
+    configResolved(resolvedConfig) {
+      config = resolvedConfig;
+    },
+    async transform(code, id) {
+      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.globEager(${rawPath}))`);
+        }
+        if (s) {
+          return {
+            code: s.toString(),
+            map: config.build.sourcemap ? s.generateMap({ hires: true }) : null
+          };
+        }
+      }
+      return null;
+    }
+  };
+}
+
+function defineConfig(config) {
+  return config;
+}
+function createConfigLoader(configOrPath = process.cwd(), extraConfigSources = []) {
+  let inlineConfig = {};
+  if (typeof configOrPath !== "string") {
+    inlineConfig = configOrPath;
+    configOrPath = process.cwd();
+  }
+  const resolved = resolve(configOrPath);
+  let cwd = resolved;
+  let isFile = false;
+  if (existsSync(resolved) && statSync(resolved).isFile()) {
+    isFile = true;
+    cwd = dirname(resolved);
+  }
+  const loader = createConfigLoader$1({
+    sources: isFile ? [
+      {
+        files: resolved,
+        extensions: []
+      }
+    ] : [
+      {
+        files: ["kirbyup.config"]
+      },
+      ...extraConfigSources
+    ],
+    cwd,
+    defaults: inlineConfig
+  });
+  return async () => {
+    const result = await loader.load();
+    result.config = result.config || inlineConfig;
+    return result;
+  };
+}
+
+class PrettyError extends Error {
+  constructor(message) {
+    super(message);
+    this.name = this.constructor.name;
+    if (typeof Error.captureStackTrace === "function") {
+      Error.captureStackTrace(this, this.constructor);
+    } else {
+      this.stack = new Error(message).stack;
+    }
+  }
+}
+function handleError(error) {
+  if (error instanceof PrettyError) {
+    consola.error(error.message);
+  }
+  process.exitCode = 1;
+}
+
+const compress = promisify(gzip);
+async function getCompressedSize(code) {
+  const size = (await compress(typeof code === "string" ? code : Buffer.from(code))).length / 1024;
+  return ` / gzip: ${size.toFixed(2)} KiB`;
+}
+async function printFileInfo(root, outDir, filePath, type, content) {
+  content ?? (content = await readFile(resolve(outDir, filePath), "utf8"));
+  const prettyOutDir = normalize(relative(root, resolve(root, outDir))) + "/";
+  const kibs = content.length / 1024;
+  const compressedSize = await getCompressedSize(content);
+  const writeColor = type === "chunk" ? cyan : magenta;
+  consola.log(white(dim(prettyOutDir)) + writeColor(filePath) + "   " + dim(`${kibs.toFixed(2)} KiB${compressedSize}`));
+}
+function debouncePromise(fn, delay, onError) {
+  let timeout;
+  let promiseInFly;
+  let callbackPending;
+  return function debounced(...args) {
+    if (promiseInFly) {
+      callbackPending = () => {
+        debounced(...args);
+        callbackPending = void 0;
+      };
+    } else {
+      if (timeout)
+        clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        timeout = void 0;
+        promiseInFly = fn(...args).catch(onError).finally(() => {
+          promiseInFly = void 0;
+          if (callbackPending)
+            callbackPending();
+        });
+      }, delay);
+    }
+  };
+}
+
+// src/math.ts
+
+// src/array.ts
+function toArray(array) {
+  array = array || [];
+  if (Array.isArray(array))
+    return array;
+  return [array];
+}
+
+const name = "kirbyup";
+const version = "0.22.1";
+
+let resolvedKirbyupConfig;
+let resolvedPostCssConfig;
+async function viteBuild(options) {
+  let result;
+  const mode = options.watch ? "development" : "production";
+  const root = process.cwd();
+  const outDir = options.outDir ?? root;
+  const aliasDir = resolve(root, dirname(options.entry));
+  const { alias = {}, extendViteConfig = {} } = resolvedKirbyupConfig;
+  const defaultConfig = {
+    mode,
+    plugins: [createVuePlugin(), kirbyupAutoImportPlugin()],
+    build: {
+      lib: {
+        entry: resolve(root, options.entry),
+        formats: ["iife"],
+        name: "kirbyupExport",
+        fileName: () => "index.js"
+      },
+      minify: mode === "production",
+      outDir,
+      emptyOutDir: false,
+      rollupOptions: {
+        external: ["vue"],
+        output: {
+          assetFileNames: "index.[ext]",
+          globals: {
+            vue: "Vue"
+          }
+        }
+      }
+    },
+    resolve: {
+      alias: {
+        "~/": `${aliasDir}/`,
+        "@/": `${aliasDir}/`,
+        ...alias
+      }
+    },
+    css: {
+      postcss: resolvedPostCssConfig
+    },
+    envPrefix: ["VITE_", "KIRBYUP_"],
+    logLevel: "warn"
+  };
+  try {
+    result = await build$1(mergeConfig(defaultConfig, extendViteConfig));
+  } catch (error) {
+    consola.error("Build failed");
+    if (mode === "production") {
+      throw error;
+    }
+  }
+  if (result && !options.watch) {
+    const { output } = toArray(result)[0];
+    for (const { fileName, type, code } of output) {
+      printFileInfo(root, outDir, fileName, type, code);
+    }
+  }
+  return result;
+}
+async function resolveOptions(options) {
+  if (!options.entry) {
+    throw new PrettyError("No input file, try " + cyan(`${name} <path/to/file.js>`));
+  }
+  if (!existsSync(options.entry)) {
+    throw new PrettyError(`Cannot find ${options.entry}`);
+  }
+  return options;
+}
+async function build(_options) {
+  const options = await resolveOptions(_options);
+  const loadConfig = createConfigLoader();
+  const { config, sources: configSources } = await loadConfig();
+  resolvedKirbyupConfig = config;
+  try {
+    resolvedPostCssConfig = await postcssrc({});
+  } catch (err) {
+    if (!/No PostCSS Config found/.test(err.message)) {
+      throw err;
+    }
+    resolvedPostCssConfig = {
+      plugins: [postcssLogical(), postcssDirPseudoClass()]
+    };
+  }
+  consola.log(green(`${name} v${version}`));
+  consola.start("Building " + cyan(options.entry));
+  if (options.watch) {
+    consola.info("Running in watch mode");
+  }
+  const debouncedBuild = debouncePromise(async () => {
+    viteBuild(options);
+  }, 100, handleError);
+  const startWatcher = async () => {
+    if (!options.watch)
+      return;
+    const { watch } = await import('chokidar');
+    const ignored = [
+      "**/{.git,node_modules}/**",
+      "index.{css,js}"
+    ];
+    const watchPaths = typeof options.watch === "boolean" ? dirname(options.entry) : Array.isArray(options.watch) ? options.watch.filter((path) => typeof path === "string") : options.watch;
+    consola.info("Watching for changes in " + toArray(watchPaths).map((i) => cyan(i)).join(", "));
+    const watcher = watch(watchPaths, {
+      ignoreInitial: true,
+      ignorePermissionErrors: true,
+      ignored
+    });
+    if (configSources.length) {
+      watcher.add(configSources);
+    }
+    watcher.on("all", async (type, file) => {
+      if (configSources.includes(file)) {
+        resolvedKirbyupConfig = (await loadConfig()).config;
+        consola.info(`${cyan(basename(file))} changed, setting new config`);
+      } else {
+        consola.log(green(type) + " " + white(dim(file)));
+      }
+      debouncedBuild();
+    });
+  };
+  await viteBuild(options);
+  consola.success("Build successful");
+  startWatcher();
+}
+
+export { build as b, defineConfig as d, handleError as h, name as n, resolveOptions as r, version as v };

package/dist/cli.d.ts

@@ -1 +1 @@
-#!/usr/bin/env node
+

package/dist/cli.mjs

@@ -0,0 +1,38 @@
+import { cac } from 'cac';
+import { h as handleError, n as name, b as build, v as version } from './chunks/index.mjs';
+import 'pathe';
+import 'fs';
+import 'vite';
+import 'vite-plugin-vue2';
+import 'magic-string';
+import 'unconfig';
+import 'postcss-load-config';
+import 'postcss-logical';
+import 'postcss-dir-pseudo-class';
+import 'consola';
+import 'colorette';
+import 'fs/promises';
+import 'zlib';
+import 'util';
+
+async function main(options = {}) {
+  const cli = cac(name);
+  cli.command("[file]", "Panel input file", {
+    ignoreOptionDefaultValue: true
+  }).option("-d, --out-dir <dir>", "Output directory", {
+    default: process.cwd()
+  }).option("--watch [path]", 'Watch mode, if path is not specified, it watches the folder of the input file. Repeat "--watch" for multiple paths').action(async (file, flags) => {
+    Object.assign(options, {
+      ...flags
+    });
+    if (file) {
+      options.entry = file;
+    }
+    await build(options);
+  });
+  cli.help();
+  cli.version(version);
+  cli.parse(process.argv, { run: false });
+  await cli.runMatchedCommand();
+}
+main().catch(handleError);

package/dist/index.d.ts

@@ -1,16 +1,30 @@
-import * as rollup from 'rollup';
-import { RollupOutput } from 'rollup';
-import { MarkRequired } from 'ts-essentials';
+import { AliasOptions, InlineConfig } from 'vite';
 
-declare type MaybeArray<T> = T | Array<T>;
-declare type Options = {
+declare type MarkRequired<T, RK extends keyof T> = Exclude<T, RK> & Required<Pick<T, RK>>;
+declare type CliOptions = {
     entry?: string;
     outDir?: string;
-    watch?: MaybeArray<boolean | string>;
+    watch?: boolean | string | Array<boolean | string>;
 };
-declare type NormalizedOptions = MarkRequired<Options, 'entry'>;
+declare type ResolvedCliOptions = MarkRequired<CliOptions, 'entry'>;
+interface UserConfig {
+    /**
+     * Specifies an `Object`, or an `Array` of `Object`,
+     * which defines aliases used to replace values in `import` statements.
+     * With either format, the order of the entries is important,
+     * in that the first defined rules are applied first.
+     */
+    alias?: AliasOptions;
+    /**
+     * Extends Vite's configuration. Will be merged with kirbyup's
+     * default configuration. Be careful what to extend.
+     */
+    extendViteConfig?: InlineConfig;
+}
 
-declare function runViteBuild(options: NormalizedOptions): Promise<RollupOutput | RollupOutput[] | rollup.RollupWatcher | undefined>;
-declare function build(_options: Options): Promise<void>;
+declare function defineConfig(config: UserConfig): UserConfig;
 
-export { build, runViteBuild };
+declare function resolveOptions(options: CliOptions): Promise<ResolvedCliOptions>;
+declare function build(_options: CliOptions): Promise<void>;
+
+export { build, defineConfig, resolveOptions };

package/dist/index.mjs

@@ -0,0 +1,15 @@
+import 'pathe';
+import 'fs';
+import 'vite';
+import 'vite-plugin-vue2';
+export { b as build, d as defineConfig, r as resolveOptions } from './chunks/index.mjs';
+import 'postcss-load-config';
+import 'postcss-logical';
+import 'postcss-dir-pseudo-class';
+import 'consola';
+import 'colorette';
+import 'magic-string';
+import 'unconfig';
+import 'fs/promises';
+import 'zlib';
+import 'util';

package/dist/{client/plugin.d.ts → plugin.d.ts}

@@ -2,7 +2,7 @@
 declare type GlobEagerResult = Record<string, {
     [key: string]: any;
 }>;
-export declare const kirbyup: Readonly<{
+declare const kirbyup: Readonly<{
     /**
      * Auto-import Kirby Panel components, will be transformed by
      * kirbyup's auto import plugin for Vite
@@ -12,4 +12,5 @@ export declare const kirbyup: Readonly<{
      */
     import(modules: GlobEagerResult): Record<string, any>;
 }>;
-export {};
+
+export { kirbyup };

package/dist/{client/plugin.js → plugin.mjs}

@@ -7,6 +7,5 @@ const kirbyup = Object.freeze({
     }, {});
   }
 });
-export {
-  kirbyup
-};
+
+export { kirbyup };

package/package.json

@@ -1,30 +1,7 @@
 {
   "name": "kirbyup",
-  "version": "0.20.1",
+  "version": "0.22.1",
   "description": "Zero-config bundler for Kirby Panel plugins",
-  "files": [
-    "dist"
-  ],
-  "exports": {
-    ".": {
-      "require": "./dist/index.js"
-    },
-    "./plugin": {
-      "import": "./dist/client/plugin.js"
-    }
-  },
-  "main": "dist/index.js",
-  "bin": {
-    "kirbyup": "dist/cli.js"
-  },
-  "types": "dist/index.d.ts",
-  "engines": {
-    "node": ">=14"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/johannschopplich/kirbyup.git"
-  },
   "keywords": [
     "kirby-cms",
     "kirby-plugin",
@@ -32,54 +9,86 @@
     "panel",
     "bundle"
   ],
+  "homepage": "https://github.com/johannschopplich/kirbyup#readme",
+  "bugs": {
+    "url": "https://github.com/johannschopplich/kirbyup/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/johannschopplich/kirbyup.git"
+  },
+  "license": "MIT",
   "author": {
     "name": "Johann Schopplich",
     "email": "pkg@johannschopplich.com",
     "url": "https://johannschopplich.com"
   },
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/johannschopplich/kirbyup/issues"
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./plugin": {
+      "require": "./dist/plugin.cjs",
+      "import": "./dist/plugin.mjs",
+      "types": "./dist/plugin.d.ts"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "kirbyup": "./bin/kirbyup.cjs"
+  },
+  "files": [
+    "bin",
+    "dist"
+  ],
+  "engines": {
+    "node": ">=14"
   },
-  "homepage": "https://github.com/johannschopplich/kirbyup#readme",
   "scripts": {
-    "build": "tsup src/node/cli.ts src/node/index.ts --clean --dts && npm run build:client",
-    "build:client": "esbuild src/client/plugin.ts --format=esm --outdir=dist/client && tsc src/client/plugin.ts --declaration --emitDeclarationOnly --outDir dist/client",
-    "test": "npm run build && jest",
+    "build": "unbuild",
+    "stub": "unbuild --stub",
+    "test": "vitest",
+    "test:update": "vitest -u",
     "format": "prettier --write \"src/**/*.ts\"",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "release": "node scripts/release.js",
     "prepare": "husky install"
   },
   "dependencies": {
-    "cac": "^6.7.11",
+    "cac": "^6.7.12",
     "chokidar": "^3.5.2",
     "colorette": "^2.0.16",
     "consola": "^2.15.3",
     "pathe": "^0.2.0",
-    "postcss-dir-pseudo-class": "^6.0.0",
-    "postcss-logical": "^5.0.0",
-    "sass": "^1.43.4",
-    "vite": "^2.6.14",
-    "vite-plugin-vue2": "^1.9.0",
+    "postcss": "^8.4.5",
+    "postcss-dir-pseudo-class": "^6.0.2",
+    "postcss-load-config": "^3.1.1",
+    "postcss-logical": "^5.0.2",
+    "sass": "^1.46.0",
+    "unconfig": "^0.2.2",
+    "vite": "^2.7.10",
+    "vite-plugin-vue2": "^1.9.2",
     "vue": "^2.6.14",
     "vue-template-compiler": "^2.6.14"
   },
   "devDependencies": {
+    "@antfu/utils": "^0.4.0",
+    "@types/cross-spawn": "^6.0.2",
     "@types/fs-extra": "^9.0.13",
-    "@types/jest": "^27.0.2",
-    "@types/node": "^16.11.7",
-    "conventional-changelog-cli": "^2.1.1",
-    "execa": "^5.1.1",
+    "@types/node": "^17.0.8",
+    "conventional-changelog-cli": "^2.2.2",
+    "esno": "^0.13.0",
+    "execa": "5.1.1",
     "fast-glob": "^3.2.7",
     "fs-extra": "^10.0.0",
     "husky": "^7.0.4",
-    "jest": "^27.3.1",
-    "prettier": "^2.4.1",
+    "prettier": "^2.5.1",
     "prompts": "^2.4.2",
-    "ts-essentials": "^9.0.0",
-    "ts-jest": "^27.0.7",
-    "tsup": "^5.6.0",
-    "typescript": "^4.4.4"
+    "ts-essentials": "^9.1.2",
+    "typescript": "^4.5.4",
+    "unbuild": "^0.6.7",
+    "vitest": "^0.0.134"
   }
 }