@atolljs/islands 0.1.1 → 0.1.2

package/README.md

@@ -5,7 +5,7 @@ thread. A real framework renderer commits against a DOM-free host surface in
 the worker; every commit serializes to an op stream the main thread replays as
 DOM mutations.
 
-**[Atoll — package documentation](https://jwhenry3.github.io/atolljs/consumer/#/quickstart)**
+**[Atoll — package documentation](https://jwhenry3.github.io/atolljs/consumer/quickstart/)**
 
 The vocabulary:
 
@@ -140,10 +140,10 @@ const island = await mountIsland({ worker: () => new Worker(url, { type: 'module
 
 ## Documentation
 
-- [Atoll — package documentation](https://jwhenry3.github.io/atolljs/consumer/#/quickstart)
-- [Worker islands](https://jwhenry3.github.io/atolljs/consumer/#/islands) —
+- [Atoll — package documentation](https://jwhenry3.github.io/atolljs/consumer/quickstart/)
+- [Worker islands](https://jwhenry3.github.io/atolljs/consumer/islands/) —
   mountIsland options, `IslandHandle`, transport modes
-- [Writing island apps](https://jwhenry3.github.io/atolljs/consumer/#/island-apps) —
+- [Writing island apps](https://jwhenry3.github.io/atolljs/consumer/island-apps/) —
   emit/callbackProp/slots, instance discipline
 - In-repo internals: [`docs/islands.md`](../../docs/islands.md),
   [`docs/islands-worker.md`](../../docs/islands-worker.md),

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@atolljs/islands",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Atoll islands — MonoWorker/PolyWorker hosts rendering framework islands (React/Vue/Svelte/Solid/Angular) over a proxy-DOM op protocol",
-  "homepage": "https://jwhenry3.github.io/atolljs/consumer/#/quickstart",
+  "homepage": "https://jwhenry3.github.io/atolljs/consumer/quickstart/",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",
@@ -19,7 +19,7 @@
     "htmlparser2": "^12.0.0"
   },
   "peerDependencies": {
-    "@atolljs/core": "0.1.1"
+    "@atolljs/core": "0.1.2"
   },
   "repository": {
     "type": "git",

package/src/island.ts

@@ -299,6 +299,40 @@ const assertCloneableProps = (props: Record<string, unknown>, context: string):
   );
 };
 
+/* ── Style values ─────────────────────────────────────────────────────────
+ * Style objects cross the wire verbatim (`style={{ height: 24000000 }}`),
+ * so the driver must apply the same unit semantics react-dom does:
+ * a nonzero number on a non-unitless property needs 'px' — assigning the
+ * bare number to el.style silently no-ops on every real browser.
+ * The list is React DOM's isUnitlessNumber set (which is also the CSS spec's
+ * unitless property surface). */
+const UNITLESS_CSS = new Set([
+  'animationIterationCount', 'aspectRatio', 'borderImageOutset',
+  'borderImageSlice', 'borderImageWidth', 'boxFlex', 'boxFlexGroup',
+  'boxOrdinalGroup', 'columnCount', 'columns', 'flex', 'flexGrow',
+  'flexPositive', 'flexShrink', 'flexNegative', 'flexOrder', 'gridArea',
+  'gridRow', 'gridRowEnd', 'gridRowSpan', 'gridRowStart', 'gridColumn',
+  'gridColumnEnd', 'gridColumnSpan', 'gridColumnStart', 'fontWeight',
+  'lineClamp', 'lineHeight', 'opacity', 'order', 'orphans', 'scale',
+  'tabSize', 'widows', 'zIndex', 'zoom', 'fillOpacity', 'floodOpacity',
+  'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit',
+  'strokeOpacity', 'strokeWidth',
+]);
+
+/** Coerce a wire style value to a CSS string — px-suffixes bare numbers
+ *  on non-unitless keys (custom properties pass verbatim). */
+const cssStyleValue = (key: string, value: unknown): string => {
+  if (
+    typeof value === 'number' &&
+    value !== 0 &&
+    !key.startsWith('--') &&
+    !UNITLESS_CSS.has(key)
+  ) {
+    return `${value}px`;
+  }
+  return String(value);
+};
+
 export async function mountIsland(opts: MountIslandOptions): Promise<IslandHandle> {
   const {
     el, onEvent, onActivity, onOps, slots, mode: initialMode, mountTimeout,
@@ -436,11 +470,17 @@ export async function mountIsland(opts: MountIslandOptions): Promise<IslandHandl
       return;
     }
     if (name === 'style' && typeof value === 'object' && value !== null) {
-      const elStyle = (el as HTMLElement).style as unknown as Record<string, string>;
+      const decl = (el as HTMLElement).style;
+      const elStyle = decl as unknown as Record<string, string>;
       const prevStyle = (prevProps.get(id)?.style ?? {}) as Record<string, string>;
-      const nextStyle = value as Record<string, string>;
+      const nextStyle = value as Record<string, unknown>;
       for (const k of Object.keys(prevStyle)) if (!(k in nextStyle)) elStyle[k] = '';
-      for (const [k, v] of Object.entries(nextStyle)) if (prevStyle[k] !== v) elStyle[k] = v;
+      for (const [k, v] of Object.entries(nextStyle)) {
+        if (prevStyle[k] !== v) {
+          if (k.startsWith('--') || k.includes('-')) decl.setProperty(k, cssStyleValue(k, v));
+          else elStyle[k] = cssStyleValue(k, v);
+        }
+      }
       return;
     }
     if (name === 'className') {
@@ -555,7 +595,12 @@ export async function mountIsland(opts: MountIslandOptions): Promise<IslandHandl
     }
     if (name in node) {
       try {
-        (node as unknown as Record<string, unknown>)[name] = value;
+        // Presence-attr semantics: the proxy emits attr{name,''} for boolean
+        // attributes (checked, disabled…) — assigning '' would read falsy.
+        // A boolean live property takes true whenever the attr is present.
+        const cur = (node as unknown as Record<string, unknown>)[name];
+        (node as unknown as Record<string, unknown>)[name] =
+          typeof cur === 'boolean' ? true : value;
         return;
       } catch {
         /* read-only property — use the attribute */
@@ -576,17 +621,18 @@ export async function mountIsland(opts: MountIslandOptions): Promise<IslandHandl
     const prev = prevProps.get(id) ?? {};
     const merged = { ...((prev.style ?? {}) as Record<string, string>) };
     for (const [k, v] of Object.entries(changes)) {
+      const cv = cssStyleValue(k, v);
       if (k.startsWith('--') || k.includes('-')) {
         // Custom properties and kebab-case keys live outside the camelCase
         // property surface — el.style['font-size'] is a silent no-op on real
         // DOM; setProperty accepts kebab-case, and '' clears either kind.
-        elStyle.setProperty(k, v);
-      } else if (v.endsWith('!important')) {
+        elStyle.setProperty(k, cv);
+      } else if (cv.endsWith('!important')) {
         // `style.setProperty(k, v, 'important')` crosses as a suffix — the
         // style op has no separate priority channel.
-        elStyle.setProperty(k, v.replace(/\s*!important$/, ''), 'important');
+        elStyle.setProperty(k, cv.replace(/\s*!important$/, ''), 'important');
       } else {
-        elStyleMap[k] = v;
+        elStyleMap[k] = cv;
       }
       merged[k] = v;
     }
@@ -707,6 +753,10 @@ export async function mountIsland(opts: MountIslandOptions): Promise<IslandHandl
         // node maps must survive this op: the following `append` still needs
         // the ids it just created. Stale ids are never reused; the only cost
         // is a few dead map entries on remount.
+        // Slot anchors inside get no remove op of their own — unmount them
+        // like a `remove` op would so slots callbacks see null and
+        // slotNodes doesn't leak.
+        unmountSlotSubtree(el);
         el.replaceChildren();
         break;
       }
@@ -897,7 +947,12 @@ export async function mountIsland(opts: MountIslandOptions): Promise<IslandHandl
         void client
           .unmount(instance)
           .catch(() => {})
-          .finally(() => client.terminate());
+          .finally(() => {
+            // A remount may have registered while teardown was in flight
+            // (app/client input swap does destroy → mount back-to-back) —
+            // terminate only when the client is still truly idle.
+            if ((clientMounts.get(client) ?? 0) === 0) client.terminate();
+          });
       }
     },
   };