@human-synthesis/norns-core 0.0.3 → 0.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@human-synthesis/norns-core",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Norns core — Svelte with CoffeeScript, Pug, and UnoCSS preconfigured",
   "license": "MIT",
   "author": "Human Synthesis",
@@ -25,6 +25,7 @@
     "vite": "^5.0.0 || ^6.0.0"
   },
   "dependencies": {
+    "@unocss/extractor-pug": "^0.65.0 || ^66.0.0",
     "acorn": "^8.14.0",
     "coffeescript": "^2.7.0",
     "magic-string": "^0.30.10",

package/src/preprocess.js

@@ -25,78 +25,142 @@ function isRuneCall(node) {
 }
 
 /**
- * Fuse `var X; X = $rune(...)` patterns (CoffeeScript output) into
- * `let X = $rune(...)` so Svelte 5 accepts the rune in declaration position.
+ * 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).
+ * Also handles `var X; ({X, ...} = $props())` (destructured props).
+ *
+ * Walks function bodies recursively so closures get the same treatment.
  */
 export function fuseRuneDeclarations(code) {
 	let ast;
 	try {
-		ast = parse(code, { ecmaVersion: 'latest', sourceType: 'module', allowReturnOutsideFunction: true });
+		ast = parse(code, {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			allowReturnOutsideFunction: true,
+			allowAwaitOutsideFunction: true
+		});
 	} catch {
 		return code;
 	}
 
 	const s = new MagicString(code);
-	const fused = new Set();
-	const varStmts = [];
+	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 was declared via var earlier in this scope)
+			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 init = code.slice(e.right.start, e.right.end);
+				const keyword = isRuneCall(e.right) ? 'let' : 'let';
+				s.overwrite(stmt.start, stmt.end, `${keyword} ${e.left.name} = ${init};`);
+				continue;
+			}
 
-	for (const stmt of ast.body) {
-		if (stmt.type === 'VariableDeclaration' && stmt.kind === 'var') {
-			varStmts.push(stmt);
-			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};`);
+				}
+			}
 		}
-		if (stmt.type !== 'ExpressionStatement') continue;
-		const e = stmt.expression;
-
-		// Pattern: X = $rune(...)
-		if (
-			e.type === 'AssignmentExpression' &&
-			e.operator === '=' &&
-			e.left.type === 'Identifier' &&
-			isRuneCall(e.right)
-		) {
-			fused.add(e.left.name);
-			const init = code.slice(e.right.start, e.right.end);
-			s.overwrite(stmt.start, stmt.end, `let ${e.left.name} = ${init};`);
-			continue;
+
+		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};`);
+			}
 		}
 
-		// Pattern: ({X, Y} = $props())  →  let {X, Y} = $props()
-		if (
-			e.type === 'AssignmentExpression' &&
-			e.operator === '=' &&
-			e.left.type === 'ObjectPattern' &&
-			isRuneCall(e.right)
-		) {
-			for (const prop of e.left.properties) {
-				if (prop.type === 'Property' && prop.value.type === 'Identifier') {
-					fused.add(prop.value.name);
-				} else if (prop.type === 'RestElement' && prop.argument.type === 'Identifier') {
-					fused.add(prop.argument.name);
+		// Recurse into nested function bodies (closures)
+		for (const stmt of body) {
+			recurseInto(stmt);
+		}
+	}
+
+	function recurseInto(node) {
+		if (!node || typeof node !== 'object') return;
+		if (Array.isArray(node)) {
+			node.forEach(recurseInto);
+			return;
+		}
+		if (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
+			if (node.body && node.body.type === 'BlockStatement') {
+				walkBody(node.body.body);
+				return;
+			}
+		}
+		for (const key of Object.keys(node)) {
+			if (key === 'parent' || key === 'loc' || key === 'range') continue;
+			recurseInto(node[key]);
+		}
+	}
+
+	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;
 				}
 			}
-			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};`);
 		}
+		return false;
 	}
 
-	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};`);
+	function collectPatternNames(pat) {
+		const names = [];
+		if (pat.type === 'ObjectPattern') {
+			for (const prop of pat.properties) {
+				if (prop.type === 'Property' && prop.value.type === 'Identifier') names.push(prop.value.name);
+				else if (prop.type === 'RestElement' && prop.argument.type === 'Identifier')
+					names.push(prop.argument.name);
+			}
 		}
+		return names;
 	}
 
 	return s.toString();
