kirbyup 3.1.3 → 3.1.5

package/README.md

@@ -1,53 +1,43 @@
-# kirbyup
+[![kirbyup](./docs/public/og.png)](https://kirbyup.getkirby.com)
 
-> [!TIP]
-> Take a look into Kirby's [pluginkit](https://github.com/getkirby/pluginkit/tree/4-panel) repository for an example setup.
+# kirbyup
 
-The fastest and leanest way to bundle your Kirby Panel plugins. No configuration necessary.
+[![npm version](https://img.shields.io/npm/v/kirbyup?color=a1b858&label=)](https://www.npmjs.com/package/kirbyup)
 
-## Key Features
+The official bundler for Kirby Panel plugins with zero-config usage and built-in HMR.
 
-- 🍂 Lightweight, robust and tested
-- ⚡️ Fast compilation with Vite/esbuild
-- 🔄 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)
+- [✨  Release Notes](https://github.com/johannschopplich/kirbyup/releases)
+- [📖  Read the documentation](https://kirbyup.getkirby.com)
 
-## Get Started Right Away
-
-… With one of the following Panel plugin kits:
+## Key Features
 
-- [`eslint`](./examples/eslint)
-- [`tailwindcss`](./examples/tailwindcss)
+- 🔄 [Hot module replacement](https://kirbyup.getkirby.com/guide/getting-started.html#development)
+- 🎒 PostCSS support
+- 🧭 Add custom path aliases
+- 🔌 Run actions based on environment variables
+- 🦔 [Extends Vite with `kirbyup.config.js`](https://kirbyup.getkirby.com/guide/config-file)
 
-I highly recommend using one of these starters instead of [Kirby's default `pluginkit`](https://github.com/getkirby/pluginkit/tree/4-panel). They provide a better developer experience out of the box.
+## Setup
 
-## Installation
+> [!TIP]
+> [📖 Read the documentation](https://kirbyup.getkirby.com)
 
-If you want to use kirbyup right away, there is no need to install it. Simply call it with `npx`:
+```bash
+# pnpm
+pnpm add -D kirbyup
 
-```json
-{
-  "scripts": {
-    "dev": "npx -y kirbyup serve src/index.js",
-    "build": "npx -y kirbyup src/index.js"
-  }
-}
+# npm
+npm i -D kirbyup
 ```
 
-> [!NOTE]
-> 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.
+## Basic Usage
 
-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
-```
+> [!TIP]
+> [📖 Read the documentation](https://kirbyup.getkirby.com) or skip starting from scratch and pick one of the following starters:
+> - [`eslint`](./examples/eslint)
+> - [`tailwindcss`](./examples/tailwindcss)
 
-Example package configuration:
+Having installed kirbyup, you can add the following scripts as shortcuts to the commands you will use most often:
 
 ```json
 {
@@ -56,197 +46,18 @@ Example package configuration:
     "build": "kirbyup src/index.js"
   },
   "devDependencies": {
-    "kirbyup": "latest"
+    "kirbyup": "^3.1.3"
   }
 }
 ```
 
-Global installation is supported as well, but not recommended.
-
-## Usage
-
-### Development
-
-Start a development server for the Panel plugin:
-
-```bash
-kirbyup serve src/index.js
-```
-
-This creates `./index.dev.mjs`, telling Kirby to load the development version of the plugin from the dev server started by `kirbyup serve`, enhanced by features like hot module replacement and auto-reload.
-
-If you prefer the watch mode to build a development bundle of the final Panel plugin or develop in an older version of Kirby (prior to 3.7.4), run:
-
-```bash
-kirbyup src/index.js --watch
-```
-
-### Production
-
-```bash
-kirbyup src/index.js
-```
-
-The final panel plugin will be bundled, minified, and written into the current directory as `./index.js` and `./index.css`.
-
-## Built-in Features
-
-### PostCSS
-
-If the project contains a valid PostCSS config (any format supported by [postcss-load-config](https://github.com/postcss/postcss-load-config), e.g. `postcss.config.js`), it will be automatically applied to all imported CSS.
-
-If no configuration file is found, kirbyup will apply two PostCSS plugins which the Kirby Panel uses as well to let you embrace the same functionality within your Panel plugins. The following PostCSS transforms are applied by kirbyup:
-
-- [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 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`.
-
-Now, given a deeply nested component, instead of using relative paths when importing like so:
-
-```js
-// Inside deeply nested module
-import someUtility from '../../utils'
-```
-
-You can use the alias:
-
-```js
-import someUtility from '~/utils'
-```
-
-> [!TIP]
-> You can use `@/` as path alias as well.
-
-### Auto-Import Blocks and Fields
-
-If you find yourself in the situation of needing to import multiple **blocks** or **fields** into your Panel plugin, you can use the kirbyup `kirbyup.import` function to ease the process.
-
-Before:
-
-```js
-import Foo from './components/blocks/Foo.vue'
-import Bar from './components/blocks/Bar.vue'
-import Maps from './components/blocks/Maps.vue'
-
-window.panel.plugin('kirbyup/example', {
-  blocks: {
-    foo: Foo,
-    bar: Bar,
-    maps: Maps
-  }
-})
-```
-
-After:
-
-```js
-import { kirbyup } from 'kirbyup/plugin'
-
-window.panel.plugin('kirbyup/example', {
-  blocks: kirbyup.import('./components/blocks/*.vue')
-})
-```
-
-### Env Variables
-
-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`)
-
-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.
-
-#### `.env` Files
-
-kirbyup (thanks to Vite) uses [dotenv](https://github.com/motdotla/dotenv) to load additional environment variables from the `.env` and `.env.local` files in your plugin's root directory.
-
-Loaded env variables are also exposed to your source code via `import.meta.env`.
-
-To prevent accidentally leaking env variables for distribution, only variables prefixed with `KIRBYUP_` or `VITE_` are exposed to your processed code. Take the following file as an example:
-
-```ini
-DB_PASSWORD=foobar
-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 { fileURLToPath } from 'node:url'
-import { resolve } from 'node:path'
-import { defineConfig } from 'kirbyup/config'
-
-const currentDir = fileURLToPath(new URL('.', import.meta.url))
-
-export default defineConfig({
-  alias: {
-    '#plugin/': `${resolve(currentDir, 'src/plugin')}/`
-  },
-  vite: {
-    define: {
-      __PLAYGROUND__: JSON.stringify(process.env.PLAYGROUND)
-    }
-  }
-})
-```
-
-#### `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.
-
-#### `vite`
-
-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
-
-> [!TIP]
-> Inspect all available options with `kirbyup --help` and `kirbyup serve --help`.
-
-### `kirbyup <input>`
-
-##### `--out-dir <dir>`
-
-The output directory to save the processed code into. Defaults to the current working directory.
-
-##### `--watch [path]`
-
-Enables watch mode. If no path is specified, kirbyup watches the folder of the input file. Repeat `--watch` for multiple paths.
-
-### `kirbyup serve <input>`
-
-##### `--port <port>`
-
-The port for the development server to run on. Defaults to `5177`.
-
-##### `--out-dir <dir>`
-
-The output directory where the plugin file read by Kirby is saved. Defaults to the project root.
-
-##### `--watch <path>`
-
-Specifies additional files that should be watched for changes, with changes causing the page to reload. Repeat `--watch` for multiple paths.
-
-> [!NOTE]
-> By default, kirbyup will watch all PHP files (`./**/*.php`) in the plugin directory and reload the page if it detects changes. Using `--watch` to set your own path overrides this setting, so you need to add the PHP glob explicitly if you want to keep the behavior: `--watch ./my/files/* --watch ./**/*.php`
-
-##### `--no-watch`
-
-Disables the default behavior of watching all PHP files for changes.
-
-## Credits
+## 💻 Development
 
-- [Vite](https://vitejs.dev) by Evan You and all of its contributors.
+1. Clone this repository
+2. Enable [Corepack](https://github.com/nodejs/corepack) using `corepack enable`
+3. Install dependencies using `pnpm install`
+4. Run `pnpm run dev:prepare`
+5. Start development server using `pnpm run dev`
 
 ## License
 

package/dist/client/config.d.mts

@@ -1,4 +1,4 @@
-import { U as UserConfig } from '../shared/kirbyup.bcda4592.mjs';
+import { U as UserConfig } from '../shared/kirbyup.DNMktHWN.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.bcda4592.js';
+import { U as UserConfig } from '../shared/kirbyup.DNMktHWN.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.db20dc98.mjs';
+import { n as name, b as build, s as serve, v as version, h as handleError } from '../shared/kirbyup.DKFIHHbk.mjs';
 import 'node:fs';
 import 'node:fs/promises';
 import 'pathe';

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.bcda4592.mjs';
+import { B as BuildOptions, S as ServeOptions } from '../shared/kirbyup.DNMktHWN.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.bcda4592.js';
+import { B as BuildOptions, S as ServeOptions } from '../shared/kirbyup.DNMktHWN.js';
 
 declare function build(options: BuildOptions): Promise<void>;
 declare function serve(options: ServeOptions): Promise<vite.ViteDevServer>;

package/dist/node/index.mjs

@@ -10,7 +10,7 @@ import '@vitejs/plugin-vue2';
 import '@vitejs/plugin-vue2-jsx';
 import 'vite-plugin-full-reload';
 import 'rollup-plugin-external-globals';
-export { b as build, s as serve } from '../shared/kirbyup.db20dc98.mjs';
+export { b as build, s as serve } from '../shared/kirbyup.DKFIHHbk.mjs';
 import 'node:zlib';
 import 'node:util';
 import 'node:buffer';

package/dist/shared/{kirbyup.db20dc98.mjs → kirbyup.DKFIHHbk.mjs}

@@ -21,7 +21,7 @@ import MagicString from 'magic-string';
 import 'node:module';
 
 const name = "kirbyup";
-const version = "3.1.3";
+const version = "3.1.5";
 
 class PrettyError extends Error {
   constructor(message) {
@@ -72,8 +72,7 @@ function loadConfig(cwd = process.cwd()) {
 }
 async function resolvePostCSSConfig(cwd) {
   try {
-    const config = await postcssrc(void 0, void 0, { stopDir: cwd });
-    return config;
+    return await postcssrc(void 0, void 0, { stopDir: cwd });
   } catch (error) {
     if (!error.message.includes("No PostCSS Config found"))
       throw error;
@@ -186,7 +185,7 @@ function kirbyupGlobImportPlugin() {
 async function findup(cwd, match, options = {}) {
   const segments = normalize(cwd).split("/");
   while (segments.length > 0) {
-    const path = segments.join("/");
+    const path = segments.join("/") || "/";
     const result = await match(path);
     if (result || !options.includeParentDirs) {
       return result;
@@ -196,7 +195,11 @@ async function findup(cwd, match, options = {}) {
 }
 
 const packageManagers = [
-  { name: "npm", command: "npm", lockFile: "package-lock.json" },
+  {
+    name: "npm",
+    command: "npm",
+    lockFile: "package-lock.json"
+  },
   {
     name: "pnpm",
     command: "pnpm",
@@ -224,7 +227,7 @@ const packageManagers = [
 ];
 async function detectPackageManager(cwd, options = {}) {
   const detected = await findup(
-    cwd,
+    resolve(cwd || "."),
     async (path) => {
       if (!options.ignorePackageJSON) {
         const packageJSONPath = join(path, "package.json");
@@ -266,6 +269,17 @@ async function detectPackageManager(cwd, options = {}) {
       includeParentDirs: options.includeParentDirs ?? true
     }
   );
+  if (!detected && !options.ignoreArgv) {
+    const scriptArg = process.argv[1];
+    if (scriptArg) {
+      for (const packageManager of packageManagers) {
+        const re = new RegExp(`[/\\\\]\\.?${packageManager.command}`);
+        if (re.test(scriptArg)) {
+          return packageManager;
+        }
+      }
+    }
+  }
   return detected;
 }
 
@@ -420,12 +434,7 @@ async function generate(options) {
       if (l > longest)
         longest = l;
     }
-    for (const {
-      fileName,
-      type,
-      // @ts-expect-error: `code` not available in `OutputAsset`
-      code
-    } of output) {
+    for (const { fileName, type, code } of output) {
       await printFileInfo(
         options.cwd,
         options.outDir,

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "kirbyup",
   "type": "module",
-  "version": "3.1.3",
-  "packageManager": "pnpm@8.15.1",
+  "version": "3.1.5",
+  "packageManager": "pnpm@8.15.4",
   "description": "Zero-config bundler for Kirby Panel plugins",
   "author": {
     "name": "Johann Schopplich",
@@ -61,6 +61,9 @@
   "scripts": {
     "build": "unbuild",
     "dev": "UNBUILD_STUB=true unbuild",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "release": "bumpp --commit --push --tag",
@@ -72,37 +75,37 @@
     "@vitejs/plugin-vue2": "2.2.0",
     "@vitejs/plugin-vue2-jsx": "1.1.0",
     "@vue/compiler-sfc": "^2.7.16",
-    "c12": "^1.6.1",
+    "c12": "^1.10.0",
     "cac": "^6.7.14",
-    "chokidar": "^3.5.3",
+    "chokidar": "^3.6.0",
     "consola": "^3.2.3",
-    "magic-string": "^0.30.5",
+    "magic-string": "^0.30.8",
     "pathe": "^1.1.2",
     "perfect-debounce": "^1.0.0",
-    "postcss": "^8.4.33",
+    "postcss": "^8.4.35",
     "postcss-dir-pseudo-class": "^8.0.1",
-    "postcss-load-config": "^5.0.2",
+    "postcss-load-config": "^5.0.3",
     "postcss-logical": "^7.0.1",
     "rollup-plugin-external-globals": "^0.9.2",
-    "sass": "^1.70.0",
-    "vite": "^5.0.12",
+    "sass": "^1.71.1",
+    "vite": "^5.1.6",
     "vite-plugin-full-reload": "^1.1.0",
     "vue": "^2.7.16"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^2.6.3",
+    "@antfu/eslint-config": "^2.8.0",
     "@types/fs-extra": "^11.0.4",
-    "@types/node": "^20.11.10",
+    "@types/node": "^20.11.25",
     "@types/prompts": "^2.4.9",
-    "bumpp": "^9.3.0",
-    "eslint": "^8.56.0",
+    "bumpp": "^9.4.0",
+    "eslint": "^8.57.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
-    "nypm": "^0.3.6",
-    "simple-git-hooks": "^2.9.0",
+    "nypm": "^0.3.8",
+    "simple-git-hooks": "^2.10.0",
     "typescript": "~5.3.3",
-    "unbuild": "^2.0.0",
-    "vitest": "^1.2.2"
+    "unbuild": "^3.0.0-rc.1",
+    "vitest": "^1.3.1"
   },
   "simple-git-hooks": {
     "commit-msg": "node scripts/verifyCommit.mjs $1"