tutuca 0.15.0 → 1.0.0-beta.2

package/package.json

@@ -1,98 +1,80 @@
 {
-  "name": "tutuca",
-  "version": "0.15.0",
-  "type": "module",
-  "description": "SPA framework with Immer-powered immutable state and virtual DOM",
-  "main": "./dist/tutuca.js",
-  "module": "./dist/tutuca.js",
-  "exports": {
-    ".": "./dist/tutuca.js",
-    "./dev": "./dist/tutuca-dev.js",
-    "./extra": "./dist/tutuca-extra.js",
-    "./cli": "./dist/tutuca-cli.js",
-    "./ext": "./dist/tutuca.ext.js",
-    "./extra-ext": "./dist/tutuca-extra.ext.js",
-    "./dev-ext": "./dist/tutuca-dev.ext.js",
-    "./storybook": "./dist/tutuca-storybook.js",
-    "./components": "./dist/tutuca-components.js",
-    "./immer": "./dist/immer.js",
-    "./chai": "./dist/chai.js",
-    "./package.json": "./package.json"
-  },
-  "bin": {
-    "tutuca": "./dist/tutuca-cli.js"
-  },
-  "scripts": {
-    "clean": "rm -rf dist skill",
-    "dist": "node scripts/dist.js",
-    "dist-ext": "node scripts/dist-ext.js",
-    "dist-all": "npm run dist && npm run dist-ext && npm run smoke",
-    "smoke": "node scripts/smoke.js",
-    "release": "npm run dist-all && npm run sync-docs-storybook && npm run pin-docs-version && npm run build-skill && (npm publish --access public; npm run clean-skill)",
-    "release-dry": "npm run dist-all && npm run sync-docs-storybook && npm run pin-docs-version && npm run build-skill && (npm publish --dry-run; npm run clean-skill)",
-    "sync-docs-storybook": "node scripts/sync-docs-storybook.js",
-    "pin-docs-version": "node scripts/pin-docs-version.js",
-    "build-skill": "node scripts/build-skill.js",
-    "clean-skill": "rm -rf skill",
-    "pretest": "npm run dist && npm run dist-ext",
-    "test": "vitest run",
-    "test-watch": "vitest",
-    "format": "biome format --write",
-    "lint": "biome lint",
-    "lint-fix": "biome lint --write",
-    "fix": "biome check --write",
-    "tutuca": "node tools/tutuca.js",
-    "storybook": "node scripts/serve-storybook.js",
-    "storybook:examples": "node scripts/storybook-examples.js",
-    "stresstest": "node scripts/stresstest.js",
-    "smoke-test": "node tools/tutuca.js lint ./test/todo.js && node tools/tutuca.js render ./test/todo.js && node tools/tutuca.js test ./test/todo.js && node tools/tutuca.js lint ./test/json.js && node tools/tutuca.js render ./test/json.js"
-  },
-  "sideEffects": [
-    "./deps/chai.js"
-  ],
-  "files": [
-    "dist/",
-    "!dist/*.br",
-    "skill"
-  ],
-  "dependencies": {
-    "immer": "^10.2.0",
-    "jsdom": "^28.0.0 || ^29.0.0",
-    "prettier": "^3.0.0"
-  },
-  "peerDependencies": {
-    "chai": "^6.2.2"
-  },
-  "peerDependenciesMeta": {
-    "chai": {
-      "optional": true
-    }
-  },
-  "keywords": [
-    "frontend",
-    "framework",
-    "immer",
-    "virtual-dom"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/marianoguerra/tutuca.git"
-  },
-  "engines": {
-    "node": ">=18"
-  },
-  "author": "Mariano Guerra",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/marianoguerra/tutuca/issues"
-  },
-  "homepage": "https://github.com/marianoguerra/tutuca#readme",
-  "devDependencies": {
-    "@biomejs/biome": "^2.5.1",
-    "chai": "^6.2.2",
-    "esbuild": "^0.28.1",
-    "fast-check": "^4.8.0",
-    "htmlparser2": "^12.0.0",
-    "vitest": "^4.1.10"
-  }
+	"name": "tutuca",
+	"version": "1.0.0-beta.2",
+	"description": "A small framework for web apps in the browser, with typed state, tests, a storybook and pluggable sync",
+	"type": "module",
+	"license": "MIT",
+	"author": "Mariano Guerra",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/marianoguerra/tutuca.git"
+	},
+	"homepage": "https://marianoguerra.github.io/tutuca/",
+	"engines": {
+		"node": ">=20"
+	},
+	"sideEffects": false,
+	"exports": {
+		".": "./src/tutuca.js",
+		"./vdom": "./src/vdom.js",
+		"./dev": "./src/dev/formatters.js",
+		"./lint": "./src/lint/index.js",
+		"./classes": "./src/css/classes.js",
+		"./pbt": "./src/test/pbt.js",
+		"./storybook": "./src/storybook/index.js",
+		"./element": "./src/embed/element.js",
+		"./playground": "./src/playground/index.js",
+		"./history": "./src/history/index.js",
+		"./history/bar": "./src/history/bar.js",
+		"./sync": "./src/sync/index.js",
+		"./sync/remote": "./src/sync/remote.js",
+		"./automerge": "./src/sync/automerge.js",
+		"./package.json": "./package.json"
+	},
+	"files": [
+		"src/",
+		"deps/",
+		"dist/",
+		"README.md",
+		"CHANGELOG.md",
+		"LICENSE"
+	],
+	"scripts": {
+		"test": "node --test test/*/*.test.js",
+		"lint": "biome check .",
+		"fmt": "biome check --write .",
+		"dist": "node scripts/dist.js",
+		"smoke": "node scripts/smoke.js",
+		"prepublishOnly": "npm run lint && npm test && npm run dist && npm run smoke"
+	},
+	"peerDependencies": {
+		"@automerge/automerge": "^3",
+		"fast-check": "^4"
+	},
+	"peerDependenciesMeta": {
+		"fast-check": {
+			"optional": true
+		},
+		"@automerge/automerge": {
+			"optional": true
+		}
+	},
+	"devDependencies": {
+		"@automerge/automerge": "^3.5.0",
+		"@automerge/automerge-repo": "^2.6.0-alpha.3",
+		"@automerge/automerge-repo-network-broadcastchannel": "^2.6.0-alpha.3",
+		"@automerge/automerge-repo-network-websocket": "^2.6.0-alpha.3",
+		"@automerge/automerge-repo-storage-indexeddb": "^2.6.0-alpha.3",
+		"@biomejs/biome": "^2.5.15",
+		"@codemirror/lang-javascript": "^6.2.5",
+		"@codemirror/theme-one-dark": "^6.1.3",
+		"acorn": "^8.19.0",
+		"acorn-walk": "^8.3.5",
+		"codemirror": "^6.0.2",
+		"esbuild": "^0.28.2",
+		"fast-check": "^4.10.2",
+		"immer": "11.1.21",
+		"jsdom": "^30.1.3",
+		"margaui": "^0.5750.1"
+	}
 }

