@webjsdev/core 0.7.6 → 0.7.7

package/index-browser.js

@@ -48,8 +48,16 @@ export { WebjsFrame } from './src/webjs-frame.js';
 // Signals (TC39 Stage-1 shape), also available via '@webjsdev/core/signals'
 export { signal, computed, effect, batch, isSignal, Signal } from './src/signal.js';
 
-// Directives, also available via '@webjsdev/core/directives'
-export { unsafeHTML, isUnsafeHTML, live, isLive } from './src/directives.js';
+// Directives, also available via '@webjsdev/core/directives'. The full
+// lit-html-parity set is re-exported here so the dist browser bundle (which
+// the `@webjsdev/core/directives` subpath collapses onto in dist mode) carries
+// every directive, matching what src/directives.js exports in dev.
+export {
+  unsafeHTML, isUnsafeHTML, live, isLive, keyed, isKeyed, guard, isGuard,
+  templateContent, isTemplateContent, ref, isRef, createRef, cache, isCache,
+  until, isUntil, asyncAppend, isAsyncAppend, asyncReplace, isAsyncReplace,
+  watch, isWatch,
+} from './src/directives.js';
 
 // Context Protocol, also available via '@webjsdev/core/context'
 export { createContext, ContextProvider, ContextConsumer, ContextRequestEvent } from './src/context.js';

package/index.js

@@ -30,8 +30,15 @@ export { WebjsFrame } from './src/webjs-frame.js';
 // Signals (TC39 Stage-1 shape), also available via '@webjsdev/core/signals'
 export { signal, computed, effect, batch, isSignal, Signal } from './src/signal.js';
 
-// Directives, also available via '@webjsdev/core/directives'
-export { unsafeHTML, isUnsafeHTML, live, isLive } from './src/directives.js';
+// Directives, also available via '@webjsdev/core/directives'. The full
+// lit-html-parity set is re-exported so the bare specifier exposes the same
+// directive surface in Node as the browser bundle does.
+export {
+  unsafeHTML, isUnsafeHTML, live, isLive, keyed, isKeyed, guard, isGuard,
+  templateContent, isTemplateContent, ref, isRef, createRef, cache, isCache,
+  until, isUntil, asyncAppend, isAsyncAppend, asyncReplace, isAsyncReplace,
+  watch, isWatch,
+} from './src/directives.js';
 
 // Context Protocol, also available via '@webjsdev/core/context'
 export { createContext, ContextProvider, ContextConsumer, ContextRequestEvent } from './src/context.js';

package/package.json

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

package/src/component.js

@@ -260,6 +260,96 @@ class ServerElement {
     return [...this.__ssrAttrs.keys()];
   }
 
