@human-synthesis/norns-core 0.0.2 → 0.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@human-synthesis/norns-core",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Norns core — Svelte with CoffeeScript, Pug, and UnoCSS preconfigured",
   "license": "MIT",
   "author": "Human Synthesis",
@@ -25,7 +25,9 @@
     "vite": "^5.0.0 || ^6.0.0"
   },
   "dependencies": {
+    "acorn": "^8.14.0",
     "coffeescript": "^2.7.0",
+    "magic-string": "^0.30.10",
     "pug": "^3.0.3",
     "svelte-preprocess": "^6.0.3"
   },

package/src/index.js

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

package/src/preprocess.js

@@ -1,15 +1,262 @@
 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;
+}
 
 /**
- * Norns preprocessor: Svelte with CoffeeScript and Pug enabled by default.
+ * 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 function fuseRuneDeclarations(code) {
+	let ast;
+	try {
+		ast = parse(code, {
+			ecmaVersion: 'latest',
+			sourceType: 'module',
+			allowReturnOutsideFunction: true,
+			allowAwaitOutsideFunction: true
+		});
+	} catch {
+		return code;
+	}
+
+	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 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;
+			}
+
+			// 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};`);
+			}
+		}
+
+		// 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;
+				}
+			}
+		}
+		return false;
+	}
+
+	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();
+}
+
+const SCRIPT_TAG = /<script\b([^>]*)>/i;
+const TEMPLATE_TAG = /<template\b([^>]*)>/i;
+
+function hasLangAttr(attrs) {
+	return /\blang\s*=/.test(attrs || '');
+}
+
+/**
+ * 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 {
+		name: 'norns-default-langs',
+		markup({ content, filename }) {
+			if (!filename || !filename.endsWith('.norn')) return null;
+
+			let out = content;
+
+			// 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) {
+					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;
+				}
+			}
+
+			// Inject lang="coffee" on <script> tags missing lang=
+			out = out.replace(SCRIPT_TAG, (full, attrs) =>
+				hasLangAttr(attrs) ? full : `<script lang="coffee"${attrs}>`
+			);
+
+			// Inject lang="pug" on <template> tags missing lang=
+			out = out.replace(TEMPLATE_TAG, (full, attrs) =>
+				hasLangAttr(attrs) ? full : `<template lang="pug"${attrs}>`
+			);
+
+			return { code: out };
+		}
+	};
+}
+
+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 };
+		}
+	};
+}
+
+/**
+ * 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.
  *
  * @param {import('svelte-preprocess').AutoPreprocessOptions} [options]
- * @returns {import('svelte/compiler').PreprocessorGroup}
  */
 export function nornsPreprocess(options = {}) {
-	return sveltePreprocess({
-		coffeescript: { bare: true },
-		pug: {},
-		...options
-	});
+	return [
+		nornDefaultLangs(),
+		sveltePreprocess({
+			coffeescript: { bare: true },
+			pug: {},
+			...options
+		}),
+		nornCoffeeRuneFusion()
+	];
 }

package/src/uno.js

@@ -1,18 +1,33 @@
 import UnoCSS from 'unocss/vite';
-import { presetUno, presetAttributify, presetIcons, presetTypography } from 'unocss';
+import {
+	presetUno,
+	presetAttributify,
+	presetIcons,
+	presetTypography,
+	transformerDirectives,
+	transformerVariantGroup
+} from 'unocss';
 
 /**
  * Norns UnoCSS Vite plugin with a sensible preset stack.
  *
+ * Includes transformerDirectives (so `@apply` works in `<style>` blocks)
+ * and transformerVariantGroup (so `class="hover:(text-blue underline)"`
+ * shorthand works).
+ *
  * 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.
- * Pass `hmrTopLevelAwait: true` if you've verified your stack handles it.
  *
  * @param {import('unocss/vite').VitePluginConfig} [options]
  */
 export function nornsUno(options = {}) {
-	const { presets = [], hmrTopLevelAwait = false, ...rest } = options;
+	const {
+		presets = [],
+		transformers = [],
+		hmrTopLevelAwait = false,
+		...rest
+	} = options;
 	return UnoCSS({
 		presets: [
 			presetUno(),
@@ -21,6 +36,7 @@ export function nornsUno(options = {}) {
 			presetTypography(),
 			...presets
 		],
+		transformers: [transformerDirectives(), transformerVariantGroup(), ...transformers],
 		hmrTopLevelAwait,
 		...rest
 	});