@@ -110,8 +174,9 @@ function hasLangAttr(attrs) {
 }
 
 /**
- * For .norn files: inject lang="coffee" / lang="pug" defaults.
- * Also auto-wraps top-level non-script/style content in <template lang="pug">.
+ * For .norn files: inject lang="coffee" / lang="pug" defaults on
+ * <script> and <template> blocks, and auto-wrap any top-level non-script /
+ * non-style content in <template lang="pug">.
  */
 function nornDefaultLangs() {
 	return {
@@ -121,32 +186,29 @@ function nornDefaultLangs() {
 
 			let out = content;
 
-			// Strip <script> + <style> blocks to find "outside" content
-			const blocks = [];
-			const blockRe = /<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi;
-			let m;
-			while ((m = blockRe.exec(out)) !== null) {
-				blocks.push({ start: m.index, end: m.index + m[0].length });
-			}
-			let outside = '';
-			let pos = 0;
-			for (const b of blocks) {
-				outside += out.slice(pos, b.start);
-				pos = b.end;
-			}
-			outside += out.slice(pos);
-
-			// If no <template> exists and there's content outside script/style,
-			// wrap that content in a <template lang="pug"> block.
-			if (!TEMPLATE_TAG.test(content) && outside.trim()) {
-				const trimmed = outside.trim();
-				let result = `<template lang="pug">\n${trimmed}\n</template>\n`;
-				let cursor = 0;
+			// If no <template> exists, scan for script/style blocks and wrap the rest.
+			if (!TEMPLATE_TAG.test(content)) {
+				const blocks = [];
+				const blockRe = /<(script|style)\b[^>]*>[\s\S]*?<\/\1>/gi;
+				let m;
+				while ((m = blockRe.exec(out)) !== null) {
+					blocks.push({ start: m.index, end: m.index + m[0].length });
+				}
+				let outside = '';
+				let pos = 0;
 				for (const b of blocks) {
-					result += '\n' + out.slice(b.start, b.end);
-					cursor = b.end;
+					outside += out.slice(pos, b.start);
+					pos = b.end;
+				}
+				outside += out.slice(pos);
+
+				if (outside.trim()) {
+					let result = `<template lang="pug">\n${outside.trim()}\n</template>\n`;
+					for (const b of blocks) {
+						result += '\n' + out.slice(b.start, b.end);
+					}
+					out = result;
 				}
-				out = result;
 			}
 
 			// Inject lang="coffee" on <script> tags missing lang=
@@ -181,16 +243,14 @@ function nornCoffeeRuneFusion() {
  * - `.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 to fuse `var X; X = $state(...)`
- *   declarations into `let X = $state(...)` so Svelte 5 runes work without
- *   backtick-embedded JS.
+ * - 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.
  *
  * @param {import('svelte-preprocess').AutoPreprocessOptions} [options]
  */
 export function nornsPreprocess(options = {}) {
 	return [
-		// Order matters: norn defaults run first, then svelte-preprocess
-		// compiles Coffee/Pug, then we fuse rune declarations in the JS output.
 		nornDefaultLangs(),
 		sveltePreprocess({
 			coffeescript: { bare: true },

package/src/uno.js

@@ -7,17 +7,30 @@ import {
 	transformerDirectives,
 	transformerVariantGroup
 } from 'unocss';
+import extractorPug from '@unocss/extractor-pug';
+
+const NORN_PIPELINE = [
+	/\.(vue|svelte|[jt]sx|mdx?|astro|elm|php|phtml|html)($|\?)/,
+	/\.(norn|coffee)($|\?)/
+];
 
 /**
- * Norns UnoCSS Vite plugin with a sensible preset stack.
+ * Norns UnoCSS Vite plugin.
  *
- * Includes transformerDirectives (so `@apply` works in `<style>` blocks)
- * and transformerVariantGroup (so `class="hover:(text-blue underline)"`
- * shorthand works).
+ * Defaults baked in for the Norns stack:
+ * - presets: Uno + Attributify + Icons + Typography
+ * - transformers: Directives (`@apply`) + VariantGroup
+ * - extractor: extractor-pug, so Pug class shorthand inside `.svelte` and
+ *   `.norn` files is recognized
+ * - content pipeline includes `.norn` and `.coffee`
+ * - hmrTopLevelAwait: false to avoid a TDZ error in WebKit/Safari when
+ *   `virtual:uno.css` is imported from a SvelteKit route module
  *
- * Defaults `hmrTopLevelAwait: false` to avoid a TDZ
- * "Cannot access 'component' before initialization" error in WebKit/Safari
- * when importing 'virtual:uno.css' from a SvelteKit layout/page module.
+ * **Naming caveat for shortcuts:** avoid names starting with a CSS
+ * pseudo-class prefix (`hover-`, `focus-`, `link-`, `active-`, `visited-`,
+ * `disabled-`, `checked-`, etc.) — UnoCSS parses those as variant + utility,
+ * not as a shortcut name. Use `nav-link`, `lk-muted`, etc. instead of
+ * `link-muted`.
  *
  * @param {import('unocss/vite').VitePluginConfig} [options]
  */
@@ -25,6 +38,8 @@ export function nornsUno(options = {}) {
 	const {
 		presets = [],
 		transformers = [],
+		extractors = [],
+		content = {},
 		hmrTopLevelAwait = false,
 		...rest
 	} = options;
@@ -37,6 +52,14 @@ export function nornsUno(options = {}) {
 			...presets
 		],
 		transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
+		extractors: [extractorPug(), ...extractors],
+		content: {
+			pipeline: {
+				include: NORN_PIPELINE,
+				...(content.pipeline ?? {})
+			},
+			...content
+		},
 		hmrTopLevelAwait,
 		...rest
 	});