wrec 0.40.2 → 0.42.0

package/README.md

@@ -72,11 +72,11 @@ Here are the steps:
    "Prettier" to add syntax highlighting and format the CSS and HTML strings.
 
    ```js
-   import {css, html, Wrec} from 'wrec';
+   import { css, html, Wrec } from "wrec";
 
    class MyCounter extends Wrec {
      static properties = {
-       count: {type: Number}
+       count: { type: Number },
      };
 
      static css = css`
@@ -95,13 +95,7 @@ Here are the steps:
 
      static html = html`
        <div>
-         <button
-           onClick="this.count--"
-           type="button"
-           disabled="this.count === 0"
-         >
-           -
-         </button>
+         <button onClick="this.count--" type="button" disabled="this.count === 0">-</button>
          <span>this.count</span>
          <button onClick="this.count++" type="button">+</button>
          <span>(this.count < 10 ? "single" : "multi") + "-digit"</span>
@@ -109,7 +103,7 @@ Here are the steps:
      `;
    }
 
-   MyCounter.define('my-counter');
+   MyCounter.define("my-counter");
    ```
 
 Property definitions can also constrain string values to an allowed set:
@@ -119,9 +113,9 @@ class TrafficLight extends Wrec {
   static properties = {
     color: {
       type: String,
-      values: ['red', 'yellow', 'green'],
-      value: 'red'
-    }
+      values: ["red", "yellow", "green"],
+      value: "red",
+    },
   };
 }
 ```
@@ -245,10 +239,10 @@ to share state across multiple wrec components.
   in the DevTools console as follows:
 
   ```js
-  state = WrecState.get('demo');
+  state = WrecState.get("demo");
   state; // to examine the entire object
   state.name; // to see current value of "name" property
-  state.name = 'Earth'; // to modify "name" property
+  state.name = "Earth"; // to modify "name" property
   ```
 
 `traffic-light.html` demonstrates a property with an enumerated value.

package/dist/{wrec-DHGadgxK.js → wrec-RkviIlbF.js}

@@ -514,7 +514,7 @@ var $ = class e extends O {
 		this.#R(t, n);
 	}
 	async connectedCallback() {
-		this.#X(), this.#h(), await this.#p(), this.hasAttribute("disabled") && this.#v(), this.#te(this.shadowRoot), this.#M(this.shadowRoot), this.#Y(), this.#m(), this.ready();
+		this.#X(), this.#h(), await this.#p(), this.hasAttribute("disabled") && this.#v(), this.#ne(this.shadowRoot), this.#M(this.shadowRoot), this.#Y(), this.#m(), this.ready();
 	}
 	#m() {
 		let { properties: e } = this.#n;
