@human-synthesis/norns-core 0.0.2 → 0.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@human-synthesis/norns-core",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "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,202 @@
 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;
+}
+
+/**
+ * Fuse `var X; X = $rune(...)` patterns (CoffeeScript output) into
+ * `let X = $rune(...)` so Svelte 5 accepts the rune in declaration position.
+ *
+ * Also handles `var X; ({X} = $props())` (destructured props).
+ */
+export function fuseRuneDeclarations(code) {
+	let ast;
+	try {
+		ast = parse(code, { ecmaVersion: 'latest', sourceType: 'module', allowReturnOutsideFunction: true });
+	} catch {
+		return code;
+	}
+
+	const s = new MagicString(code);
+	const fused = new Set();
+	const varStmts = [];
+
+	for (const stmt of ast.body) {
+		if (stmt.type === 'VariableDeclaration' && stmt.kind === 'var') {
+			varStmts.push(stmt);
+			continue;
+		}
+		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;
+		}
+
+		// 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);
+				}
+			}
+			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};`);
+		}
+	}
+
+	return s.toString();
+}
+
+const SCRIPT_TAG = /<script\b([^>]*)>/i;
+const TEMPLATE_TAG = /<template\b([^>]*)>/i;
+
+function hasLangAttr(attrs) {
+	return /\blang\s*=/.test(attrs || '');
+}
 
 /**
- * Norns preprocessor: Svelte with CoffeeScript and Pug enabled by default.
+ * For .norn files: inject lang="coffee" / lang="pug" defaults.
+ * Also auto-wraps top-level non-script/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;
+
+			// 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;
+				for (const b of blocks) {
+					result += '\n' + out.slice(b.start, b.end);
+					cursor = 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 to fuse `var X; X = $state(...)`
+ *   declarations into `let X = $state(...)` so Svelte 5 runes work without
+ *   backtick-embedded JS.
  *
  * @param {import('svelte-preprocess').AutoPreprocessOptions} [options]
- * @returns {import('svelte/compiler').PreprocessorGroup}
  */
 export function nornsPreprocess(options = {}) {
-	return sveltePreprocess({
-		coffeescript: { bare: true },
-		pug: {},
-		...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 },
+			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
 	});