@webjsdev/core 0.7.24 → 0.7.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webjsdev/core",
-  "version": "0.7.24",
+  "version": "0.7.25",
   "type": "module",
   "description": "webjs core runtime - html/css tags, WebComponent base, isomorphic renderers",
   "types": "./index.d.ts",

package/src/component.js

@@ -482,8 +482,8 @@ class WebComponentBase extends Base {
   static get observedAttributes() {
     const props = this.properties || {};
     return Object.keys(props)
-      .filter((k) => !props[k].state)
-      .map(hyphenate);
+      .filter((k) => !(typeof props[k] === 'object' && props[k].state))
+      .map((k) => (typeof props[k] === 'object' && props[k].attribute) || hyphenate(k));
   }
 
   constructor() {
@@ -572,8 +572,8 @@ class WebComponentBase extends Base {
           `${name}: \`static properties\` is no longer supported. Declare reactive ` +
             `properties via the factory instead: \`class ${name} extends WebComponent({ ` +
             `count: Number })\`. Use the \`prop()\` helper for options ` +
-            `(\`prop(Number, { reflect: true })\`) and set defaults via the \`default\` ` +
-            `option or in the constructor. See https://docs.webjs.com/docs/components.`,
+            `(\`prop(Number, { reflect: true })\`) and set defaults in the ` +
+            `constructor after \`super()\`. See https://docs.webjs.com/docs/components.`,
         );
       }
       C = Object.getPrototypeOf(C);
@@ -630,6 +630,13 @@ class WebComponentBase extends Base {
 
       if (initial !== undefined) {
         this.__propValues[propName] = initial;
+      } else if (d.default !== undefined) {
+        // Declarative `default` option (lit-parity). A function default is
+        // CALLED per instance, so an object / array default is a fresh value
+        // per element. Written straight to the backing store; an applied
+        // attribute (attributeChangedCallback runs later) overrides it.
+        this.__propValues[propName] =
+          typeof d.default === 'function' ? d.default() : d.default;
       }
     }
   }
@@ -645,7 +652,8 @@ class WebComponentBase extends Base {
    * @private
    */
   _reflectAttribute(propName, value, decl) {
-    const attrName = hyphenate(propName);
+    // A custom `attribute` option wins over the kebab-cased property name.
+    const attrName = decl.attribute || hyphenate(propName);
     // Guard against re-entrant loops: attributeChangedCallback fires when
     // we call setAttribute, which would call the setter again.
     if (this.__reflectingAttribute) return;
@@ -938,9 +946,17 @@ class WebComponentBase extends Base {
     if (this.__reflectingAttribute) return;
 
     const Ctor = /** @type any */ (this.constructor);
-    const propName = camelCase(name);
-    const raw = Ctor.properties && (Ctor.properties[propName] || Ctor.properties[name]);
-    if (!raw) return;
+    const allProps = (Ctor.properties || {});
+    // Resolve the incoming attribute name to its property. A custom
+    // `attribute` option wins; otherwise the kebab-cased property name. Falls
+    // back to the camelCase of the attribute for the common (kebab) case.
+    let propName, raw;
+    for (const [k, decl] of Object.entries(allProps)) {
+      const d = typeof decl === 'object' ? decl : { type: decl };
+      if ((d.attribute || hyphenate(k)) === name) { propName = k; raw = decl; break; }
+    }
+    if (raw === undefined) { propName = camelCase(name); raw = allProps[propName] || allProps[name]; }
+    if (raw === undefined) return;
     // A declaration is either a full descriptor (`{ type: Number, … }`) or the
     // bare-constructor shorthand the factory accepts (`count: Number`), in which
     // case the value IS the type. Normalise so type-based coercion fires either

package/src/render-server.js

@@ -1052,8 +1052,19 @@ function appendReflectedAttrs(opening, instance, presentAttrNames) {
 function applyAttrsToInstance(instance, attrs, Cls) {
   const props = Cls.properties || {};
   for (const [key, raw] of Object.entries(attrs)) {
-    const rawDef = props[key] || props[camelCase(key)];
-    const propName = props[key] ? key : camelCase(key);
+    // Resolve the source attribute name to its property: a custom `attribute`
+    // option wins, else the kebab-cased property name, else the camelCase of
+    // the attribute (the common case). Mirrors the client attributeChangedCallback
+    // so a custom-attribute prop gets the right value in the SSR'd first paint.
+    let propName, rawDef;
+    for (const [k, decl] of Object.entries(props)) {
+      const d = typeof decl === 'object' ? decl : { type: decl };
+      if ((d.attribute || hyphenate(k)) === key) { propName = k; rawDef = decl; break; }
+    }
+    if (rawDef === undefined) {
+      rawDef = props[key] || props[camelCase(key)];
+      propName = props[key] ? key : camelCase(key);
+    }
     if (!rawDef) {
       instance[propName] = raw;
       continue;
@@ -1080,6 +1091,11 @@ function camelCase(s) {
   return s.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
 }
 
+/** Kebab-case a property name for its default HTML attribute (matches component.js). @param {string} s */
+function hyphenate(s) {
+  return s.replace(/([A-Z])/g, '-$1').toLowerCase();
+}
+
 /**
  * Inverse of camelCase. `userName` -> `user-name`, `userID` -> `user-i-d`.
  * Used to serialize property-binding names into HTML attribute names,