wrec 0.25.0 → 0.25.2

package/dist/wrec-ssr.d.ts

@@ -62,6 +62,7 @@ export declare abstract class Wrec extends HTMLElementBase implements ChangeList
     static getPropName(attrName: string): string;
     static get observedAttributes(): string[];
     propertyChangedCallback(_propName: string, _oldValue: unknown, _newValue: unknown): void;
+    ready(): void;
     setAttributeSafe(name: string, value: string): void;
     setFormValue(propName: string, value: string): void;
     static ssr(properties?: StringToAny): string;

package/dist/wrec.d.ts

@@ -62,6 +62,7 @@ export declare abstract class Wrec extends HTMLElementBase implements ChangeList
     static getPropName(attrName: string): string;
     static get observedAttributes(): string[];
     propertyChangedCallback(_propName: string, _oldValue: unknown, _newValue: unknown): void;
+    ready(): void;
     setAttributeSafe(name: string, value: string): void;
     setFormValue(propName: string, value: string): void;
     static ssr(properties?: StringToAny): string;

package/dist/wrec.es.js

@@ -413,7 +413,7 @@ const w = class w extends Ct {
     this[e] = s;
   }
   async connectedCallback() {
-    a(this, i, Yt).call(this), a(this, i, _t).call(this), await a(this, i, Bt).call(this), this.hasAttribute("disabled") && a(this, i, ht).call(this), a(this, i, wt).call(this, this.shadowRoot), a(this, i, pt).call(this, this.shadowRoot), a(this, i, Zt).call(this), a(this, i, Dt).call(this);
+    a(this, i, Yt).call(this), a(this, i, _t).call(this), await a(this, i, Bt).call(this), this.hasAttribute("disabled") && a(this, i, ht).call(this), a(this, i, wt).call(this, this.shadowRoot), a(this, i, pt).call(this, this.shadowRoot), a(this, i, Zt).call(this), a(this, i, Dt).call(this), this.ready();
   }
   disconnectedCallback() {
     for (const { state: t } of h(this, P).values())
@@ -486,6 +486,10 @@ const w = class w extends Ct {
   // Subclasses can override this to add functionality.
   propertyChangedCallback(t, e, s) {
   }
+  // Subclasses can override this to be notified when
+  // the component DOM has been built and made reactive.
+  ready() {
+  }
   // This follows the best practice
   // "Do not override author-set, global attributes."
   setAttributeSafe(t, e) {
@@ -739,7 +743,7 @@ J = function(t, e, s = void 0) {
   s ? rt(e, s, l) : a(this, i, gt).call(this, e, l);
 }, Jt = function(t, e) {
   const s = e?.trim() ?? "", o = h(this, m).properties[s];
-  o || a(this, i, O).call(this, t, "ref", s), o.type !== Ct && a(this, i, g).call(this, t, "ref", `refers to property "${s}" whose type is not HTMLElement`), this[s] = t;
+  o || a(this, i, O).call(this, t, "ref", s), o.type !== Ct && a(this, i, g).call(this, t, "ref", `refers to property "${s}" whose type is not HTMLElement`), this[s] && a(this, i, g).call(this, t, "ref", `is a duplicate reference to the property "${s}"`), this[s] = t;
 }, g = function(t, e, s) {
   const o = t instanceof HTMLElement ? t.localName : "CSS rule";
   throw new v(
@@ -841,7 +845,7 @@ Zt = function() {
 }, Yt = function() {
   const t = new Set(Object.keys(h(this, m).properties));
   for (const e of this.getAttributeNames())
-    if (!oe.has(e) && !e.startsWith("on")) {
+    if (!oe.has(e) && !e.startsWith("on") && e !== "ref") {
       if (e === "form-assoc") {
         a(this, i, ut).call(this);
         continue;

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a small library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.25.0",
+  "version": "0.25.2",
   "license": "MIT",
   "repository": {
     "type": "git",

package/scripts/lint.js

@@ -21,6 +21,7 @@
 // - invalid `useState` map entries
 // - unsupported HTML attributes in templates
 // - invalid HTML element nesting in templates
+// - duplicate ref attribute values
 
 import fs from 'node:fs';
 import path from 'node:path';
@@ -617,7 +618,8 @@ function extractProperties(sourceFile, checker, classNode) {
 function extractTemplateExpressions(
   classNode,
   findings,
-  componentPropertyMaps
+  componentPropertyMaps,
+  supportedProps
 ) {
   const expressions = [];
 
@@ -676,7 +678,14 @@ function extractTemplateExpressions(
     }
 
     const root = parse(rendered, {comment: true});
-    walkHtmlNode(root, expressions, findings, componentPropertyMaps);
+    walkHtmlNode(
+      root,
+      expressions,
+      findings,
+      componentPropertyMaps,
+      supportedProps,
+      new Set()
+    );
   }
 
   return expressions;
@@ -731,6 +740,7 @@ function formatReport(
     findings.reservedProperties.length > 0 ||
     findings.invalidUsedByReferences.length > 0 ||
     findings.invalidComputedProperties.length > 0 ||
+    findings.invalidRefAttributes.length > 0 ||
     findings.invalidValuesConfigurations.length > 0 ||
     findings.invalidDefaultValues.length > 0 ||
     findings.invalidFormAssocValues.length > 0 ||
@@ -798,6 +808,13 @@ function formatReport(
     );
   }
 
+  if (findings.invalidRefAttributes.length > 0) {
+    lines.push('invalid ref attributes:');
+    findings.invalidRefAttributes.forEach(message =>
+      lines.push(`  ${message}`)
+    );
+  }
+
   if (findings.invalidValuesConfigurations.length > 0) {
     lines.push('invalid values configurations:');
     findings.invalidValuesConfigurations.forEach(message =>
@@ -1228,6 +1245,7 @@ export function lintSource(filePath, sourceText, options = {}) {
     invalidEventHandlers: [],
     invalidFormAssocValues: [],
     invalidHtmlNesting: [],
+    invalidRefAttributes: [],
     invalidUseStateMaps: [],
     invalidUsedByReferences: [],
     invalidValuesConfigurations: [],
@@ -1244,7 +1262,8 @@ export function lintSource(filePath, sourceText, options = {}) {
   const templateExprs = extractTemplateExpressions(
     classNode,
     findings,
-    componentPropertyMaps
+    componentPropertyMaps,
+    supportedProps
   );
   const allExpressions = [...templateExprs, ...computedExprs];
 
@@ -1327,6 +1346,7 @@ export function lintSource(filePath, sourceText, options = {}) {
   findings.invalidEventHandlers.sort();
   findings.invalidFormAssocValues.sort();
   findings.invalidHtmlNesting.sort();
+  findings.invalidRefAttributes.sort();
   findings.invalidUseStateMaps.sort();
   findings.invalidUsedByReferences.sort();
   findings.invalidValuesConfigurations.sort();
@@ -1670,6 +1690,7 @@ function validateHtmlAttribute(node, attrName, findings) {
   if (attrName.startsWith('aria-') || attrName.startsWith('data-')) return;
   if (attrName.startsWith('on')) return;
   if (attrName === 'form-assoc') return;
+  if (attrName === 'ref') return;
 
   const [baseAttrName] = attrName.split(':');
   if (HTML_GLOBAL_ATTRIBUTES.has(baseAttrName)) return;
@@ -1697,6 +1718,42 @@ function validateValueBindingEvent(node, attrName, findings) {
   );
 }
 
+function validateRefAttribute(
+  attrValue,
+  supportedProps,
+  findings,
+  seenRefProps
+) {
+  if (!attrValue) return;
+
+  const propName = attrValue.trim();
+  if (!propName) return;
+
+  const propInfo = supportedProps.get(propName);
+  if (!propInfo) {
+    findings.invalidRefAttributes.push(
+      `ref="${attrValue}" refers to missing property "${propName}"`
+    );
+    return;
+  }
+
+  if (propInfo.typeText !== 'HTMLElement') {
+    findings.invalidRefAttributes.push(
+      `ref="${attrValue}" refers to property "${propName}" whose type is not HTMLElement`
+    );
+    return;
+  }
+
+  if (seenRefProps.has(propName)) {
+    findings.invalidRefAttributes.push(
+      `ref="${attrValue}" is a duplicate reference to the property "${propName}"`
+    );
+    return;
+  }
+
+  seenRefProps.add(propName);
+}
+
 function getHtmlTagName(node) {
   const tagName = node.rawTagName || node.tagName;
   return typeof tagName === 'string' ? tagName.toLowerCase() : '';
@@ -1737,7 +1794,14 @@ function validateHtmlNesting(node, findings) {
   }
 }
 
-function walkHtmlNode(node, expressions, findings, componentPropertyMaps) {
+function walkHtmlNode(
+  node,
+  expressions,
+  findings,
+  componentPropertyMaps,
+  supportedProps,
+  seenRefProps
+) {
   if (node.nodeType === 1) {
     validateHtmlNesting(node, findings);
 
@@ -1753,6 +1817,9 @@ function walkHtmlNode(node, expressions, findings, componentPropertyMaps) {
       );
       validateHtmlAttribute(node, attrName, findings);
       validateValueBindingEvent(node, attrName, findings);
+      if (attrName === 'ref') {
+        validateRefAttribute(attrValue, supportedProps, findings, seenRefProps);
+      }
       if (
         REFS_TEST_RE.test(attrValue) ||
         (attrName.startsWith('on') && IDENTIFIER_RE.test(attrValue))
@@ -1785,7 +1852,14 @@ function walkHtmlNode(node, expressions, findings, componentPropertyMaps) {
   }
 
   for (const child of node.childNodes ?? []) {
-    walkHtmlNode(child, expressions, findings, componentPropertyMaps);
+    walkHtmlNode(
+      child,
+      expressions,
+      findings,
+      componentPropertyMaps,
+      supportedProps,
+      seenRefProps
+    );
   }
 }