@studiokloek/vite-config 0.13.1 → 0.14.0

package/README.md

@@ -1,16 +1,121 @@
-# vite-config
-Externalize our vitejs config setup, so we can use it in multiple projects. Right now built for internal use, maybe useful for the world later...
+# @studiokloek/vite-config
 
-# Installation
+Shared Vite config and CLI for the Studio Kloek game projects: handlebars pages per game, Svelte, SCSS, legacy
+bundles, image optimisation, web manifests and, when configured, the sprites/sounds pipeline of
+[`@studiokloek/vite-assets-plugin`](https://github.com/studiokloek/vite-assets-plugin).
+
+Built for internal use; it expects our project layout.
+
+## Install
+
+```sh
+pnpm add -D @studiokloek/vite-config
+pnpm approve-builds   # sharp, and ffmpeg-static when you use kloekAssets
 ```
-npm i @studiokloek/vite-config --save-dev
+
+Node 22.19 or newer.
+
+Games import packages that come in through `@studiokloek/ts-core-lib` and this package (pixi, capacitor, howler,
+`vite/client`, …) without declaring them. With pnpm, hoist everything like yarn did, in the game's
+`pnpm-workspace.yaml`:
+
+```yaml
+shamefullyHoist: true
 ```
 
-# Usage
+## Usage
+
+```jsonc
+// package.json
+"scripts": {
+  "development": "kloek-development",
+  "build": "kloek-build --create-zip --base=/games/2025/"
+}
 ```
-npm run kloek-development
-npm run kloek-build --empty-output-dir --base "https://example.com/test" 
+
+`kloek-development [--mode <mode>]` starts the dev server. `kloek-build` builds into `public/`:
+
+| Flag | |
+|---|---|
+| `-b, --base <path>` | base path (default: `vite.build.basePath`) |
+| `-m, --mode <mode>` | Vite mode (default: `production`) |
+| `-l, --log-level <level>` | `info`, `warn`, `error` or `silent` |
+| `-e, --empty-out-dir` | empty `public/` first (default; `--no-empty-out-dir` keeps it) |
+| `-s, --sourcemaps`, `-i, --inline-sourcemaps` | source maps (default: `vite.build.sourceMaps`) |
+| `-z, --create-zip` | zip the build into `zips/` (default: `vite.build.createZip`) |
+
+Flags you leave out take their value from `package.json`.
+
+The same is available from code: `kloekBuild(options)`, `kloekDevelopment(options)` and
+`defineKloekViteConfig(env)` for a `vite.config.ts`.
+
+## Project layout
+
+```
+assets/            source assets for kloekAssets (tagged directories)
+env/               .env files (KLOEK_* and VITE_* are exposed)
+source/            Vite root
+  partials/        handlebars partials; game.hbs renders every game page
+  script/ style/ svelte/
+  static/          public dir, copied as is
+public/            build output
 ```
 
-# Under development
-This module is currently under development and may not be ready for production.
+Every game in `settings.games` becomes a page `<page>.html`, rendered from the partial `game.hbs` with its
+settings as `data`. `development.html` lists every game.
+
+## Configuration
+
+Everything lives in `package.json`. `vite` is validated; an unknown option is an error.
+
+```jsonc
+"settings": {
+  "generic": { "info": { "client": "…" }, "meta": { "title": "…" }, "options": { "backgroundColor": "#000" } },
+  "games": [{ "info": { "id": "verdwaald" }, "meta": { "title": "Verdwaald" } }]
+},
+"vite": {
+  "dev": { "serveParams": "?debug", "https": true, "cors": true, "fullReloadSvelte": true },
+  "build": {
+    "basePath": "/",
+    "legacy": false,
+    "manifest": false,
+    "sourceMaps": false,
+    "createZip": false,
+    "analyzeBundle": false,
+    "imageQuality": { "jpeg": 80, "png": [0.5, 0.7] },
+    "imageExclude": ["sprites", "sounds", "fonts"],
+    "cleanPatterns": []
+  },
+  "dedupe": []
+}
+```
+
+Game settings are merged per section over `generic`. Any extra field is kept and available in the templates.
+
+## Assets
+
+With a `kloekAssets` key in `package.json`, the assets plugin packs the tagged directories under `assets/`
+before the dev server starts and before every build, and repacks on changes while developing. Paths are relative
+to the project, exactly as for the `kloek-assets` CLI, so both share their output and cache:
+
+```jsonc
+"kloekAssets": {
+  "output": { "directory": "source/static" },
+  "scriptDirectory": "source/script",
+  "sounds": { "prefixes": ["sj25"] }
+}
+```
+
+See the [assets plugin](https://github.com/studiokloek/vite-assets-plugin#readme) for the tags and options.
+
+## Development
+
+```sh
+pnpm install
+pnpm lint && pnpm typecheck && pnpm test && pnpm build
+pnpm changeset   # describe your change; merging to main opens the release PR
+```
+
+## License
+
+MIT

package/bin/assets.js

@@ -0,0 +1,8 @@
+#!/usr/bin/env node
+// Doorgifte naar de CLI van de assets-plugin, zodat projecten alleen vite-config als dependency nodig hebben
+import('@studiokloek/vite-assets-plugin/cli')
+  .then(({ run }) => run(process.argv.slice(2)))
+  .catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+  });

package/bin/build.js

@@ -1,62 +1,7 @@
 #!/usr/bin/env node
