@ape-egg/vibe 4.1.1 → 4.1.4

package/README.md

@@ -1,6 +1,6 @@
 # Vibe
 
-**Version 4.1.1** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
+**Version 4.1.4** — Runtime-first reactivity for plain HTML. Drop a script tag into any page and get reactive bindings, control flow, and URL-loaded components — no build step required. Compile later if you want; the compiler is a separate, optional package (`@ape-egg/vibe-compiler`).
 
 ## Security model & CSP
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "4.1.1",
+  "version": "4.1.4",
   "type": "module",
   "description": "Runtime-first reactivity for plain HTML — no build step, no virtual DOM, no new syntax to learn",
   "main": "index.js",

package/runtime/cleanup.js

@@ -1,32 +1,24 @@
 import { debugLog } from './debug.js';
-import {
-  PHASE_READY,
-  FOUC_CLASS_OR_ATTR,
-  DEHYDRATE_CLASS_OR_ATTR,
-  NON_REACTIVE_ELEMENTS,
-} from './constants.js';
+import { isInert } from './inert.js';
+import { PHASE_READY, FOUC_CLASS_OR_ATTR } from './constants.js';
+
+const skipInert = (root) => ({
+  acceptNode: (node) => (isInert(node, root) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
+});
 
 export const shouldCleanup = (rootElement) => {
-  const componentElements = rootElement.querySelectorAll('component[src], div.component[src]');
+  const componentElements = [
+    ...rootElement.querySelectorAll('component[src], div.component[src]'),
+  ].filter((el) => !isInert(el, rootElement));
   if (componentElements.length > 0) {
     return false;
   }
 
-  const walker = document.createTreeWalker(rootElement, NodeFilter.SHOW_TEXT, {
-    acceptNode(node) {
-      let parent = node.parentElement;
-      while (parent && parent !== rootElement) {
-        if (NON_REACTIVE_ELEMENTS.includes(parent.nodeName)) {
-          return NodeFilter.FILTER_REJECT;
-        }
-        if (parent.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || parent.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)) {
-          return NodeFilter.FILTER_REJECT;
-        }
-        parent = parent.parentElement;
-      }
-      return NodeFilter.FILTER_ACCEPT;
-    },
-  });
+  const walker = document.createTreeWalker(
+    rootElement,
+    NodeFilter.SHOW_TEXT,
+    skipInert(rootElement),
+  );
 
   let node;
   while ((node = walker.nextNode())) {
@@ -35,21 +27,11 @@ export const shouldCleanup = (rootElement) => {
     }
   }
 
-  const elementWalker = document.createTreeWalker(rootElement, NodeFilter.SHOW_ELEMENT, {
-    acceptNode(el) {
-      let parent = el;
-      while (parent && parent !== rootElement) {
-        if (NON_REACTIVE_ELEMENTS.includes(parent.nodeName)) {
-          return NodeFilter.FILTER_REJECT;
-        }
-        if (parent.hasAttribute(DEHYDRATE_CLASS_OR_ATTR) || parent.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)) {
-          return NodeFilter.FILTER_REJECT;
-        }
-        parent = parent.parentElement;
-      }
-      return NodeFilter.FILTER_ACCEPT;
-    },
-  });
+  const elementWalker = document.createTreeWalker(
+    rootElement,
+    NodeFilter.SHOW_ELEMENT,
+    skipInert(rootElement),
+  );
 
   let el;
   while ((el = elementWalker.nextNode())) {

package/runtime/component.js

@@ -1,5 +1,6 @@
 import { debugLog } from './debug.js';
 import { shouldCleanup } from './cleanup.js';
+import { isInert } from './inert.js';
 import {
   PHASE_FETCH,
   PHASE_FETCH_CACHED,
@@ -665,7 +666,10 @@ export const processComponent = (rootElement, onComplete, config = {}) => {
   }
 
   const topLevel = Array.from(allComponents).filter(
-    (el) => !hasUnresolvedSrc(el) && !isNestedInUnprocessedComponent(el, rootElement)
+    (el) =>
+      !hasUnresolvedSrc(el) &&
+      !isInert(el, rootElement) &&
+      !isNestedInUnprocessedComponent(el, rootElement)
   );
 
   if (topLevel.length === 0) {

package/runtime/constants.js

@@ -1,4 +1,4 @@
-export const VERSION = '4.1.1';
+export const VERSION = '4.1.4';
 
 export const DEBUGGER_NAME = '[vibe-debug]:';
 export const FOUC_CLASS_OR_ATTR = 'vibe-fouc';

package/runtime/hydrate.js

@@ -240,13 +240,13 @@ export default (affected, state, manifest = {}, oldState = {}) => {
       if (evaluated instanceof RawHtml && isPureBinding &&
           (element._vibeRawHtml || element.childNodes.length === 1)) {
         const html = evaluated.html;
+        element._vibeRawHtml = true;
         if (element._vibeRawHtmlValue !== html) {
           element.innerHTML = html;
           for (const child of element.children) managedNodes.add(child);
           markBoundValues(element, html);
           element._vibeRawHtmlValue = html;
         }
-        element._vibeRawHtml = true;
         if (aff.binding?._sub) aff.binding._sub.anchor = element;
         return;
       }

package/runtime/index.js

@@ -8,9 +8,9 @@ import { unsafe } from './raw-html.js';
 import { renderAllIterations, setRenderAllConditionals, releaseOrphanedIterationProps } from './iterate.js';
 import { renderAllConditionals, branchNodeRegistry, managedNodes , settleConditionals} from './conditionals.js';
 import { installScopeResolver } from './loop-scope.js';
+import { isInert } from './inert.js';
 import {
   VERSION,
-  NON_REACTIVE_ELEMENTS,
   PHASE_ATTACH,
   PHASE_PARSE,
   PHASE_MANIFEST,
@@ -22,7 +22,6 @@ import {
   PHASE_MUTATE,
   PHASE_HYPERSPEED,
   PHASE_READY,
-  DEHYDRATE_CLASS_OR_ATTR,
 } from './constants.js';
 import { processComponent, abortComponentFetch, collectComponentIds, releaseOrphanedComponentState, renderComponentTemplate, executeCompiledComponentScripts } from './component.js';
 import { configureComponentCache, clearComponentCache } from './component-cache.js';
@@ -57,21 +56,7 @@ const shouldProcessNode = (node) => {
     return false;
   }
 
-  let current = node;
-  while (current && current !== document.body) {
-    if (NON_REACTIVE_ELEMENTS.includes(current.nodeName)) {
-      return false;
-    }
-    if (
-      current.hasAttribute?.(DEHYDRATE_CLASS_OR_ATTR) ||
-      current.classList?.contains(DEHYDRATE_CLASS_OR_ATTR)
-    ) {
-      return false;
-    }
-    current = current.parentElement;
-  }
-
-  return true;
+  return !isInert(node);
 };
 
 const navigateTree = (tree, path) => {

package/runtime/inert.js

@@ -0,0 +1,18 @@
+import { NON_REACTIVE_ELEMENTS, DEHYDRATE_CLASS_OR_ATTR } from './constants.js';
+
+const opaque = (node) =>
+  NON_REACTIVE_ELEMENTS.includes(node.nodeName) ||
+  node.hasAttribute?.(DEHYDRATE_CLASS_OR_ATTR) ||
+  node.classList?.contains(DEHYDRATE_CLASS_OR_ATTR);
+
+export const isInert = (node, root = document.body) => {
+  if (opaque(node)) return true;
+
+  let current = node.parentElement;
+  while (current && current !== root) {
+    if (opaque(current) || current._vibeRawHtml) return true;
+    current = current.parentElement;
+  }
+
+  return false;
+};

package/runtime/vibe-css.js

@@ -1,17 +1,4 @@
-export const COVER_CSS = `/* Load-bearing pre-boot rules — the runtime, vite plugin and compiler inject
- * these themselves (linking vibe.css is not required for correctness).
- *
- * [vibe-fouc] covers the page until hydration completes: visibility: hidden
- * receives no pointer events, so authored on* handlers cannot fire before
- * boot rewrites them. Animations too, not just transitions: visibility:
- * hidden does not pause CSS animations — a covered element still animates
- * and still fires animationend, reaching inline handlers before the module
- * chain defines them. Suppressed under the cover, entrance animations
- * instead play on reveal, matching what the user actually sees.
- *
- * [vibe-staged]: a route/key remount stages the incoming wrapper as a hidden
- * sibling of the outgoing page until the commit swaps them in one paint. */
-[vibe-fouc], .vibe-fouc { visibility: hidden }
+export const COVER_CSS = `[vibe-fouc], .vibe-fouc { visibility: hidden }
 [vibe-staged] { display: none }
 [vibe-fouc], .vibe-fouc, [vibe-fouc] *, .vibe-fouc * { transition: none !important; animation: none !important }`;
 
@@ -19,10 +6,6 @@ export const OPTIONAL_MARKER = '/* vibe:optional — everything below is skipped
 
 export const LAYOUT_CSS = `${OPTIONAL_MARKER}
 
-/* Component wrappers are layout-transparent: children render as if the
- * wrapper doesn't exist. ([vibe-dehydrate] needs no rules — it is a marker
- * attribute/class telling the runtime to skip processing, for literal @[…]
- * syntax in docs and code samples.) */
 component, div.component, slot, div.slot { display: contents }`;
 
 const inject = (doc, marker, css) => {

package/vibe.css

@@ -1,24 +1,7 @@
-/* Load-bearing pre-boot rules — the runtime, vite plugin and compiler inject
- * these themselves (linking vibe.css is not required for correctness).
- *
- * [vibe-fouc] covers the page until hydration completes: visibility: hidden
- * receives no pointer events, so authored on* handlers cannot fire before
- * boot rewrites them. Animations too, not just transitions: visibility:
- * hidden does not pause CSS animations — a covered element still animates
- * and still fires animationend, reaching inline handlers before the module
- * chain defines them. Suppressed under the cover, entrance animations
- * instead play on reveal, matching what the user actually sees.
- *
- * [vibe-staged]: a route/key remount stages the incoming wrapper as a hidden
- * sibling of the outgoing page until the commit swaps them in one paint. */
 [vibe-fouc], .vibe-fouc { visibility: hidden }
 [vibe-staged] { display: none }
 [vibe-fouc], .vibe-fouc, [vibe-fouc] *, .vibe-fouc * { transition: none !important; animation: none !important }
 
 /* vibe:optional — everything below is skipped by disableVibeCss */
 
-/* Component wrappers are layout-transparent: children render as if the
- * wrapper doesn't exist. ([vibe-dehydrate] needs no rules — it is a marker
- * attribute/class telling the runtime to skip processing, for literal @[…]
- * syntax in docs and code samples.) */
 component, div.component, slot, div.slot { display: contents }