@ape-egg/vibe 2.1.3 → 2.1.6

package/compiler/src/parser/html.rs

@@ -190,7 +190,7 @@ impl HtmlParser {
             // Find all tags that match loaded elements
             for (tag_name, element) in &self.cache {
                 // Match opening and closing tags with any attributes and children
-                let tag_pattern = format!(r"<{}(\s[^>]*)?>", regex::escape(tag_name));
+                let tag_pattern = format!(r"<{}(\s{})?>", regex::escape(tag_name), ATTR_RUN);
                 let tag_re = regex::Regex::new(&tag_pattern).unwrap();
                 let closing_pattern = format!(r"</{}>", regex::escape(tag_name));
 
@@ -261,7 +261,11 @@ impl HtmlParser {
     fn find_matching_close(content: &str, after_open: usize, tag_name: &str) -> Option<usize> {
         // (?:\s|>) ensures <component> matches but not <component-foo> (hyphen is not \s or >)
         let open_re = regex::Regex::new(&format!(r"<{}(?:\s|>|/>)", regex::escape(tag_name))).unwrap();
-        let close_re = regex::Regex::new(&format!(r"</{}>", regex::escape(tag_name))).unwrap();
+        // `\s*>` tolerates whitespace before the `>` of an end tag — HTML allows
+        // it, and whitespace-controlled markup splits end tags across lines
+        // (`</component\n>`). `\s*` can't bridge into `</component-foo>` (the `-`
+        // is neither whitespace nor `>`), so this stays exact on the tag name.
+        let close_re = regex::Regex::new(&format!(r"</{}\s*>", regex::escape(tag_name))).unwrap();
 
         let mut depth = 1i32;
         let mut cursor = after_open;
@@ -332,7 +336,7 @@ impl HtmlParser {
 
         // Match only the opening tag — slot content is extracted via depth-counting close search
         // to correctly handle slot content that contains </div> or nested <component> elements.
-        let pattern = format!(r#"<(component|div)\s+([^>]*)\bsrc="{}"\s*([^>]*)>"#, regex::escape(&normalized_src));
+        let pattern = format!(r#"<(component|div)\s+({attr})\bsrc="{src}"\s*({attr})>"#, attr = ATTR_RUN, src = regex::escape(&normalized_src));
         let open_re = regex::Regex::new(&pattern).unwrap();
 
         let matches: Vec<_> = open_re.captures_iter(&result).filter_map(|cap| {
@@ -389,7 +393,7 @@ impl HtmlParser {
         // Match only the opening component tag — slot content is extracted via depth-counting
         // to correctly handle slot content containing </div> or nested <component> elements.
         let open_re = regex::Regex::new(
-            r#"<(component|div)\s+([^>]*)\bsrc="([^"]+)"([^>]*)>"#
+            &format!(r#"<(component|div)\s+({attr})\bsrc="([^"]+)"({attr})>"#, attr = ATTR_RUN)
         ).unwrap();
 
         // Process one match at a time with re-scanning after each replacement.
@@ -499,6 +503,13 @@ fn neuter_component_scripts(html: &str) -> String {
     html.replace("<script type=\"module\"", "<script type=\"vibe-module\"")
 }
 
+/// A run of HTML attributes where `>` is permitted only inside a quoted value.
+/// Mirrors a real HTML tokenizer: a tag ends on an *unquoted* `>` only. Without
+/// this, a binding prop like `flipped="@[a >= b]"` truncates the open tag at the
+/// `>` inside its value, so the trailing attributes get mis-parsed (empty
+/// boolean props → literal `true`) and corrupt the inlined template.
+const ATTR_RUN: &str = r#"(?:"[^"]*"|'[^']*'|[^>"'])*"#;
+
 fn is_ident_byte(b: u8) -> bool {
     b.is_ascii_alphanumeric() || b == b'_' || b == b'$'
 }
@@ -744,3 +755,102 @@ fn transform_custom_tags_to_divs(content: &str, reserved_elements: &[String]) ->
 
     result
 }
+
+#[cfg(test)]
+mod tests {
+    use super::*;
+
+    #[test]
+    fn find_matching_close_tolerates_whitespace_in_end_tag() {
+        // Whitespace-controlled markup splits an end tag across lines, e.g.
+        //   <icon-cell
+        //     ><component src="x"></component
+        //   ></icon-cell>
+        // which reaches the inliner as `</component\n>`. HTML permits
+        // whitespace before the `>` of an end tag, so the depth counter must
+        // treat `</component\n>` as the nested close. If it doesn't, the nested
+        // open is counted but never closed and the OUTER close search overshoots,
+        // swallowing every following sibling into the component.
+        let content = "<component><a><component src=\"x\"></component\n></a></component><sibling></sibling>";
+        let after_open = "<component>".len();
+
+        let close = HtmlParser::find_matching_close(content, after_open, "component")
+            .expect("outer </component> must be found");
+
+        // The match must be the OUTER close (immediately before <sibling>), not
+        // an overshoot past it.
+        assert!(content[close..].starts_with("</component>"), "matched wrong close: {:?}", &content[close..close + 14]);
+        assert!(content[close..].contains("<sibling>"), "sibling was swallowed into the component");
+    }
+
+    #[test]
+    fn inline_component_tolerates_gt_in_prop_binding() {
+        // A component prop whose `@[...]` value contains a comparison operator
+        // (`>=`) must not truncate the open tag at the `>` *inside the value*.
+        // The flawed `[^>]*` attribute run cut the tag mid-attribute, so the
+        // trailing identifiers (`selectedBrawlers`, `length`) were mis-parsed as
+        // empty boolean props (→ literal `true`), rewriting the loop expression
+        // to `brawlHandCards(characters, true)` — which throws `true.includes is
+        // not a function` at runtime, so the card discs never render.
+        let parser = HtmlParser::new(std::path::PathBuf::from("."));
+        let page = concat!(
+            r#"<page><component src="/components/remote/CardHand.html" "#,
+            r#"cards="@[brawlHandCards(characters, selectedBrawlers)]" "#,
+            r#"flipped="@[selectedBrawlers.length >= maxBrawlers]" "#,
+            r#"angle="16"></component></page>"#,
+        );
+        let template = concat!(
+            r#"<card-hand flipped="@[flipped]"><card-fan style="--angle: @[angle]deg">"#,
+            r#"<!-- each cards as card (card.id), i --><card-slot data-id="@[card.id]"></card-slot>"#,
+            r#"<!-- /each --></card-fan></card-hand>"#,
+        );
+        let mut cache = HashMap::new();
+        cache.insert("/components/remote/CardHand.html".to_string(), template.to_string());
+
+        let out = parser.inline_component_elements(page, &cache);
+
+        // The loop expression must carry `selectedBrawlers` through untouched.
+        assert!(
+            out.contains("brawlHandCards(characters, selectedBrawlers)"),
+            "loop expression corrupted: {out}"
+        );
+        assert!(
+            !out.contains("brawlHandCards(characters, true)"),
+            "selectedBrawlers wrongly replaced with `true`: {out}"
+        );
+        // The binding prop keeps its full comparison expression.
+        assert!(
+            out.contains(r#"flipped="@[selectedBrawlers.length >= maxBrawlers]""#),
+            "flipped binding lost: {out}"
+        );
+        // A literal prop *after* the `>=` prop must still substitute — proof the
+        // tag was parsed to the real `>`, not the one inside the value.
+        assert!(out.contains("--angle: 16deg"), "angle not substituted: {out}");
+    }
+
+    #[test]
+    fn inline_custom_element_tolerates_gt_in_prop_binding() {
+        // Same defect in the custom-element inliner's `<tag(\s[^>]*)?>` regex.
+        // (Cached element tags are filename-derived single words — see element.rs.)
+        let mut parser = HtmlParser::new(std::path::PathBuf::from("."));
+        parser.cache.insert(
+            "gauge".to_string(),
+            Element::new(
+                "gauge".to_string(),
+                std::path::PathBuf::from("gauge.html"),
+                r#"<gauge-inner show="@[show]" n="@[count]"></gauge-inner>"#.to_string(),
+            ),
+        );
+
+        let page = r#"<page><gauge show="@[items.length >= max]" count="7"></gauge></page>"#;
+        let out = parser.inline_custom_elements(page);
+
+        // The `>=` inside the binding must not have truncated the open tag.
+        assert!(
+            out.contains(r#"show="@[items.length >= max]""#),
+            "show binding lost: {out}"
+        );
+        // A literal prop after the `>=` prop still substitutes → tag parsed fully.
+        assert!(out.contains(r#"n="7""#), "count not substituted: {out}");
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ape-egg/vibe",
-  "version": "2.1.3",
+  "version": "2.1.6",
   "type": "module",
   "description": "Runtime-first reactivity with optional compiler",
   "main": "index.js",

package/runtime/pre-compiled-manifest.js

@@ -126,6 +126,98 @@ export const buildHyperspeedManifest = (parsedTree) => {
 let hyperspeedData = null;
 let hyperspeedDetectionAttempted = false;
 
+/**
+ * Build the ordered list of manifest URLs to try for a page, most-likely first.
+ *
+ * `pathname` is window.location.pathname; `route` is the optional route template
+ * the page declares (window.__ROUTE__, e.g. "/brawlers/:index"). When the route
+ * marks a segment dynamic with `:param`, the compiler has collapsed that segment
+ * to `$` in the manifest path — so we point straight at the tokenized manifest
+ * instead of probing literal paths (`/brawlers/0.html.manifest.js`) that are
+ * guaranteed to 404. Without the route hint the original literal-first strategies
+ * apply unchanged. The result is de-duplicated (subdirectory pages otherwise
+ * produce the same candidate twice).
+ *
+ * @param {string} pathname
+ * @param {string|null|undefined} route
+ * @returns {string[]}
+ */
+export const buildManifestCandidatePaths = (pathname, route) => {
+  let pagePath = pathname;
+
+  // Normalize path: handle directory URLs and missing extensions
+  if (pagePath.endsWith("/")) {
+    pagePath = pagePath + "index.html";
+  } else if (!pagePath.includes(".")) {
+    const lastSlash = pagePath.lastIndexOf("/");
+    const lastSegment = pagePath.substring(lastSlash + 1);
+    if (lastSegment && !lastSegment.includes(".")) {
+      pagePath = pagePath + ".html";
+    }
+  }
+
+  const pathSegments = pagePath.split("/").filter((s) => s);
+  if (pathSegments.length === 0) return [];
+
+  const fileName = pathSegments[pathSegments.length - 1];
+  const dirSegments = pathSegments.slice(0, -1);
+
+  const possiblePaths = [];
+
+  // Route-aware fast path: a `:segment` in the declared route is a dynamic param
+  // the compiler tokenized to `$`. Tokenize exactly those positions (params can
+  // sit mid-path, e.g. /a/:id/b) and try that manifest first — a direct hit, no
+  // 404 probing. Skipped entirely when no route is declared.
+  const routeSegments = route ? route.split("/").filter((s) => s) : null;
+  if (routeSegments && routeSegments.some((s) => s.startsWith(":"))) {
+    const tokenized = pathSegments.map((seg, i) => {
+      if (!routeSegments[i]?.startsWith(":")) return seg;
+      const dot = seg.indexOf(".");
+      return dot >= 0 ? "$" + seg.slice(dot) : "$";
+    });
+    possiblePaths.push(`/vibe-hyperspeed/${tokenized.join("/")}.manifest.js`);
+  }
+
+  // Strategy 1: vibe-hyperspeed at the same level as parent directory
+  // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
+  if (dirSegments.length >= 1) {
+    const subPath = dirSegments.slice(1).join("/"); // Everything after first dir
+    const baseDir = "/" + dirSegments[0]; // First directory segment
+    possiblePaths.push(
+      `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
+    );
+  }
+
+  // Strategy 2: vibe-hyperspeed at web root (original behavior)
+  // /compiled/playground/test.html -> /vibe-hyperspeed/compiled/playground/test.html.manifest.js
+  possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
+
+  // Strategy 3: vibe-hyperspeed relative to immediate parent
+  // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
+  if (dirSegments.length > 0) {
+    const relativePath = dirSegments.join("/");
+    possiblePaths.push(
+      `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
+    );
+  }
+
+  // Strategy 4: dynamic routes without a declared route. The compiler collapses a
+  // `$param` segment to a single `$` token (the-arena/$id.html ->
+  // the-arena/$.html.manifest.js), so a concrete URL only matches once its
+  // trailing segment is tokenized. Tried after the literal strategies, so static
+  // pages still win on an exact hit.
+  const dot = fileName.indexOf(".");
+  const tokenized = dot >= 0 ? "$" + fileName.slice(dot) : "$";
+  if (tokenized !== fileName) {
+    const dirPrefix = dirSegments.length ? `/${dirSegments.join("/")}` : "";
+    possiblePaths.push(`/vibe-hyperspeed${dirPrefix}/${tokenized}.manifest.js`);
+  }
+
+  // Subdirectory pages make strategies 2 and 3 collapse to the same URL — probe
+  // each candidate once.
+  return [...new Set(possiblePaths)];
+};
+
 /**
  * Detect page-specific manifest (async, cached after first call)
  * Returns { manifest, path } or null
@@ -143,66 +235,15 @@ const detectHyperspeed = async () => {
   const skipNetwork = !!document.querySelector("[vibe-fouc], .vibe-fouc");
 
   try {
-    let pagePath = window.location.pathname;
-
-    // Normalize path: handle directory URLs and missing extensions
-    if (pagePath.endsWith("/")) {
-      // /compiled/ -> /compiled/index.html
-      pagePath = pagePath + "index.html";
-    } else if (!pagePath.includes(".")) {
-      // /compiled/mypage -> /compiled/mypage.html
-      const lastSlash = pagePath.lastIndexOf("/");
-      const lastSegment = pagePath.substring(lastSlash + 1);
-      if (lastSegment && !lastSegment.includes(".")) {
-        pagePath = pagePath + ".html";
-      }
-    }
-
-    const pathSegments = pagePath.split("/").filter((s) => s);
-
-    if (pathSegments.length === 0) return null;
-
-    // Extract file name and directory parts
-    // For /compiled/playground/test.html -> ['compiled', 'playground', 'test.html']
-    const fileName = pathSegments[pathSegments.length - 1];
-    const dirSegments = pathSegments.slice(0, -1); // All parts except filename
-
-    // Build possible manifest paths
-    const possiblePaths = [];
-
-    // Strategy 1: vibe-hyperspeed at the same level as parent directory
-    // /compiled/playground/test.html -> /compiled/vibe-hyperspeed/playground/test.html.manifest.js
-    if (dirSegments.length >= 1) {
-      const subPath = dirSegments.slice(1).join("/"); // Everything after first dir
-      const baseDir = "/" + dirSegments[0]; // First directory segment
-      possiblePaths.push(
-        `${baseDir}/vibe-hyperspeed/${subPath ? subPath + "/" : ""}${fileName}.manifest.js`,
-      );
-    }
-
-    // Strategy 2: vibe-hyperspeed at web root (original behavior)
-    // /compiled/playground/test.html -> /vibe-hyperspeed/compiled/playground/test.html.manifest.js
-    possiblePaths.push(`/vibe-hyperspeed${pagePath}.manifest.js`);
-
-    // Strategy 3: vibe-hyperspeed relative to immediate parent
-    // /playground/test.html -> /vibe-hyperspeed/playground/test.html.manifest.js
-    if (dirSegments.length > 0) {
-      const relativePath = dirSegments.join("/");
-      possiblePaths.push(
-        `/vibe-hyperspeed/${relativePath}/${fileName}.manifest.js`,
-      );
-    }
-
-    // Strategy 4: dynamic routes. The compiler collapses a `$param` segment to a
-    // single `$` token (the-arena/$id.html -> the-arena/$.html.manifest.js), so a
-    // concrete URL only matches once its trailing segment is tokenized. Tried
-    // after the literal strategies, so static pages still win on an exact hit.
-    const dot = fileName.indexOf(".");
-    const tokenized = dot >= 0 ? "$" + fileName.slice(dot) : "$";
-    if (tokenized !== fileName) {
-      const dirPrefix = dirSegments.length ? `/${dirSegments.join("/")}` : "";
-      possiblePaths.push(`/vibe-hyperspeed${dirPrefix}/${tokenized}.manifest.js`);
-    }
+    // window.__ROUTE__ is the page's route template (e.g. "/brawlers/:index"),
+    // injected by the compiler/dev server for dynamic pages. It lets us resolve
+    // the tokenized `$` manifest directly instead of probing literal 404s.
+    const possiblePaths = buildManifestCandidatePaths(
+      window.location.pathname,
+      typeof window !== "undefined" ? window.__ROUTE__ : null,
+    );
+
+    if (possiblePaths.length === 0) return null;
 
     if (!skipNetwork) {
       // Fully-runtime dynamic import. Hidden behind `new Function` so any

package/runtime/pre-compiled-manifest.test.mjs

@@ -0,0 +1,58 @@
+import assert from 'node:assert';
+
+// The module runs a top-level `await detectHyperspeed()` that touches the DOM,
+// so stub the globals before importing it. querySelector returns truthy →
+// skipNetwork → no import() probing during module init.
+globalThis.window = { location: { pathname: '/' }, __ROUTE__: undefined };
+globalThis.document = { querySelector: () => ({}) };
+
+const { buildManifestCandidatePaths } = await import('./pre-compiled-manifest.js');
+
+let passed = 0;
+const test = (name, fn) => {
+  fn();
+  passed++;
+  console.log(`  ok - ${name}`);
+};
+
+// Dynamic route: window.__ROUTE__ tells us the trailing segment is a param, so
+// the very first candidate must be the tokenized `$` manifest — no literal
+// `0.html.manifest.js` probes that are guaranteed to 404.
+test('dynamic route resolves the $ manifest first (no literal probing)', () => {
+  const paths = buildManifestCandidatePaths('/brawlers/0', '/brawlers/:index');
+  assert.strictEqual(paths[0], '/vibe-hyperspeed/brawlers/$.html.manifest.js');
+  assert.ok(
+    !paths.includes('/vibe-hyperspeed/brawlers/0.html.manifest.js') ||
+      paths.indexOf('/vibe-hyperspeed/brawlers/$.html.manifest.js') <
+        paths.indexOf('/vibe-hyperspeed/brawlers/0.html.manifest.js'),
+    'tokenized path must come before any literal path',
+  );
+});
+
+// Mid-path params tokenize by position, not just the filename.
+test('tokenizes only the param segments named by the route', () => {
+  const paths = buildManifestCandidatePaths(
+    '/_internal/characters/troll',
+    '/_internal/characters/:key',
+  );
+  assert.strictEqual(
+    paths[0],
+    '/vibe-hyperspeed/_internal/characters/$.html.manifest.js',
+  );
+});
+
+// Static page: no route hint, behaviour unchanged, no duplicate candidates.
+test('static top-level page resolves cleanly with no duplicates', () => {
+  const paths = buildManifestCandidatePaths('/armory', null);
+  assert.ok(paths.includes('/vibe-hyperspeed/armory.html.manifest.js'));
+  assert.strictEqual(paths.length, new Set(paths).size, 'no duplicate candidates');
+});
+
+// Subdirectory static page: strategies 2 and 3 collapse to the same URL — it
+// must be probed once, not twice.
+test('subdirectory page dedupes identical candidates', () => {
+  const paths = buildManifestCandidatePaths('/foo/bar', null);
+  assert.strictEqual(paths.length, new Set(paths).size, 'no duplicate candidates');
+});
+
+console.log(`\n${passed} passed`);