@human-synthesis/norns-core 0.0.6 → 0.0.8

package/README.md

@@ -2,13 +2,13 @@
 
 **AI-driven software architecture and development framework, based on Svelte.**
 
-Svelte preprocessor for the Norns stack: Pug + CoffeeScript in `.n` files, with the small set of fixes needed to make Svelte 5 runes feel native in Coffee.
+Svelte preprocessor for the Norns stack: **Pug + Civet** in `.n` files. The `.c` extension is recognised as an alias for `.civet` — both compile through Civet.
 
 ## Stack
 
 - [Svelte 5](https://svelte.dev) — components and runes
 - [Pug](https://pugjs.org) — templates
-- [CoffeeScript 2](https://coffeescript.org) — script
+- [Civet](https://civet.dev) — script (TypeScript-flavored, indented)
 - [Vite](https://vitejs.dev) — bundler
 - [bun](https://bun.sh) — runtime / package manager
 
@@ -18,7 +18,7 @@ Svelte preprocessor for the Norns stack: Pug + CoffeeScript in `.n` files, with
 bun add -D @human-synthesis/norns-core svelte
 ```
 
-Most users want the umbrella package [`@human-synthesis/norns`](https://github.com/human-synthesis/norns) instead.
+Most users want the umbrella package [`@human-synthesis/norns`](https://github.com/human-synthesis/norns) instead — it adds the SvelteKit config, the Vite plugin, and the runtime layer.
 
 ## Usage
 
@@ -33,6 +33,18 @@ export default {
 };
 ```
 
+## What it does
+
+- `.n` files default `<script>` to `lang="civet"` and `<template>` to `lang="pug"` — write neither attribute and it just works.
+- `<script lang="civet">` blocks are compiled to JavaScript via [@danielx/civet](https://civet.dev) before svelte-preprocess sees them.
+- Top-level Pug-only content is auto-wrapped in `<template lang="pug">` so you don't need the wrapper boilerplate.
+- Pug class shorthand is rewritten so Tailwind variants (`.hover:bg-X`) and fractional values (`.gap-2.5`) work without escaping.
+- `+if` / `+elseif` / `+else` chains are rewritten to Svelte block syntax (`{#if}/{:else if}/{:else}/{/if}`).
+
+## Auto-imports — see the umbrella
+
+The auto-import layer (helpers, components, project utilities, UI library presets) lives in [`@human-synthesis/norns`](https://github.com/human-synthesis/norns), not here. `norns-core` is the syntax preprocessor only — the import resolver needs Vite-plugin hooks the umbrella provides.
+
 ## License
 
 MIT © Daniel Teodoroiu / [Human Synthesis](https://humansynthesis.ai). Built on top of [Svelte](https://github.com/sveltejs/svelte) © Svelte Contributors, MIT licensed.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@human-synthesis/norns-core",
-  "version": "0.0.6",
-  "description": "Norns core — Svelte preprocessor for CoffeeScript, Pug, and .n files",
+  "version": "0.0.8",
+  "description": "Norns core — Svelte preprocessor for Civet, Pug, and .n files",
   "license": "MIT",
   "author": "Daniel Teodoroiu (https://humansynthesis.ai)",
   "type": "module",
@@ -25,9 +25,7 @@
     "svelte": "^5.0.0"
   },
   "dependencies": {
-    "acorn": "^8.14.0",
-    "coffeescript": "^2.7.0",
-    "magic-string": "^0.30.10",
+    "@danielx/civet": "^0.11.0",
     "pug": "^3.0.3",
     "svelte-preprocess": "^6.0.3"
   },

package/src/index.js

@@ -1 +1 @@
-export { nornsPreprocess, fuseRuneDeclarations } from './preprocess.js';
+export { nornsPreprocess } from './preprocess.js';

package/src/preprocess.js

@@ -1,197 +1,8 @@
 import { sveltePreprocess } from 'svelte-preprocess';
-import { parse } from 'acorn';
-import MagicString from 'magic-string';
-
-const RUNES = new Set([
-	'$state',
-	'$state.raw',
-	'$derived',
-	'$derived.by',
-	'$effect',
-	'$effect.pre',
-	'$effect.root',
-	'$props',
-	'$bindable'
-]);
-
-function isRuneCall(node) {
-	if (!node || node.type !== 'CallExpression') return false;
-	const c = node.callee;
-	if (c.type === 'Identifier') return RUNES.has(c.name);
-	if (c.type === 'MemberExpression' && c.object.type === 'Identifier') {
-		return RUNES.has(`${c.object.name}.${c.property.name}`);
-	}
-	return false;
-}
+import { compile as compileCivet } from '@danielx/civet';
 
-/**
- * Fuse `var X; X = expr` patterns (CoffeeScript output) into `let X = expr`,
- * so Svelte 5 accepts runes in declaration position and doesn't warn about
- * non-state variables being "updated".
- *
- * Also handles `var X; ({X, ...} = $props())` (destructured props).
- *
- * Walks function bodies recursively so closures get the same treatment.
- */
-export { transformIfChains, rewritePugClasses };
-
-export function fuseRuneDeclarations(code) {
-	let ast;
-	try {
-		ast = parse(code, {
-			ecmaVersion: 'latest',
-			sourceType: 'module',
-			allowReturnOutsideFunction: true,
-			allowAwaitOutsideFunction: true
-		});
-	} catch {
-		return code;
-	}
+export { transformIfChains, transformSnippets, rewritePugClasses };
 
-	const s = new MagicString(code);
-	walkBody(ast.body);
-
-	function walkBody(body) {
-		const fused = new Set();
-		const varStmts = [];
-		const claimed = new Set();
-
-		for (let i = 0; i < body.length; i++) {
-			const stmt = body[i];
-
-			if (stmt.type === 'VariableDeclaration' && stmt.kind === 'var') {
-				varStmts.push(stmt);
-				continue;
-			}
-			if (stmt.type !== 'ExpressionStatement') continue;
-			const e = stmt.expression;
-
-			// Pattern: X = expr  (where X is var-declared earlier in this scope).
-			// We fuse to `let X = expr` for any expression. Coffee always emits
-			// `var X; X = ...` for top-level assignments, and Svelte 5 reports
-			// `non_reactive_update` warnings for any `var` that's reassigned —
-			// even if the user only wrote a single function declaration. We
-			// limit to TOP LEVEL only (no recursion into nested function bodies)
-			// to avoid MagicString chunk conflicts.
-			//
-			// Special-case: `$derived(IIFE())` — Coffee compiles `$derived do ->`
-			// to `$derived((function(){...})())`, which evaluates ONCE at
-			// definition time instead of reactively. Rewrite to `$derived.by(fn)`.
-			if (
-				e.type === 'AssignmentExpression' &&
-				e.operator === '=' &&
-				e.left.type === 'Identifier' &&
-				isVarDeclared(varStmts, e.left.name) &&
-				!claimed.has(e.left.name)
-			) {
-				claimed.add(e.left.name);
-				fused.add(e.left.name);
-
-				const rewrite = rewriteDerivedIIFE(e.right, code);
-				if (rewrite) {
-					s.overwrite(
-						stmt.start,
-						stmt.end,
-						`let ${e.left.name} = $derived.by(${rewrite});`
-					);
-				} else {
-					s.appendLeft(stmt.start, 'let ');
-				}
-				continue;
-			}
-
-			// Pattern: ({X, Y} = $props())  →  let {X, Y} = $props()
-			if (
-				e.type === 'AssignmentExpression' &&
-				e.operator === '=' &&
-				e.left.type === 'ObjectPattern' &&
-				isRuneCall(e.right)
-			) {
-				const names = collectPatternNames(e.left);
-				if (names.every((n) => isVarDeclared(varStmts, n) && !claimed.has(n))) {
-					for (const n of names) {
-						claimed.add(n);
-						fused.add(n);
-					}
-					const lhs = code.slice(e.left.start, e.left.end);
-					const rhs = code.slice(e.right.start, e.right.end);
-					s.overwrite(stmt.start, stmt.end, `let ${lhs} = ${rhs};`);
-				}
-			}
-		}
-
-		for (const stmt of varStmts) {
-			const remaining = stmt.declarations.filter(
-				(d) => !(d.id.type === 'Identifier' && fused.has(d.id.name))
-			);
-			if (remaining.length === 0) {
-				s.remove(stmt.start, stmt.end);
-			} else if (remaining.length < stmt.declarations.length) {
-				const rebuilt = remaining
-					.map((d) =>
-						d.init ? `${d.id.name} = ${code.slice(d.init.start, d.init.end)}` : d.id.name
-					)
-					.join(', ');
-				s.overwrite(stmt.start, stmt.end, `var ${rebuilt};`);
-			}
-		}
-
-		// Note: we deliberately do NOT recurse into nested function bodies.
-		// Svelte runes ($state, $derived, etc.) only apply at component
-		// top-level. Inner function bodies (event handlers, callbacks) have
-		// `var X; X = ...` patterns from CoffeeScript output too, but they
-		// don't trigger Svelte warnings and don't need fusion. Recursing
-		// also creates MagicString chunk conflicts when an outer assignment
-		// is being modified at the same time as something inside its body.
-	}
-
-	function isVarDeclared(varStmts, name) {
-		for (const stmt of varStmts) {
-			for (const d of stmt.declarations) {
-				if (d.id.type === 'Identifier' && d.id.name === name && !d.init) {
-					return true;
-				}
-			}
-		}
-		return false;
-	}
-
-	/**
-	 * If `node` is `$derived((function(){...})())` (the result of Coffee's
-	 * `$derived do ->`), return the source text of the inner FunctionExpression
-	 * so the caller can rewrite to `$derived.by(<fn>)`. Otherwise null.
-	 */
-	function rewriteDerivedIIFE(node, src) {
-		if (!node || node.type !== 'CallExpression') return null;
-		if (node.callee.type !== 'Identifier' || node.callee.name !== '$derived') return null;
-		if (node.arguments.length !== 1) return null;
-		const arg = node.arguments[0];
-		if (arg.type !== 'CallExpression') return null;
-		if (arg.arguments.length !== 0) return null;
-		const fn = arg.callee;
-		if (fn.type !== 'FunctionExpression' && fn.type !== 'ArrowFunctionExpression') return null;
-		return src.slice(fn.start, fn.end);
-	}
-
-	function collectPatternNames(pat) {
-		const names = [];
-		if (pat.type === 'ObjectPattern') {
-			for (const prop of pat.properties) {
-				if (prop.type === 'Property') {
-					let v = prop.value;
-					// Unwrap default value: `{ x = 1 }` has Property → AssignmentPattern → Identifier
-					if (v.type === 'AssignmentPattern') v = v.left;
-					if (v.type === 'Identifier') names.push(v.name);
-				} else if (prop.type === 'RestElement' && prop.argument.type === 'Identifier') {
-					names.push(prop.argument.name);
-				}
-			}
-		}
-		return names;
-	}
-
-	return s.toString();
-}
 
 const SCRIPT_TAG = /<script\b([^>]*)>/i;
 const TEMPLATE_TAG = /<template\b([^>]*)>/i;
@@ -201,7 +12,7 @@ function hasLangAttr(attrs) {
 }
 
 /**
- * For .norn files: inject lang="coffee" / lang="pug" defaults on
+ * For .norn files: inject lang="civet" / lang="pug" defaults on
  * <script> and <template> blocks, and auto-wrap any top-level non-script /
  * non-style content in <template lang="pug">.
  */
@@ -226,6 +37,12 @@ const IF_RE = /^(\s*)\+if\s*\((.+)\)\s*$/;
 const ELSEIF_RE_TPL = (ind) => new RegExp(`^${escapeRegex(ind)}\\+elseif\\s*\\((.+)\\)\\s*$`);
 const ELSE_RE_TPL = (ind) => new RegExp(`^${escapeRegex(ind)}\\+else\\s*$`);
 
+// `+snippet('name')` or `+snippet('name', arg1, arg2)`. Lazy match with `$`
+// anchor lets the args list contain parens (e.g. `+snippet('row', fn(a))`)
+// because the engine extends the lazy capture only until the outer `)` lands
+// at end-of-line.
+const SNIPPET_RE = /^(\s*)\+snippet\s*\(\s*['"](\w+)['"](?:\s*,\s*([\s\S]+?))?\s*\)\s*$/;
+
 function escapeRegex(s) {
 	return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
@@ -492,6 +309,78 @@ function transformIfChains(content) {
 	return out.join('\n');
 }
 
+/**
+ * Rewrite Pug `+snippet('name', args…)` blocks to Svelte 5 `{#snippet name(args)}`
+ * via Pug `|` text emit. Recurses into the body so nested snippets work
+ * (`Tabs > +snippet('item', tab) > Card > +snippet('header')`).
+ *
+ * Input:
+ *   +snippet('header')
+ *     h2 Title
+ *
+ *   +snippet('row', user, idx)
+ *     .row Hello {user.name} {idx}
+ *
+ * Output:
+ *   | {#snippet header()}
+ *   h2 Title
+ *   | {/snippet}
+ *
+ *   | {#snippet row(user, idx)}
+ *   .row Hello {user.name} {idx}
+ *   | {/snippet}
+ */
+function transformSnippets(content) {
+	const lines = content.split('\n');
+	const out = [];
+	let i = 0;
+
+	while (i < lines.length) {
+		const m = lines[i].match(SNIPPET_RE);
+		if (!m) {
+			out.push(lines[i]);
+			i++;
+			continue;
+		}
+
+		const indent = m[1];
+		const name = m[2];
+		const args = m[3] ? m[3].trim() : '';
+		const indentDiff = detectIndentDiff(lines, i + 1, indent);
+
+		out.push(`${indent}| {#snippet ${name}(${args})}`);
+		i++;
+
+		// Collect body lines (more indented than the +snippet header) and
+		// process them recursively so nested +snippet blocks resolve.
+		/** @type {string[]} */
+		const body = [];
+		while (i < lines.length) {
+			const cur = lines[i];
+
+			if (cur.trim() === '') {
+				body.push(cur);
+				i++;
+				continue;
+			}
+
+			const lineIndent = cur.match(/^(\s*)/)[1];
+			if (lineIndent.length > indent.length) {
+				body.push(cur.startsWith(indentDiff) ? cur.slice(indentDiff.length) : cur);
+				i++;
+				continue;
+			}
+
+			break;
+		}
+
+		if (body.length > 0) out.push(transformSnippets(body.join('\n')));
+		out.push(`${indent}| {/snippet}`);
+	}
+
+	return out.join('\n');
+}
+
 function nornDefaultLangs() {
 	return {
 		name: 'norns-default-langs',
@@ -500,6 +389,7 @@ function nornDefaultLangs() {
 
 			let out = autoCloseTrailingBlock(content);
 			out = transformIfChains(out);
+			out = transformSnippets(out);
 			out = rewritePugClasses(out);
 
 			// If no <template> exists, scan for script/style blocks and wrap the rest.
@@ -527,9 +417,9 @@ function nornDefaultLangs() {
 				}
 			}
 
-			// Inject lang="coffee" on <script> tags missing lang=
+			// Inject lang="civet" on <script> tags missing lang=
 			out = out.replace(SCRIPT_TAG, (full, attrs) =>
-				hasLangAttr(attrs) ? full : `<script lang="coffee"${attrs}>`
+				hasLangAttr(attrs) ? full : `<script lang="civet"${attrs}>`
 			);
 
 			// Inject lang="pug" on <template> tags missing lang=
@@ -542,88 +432,61 @@ function nornDefaultLangs() {
 	};
 }
 
-function nornCoffeeRuneFusion() {
-	return {
-		name: 'norns-coffee-rune-fusion',
-		script({ content, attributes }) {
-			if (attributes.lang !== 'coffee' && attributes.lang !== 'coffeescript') return null;
-			const code = fuseRuneDeclarations(content);
-			return code === content ? null : { code };
-		}
-	};
-}
-
 /**
- * Lift `import` statements to the top of a JS module.
+ * Compile `<script lang="civet">` blocks to JavaScript via Civet.
  *
- * CoffeeScript 2 hoists all variables to a single `var x, y, z;` line at the
- * very top of the file, then emits `import` statements *after* it. JS modules
- * require imports above all other top-level statements, and svelte-preprocess
- * + Svelte's MagicString-based pipeline don't handle this gracefully when
- * there are also nested var/assignment patterns inside script function bodies.
+ * Runs before svelte-preprocess so that downstream stages see plain JS.
+ * Civet emits source maps; we forward them so devtools can resolve back to
+ * the original `.civet` source.
  *
- * This pass parses the JS, finds all `ImportDeclaration` nodes, and rewrites
- * them in source order at the very top of the module.
+ * Civet's emit characteristics (verified May 2026, civet@0.11):
+ *   - `count .= $state 0`           → `let count = $state(0)`
+ *   - `count := $state 0`           → `const count = $state(0)`
+ *   - `{ a, b = 0 } := $props()`    → `const { a, b = 0 } = $props()`
+ *   - imports stay where written; if user writes them at top, output is fine
  */
-export function liftImports(code) {
-	let ast;
-	try {
-		ast = parse(code, {
-			ecmaVersion: 'latest',
-			sourceType: 'module',
-			allowReturnOutsideFunction: true,
-			allowAwaitOutsideFunction: true
-		});
-	} catch {
-		return code;
-	}
-
-	const imports = ast.body.filter((s) => s.type === 'ImportDeclaration');
-	if (imports.length === 0) return code;
-
-	const firstNonImportIdx = ast.body.findIndex((s) => s.type !== 'ImportDeclaration');
-	if (firstNonImportIdx === -1) return code; // already all imports
-
-	const lateImports = imports.filter((i) => ast.body.indexOf(i) > firstNonImportIdx);
-	if (lateImports.length === 0) return code; // already in the right order
-
-	const s = new MagicString(code);
-	const importTexts = imports.map((i) => code.slice(i.start, i.end));
-	for (const i of imports) {
-		s.remove(i.start, i.end);
-	}
-	s.prependLeft(0, importTexts.join('\n') + '\n');
-	return s.toString();
-}
-
-function nornsCoffeeImportLift() {
+function nornsCivetScript() {
 	return {
-		name: 'norns-coffee-import-lift',
-		script({ content, attributes }) {
-			if (attributes.lang !== 'coffee' && attributes.lang !== 'coffeescript') return null;
-			const code = liftImports(content);
-			return code === content ? null : { code };
+		name: 'norns-civet-script',
+		async script({ content, attributes, filename }) {
+			if (attributes.lang !== 'civet' && attributes.lang !== 'cv') return null;
+			const result = await compileCivet(content, {
+				js: true,
+				sourceMap: true,
+				filename: filename ?? 'unknown'
+			});
+			// Drop the `lang` attribute so svelte-preprocess doesn't try to load
+			// a `./transformers/civet` module — at this point the script body is
+			// already plain JS, no further script-level transform needed.
+			const { lang: _drop, ...nextAttrs } = attributes;
+			return {
+				code: result.code,
+				map: result.sourceMap?.json?.(filename ?? 'unknown') ?? null,
+				attributes: nextAttrs
+			};
 		}
 	};
 }
 
+
 /**
  * Norns preprocessor stack.
  *
- * - `.norn` files default `<script>` to CoffeeScript and `<template>` to Pug
- *   (and auto-wrap top-level content in `<template lang="pug">` if no
- *   template block is present).
- * - CoffeeScript output is post-processed: `var X; X = expr` patterns become
- *   `let X = expr` so Svelte 5 runes work without backtick-embedded JS and
- *   normal variables/functions don't trigger non-reactive warnings.
+ * - `.norn` files default `<script>` to Civet and `<template>` to Pug (and
+ *   auto-wrap top-level content in `<template lang="pug">` if no template
+ *   block is present).
+ * - `<script lang="civet">` blocks are compiled to JS via @danielx/civet
+ *   before svelte-preprocess sees them. Civet emits ESM-correct
+ *   `let count = $state(0)` directly, so no rune-fusion or import-lift
+ *   passes are needed.
  *
  * @param {import('svelte-preprocess').AutoPreprocessOptions} [options]
  */
 export function nornsPreprocess(options = {}) {
 	return [
 		nornDefaultLangs(),
+		nornsCivetScript(),
 		sveltePreprocess({
-			coffeescript: { bare: true },
 			pug: {},
 			typescript: {
 				compilerOptions: {
@@ -639,8 +502,6 @@ export function nornsPreprocess(options = {}) {
 				}
 			},
 			...options
-		}),
-		nornsCoffeeImportLift(),
-		nornCoffeeRuneFusion()
+		})
 	];
 }