-import meow from 'meow';
-import {kloekBuild} from '../dist/index.js';
-
-const cli = meow(
-  `
-	Usage
-	  $ kloek-build 
-
-    Options:
-      -b, --base PATH           set the base path
-      
-      Other options:
-      -m, --mode MODE           set the mode in which vite should run
-      -l, --log-level LEVEL     sets the log level for vite (info | warn | error | silent)
-      -e, --empty-out-dir       empty output dir before building
-      -s, --sourcemaps          should we create source maps
-      -i, --inline-sourcemaps   inline source maps
-      -z, --create-zip          create zip file from build
-`,
-  {
-    importMeta: import.meta,
-    flags: {
-      base: {
-        type: 'string',
-        shortFlag: 'b',
-        default: '/',
-      },
-      mode: {
-        type: 'string',
-        shortFlag: 'm',
-      },
-      logLevel: {
-        type: 'string',
-        shortFlag: 'l',
-        default: 'info',
-      },
-      emptyOutDir: {
-        type: 'boolean',
-        shortFlag: 'e',
-        default: true,
-      },
-      sourcemaps: {
-        type: 'boolean',
-        shortFlag: 's',
-        default: false,
-      },
-      inlineSourcemaps: {
-        type: 'boolean',
-        shortFlag: 'i',
-        default: false,
-      },
-      createZip: {
-        type: 'boolean',
-        shortFlag: 'z',
-        default: false,
-      },
-    },
-  },
-);
-
-await kloekBuild(cli.flags);
+import('../dist/cli.js')
+  .then(({ runBuild }) => runBuild(process.argv.slice(2)))
+  .catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+  });

package/bin/development.js

@@ -1,24 +1,7 @@
 #!/usr/bin/env node
-import meow from 'meow';
-import {kloekDevelopment} from '../dist/index.js';
-
-const cli = meow(
-  `
-	Usage
-	  $ kloek-development 
-
-    Options:
-      -m, --mode MODE           set the mode in which vite should run
-`,
-  {
-    importMeta: import.meta,
-    flags: {
-      mode: {
-        type: 'string',
-        shortFlag: 'm',
-      },
-    },
-  },
-);
-
-await kloekDevelopment(cli.flags);
+import('../dist/cli.js')
+  .then(({ runDevelopment }) => runDevelopment(process.argv.slice(2)))
+  .catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+  });

package/dist/cli.d.ts

@@ -0,0 +1,6 @@
+//#region src/cli.d.ts
+/** `kloek-build`; opties die niet meegegeven worden, komen uit package.json#vite. */
+export declare function runBuild(argv: readonly string[]): Promise<number>;
+/** `kloek-development`: start de dev-server. */
+export declare function runDevelopment(argv: readonly string[]): Promise<number>;
+//#endregion

package/dist/cli.js

@@ -0,0 +1,64 @@
+import { a as packageDirectory, n as kloekDevelopment, t as kloekBuild } from "./commands-ujEjJD4C.js";
+import { readFileSync } from "node:fs";
+import { cac } from "cac";
+//#region src/cli.ts
+const LOG_LEVELS = [
+	"info",
+	"warn",
+	"error",
+	"silent"
+];
+function packageVersion() {
+	return JSON.parse(readFileSync(packageDirectory("package.json"), "utf8")).version;
+}
+function logLevelOf(value) {
+	if (value !== void 0 && !LOG_LEVELS.includes(value)) throw new Error(`Unknown log level "${value}"; use ${LOG_LEVELS.join(", ")}`);
+	return value;
+}
+/** Parseert `argv` en draait `action`; geeft de exit-code terug. */
+async function runCli(name, argv, setup) {
+	const cli = cac(name);
+	let exitCode = 0;
+	setup(cli);
+	cli.help();
+	cli.version(packageVersion());
+	try {
+		cli.parse([
+			"node",
+			name,
+			...argv
+		], { run: false });
+		await cli.runMatchedCommand();
+	} catch (error) {
+		console.error(error instanceof Error ? error.message : error);
+		exitCode = 1;
+	}
+	process.exitCode = exitCode;
+	return exitCode;
+}
+/** `kloek-build`; opties die niet meegegeven worden, komen uit package.json#vite. */
+function runBuild(argv) {
+	return runCli("kloek-build", argv, (cli) => {
+		cli.command("", "Build the project into public/").option("-b, --base <path>", "Base path (default: vite.build.basePath)").option("-m, --mode <mode>", "Mode in which Vite runs (default: production)").option("-l, --log-level <level>", "Log level: info, warn, error or silent").option("-e, --empty-out-dir", "Empty the output directory first (default: true; --no-empty-out-dir to keep it)").option("-s, --sourcemaps", "Create source maps (default: vite.build.sourceMaps)").option("-i, --inline-sourcemaps", "Inline the source maps").option("-z, --create-zip", "Create a zip of the build (default: vite.build.createZip)").action(async (flags) => {
+			await kloekBuild({
+				base: flags.base,
+				mode: flags.mode,
+				logLevel: logLevelOf(flags.logLevel),
+				emptyOutDir: flags.emptyOutDir,
+				sourcemaps: flags.sourcemaps,
+				inlineSourcemaps: flags.inlineSourcemaps,
+				createZip: flags.createZip
+			});
+		});
+	});
+}
+/** `kloek-development`: start de dev-server. */
+function runDevelopment(argv) {
+	return runCli("kloek-development", argv, (cli) => {
+		cli.command("", "Start the development server").option("-m, --mode <mode>", "Mode in which Vite runs (default: development)").action(async (flags) => {
+			await kloekDevelopment({ mode: flags.mode });
+		});
+	});
+}
+//#endregion
+export { runBuild, runDevelopment };