+  /**
+   * Minimal `Element.closest()` for SSR. The SSR walker threads the chain
+   * of enclosing custom-element instances into each instance
+   * (`__ssrAncestors`); this walks self-then-ancestors and returns the
+   * nearest whose tag matches. Only bare tag-name selectors are supported
+   * server-side (`closest('ui-tabs')`), which is what compound components
+   * need to read parent state for a correct first paint; anything more
+   * specific (class, attribute, or descendant selectors) returns null,
+   * matching the pre-shim behaviour. The browser runs the real `closest()`
+   * on hydration.
+   * @param {string} selector
+   * @returns {any}
+   */
+  closest(selector) {
+    const sel = String(selector).trim().toLowerCase();
+    // Tag-name selectors only at SSR; bail (null) on anything else.
+    if (!/^[a-z][a-z0-9-]*$/.test(sel)) return null;
+    if (this.__ssrTag === sel) return this;
+    const chain = this.__ssrAncestors;
+    if (!Array.isArray(chain)) return null;
+    for (let i = chain.length - 1; i >= 0; i--) {
+      if (chain[i] && chain[i].__ssrTag === sel) return chain[i];
+    }
+    return null;
+  }
+
+  /**
+   * `HTMLElement.dataset`: a live view over the element's `data-*`
+   * attributes, backed by the SSR attribute Map. Reading / writing
+   * `el.dataset.fooBar` maps to the `data-foo-bar` attribute (camelCase
+   * to kebab-case), so a `render()` that sets `this.dataset.state = 'on'`
+   * surfaces `data-state="on"` in the SSR'd host tag instead of crashing
+   * on an undefined `dataset`.
+   * @returns {Record<string, string>}
+   */
+  get dataset() {
+    if (this.__dataset) return this.__dataset;
+    const el = this;
+    const toAttr = (p) => 'data-' + String(p).replace(/[A-Z]/g, (m) => '-' + m.toLowerCase());
+    this.__dataset = new Proxy(/** @type {Record<string,string>} */ ({}), {
+      get(_t, prop) {
+        if (typeof prop !== 'string') return undefined;
+        const v = el.getAttribute(toAttr(prop));
+        return v === null ? undefined : v;
+      },
+      set(_t, prop, value) {
+        if (typeof prop === 'string') el.setAttribute(toAttr(prop), value);
+        return true;
+      },
+      has(_t, prop) {
+        return typeof prop === 'string' && el.hasAttribute(toAttr(prop));
+      },
+      deleteProperty(_t, prop) {
+        if (typeof prop === 'string') el.removeAttribute(toAttr(prop));
+        return true;
+      },
+      ownKeys() {
+        return el.getAttributeNames()
+          .filter((n) => n.startsWith('data-'))
+          .map((n) => n.slice(5).replace(/-([a-z])/g, (_m, c) => c.toUpperCase()));
+      },
+      getOwnPropertyDescriptor(_t, prop) {
+        if (typeof prop === 'string' && el.hasAttribute(toAttr(prop))) {
+          return { enumerable: true, configurable: true, value: el.getAttribute(toAttr(prop)) };
+        }
+        return undefined;
+      },
+    });
+    return this.__dataset;
+  }
+
+  // IDL properties that reflect to a content attribute. A render() that
+  // mutates these on the host (a light-DOM compound-component pattern, e.g.
+  // `this.className = ...`, `this.hidden = !active`) then surfaces the
+  // matching attribute in the SSR'd host tag, matching the browser.
+  get className() { return this.getAttribute('class') ?? ''; }
+  set className(v) { this.setAttribute('class', v); }
+  get hidden() { return this.hasAttribute('hidden'); }
+  set hidden(v) { this.toggleAttribute('hidden', !!v); }
+  get id() { return this.getAttribute('id') ?? ''; }
+  set id(v) { this.setAttribute('id', v); }
+  get title() { return this.getAttribute('title') ?? ''; }
+  set title(v) { this.setAttribute('title', v); }
+  get slot() { return this.getAttribute('slot') ?? ''; }
+  set slot(v) { this.setAttribute('slot', v); }
+  get role() { return this.getAttribute('role'); }
+  set role(v) { v == null ? this.removeAttribute('role') : this.setAttribute('role', v); }
+  get tabIndex() { const v = this.getAttribute('tabindex'); return v === null ? -1 : (Number.parseInt(v, 10) || 0); }
+  set tabIndex(v) { this.setAttribute('tabindex', String(v)); }
+
   // No server event loop: listeners never fire at SSR. The no-op keeps a
   // constructor that wires delegated listeners (a common lit pattern) from
   // crashing; the browser re-runs the constructor on hydration where the
@@ -282,6 +372,30 @@ class ServerElement {
   }
 }
 
+// ARIAMixin IDL reflections (`el.ariaPressed = 'true'` writes aria-pressed).
+// A render() that sets ARIA state via the IDL properties then surfaces the
+// matching aria-* attribute in the SSR'd host tag, matching the browser. The
+// IDL name maps to the content attribute by lowercasing the part after
+// `aria` and prefixing `aria-` (ariaPressed -> aria-pressed).
+const ARIA_IDL_PROPS = [
+  'ariaAtomic', 'ariaAutoComplete', 'ariaBusy', 'ariaChecked', 'ariaColCount',
+  'ariaColIndex', 'ariaColSpan', 'ariaCurrent', 'ariaDescription', 'ariaDisabled',
+  'ariaExpanded', 'ariaHasPopup', 'ariaHidden', 'ariaInvalid', 'ariaKeyShortcuts',
+  'ariaLabel', 'ariaLevel', 'ariaLive', 'ariaModal', 'ariaMultiLine',
+  'ariaMultiSelectable', 'ariaOrientation', 'ariaPlaceholder', 'ariaPosInSet',
+  'ariaPressed', 'ariaReadOnly', 'ariaRequired', 'ariaRoleDescription',
+  'ariaRowCount', 'ariaRowIndex', 'ariaRowSpan', 'ariaSelected', 'ariaSetSize',
+  'ariaSort', 'ariaValueMax', 'ariaValueMin', 'ariaValueNow', 'ariaValueText',
+];
+for (const idl of ARIA_IDL_PROPS) {
+  const attr = 'aria-' + idl.slice(4).toLowerCase();
+  Object.defineProperty(ServerElement.prototype, idl, {
+    configurable: true,
+    get() { return this.getAttribute(attr); },
+    set(v) { v == null ? this.removeAttribute(attr) : this.setAttribute(attr, String(v)); },
+  });
+}
+
 // Base class choice: real HTMLElement on the browser, the shim on the server.
 const Base = isBrowser ? HTMLElement : /** @type {any} */ (ServerElement);
 

package/src/directives.js