package/src/component.js

@@ -0,0 +1,66 @@
+// Component specs: component() turns options into a ComponentSpec that makes instances.
+import { immerable } from "../deps/immer.js";
+import { DRAG_EVENTS } from "./drag.js";
+import { idSym, NoDefaultError, scopeSym, specSym, toAnswers, toMessages } from "./schema.js";
+import { toExpr } from "./view.js";
+import { Collect } from "./walk.js";
+
+let nextId = 1;
+export class ComponentSpec {
+	constructor({ name, fields, methods, views, on, answers, loops, scopes, provides, invariants }) {
+		this.name = name;
+		this.fields = fields;
+		this.methods = methods;
+		// Copy descriptors, not values, so getters in methods stay getters.
+		this.proto = Object.create(null, Object.getOwnPropertyDescriptors(methods));
+		Object.assign(this.proto, { [immerable]: true, [specSym]: this });
+		this.views = views;
+		this.on = on;
+		this.answers = answers; // ask name -> outcome (ok, error, unhandled) -> its handler.
+		this.loops = loops;
+		this.scopes = scopes;
+		this.provides = provides;
+		this.invariants = invariants; // name → predicate on the instance, checked in dev and tests.
+		const collect = new Collect();
+		for (const key in views) collect.visit(views[key]);
+		this.eventHandlers = collect.eventHandlers;
+		this.eventNames = new Set([...this.eventHandlers.values()].flat().map((h) => h.name));
+		// A drop target needs the drag from its start: the host tracks it.
+		if (this.eventNames.has("drop")) for (const name of DRAG_EVENTS) this.eventNames.add(name);
+	}
+	make(args = {}, scope = null) {
+		const state = Object.create(this.proto);
+		state[idSym] = nextId++;
+		if (scope !== null) state[scopeSym] = scope;
+		for (const key in this.fields) {
+			try {
+				state[key] = this.fields[key].make(args[key], scope, state);
+			} catch (error) {
+				// Prefix the field, so nested failures read as a path: Root.child: Child.item: ...
+				const Wrapped = error instanceof NoDefaultError ? NoDefaultError : Error;
+				throw new Wrapped(`${this.name}.${key}: ${error.message}`, { cause: error });
+			}
+		}
+		return state;
+	}
+}
+const ownEntries = (record) => Object.assign(Object.create(null), record); // no toString &c in entries
+export const component = (opts) => {
+	const { name, fields = {}, methods = {}, view, views = {} } = opts;
+	const sources = view === undefined ? views : { ...views, main: view };
+	const exprs = ownEntries({});
+	for (const key in sources) exprs[key] = toExpr(sources[key]);
+	if (!("main" in exprs)) throw new Error(`Component ${name} has no main view`);
+	return new ComponentSpec({
+		name,
+		fields,
+		methods,
+		views: exprs,
+		on: toMessages(opts.on),
+		answers: toAnswers(opts.answers),
+		loops: ownEntries(opts.loops),
+		scopes: ownEntries(opts.scopes),
+		provides: ownEntries(opts.provides),
+		invariants: ownEntries(opts.invariants),
+	});
+};