@@ -541,8 +541,8 @@ var $ = class e extends O {
 			set(e) {
 				n.computed && !this.#t.has(t) && this.#V(null, t, "is a computed property and cannot be set directly"), s === Number && typeof e == "string" && (e = Y(e));
 				let r = this.#T(u);
-				if (e === r) return;
-				this.#$(t, s, e), e = this.#j(t, s, e), this.#R(u, e);
+				if (e === r || (this.#$(t, s, e), n.validate && !this.#ee(t, n, e))) return;
+				e = this.#j(t, s, e), this.#R(u, e);
 				let a = this.#l.get(t);
 				a && l(a.state, a.stateProp, e), this.#G(t, s, e, i), this.#e || (this.#K(t), this.#P(t)), this.#J(t, e);
 				let o = this.#i[t];
@@ -913,7 +913,7 @@ var $ = class e extends O {
 		else if (n && r === "string" && i.trim().startsWith("<")) {
 			let t = T(i);
 			if (e.innerHTML === t) return;
-			e.innerHTML = t, this.#te(e), this.#M(e);
+			e.innerHTML = t, this.#ne(e), this.#M(e);
 		} else n && e.textContent !== i && (e.textContent = i);
 	}
 	#J(e, t) {
@@ -993,12 +993,12 @@ var $ = class e extends O {
 		let t = new Set(Object.keys(this.#n.properties));
 		for (let n of this.getAttributeNames()) if (!D.has(n) && !n.startsWith("on") && n !== "ref") {
 			if (n === "form-assoc") {
-				this.#ee();
+				this.#te();
 				continue;
 			}
 			if (!t.has(e.getPropName(n))) {
 				if (n === "name") {
-					this.#ee();
+					this.#te();
 					continue;
 				}
 				this.#V(null, n, "is not a supported attribute");
@@ -1032,12 +1032,21 @@ var $ = class e extends O {
 		}
 		i !== t.name.toLowerCase() && this.#V(null, e, `was set to a ${i}, but must be a ${t.name}`);
 	}
-	#ee() {
+	#ee(e, t, n) {
+		let r = t.validate?.(n), i = typeof r != "string";
+		return i || this.dispatch("validation", {
+			object: this,
+			property: e,
+			value: n,
+			message: r
+		}), i;
+	}
+	#te() {
 		if (this.#n.formAssociated || this.closest("form") === null) return;
 		let e = this.#n.name;
 		this.#V(this, void 0, `inside form, class ${e} requires "static formAssociated = true;"`);
 	}
-	#te(e) {
+	#ne(e) {
 		let t = Array.from(e.querySelectorAll("*"));
 		for (let e of t) {
 			let t = [];

package/dist/wrec-ssr.d.ts

@@ -19,6 +19,7 @@ declare type PropertyConfig<T = any> = {
     required?: boolean;
     type: PropertyType;
     usedBy?: string | string[];
+    validate?: (value: T) => string | void;
     value?: T;
     values?: T extends string ? string[] : never;
 };

package/dist/wrec-ssr.es.js

@@ -1,4 +1,4 @@
-import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./wrec-DHGadgxK.js";
+import { a as e, c as t, i as n, l as r, n as i, o as a, r as o, s, t as c, u as l } from "./wrec-RkviIlbF.js";
 //#region \0rolldown/runtime.js
 var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, f = Object.getOwnPropertyNames, p = Object.prototype.hasOwnProperty, m = (e, t) => () => (e && (t = e(e = 0)), t), h = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), g = (e, t) => {
 	let n = {};
@@ -7129,7 +7129,7 @@ var u = Object.defineProperty, d = Object.getOwnPropertyDescriptor, f = Object.g
 	})(L ||= {});
 }));
 //#endregion
-//#region node_modules/css-what/lib/es/parse.js
+//#region node_modules/.pnpm/css-what@6.2.2/node_modules/css-what/lib/es/parse.js
 function ue(e) {
 	switch (e.type) {
 		case I.Adjacent:
@@ -7352,7 +7352,7 @@ var U, pe, me, he, ge, _e = m((() => {
 	]), ge = new Set(["contains", "icontains"]);
 }));
 //#endregion
-//#region node_modules/css-what/lib/es/stringify.js
+//#region node_modules/.pnpm/css-what@6.2.2/node_modules/css-what/lib/es/stringify.js
 function ve(e) {
 	return e.map((e) => e.map(ye).join("")).join(", ");
 }

package/dist/wrec.d.ts

@@ -19,6 +19,7 @@ declare type PropertyConfig<T = any> = {
     required?: boolean;
     type: PropertyType;
     usedBy?: string | string[];
+    validate?: (value: T) => string | void;
     value?: T;
     values?: T extends string ? string[] : never;
 };

package/dist/wrec.es.js

@@ -1,2 +1,2 @@
-import { i as e, n as t, r as n, t as r, u as i } from "./wrec-DHGadgxK.js";
+import { i as e, n as t, r as n, t as r, u as i } from "./wrec-RkviIlbF.js";
 export { r as Wrec, i as WrecState, t as createElement, n as css, e as html };

package/package.json

@@ -1,21 +1,36 @@
 {
   "name": "wrec",
+  "version": "0.42.0",
   "description": "a library that greatly simplifies building web components",
-  "author": "R. Mark Volkmann",
-  "version": "0.40.2",
+  "keywords": [
+    "component",
+    "web"
+  ],
   "license": "MIT",
+  "author": "R. Mark Volkmann",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/mvolkmann/wrec.git"
   },
-  "keywords": [
-    "web",
-    "component"
+  "bin": {
+    "wrec-declare": "./scripts/declare.js",
+    "wrec-lint": "./scripts/lint.js",
+    "wrec-scaffold": "./scripts/scaffold.js",
+    "wrec-usedby": "./scripts/used-by.js"
+  },
+  "files": [
+    "dist",
+    "scripts/ast-utils.js",
+    "scripts/declare.js",
+    "scripts/lint.js",
+    "scripts/scaffold.js",
+    "scripts/template.ts",
+    "scripts/used-by.js",
+    "README.md"
   ],
   "type": "module",
   "module": "./dist/wrec.es.js",
   "types": "./dist/wrec.d.ts",
-  "moduleResolution": "bundler",
   "exports": {
     ".": {
       "types": "./dist/wrec.d.ts",
@@ -28,44 +43,32 @@
       "import": "./dist/wrec-ssr.es.js"
     }
   },
-  "bin": {
-    "wrec-declare": "./scripts/declare.js",
-    "wrec-lint": "./scripts/lint.js",
-    "wrec-scaffold": "./scripts/scaffold.js",
-    "wrec-usedby": "./scripts/used-by.js"
+  "dependencies": {
+    "node-html-parser": "^7.1.0",
+    "typescript": "^6.0.2",
+    "xss": "^1.0.15"
   },
-  "files": [
-    "dist",
-    "scripts/ast-utils.js",
-    "scripts/declare.js",
-    "scripts/lint.js",
-    "scripts/scaffold.js",
-    "scripts/template.ts",
-    "scripts/used-by.js",
-    "README.md"
-  ],
+  "devDependencies": {
+    "@playwright/test": "^1.59.1",
+    "@types/node": "^25.5.2",
+    "get-port": "^7.2.0",
+    "jsdom": "^29.0.2",
+    "oxfmt": "^0.51.0",
+    "oxlint": "^1.58.0",
+    "vite": "^8.0.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.1.7"
+  },
+  "moduleResolution": "bundler",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "clean": "rm -rf dist",
+    "format": "oxfmt",
     "lint": "oxlint",
     "preview": "vite preview",
     "test": "node port-check.js && playwright test",
     "testui": "playwright test --ui",
     "unittest": "vitest run"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.59.1",
-    "@types/node": "^25.5.2",
-    "get-port": "^7.2.0",
-    "jsdom": "^29.0.2",
-    "oxlint": "^1.58.0",
-    "vite": "^8.0.3",
-    "vite-plugin-dts": "^4.5.4"
-  },
-  "dependencies": {
-    "node-html-parser": "^7.1.0",
-    "typescript": "^6.0.2",
-    "xss": "^1.0.15"
   }
-}
+}

package/scripts/ast-utils.js

@@ -1,16 +1,12 @@
-import ts from 'typescript';
+import ts from "typescript";
 
 // Finds all classes in a source file that extend Wrec.
 export function collectWrecClasses(sourceFile) {
-  const {names: wrecNames} = getWrecImportInfo(sourceFile);
+  const { names: wrecNames } = getWrecImportInfo(sourceFile);
   const classes = [];
 
   function visit(node) {
-    if (
-      ts.isClassDeclaration(node) &&
-      node.name &&
-      extendsWrec(node, wrecNames)
-    ) {
+    if (ts.isClassDeclaration(node) && node.name && extendsWrec(node, wrecNames)) {
       classes.push(node);
     }
     ts.forEachChild(node, visit);
@@ -24,29 +20,27 @@ export function collectWrecClasses(sourceFile) {
 export function extendsWrec(classNode, wrecNames) {
   return Boolean(
     classNode.heritageClauses?.some(
-      clause =>
+      (clause) =>
         clause.token === ts.SyntaxKind.ExtendsKeyword &&
         clause.types.some(
-          type =>
+          (type) =>
             ts.isExpressionWithTypeArguments(type) &&
             ts.isIdentifier(type.expression) &&
-            wrecNames.has(type.expression.text)
-        )
-    )
+            wrecNames.has(type.expression.text),
+        ),
+    ),
   );
 }
 
 // Gets a plain string member name when one can be statically determined.
 export function getMemberName(node) {
-  const {name} = node;
+  const { name } = node;
   return name ? (getNameText(name) ?? undefined) : undefined;
 }
 
 // Gets the text value of an AST name node.
 export function getNameText(name) {
-  return ts.isIdentifier(name) ||
-    ts.isStringLiteral(name) ||
-    ts.isPrivateIdentifier(name)
+  return ts.isIdentifier(name) || ts.isStringLiteral(name) || ts.isPrivateIdentifier(name)
     ? name.text
     : null;
 }
@@ -55,13 +49,13 @@ export function getNameText(name) {
 export function getPropertyAssignmentNames(objectLiteral) {
   return objectLiteral.properties
     .filter(ts.isPropertyAssignment)
-    .map(property => getMemberName(property))
-    .filter(name => name !== undefined);
+    .map((property) => getMemberName(property))
+    .filter((name) => name !== undefined);
 }
 
 // Collects imported Wrec class names and the quote style used for those imports.
 export function getWrecImportInfo(sourceFile) {
-  const names = new Set(['Wrec']);
+  const names = new Set(["Wrec"]);
   let quote = "'";
 
   for (const statement of sourceFile.statements) {
@@ -75,10 +69,10 @@ export function getWrecImportInfo(sourceFile) {
 
     const moduleName = statement.moduleSpecifier.text;
     const isWrecModule =
-      moduleName === 'wrec' ||
-      moduleName.endsWith('/wrec') ||
-      moduleName.endsWith('/wrec.js') ||
-      moduleName.endsWith('/wrec.ts');
+      moduleName === "wrec" ||
+      moduleName.endsWith("/wrec") ||
+      moduleName.endsWith("/wrec.js") ||
+      moduleName.endsWith("/wrec.ts");
     if (!isWrecModule) continue;
 
     const namedBindings = statement.importClause.namedBindings;
@@ -86,7 +80,7 @@ export function getWrecImportInfo(sourceFile) {
 
     for (const element of namedBindings.elements) {
       const importedName = element.propertyName?.text ?? element.name.text;
-      if (importedName === 'Wrec') {
+      if (importedName === "Wrec") {
         names.add(element.name.text);
         const moduleText = statement.moduleSpecifier.getText(sourceFile);
         quote = moduleText[0];
@@ -94,14 +88,12 @@ export function getWrecImportInfo(sourceFile) {
     }
   }
 
-  return {names, quote};
+  return { names, quote };
 }
 
 // Determines if an AST node has the static modifier.
 export function hasStaticModifier(node) {
   return ts.canHaveModifiers(node)
-    ? ts
-        .getModifiers(node)
-        ?.some(mod => mod.kind === ts.SyntaxKind.StaticKeyword)
+    ? ts.getModifiers(node)?.some((mod) => mod.kind === ts.SyntaxKind.StaticKeyword)
     : false;
 }

package/scripts/declare.js

@@ -9,22 +9,18 @@
 // Include the --dry flag to report whether changes are needed
 // without writing the modified source back to the file.
 
-import fs from 'node:fs';
-import path from 'node:path';
-import ts from 'typescript';
-import {
-  collectWrecClasses,
-  getMemberName,
-  hasStaticModifier
-} from './ast-utils.js';
+import fs from "node:fs";
+import path from "node:path";
+import ts from "typescript";
+import { collectWrecClasses, getMemberName, hasStaticModifier } from "./ast-utils.js";
 
 const cwd = process.cwd();
 const DECLARE_TYPE_MAP = new Map([
-  ['Array', 'unknown[]'],
-  ['Boolean', 'boolean'],
-  ['Number', 'number'],
-  ['Object', 'object'],
-  ['String', 'string']
+  ["Array", "unknown[]"],
+  ["Boolean", "boolean"],
+  ["Number", "number"],
+  ["Object", "object"],
+  ["String", "string"],
 ]);
 
 // Analyzes a parsed source file and returns any proposed `declare` edits.
@@ -49,49 +45,39 @@ function analyzeSourceFile(sourceFile) {
       if (!declareType) continue;
       declareLines.push(createDeclareLine(propName, declareType));
     }
+    declareLines.sort((a, b) => a.localeCompare(b));
 
     const start = propertiesMember.end;
     const end = findDeclareBlockEnd(classNode, propertiesMember, sourceFile);
-    const nextText = buildDeclareBlock(
-      sourceFile,
-      classNode,
-      propertiesMember,
-      declareLines
-    );
+    const nextText = buildDeclareBlock(sourceFile, classNode, propertiesMember, declareLines);
     const currentText = sourceFile.text.slice(start, end);
 
     if (nextText !== currentText) {
-      edits.push({end, start, text: nextText});
+      edits.push({ end, start, text: nextText });
     }
   }
 
   if (classNodes.length === 0) {
-    return {changed: false, foundWrecSubclass: false, text: sourceFile.text};
+    return { changed: false, foundWrecSubclass: false, text: sourceFile.text };
   }
 
   if (edits.length === 0) {
-    return {changed: false, foundWrecSubclass: true, text: sourceFile.text};
+    return { changed: false, foundWrecSubclass: true, text: sourceFile.text };
   }
 
   let nextSource = sourceFile.text;
   edits.sort((a, b) => b.start - a.start);
 
   for (const edit of edits) {
-    nextSource =
-      nextSource.slice(0, edit.start) + edit.text + nextSource.slice(edit.end);
+    nextSource = nextSource.slice(0, edit.start) + edit.text + nextSource.slice(edit.end);
   }
 
-  return {changed: true, foundWrecSubclass: true, text: nextSource};
+  return { changed: true, foundWrecSubclass: true, text: nextSource };
 }
 
 // Builds the `declare` block that should appear after `static properties`.
-function buildDeclareBlock(
-  sourceFile,
-  classNode,
-  propertiesMember,
-  declareLines
-) {
-  const {text} = sourceFile;
+function buildDeclareBlock(sourceFile, classNode, propertiesMember, declareLines) {
+  const { text } = sourceFile;
   const memberIndent = getIndent(text, propertiesMember.getStart(sourceFile));
   const startIndex = classNode.members.indexOf(propertiesMember) + 1;
   let nextMember = null;
@@ -104,15 +90,13 @@ function buildDeclareBlock(
     break;
   }
 
-  const nextIndent = nextMember
-    ? getIndent(text, nextMember.getStart(sourceFile))
-    : '';
+  const nextIndent = nextMember ? getIndent(text, nextMember.getStart(sourceFile)) : "";
 
   if (declareLines.length === 0) {
-    return nextMember ? `\n\n${nextIndent}` : '\n';
+    return nextMember ? `\n\n${nextIndent}` : "\n";
   }
 
-  const content = declareLines.map(line => `${memberIndent}${line}`).join('\n');
+  const content = declareLines.map((line) => `${memberIndent}${line}`).join("\n");
   return nextMember ? `\n${content}\n\n${nextIndent}` : `\n${content}\n`;
 }
 
@@ -123,15 +107,15 @@ function createDeclareLine(propName, declareType) {
 
 // Determines what changes, if any, should be made in a source file.
 export function evaluateSourceFile(filePath, options = {}) {
-  const {dry = false} = options;
+  const { dry = false } = options;
   const absFilePath = path.resolve(cwd, filePath);
   validateFile(absFilePath);
 
-  const text = fs.readFileSync(absFilePath, 'utf8');
+  const text = fs.readFileSync(absFilePath, "utf8");
   const result = evaluateSourceText(absFilePath, text);
 
   if (!result.foundWrecSubclass) {
-    throw new Error('No class extending Wrec was found.');
+    throw new Error("No class extending Wrec was found.");
   }
 
   if (!dry && result.changed) {
@@ -148,7 +132,7 @@ export function evaluateSourceText(filePath, text) {
     text,
     ts.ScriptTarget.Latest,
     true,
-    ts.ScriptKind.TS
+    ts.ScriptKind.TS,
   );
   return analyzeSourceFile(sourceFile);
 }
@@ -173,7 +157,7 @@ function getDeclareType(initializer) {
   for (const property of initializer.properties) {
     if (
       !ts.isPropertyAssignment(property) ||
-      getMemberName(property) !== 'type' ||
+      getMemberName(property) !== "type" ||
       !ts.isIdentifier(property.initializer)
     ) {
       continue;
@@ -187,9 +171,9 @@ function getDeclareType(initializer) {
 
 // Gets the leading indentation in the line that contains a given position.
 function getIndent(text, pos) {
-  const lineStart = text.lastIndexOf('\n', pos - 1) + 1;
+  const lineStart = text.lastIndexOf("\n", pos - 1) + 1;
   const match = /^[ \t]*/.exec(text.slice(lineStart));
-  return match ? match[0] : '';
+  return match ? match[0] : "";
 }
 
 // Gets the last `static properties = { ... }` declaration in a class.
@@ -200,7 +184,7 @@ function getLastPropertiesDeclaration(classNode) {
     if (
       ts.isPropertyDeclaration(member) &&
       hasStaticModifier(member) &&
-      getMemberName(member) === 'properties' &&
+      getMemberName(member) === "properties" &&
       member.initializer &&
       ts.isObjectLiteralExpression(member.initializer)
     ) {
@@ -216,52 +200,48 @@ function isDeclarePropertyDeclaration(member) {
   return (
     ts.isPropertyDeclaration(member) &&
     ts.canHaveModifiers(member) &&
-    ts
-      .getModifiers(member)
-      ?.some(mod => mod.kind === ts.SyntaxKind.DeclareKeyword) === true
+    ts.getModifiers(member)?.some((mod) => mod.kind === ts.SyntaxKind.DeclareKeyword) === true
   );
 }
 
 // Handles CLI arguments and runs the script.
 function main() {
   const args = process.argv.slice(2);
-  const unknownFlags = args.filter(
-    arg => arg.startsWith('--') && arg !== '--dry'
-  );
+  const unknownFlags = args.filter((arg) => arg.startsWith("--") && arg !== "--dry");
   if (unknownFlags.length > 0) {
     throw new Error(`unknown option: ${unknownFlags[0]}`);
   }
 
-  const inputPaths = args.filter(arg => !arg.startsWith('--'));
+  const inputPaths = args.filter((arg) => !arg.startsWith("--"));
   if (inputPaths.length !== 1) {
-    throw new Error('Specify a single source file');
+    throw new Error("Specify a single source file");
   }
 
-  const dry = args.includes('--dry');
-  const result = evaluateSourceFile(inputPaths[0], {dry});
+  const dry = args.includes("--dry");
+  const result = evaluateSourceFile(inputPaths[0], { dry });
 
   if (dry) {
     if (result.changed) process.exit(1);
-    console.info('no changes needed');
+    console.info("no changes needed");
     return;
   }
 
   if (result.changed) {
-    console.info('updated source file');
+    console.info("updated source file");
   } else {
-    console.info('no changes needed');
+    console.info("no changes needed");
   }
 }
 
 // Validates that a source file exists and has a supported extension.
 function validateFile(absFilePath) {
-  if (!fs.existsSync(absFilePath)) throw new Error('File not found');
+  if (!fs.existsSync(absFilePath)) throw new Error("File not found");
 
   const stat = fs.statSync(absFilePath);
-  if (!stat.isFile()) throw new Error('Not a file');
+  if (!stat.isFile()) throw new Error("Not a file");
 
-  if (!/\.ts$/.test(absFilePath)) {
-    throw new Error('declare statements can only be added in .ts files');
+  if (!absFilePath.endsWith(".ts")) {
+    throw new Error("declare statements can only be added in .ts files");
   }
 }