@@ -12,11 +12,17 @@
  * } from '@webjsdev/core/directives';
  * ```
  *
- * `repeat()` lives in `./repeat.js` (re-exported from the package root).
+ * `repeat()` is implemented in `./repeat.js`; it is re-exported here so the
+ * `@webjsdev/core/directives` subpath exposes the whole documented directive
+ * table in src/dev mode too (the dist browser bundle already carries it).
  *
  * @module directives
  */
 
+// Re-export so the `/directives` subpath surface matches the documented table
+// in both src and dist mode. The implementation stays in repeat.js.
+export { repeat, isRepeat } from './repeat.js';
+
 /* ================================================================
  * unsafeHTML
  * ================================================================ */

package/src/render-server.js

@@ -362,7 +362,7 @@ function browserMemberHint(e) {
  * @param {SuspenseCtx} [ctx]
  * @returns {Promise<string>}
  */
-async function injectDSD(html, ctx) {
+async function injectDSD(html, ctx, ancestors = []) {
   const tags = allTags();
   if (!tags.length) return html;
   // Sort longest tag name first so the regex alternation tries the most
@@ -391,6 +391,12 @@ async function injectDSD(html, ctx) {
     try {
       const isShadow = /** @type any */ (Cls).shadow === true;
       const instance = new /** @type any */ (Cls)();
+      // Thread the ancestor chain (the enclosing custom-element instances)
+      // so the server element shim's closest() can resolve a parent at SSR.
+      // Set before performServerUpdate so a willUpdate() that reads a parent
+      // via closest() sees the chain. Each child recursion below extends it.
+      instance.__ssrTag = tag;
+      instance.__ssrAncestors = ancestors;
       const attrMap = parseAttrs(attrs);
       // Decode `data-webjs-prop-*` attributes first (rich-typed values
       // emitted for `.prop=${val}` bindings in the parent template),
@@ -416,13 +422,16 @@ async function injectDSD(html, ctx) {
       // SSR. WebComponent instances expose performServerUpdate; bare
       // Base-extending kit components (no lifecycle) do not, so it is guarded.
       if (typeof instance.performServerUpdate === 'function') instance.performServerUpdate();
-      // Surface attributes the component set before render (reflected
-      // reflect:true props, or an explicit this.setAttribute in the
-      // constructor / willUpdate) that were not already in the source tag.
-      // Appending keeps the original tag byte-identical when nothing changed.
-      opening = appendReflectedAttrs(opening, instance, presentAttrNames);
       let tpl = instance.render ? instance.render() : '';
       if (tpl && typeof tpl.then === 'function') tpl = await tpl;
+      // Surface attributes the component set up to and including render()
+      // that were not already in the source tag: reflected reflect:true
+      // props, an explicit this.setAttribute in the constructor / willUpdate,
+      // or a host-attribute mutation inside render() itself (a light-DOM
+      // compound-component pattern, e.g. this.dataset.state / this.className /
+      // this.hidden on the host). Reading after render() captures all three.
+      // Appending keeps the original tag byte-identical when nothing changed.
+      opening = appendReflectedAttrs(opening, instance, presentAttrNames);
       // Render the template to HTML. injectDSD recurses on the result so
       // nested custom elements (e.g. <theme-toggle> inside <blog-shell>)
       // get their own DSD pass.
@@ -432,7 +441,7 @@ async function injectDSD(html, ctx) {
         // Shadow DOM: native <slot> stays as-is in the DSD template. The
         // browser handles projection from the host's light-DOM children
         // into the shadow tree natively. No framework substitution here.
-        const innerProcessed = await injectDSD(rawInner, ctx);
+        const innerProcessed = await injectDSD(rawInner, ctx, [...ancestors, instance]);
         const rawStyles = /** @type any */ (Cls).styles;
         const styleList = Array.isArray(rawStyles) ? rawStyles : rawStyles && isCSS(rawStyles) ? [rawStyles] : [];
         const styleStr = stylesToString(styleList);
@@ -495,7 +504,7 @@ async function injectDSD(html, ctx) {
         }
         const partitioned = partitionAuthoredBySlot(authoredInner);
         const innerWithSlots = substituteSlotsInRender(rawInner, partitioned);
-        const innerProcessed = await injectDSD(innerWithSlots, ctx);
+        const innerProcessed = await injectDSD(innerWithSlots, ctx, [...ancestors, instance]);
         edits.push({
           start: m.index,
           end: closeEnd,
@@ -523,6 +532,11 @@ async function injectDSD(html, ctx) {
   // independently against the original html, but those inner elements
   // are processed by the recursive injectDSD call on innerWithSlots.
   // Keeping both edits would double-process them and corrupt the output.
+  // A consequence: a nested instance's render() runs once per chain depth
+  // (the discarded top-level pass sees an empty ancestor chain, so its
+  // closest() reads null; the kept recursive pass has the real chain). The
+  // kept pass is the only output, and closest() is a read, so render() must
+  // stay pure at SSR (the standard SSR contract), not branch on side effects.
   edits.sort((a, b) => a.start - b.start);
   /** @type {{start:number, end:number, text:string}[]} */
   const filtered = [];