package/src/css/classes.js

@@ -0,0 +1,77 @@
+// Class names for CSS compilers that need them listed: the constant ones a view tree holds, and
+// the computed ones as they show up in the DOM.
+import { Walker } from "../tutuca.js";
+
+// Constants are class names only while inside a class attribute.
+class ClassNames extends Walker {
+	inClass = false;
+	constructor(classes) {
+		super();
+		this.classes = classes;
+	}
+	attr(node, name, value) {
+		const outer = this.inClass;
+		this.inClass = name === "class";
+		super.attr(node, name, value);
+		this.inClass = outer;
+	}
+	constant(node) {
+		if (!this.inClass || typeof node.value !== "string") return;
+		for (const c of node.value.split(/\s+/)) if (c) this.classes.add(c);
+	}
+}
+
+// The constant class names in a tree, including every $if branch; classes
+// read from the state are only known at render time.
+export const collectClasses = (tree, classes = new Set()) => {
+	new ClassNames(classes).visit(tree);
+	return classes;
+};
+
+// The class names the components use: the constant ones in views and those loops bind.
+export const classNamesOf = (specs, extra = []) => {
+	const classes = new Set(extra.flatMap((c) => c.split(/\s+/)));
+	for (const spec of specs)
+		for (const name in spec.views) collectClasses(spec.views[name], classes);
+	return [...classes].filter(Boolean);
+};
+
+// Compiles the class names stories render that the static css lacks: views can compute
+// classes in methods and loops, which collectClasses can't see. compile(classes) → css.
+export class ClassCompiler {
+	constructor(compile, known = []) {
+		this.compile = compile;
+		this.seen = new Set(known);
+		this.styles = new Set();
+		this.css = "";
+		this.queued = false;
+	}
+	watch(rootNode, style) {
+		this.styles.add(style);
+		style.textContent = this.css;
+		this.scan(rootNode);
+	}
+	scan(rootNode) {
+		let added = false;
+		for (const el of rootNode.querySelectorAll("[class]")) {
+			for (const c of el.getAttribute("class").split(/\s+/)) {
+				if (c !== "" && !this.seen.has(c)) {
+					this.seen.add(c);
+					added = true;
+				}
+			}
+		}
+		if (added && !this.queued) {
+			this.queued = true;
+			queueMicrotask(() => this.update());
+		}
+	}
+	async update() {
+		this.queued = false;
+		this.css = await this.compile([...this.seen]);
+		for (const style of this.styles) {
+			if (style.isConnected) style.textContent = this.css;
+			else this.styles.delete(style);
+		}
+	}
+}