jq79 0.4.0 → 0.4.2

package/dist/reactive.d.ts

@@ -15,6 +15,7 @@ export declare const $reactive: <T extends Record<string, any>>(data: T) => Reac
 export type EffectScope = {
     effect: (run: () => void) => void;
     onDispose: (fn: Unsubscribe) => void;
+    refresh: () => void;
     dispose: () => void;
 };
 export declare const createEffectScope: (scope: Record<string, any>) => EffectScope;

package/dist/vite.cjs

@@ -28,18 +28,66 @@ var import_node_path = require("path");
 var import_vite = require("vite");
 var COMPONENT_QUERY = "?jq79";
 var SCRIPT_BLOCK_RE = /<script\b[^>]*>([\s\S]*?)<\/script\s*>/gi;
-var IMPORT_LITERAL_RE = /(?<![\w$.])import\s*\(\s*(["'])([^"'\n]+?)\1\s*\)/g;
-var STATIC_IMPORT_LITERAL_RE = /(?<![\w$.])import\s*(?:[\w$\s,{}*]+?\s*from\s*)?(["'])([^"'\n]+)\1/g;
+var IMPORT_CALL_RE = /import\s*\(\s*(["'])([^"'\n]+?)\1\s*\)/y;
+var STATIC_IMPORT_RE = /import\s*(?:[\w$\s,{}*]+?\s*from\s*)?(["'])([^"'\n]+)\1/y;
+var skipString = (src, start) => {
+  const quote = src[start];
+  let i = start + 1;
+  while (i < src.length) {
+    if (src[i] === "\\") {
+      i += 2;
+      continue;
+    }
+    if (src[i] === quote) return i + 1;
+    i++;
+  }
+  return src.length;
+};
+var importSpecifiers = (script) => {
+  const specs = [];
+  let i = 0;
+  while (i < script.length) {
+    const ch = script[i];
+    if (ch === "'" || ch === '"' || ch === "`") {
+      i = skipString(script, i);
+      continue;
+    }
+    if (ch === "/" && script[i + 1] === "/") {
+      const end = script.indexOf("\n", i);
+      i = end === -1 ? script.length : end + 1;
+      continue;
+    }
+    if (ch === "/" && script[i + 1] === "*") {
+      const end = script.indexOf("*/", i + 2);
+      i = end === -1 ? script.length : end + 2;
+      continue;
+    }
+    if (ch === "i" && (i === 0 || !/[\w$.]/.test(script[i - 1]))) {
+      IMPORT_CALL_RE.lastIndex = i;
+      const call = IMPORT_CALL_RE.exec(script);
+      if (call) {
+        specs.push(call[2]);
+        i = IMPORT_CALL_RE.lastIndex;
+        continue;
+      }
+      STATIC_IMPORT_RE.lastIndex = i;
+      const staticImport = STATIC_IMPORT_RE.exec(script);
+      if (staticImport) {
+        specs.push(staticImport[2]);
+        i = STATIC_IMPORT_RE.lastIndex;
+        continue;
+      }
+    }
+    i++;
+  }
+  return specs;
+};
 var isHtmlUrl = (spec) => /\.html?([?#]|$)/.test(spec);
 var isExternalUrl = (spec) => /^[a-z][a-z0-9+.-]*:/i.test(spec) || spec.startsWith("/");
 var hoistableImports = (source, include) => {
   const specifiers = /* @__PURE__ */ new Set();
   for (const [, script] of source.matchAll(SCRIPT_BLOCK_RE)) {
-    const specs = [
-      ...[...script.matchAll(IMPORT_LITERAL_RE)].map((match) => match[2]),
-      ...[...script.matchAll(STATIC_IMPORT_LITERAL_RE)].map((match) => match[2])
-    ];
-    for (const spec of specs) {
+    for (const spec of importSpecifiers(script)) {
       if (isExternalUrl(spec)) continue;
       if (isHtmlUrl(spec) && !include.test(spec)) continue;
       specifiers.add(spec);

package/dist/vite.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../dev/vite.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\"\nimport { relative } from \"node:path\"\nimport { preprocessCSS } from \"vite\"\nimport type { Plugin, ResolvedConfig } from \"vite\"\n\n// Vite plugin: import .html single-file components as modules.\n//\n//   import { jq79 } from \"jq79/vite\"          // vite.config\n//   import UserCard from \"./UserCard.html\"    // app code\n//\n// The imported value is a Component79 built from the file's source - the same\n// thing `await Component79.fetch(url)` resolves to, but bundled at build time\n// instead of fetched at runtime. The component source is inlined verbatim, so\n// a file keeps working unchanged if it's ever served from public/ and loaded\n// with fetch instead - with one deliberate exception: <style lang=\"scss\"> (or\n// less/stylus/sass) is compiled to plain CSS here. A component using `lang`\n// therefore only works through the bundler; loaded with fetch() it would\n// reach the runtime uncompiled, which the runtime warns about.\n//\n// Only .html files imported from other modules are claimed; entry points\n// (index.html) have no importer and imports carrying an explicit query\n// (?raw, ?url) keep their built-in Vite meaning.\n\nexport interface Jq79PluginOptions {\n  // which import specifiers are treated as components (default: any .html)\n  include?: RegExp\n  // resolved absolute paths to skip even when `include` matches\n  exclude?: RegExp\n}\n\n// claimed modules get this suffix so their id no longer ends in \".html\" and\n// Vite's own html handling (entries, asset pipeline) leaves them alone\nconst COMPONENT_QUERY = \"?jq79\"\n\nconst SCRIPT_BLOCK_RE = /<script\\b[^>]*>([\\s\\S]*?)<\\/script\\s*>/gi\n// import(\"...\") with a literal specifier; the lookbehind skips $__import and\n// property accesses like foo.import(...)\nconst IMPORT_LITERAL_RE = /(?<![\\w$.])import\\s*\\(\\s*([\"'])([^\"'\\n]+?)\\1\\s*\\)/g\n// static import statements (factory scripts): optional clause + literal\n// specifier. The clause can't contain parens/quotes, so dynamic import()\n// and import.meta never match\nconst STATIC_IMPORT_LITERAL_RE = /(?<![\\w$.])import\\s*(?:[\\w$\\s,{}*]+?\\s*from\\s*)?([\"'])([^\"'\\n]+)\\1/g\n\nconst isHtmlUrl = (spec: string) => /\\.html?([?#]|$)/.test(spec)\nconst isExternalUrl = (spec: string) => /^[a-z][a-z0-9+.-]*:/i.test(spec) || spec.startsWith(\"/\")\n\n// literal import specifiers in the component's script blocks - dynamic\n// `import(\"...\")` calls and static factory-script imports - that should\n// resolve from the bundle instead of at runtime. Absolute paths and full\n// URLs are left alone (they point at served files, e.g. public/), and so\n// are .html specifiers the plugin wouldn't claim as components\nconst hoistableImports = (source: string, include: RegExp): string[] => {\n  const specifiers = new Set<string>()\n  for (const [, script] of source.matchAll(SCRIPT_BLOCK_RE)) {\n    const specs = [\n      ...[...script.matchAll(IMPORT_LITERAL_RE)].map(match => match[2]),\n      ...[...script.matchAll(STATIC_IMPORT_LITERAL_RE)].map(match => match[2]),\n    ]\n    for (const spec of specs) {\n      if (isExternalUrl(spec)) continue\n      if (isHtmlUrl(spec) && !include.test(spec)) continue // html left to runtime fetch\n      specifiers.add(spec) // a claimed component, a source file or an npm package\n    }\n  }\n  return [...specifiers]\n}\n\n// a <style> block with its attribute string, so `lang` can be read and the\n// content replaced. Attribute values are matched as quoted chunks so a \">\"\n// inside one doesn't end the tag early\nconst STYLE_BLOCK_RE = /<style((?:\"[^\"]*\"|'[^']*'|[^>\"'])*)>([\\s\\S]*?)<\\/style\\s*>/gi\nconst LANG_ATTR_RE = /\\blang\\s*=\\s*(?:\"([^\"]*)\"|'([^']*)'|([^\\s>]+))/i\n\n// compiles <style lang=\"scss|less|styl|sass\"> blocks to plain CSS with Vite's\n// own preprocessing (the same call @vitejs/plugin-vue makes), so the runtime\n// only ever sees CSS. The preprocessor picks its parser from the extension,\n// and resolving relative @use/@import against a filename in the component's\n// own directory is what makes `@use \"./vars\"` work. Files the preprocessor\n// pulls in are registered as watch deps, so editing a partial re-runs HMR for\n// every component that uses it. `lang` is dropped from the emitted tag: what\n// the runtime parses is a plain <style> (with `scoped` and the rest intact)\nconst compileStyleBlocks = async (\n  source: string,\n  file: string,\n  config: ResolvedConfig,\n  addWatchFile: (id: string) => void\n): Promise<string> => {\n  const blocks = [...source.matchAll(STYLE_BLOCK_RE)]\n  const compiled = await Promise.all(\n    blocks.map(async ([, attrs, content]) => {\n      const lang = attrs.match(LANG_ATTR_RE)\n      if (!lang) return null\n      const extension = lang[1] ?? lang[2] ?? lang[3]\n      const result = await preprocessCSS(content, `${file}.${extension}`, config)\n      result.deps?.forEach(addWatchFile)\n      return { attrs: attrs.replace(LANG_ATTR_RE, \"\").trimEnd(), css: result.code }\n    })\n  )\n\n  let out = \"\"\n  let last = 0\n  blocks.forEach((block, i) => {\n    const done = compiled[i]\n    if (!done) return\n    out += source.slice(last, block.index) + `<style${done.attrs}>${done.css}</style>`\n    last = block.index + block[0].length\n  })\n  return out + source.slice(last)\n}\n\n// the emitted module. Literal import(\"...\") specifiers found in the\n// component's scripts become real module imports, handed to Component79 as a\n// resolution map: at runtime $__import checks the map before falling back to\n// fetch, so bundled components ship with their imports and nothing changes\n// for unbundled ones. Claimed components import as their default (a\n// Component79, matching what runtime fetch resolves to); everything else as\n// a namespace (matching native import()).\n//\n// In dev, `hot.data` carries the exported instance across updates: importers\n// hold a reference to the *first* module evaluation's instance, so later\n// evaluations patch that same instance in place instead of exporting a new one\n// nobody sees. The patching itself is the runtime's `hotReplace` - the same\n// swap the jq79/dev server drives, from the one place that can reach a\n// component's markers. An instance only used as a definition has nothing to\n// re-render (nested clones can't be reached from this module), so it falls\n// back to a full reload.\nconst componentModule = (source: string, include: RegExp, filename: string): string => {\n  const hoisted = hoistableImports(source, include)\n  const imports = hoisted\n    .map((spec, i) =>\n      include.test(spec)\n        ? `import __jq79_${i} from ${JSON.stringify(spec)}`\n        : `import * as __jq79_${i} from ${JSON.stringify(spec)}`\n    )\n    .join(\"\\n\")\n  const modulesMap = `{ ${hoisted.map((spec, i) => `${JSON.stringify(spec)}: __jq79_${i}`).join(\", \")} }`\n\n  return `\nimport { Component79 } from \"jq79\"\n${imports}\n\nconst src = ${JSON.stringify(source)}\nconst modules = ${modulesMap}\nconst filename = ${JSON.stringify(filename)}\n\nlet component\n\nif (import.meta.hot && import.meta.hot.data.component) {\n  const prior = import.meta.hot.data.component\n  prior.modules = modules\n  prior.filename = filename\n  // re-renders it where it stands, keeping its data. false means it was never\n  // rendered - a definition used only as a nested component - and a reload is\n  // the only way to reach the clones made from it\n  if (!prior.hotReplace(src) && !prior.data) import.meta.hot.invalidate()\n  component = prior\n} else {\n  component = new Component79(src, { modules, filename })\n}\n\nif (import.meta.hot) {\n  import.meta.hot.data.component = component\n  import.meta.hot.accept()\n}\n\nexport default component\n`\n}\n\nexport function jq79(options: Jq79PluginOptions = {}): Plugin {\n  const include = options.include ?? /\\.html$/\n  const { exclude } = options\n\n  let config: ResolvedConfig | null = null\n\n  return {\n    name: \"jq79\",\n    enforce: \"pre\",\n\n    configResolved(resolved) {\n      config = resolved\n    },\n\n    async resolveId(source, importer) {\n      if (!importer) return null // entry points are never components\n      if (source.includes(\"?\")) return null // ?raw, ?url, ... keep their meaning\n      if (!include.test(source)) return null\n\n      const resolved = await this.resolve(source, importer, { skipSelf: true })\n      if (!resolved || resolved.external) return null\n      if (exclude?.test(resolved.id)) return null\n      return resolved.id + COMPONENT_QUERY\n    },\n\n    async load(id) {\n      if (!id.endsWith(COMPONENT_QUERY)) return null\n      const file = id.slice(0, -COMPONENT_QUERY.length)\n\n      let source = await readFile(file, \"utf8\")\n      if (config) source = await compileStyleBlocks(source, file, config, dep => this.addWatchFile(dep))\n\n      // the runtime names the component's setup scripts after this, so devtools\n      // shows a path the user recognizes instead of an anonymous VM script\n      const filename = config ? relative(config.root, file) : file\n\n      return { code: componentModule(source, include, filename), map: null }\n    },\n  }\n}\n\nexport default jq79\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../dev/vite.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\"\nimport { relative } from \"node:path\"\nimport { preprocessCSS } from \"vite\"\nimport type { Plugin, ResolvedConfig } from \"vite\"\n\n// Vite plugin: import .html single-file components as modules.\n//\n//   import { jq79 } from \"jq79/vite\"          // vite.config\n//   import UserCard from \"./UserCard.html\"    // app code\n//\n// The imported value is a Component79 built from the file's source - the same\n// thing `await Component79.fetch(url)` resolves to, but bundled at build time\n// instead of fetched at runtime. The component source is inlined verbatim, so\n// a file keeps working unchanged if it's ever served from public/ and loaded\n// with fetch instead - with one deliberate exception: <style lang=\"scss\"> (or\n// less/stylus/sass) is compiled to plain CSS here. A component using `lang`\n// therefore only works through the bundler; loaded with fetch() it would\n// reach the runtime uncompiled, which the runtime warns about.\n//\n// Only .html files imported from other modules are claimed; entry points\n// (index.html) have no importer and imports carrying an explicit query\n// (?raw, ?url) keep their built-in Vite meaning.\n\nexport interface Jq79PluginOptions {\n  // which import specifiers are treated as components (default: any .html)\n  include?: RegExp\n  // resolved absolute paths to skip even when `include` matches\n  exclude?: RegExp\n}\n\n// claimed modules get this suffix so their id no longer ends in \".html\" and\n// Vite's own html handling (entries, asset pipeline) leaves them alone\nconst COMPONENT_QUERY = \"?jq79\"\n\nconst SCRIPT_BLOCK_RE = /<script\\b[^>]*>([\\s\\S]*?)<\\/script\\s*>/gi\n// import(\"...\") with a literal specifier, tried at word boundaries the\n// scanner below reaches (which is what skips $__import and foo.import(...))\nconst IMPORT_CALL_RE = /import\\s*\\(\\s*([\"'])([^\"'\\n]+?)\\1\\s*\\)/y\n// static import statements (factory scripts): optional clause + literal\n// specifier. The clause can't contain parens/quotes, so dynamic import()\n// and import.meta never match\nconst STATIC_IMPORT_RE = /import\\s*(?:[\\w$\\s,{}*]+?\\s*from\\s*)?([\"'])([^\"'\\n]+)\\1/y\n\nconst skipString = (src: string, start: number): number => {\n  const quote = src[start]\n  let i = start + 1\n  while (i < src.length) {\n    if (src[i] === \"\\\\\") { i += 2; continue }\n    if (src[i] === quote) return i + 1\n    i++\n  }\n  return src.length\n}\n\n// the literal import specifiers in one script body. A scanner rather than a\n// bare matchAll, because a specifier mentioned in a comment or a string is\n// not an import: hoisting a commented-out `import(\"./old.html\")` would pull\n// dead files into the bundle - or break the build once the file is gone\nconst importSpecifiers = (script: string): string[] => {\n  const specs: string[] = []\n  let i = 0\n  while (i < script.length) {\n    const ch = script[i]\n    if (ch === \"'\" || ch === '\"' || ch === \"`\") { i = skipString(script, i); continue }\n    if (ch === \"/\" && script[i + 1] === \"/\") {\n      const end = script.indexOf(\"\\n\", i)\n      i = end === -1 ? script.length : end + 1\n      continue\n    }\n    if (ch === \"/\" && script[i + 1] === \"*\") {\n      const end = script.indexOf(\"*/\", i + 2)\n      i = end === -1 ? script.length : end + 2\n      continue\n    }\n    if (ch === \"i\" && (i === 0 || !/[\\w$.]/.test(script[i - 1]))) {\n      IMPORT_CALL_RE.lastIndex = i\n      const call = IMPORT_CALL_RE.exec(script)\n      if (call) { specs.push(call[2]); i = IMPORT_CALL_RE.lastIndex; continue }\n      STATIC_IMPORT_RE.lastIndex = i\n      const staticImport = STATIC_IMPORT_RE.exec(script)\n      if (staticImport) { specs.push(staticImport[2]); i = STATIC_IMPORT_RE.lastIndex; continue }\n    }\n    i++\n  }\n  return specs\n}\n\nconst isHtmlUrl = (spec: string) => /\\.html?([?#]|$)/.test(spec)\nconst isExternalUrl = (spec: string) => /^[a-z][a-z0-9+.-]*:/i.test(spec) || spec.startsWith(\"/\")\n\n// literal import specifiers in the component's script blocks - dynamic\n// `import(\"...\")` calls and static factory-script imports - that should\n// resolve from the bundle instead of at runtime. Absolute paths and full\n// URLs are left alone (they point at served files, e.g. public/), and so\n// are .html specifiers the plugin wouldn't claim as components\nconst hoistableImports = (source: string, include: RegExp): string[] => {\n  const specifiers = new Set<string>()\n  for (const [, script] of source.matchAll(SCRIPT_BLOCK_RE)) {\n    for (const spec of importSpecifiers(script)) {\n      if (isExternalUrl(spec)) continue\n      if (isHtmlUrl(spec) && !include.test(spec)) continue // html left to runtime fetch\n      specifiers.add(spec) // a claimed component, a source file or an npm package\n    }\n  }\n  return [...specifiers]\n}\n\n// a <style> block with its attribute string, so `lang` can be read and the\n// content replaced. Attribute values are matched as quoted chunks so a \">\"\n// inside one doesn't end the tag early\nconst STYLE_BLOCK_RE = /<style((?:\"[^\"]*\"|'[^']*'|[^>\"'])*)>([\\s\\S]*?)<\\/style\\s*>/gi\nconst LANG_ATTR_RE = /\\blang\\s*=\\s*(?:\"([^\"]*)\"|'([^']*)'|([^\\s>]+))/i\n\n// compiles <style lang=\"scss|less|styl|sass\"> blocks to plain CSS with Vite's\n// own preprocessing (the same call @vitejs/plugin-vue makes), so the runtime\n// only ever sees CSS. The preprocessor picks its parser from the extension,\n// and resolving relative @use/@import against a filename in the component's\n// own directory is what makes `@use \"./vars\"` work. Files the preprocessor\n// pulls in are registered as watch deps, so editing a partial re-runs HMR for\n// every component that uses it. `lang` is dropped from the emitted tag: what\n// the runtime parses is a plain <style> (with `scoped` and the rest intact)\nconst compileStyleBlocks = async (\n  source: string,\n  file: string,\n  config: ResolvedConfig,\n  addWatchFile: (id: string) => void\n): Promise<string> => {\n  const blocks = [...source.matchAll(STYLE_BLOCK_RE)]\n  const compiled = await Promise.all(\n    blocks.map(async ([, attrs, content]) => {\n      const lang = attrs.match(LANG_ATTR_RE)\n      if (!lang) return null\n      const extension = lang[1] ?? lang[2] ?? lang[3]\n      const result = await preprocessCSS(content, `${file}.${extension}`, config)\n      result.deps?.forEach(addWatchFile)\n      return { attrs: attrs.replace(LANG_ATTR_RE, \"\").trimEnd(), css: result.code }\n    })\n  )\n\n  let out = \"\"\n  let last = 0\n  blocks.forEach((block, i) => {\n    const done = compiled[i]\n    if (!done) return\n    out += source.slice(last, block.index) + `<style${done.attrs}>${done.css}</style>`\n    last = block.index + block[0].length\n  })\n  return out + source.slice(last)\n}\n\n// the emitted module. Literal import(\"...\") specifiers found in the\n// component's scripts become real module imports, handed to Component79 as a\n// resolution map: at runtime $__import checks the map before falling back to\n// fetch, so bundled components ship with their imports and nothing changes\n// for unbundled ones. Claimed components import as their default (a\n// Component79, matching what runtime fetch resolves to); everything else as\n// a namespace (matching native import()).\n//\n// In dev, `hot.data` carries the exported instance across updates: importers\n// hold a reference to the *first* module evaluation's instance, so later\n// evaluations patch that same instance in place instead of exporting a new one\n// nobody sees. The patching itself is the runtime's `hotReplace` - the same\n// swap the jq79/dev server drives, from the one place that can reach a\n// component's markers. An instance only used as a definition has nothing to\n// re-render (nested clones can't be reached from this module), so it falls\n// back to a full reload.\nconst componentModule = (source: string, include: RegExp, filename: string): string => {\n  const hoisted = hoistableImports(source, include)\n  const imports = hoisted\n    .map((spec, i) =>\n      include.test(spec)\n        ? `import __jq79_${i} from ${JSON.stringify(spec)}`\n        : `import * as __jq79_${i} from ${JSON.stringify(spec)}`\n    )\n    .join(\"\\n\")\n  const modulesMap = `{ ${hoisted.map((spec, i) => `${JSON.stringify(spec)}: __jq79_${i}`).join(\", \")} }`\n\n  return `\nimport { Component79 } from \"jq79\"\n${imports}\n\nconst src = ${JSON.stringify(source)}\nconst modules = ${modulesMap}\nconst filename = ${JSON.stringify(filename)}\n\nlet component\n\nif (import.meta.hot && import.meta.hot.data.component) {\n  const prior = import.meta.hot.data.component\n  prior.modules = modules\n  prior.filename = filename\n  // re-renders it where it stands, keeping its data. false means it was never\n  // rendered - a definition used only as a nested component - and a reload is\n  // the only way to reach the clones made from it\n  if (!prior.hotReplace(src) && !prior.data) import.meta.hot.invalidate()\n  component = prior\n} else {\n  component = new Component79(src, { modules, filename })\n}\n\nif (import.meta.hot) {\n  import.meta.hot.data.component = component\n  import.meta.hot.accept()\n}\n\nexport default component\n`\n}\n\nexport function jq79(options: Jq79PluginOptions = {}): Plugin {\n  const include = options.include ?? /\\.html$/\n  const { exclude } = options\n\n  let config: ResolvedConfig | null = null\n\n  return {\n    name: \"jq79\",\n    enforce: \"pre\",\n\n    configResolved(resolved) {\n      config = resolved\n    },\n\n    async resolveId(source, importer) {\n      if (!importer) return null // entry points are never components\n      if (source.includes(\"?\")) return null // ?raw, ?url, ... keep their meaning\n      if (!include.test(source)) return null\n\n      const resolved = await this.resolve(source, importer, { skipSelf: true })\n      if (!resolved || resolved.external) return null\n      if (exclude?.test(resolved.id)) return null\n      return resolved.id + COMPONENT_QUERY\n    },\n\n    async load(id) {\n      if (!id.endsWith(COMPONENT_QUERY)) return null\n      const file = id.slice(0, -COMPONENT_QUERY.length)\n\n      let source = await readFile(file, \"utf8\")\n      if (config) source = await compileStyleBlocks(source, file, config, dep => this.addWatchFile(dep))\n\n      // the runtime names the component's setup scripts after this, so devtools\n      // shows a path the user recognizes instead of an anonymous VM script\n      const filename = config ? relative(config.root, file) : file\n\n      return { code: componentModule(source, include, filename), map: null }\n    },\n  }\n}\n\nexport default jq79\n"],"mappings":"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","names":[]}

package/dist/vite.js

@@ -4,18 +4,66 @@ import { relative } from "path";
 import { preprocessCSS } from "vite";
 var COMPONENT_QUERY = "?jq79";
 var SCRIPT_BLOCK_RE = /<script\b[^>]*>([\s\S]*?)<\/script\s*>/gi;
-var IMPORT_LITERAL_RE = /(?<![\w$.])import\s*\(\s*(["'])([^"'\n]+?)\1\s*\)/g;
-var STATIC_IMPORT_LITERAL_RE = /(?<![\w$.])import\s*(?:[\w$\s,{}*]+?\s*from\s*)?(["'])([^"'\n]+)\1/g;
+var IMPORT_CALL_RE = /import\s*\(\s*(["'])([^"'\n]+?)\1\s*\)/y;
+var STATIC_IMPORT_RE = /import\s*(?:[\w$\s,{}*]+?\s*from\s*)?(["'])([^"'\n]+)\1/y;
+var skipString = (src, start) => {
+  const quote = src[start];
+  let i = start + 1;
+  while (i < src.length) {
+    if (src[i] === "\\") {
+      i += 2;
+      continue;
+    }
+    if (src[i] === quote) return i + 1;
+    i++;
+  }
+  return src.length;
+};
+var importSpecifiers = (script) => {
+  const specs = [];
+  let i = 0;
+  while (i < script.length) {
+    const ch = script[i];
+    if (ch === "'" || ch === '"' || ch === "`") {
+      i = skipString(script, i);
+      continue;
+    }
+    if (ch === "/" && script[i + 1] === "/") {
+      const end = script.indexOf("\n", i);
+      i = end === -1 ? script.length : end + 1;
+      continue;
+    }
+    if (ch === "/" && script[i + 1] === "*") {
+      const end = script.indexOf("*/", i + 2);
+      i = end === -1 ? script.length : end + 2;
+      continue;
+    }
+    if (ch === "i" && (i === 0 || !/[\w$.]/.test(script[i - 1]))) {
+      IMPORT_CALL_RE.lastIndex = i;
+      const call = IMPORT_CALL_RE.exec(script);
+      if (call) {
+        specs.push(call[2]);
+        i = IMPORT_CALL_RE.lastIndex;
+        continue;
+      }
+      STATIC_IMPORT_RE.lastIndex = i;
+      const staticImport = STATIC_IMPORT_RE.exec(script);
+      if (staticImport) {
+        specs.push(staticImport[2]);
+        i = STATIC_IMPORT_RE.lastIndex;
+        continue;
+      }
+    }
+    i++;
+  }
+  return specs;
+};
 var isHtmlUrl = (spec) => /\.html?([?#]|$)/.test(spec);
 var isExternalUrl = (spec) => /^[a-z][a-z0-9+.-]*:/i.test(spec) || spec.startsWith("/");
 var hoistableImports = (source, include) => {
   const specifiers = /* @__PURE__ */ new Set();
   for (const [, script] of source.matchAll(SCRIPT_BLOCK_RE)) {
-    const specs = [
-      ...[...script.matchAll(IMPORT_LITERAL_RE)].map((match) => match[2]),
-      ...[...script.matchAll(STATIC_IMPORT_LITERAL_RE)].map((match) => match[2])
-    ];
-    for (const spec of specs) {
+    for (const spec of importSpecifiers(script)) {
       if (isExternalUrl(spec)) continue;
       if (isHtmlUrl(spec) && !include.test(spec)) continue;
       specifiers.add(spec);

package/dist/vite.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../dev/vite.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\"\nimport { relative } from \"node:path\"\nimport { preprocessCSS } from \"vite\"\nimport type { Plugin, ResolvedConfig } from \"vite\"\n\n// Vite plugin: import .html single-file components as modules.\n//\n//   import { jq79 } from \"jq79/vite\"          // vite.config\n//   import UserCard from \"./UserCard.html\"    // app code\n//\n// The imported value is a Component79 built from the file's source - the same\n// thing `await Component79.fetch(url)` resolves to, but bundled at build time\n// instead of fetched at runtime. The component source is inlined verbatim, so\n// a file keeps working unchanged if it's ever served from public/ and loaded\n// with fetch instead - with one deliberate exception: <style lang=\"scss\"> (or\n// less/stylus/sass) is compiled to plain CSS here. A component using `lang`\n// therefore only works through the bundler; loaded with fetch() it would\n// reach the runtime uncompiled, which the runtime warns about.\n//\n// Only .html files imported from other modules are claimed; entry points\n// (index.html) have no importer and imports carrying an explicit query\n// (?raw, ?url) keep their built-in Vite meaning.\n\nexport interface Jq79PluginOptions {\n  // which import specifiers are treated as components (default: any .html)\n  include?: RegExp\n  // resolved absolute paths to skip even when `include` matches\n  exclude?: RegExp\n}\n\n// claimed modules get this suffix so their id no longer ends in \".html\" and\n// Vite's own html handling (entries, asset pipeline) leaves them alone\nconst COMPONENT_QUERY = \"?jq79\"\n\nconst SCRIPT_BLOCK_RE = /<script\\b[^>]*>([\\s\\S]*?)<\\/script\\s*>/gi\n// import(\"...\") with a literal specifier; the lookbehind skips $__import and\n// property accesses like foo.import(...)\nconst IMPORT_LITERAL_RE = /(?<![\\w$.])import\\s*\\(\\s*([\"'])([^\"'\\n]+?)\\1\\s*\\)/g\n// static import statements (factory scripts): optional clause + literal\n// specifier. The clause can't contain parens/quotes, so dynamic import()\n// and import.meta never match\nconst STATIC_IMPORT_LITERAL_RE = /(?<![\\w$.])import\\s*(?:[\\w$\\s,{}*]+?\\s*from\\s*)?([\"'])([^\"'\\n]+)\\1/g\n\nconst isHtmlUrl = (spec: string) => /\\.html?([?#]|$)/.test(spec)\nconst isExternalUrl = (spec: string) => /^[a-z][a-z0-9+.-]*:/i.test(spec) || spec.startsWith(\"/\")\n\n// literal import specifiers in the component's script blocks - dynamic\n// `import(\"...\")` calls and static factory-script imports - that should\n// resolve from the bundle instead of at runtime. Absolute paths and full\n// URLs are left alone (they point at served files, e.g. public/), and so\n// are .html specifiers the plugin wouldn't claim as components\nconst hoistableImports = (source: string, include: RegExp): string[] => {\n  const specifiers = new Set<string>()\n  for (const [, script] of source.matchAll(SCRIPT_BLOCK_RE)) {\n    const specs = [\n      ...[...script.matchAll(IMPORT_LITERAL_RE)].map(match => match[2]),\n      ...[...script.matchAll(STATIC_IMPORT_LITERAL_RE)].map(match => match[2]),\n    ]\n    for (const spec of specs) {\n      if (isExternalUrl(spec)) continue\n      if (isHtmlUrl(spec) && !include.test(spec)) continue // html left to runtime fetch\n      specifiers.add(spec) // a claimed component, a source file or an npm package\n    }\n  }\n  return [...specifiers]\n}\n\n// a <style> block with its attribute string, so `lang` can be read and the\n// content replaced. Attribute values are matched as quoted chunks so a \">\"\n// inside one doesn't end the tag early\nconst STYLE_BLOCK_RE = /<style((?:\"[^\"]*\"|'[^']*'|[^>\"'])*)>([\\s\\S]*?)<\\/style\\s*>/gi\nconst LANG_ATTR_RE = /\\blang\\s*=\\s*(?:\"([^\"]*)\"|'([^']*)'|([^\\s>]+))/i\n\n// compiles <style lang=\"scss|less|styl|sass\"> blocks to plain CSS with Vite's\n// own preprocessing (the same call @vitejs/plugin-vue makes), so the runtime\n// only ever sees CSS. The preprocessor picks its parser from the extension,\n// and resolving relative @use/@import against a filename in the component's\n// own directory is what makes `@use \"./vars\"` work. Files the preprocessor\n// pulls in are registered as watch deps, so editing a partial re-runs HMR for\n// every component that uses it. `lang` is dropped from the emitted tag: what\n// the runtime parses is a plain <style> (with `scoped` and the rest intact)\nconst compileStyleBlocks = async (\n  source: string,\n  file: string,\n  config: ResolvedConfig,\n  addWatchFile: (id: string) => void\n): Promise<string> => {\n  const blocks = [...source.matchAll(STYLE_BLOCK_RE)]\n  const compiled = await Promise.all(\n    blocks.map(async ([, attrs, content]) => {\n      const lang = attrs.match(LANG_ATTR_RE)\n      if (!lang) return null\n      const extension = lang[1] ?? lang[2] ?? lang[3]\n      const result = await preprocessCSS(content, `${file}.${extension}`, config)\n      result.deps?.forEach(addWatchFile)\n      return { attrs: attrs.replace(LANG_ATTR_RE, \"\").trimEnd(), css: result.code }\n    })\n  )\n\n  let out = \"\"\n  let last = 0\n  blocks.forEach((block, i) => {\n    const done = compiled[i]\n    if (!done) return\n    out += source.slice(last, block.index) + `<style${done.attrs}>${done.css}</style>`\n    last = block.index + block[0].length\n  })\n  return out + source.slice(last)\n}\n\n// the emitted module. Literal import(\"...\") specifiers found in the\n// component's scripts become real module imports, handed to Component79 as a\n// resolution map: at runtime $__import checks the map before falling back to\n// fetch, so bundled components ship with their imports and nothing changes\n// for unbundled ones. Claimed components import as their default (a\n// Component79, matching what runtime fetch resolves to); everything else as\n// a namespace (matching native import()).\n//\n// In dev, `hot.data` carries the exported instance across updates: importers\n// hold a reference to the *first* module evaluation's instance, so later\n// evaluations patch that same instance in place instead of exporting a new one\n// nobody sees. The patching itself is the runtime's `hotReplace` - the same\n// swap the jq79/dev server drives, from the one place that can reach a\n// component's markers. An instance only used as a definition has nothing to\n// re-render (nested clones can't be reached from this module), so it falls\n// back to a full reload.\nconst componentModule = (source: string, include: RegExp, filename: string): string => {\n  const hoisted = hoistableImports(source, include)\n  const imports = hoisted\n    .map((spec, i) =>\n      include.test(spec)\n        ? `import __jq79_${i} from ${JSON.stringify(spec)}`\n        : `import * as __jq79_${i} from ${JSON.stringify(spec)}`\n    )\n    .join(\"\\n\")\n  const modulesMap = `{ ${hoisted.map((spec, i) => `${JSON.stringify(spec)}: __jq79_${i}`).join(\", \")} }`\n\n  return `\nimport { Component79 } from \"jq79\"\n${imports}\n\nconst src = ${JSON.stringify(source)}\nconst modules = ${modulesMap}\nconst filename = ${JSON.stringify(filename)}\n\nlet component\n\nif (import.meta.hot && import.meta.hot.data.component) {\n  const prior = import.meta.hot.data.component\n  prior.modules = modules\n  prior.filename = filename\n  // re-renders it where it stands, keeping its data. false means it was never\n  // rendered - a definition used only as a nested component - and a reload is\n  // the only way to reach the clones made from it\n  if (!prior.hotReplace(src) && !prior.data) import.meta.hot.invalidate()\n  component = prior\n} else {\n  component = new Component79(src, { modules, filename })\n}\n\nif (import.meta.hot) {\n  import.meta.hot.data.component = component\n  import.meta.hot.accept()\n}\n\nexport default component\n`\n}\n\nexport function jq79(options: Jq79PluginOptions = {}): Plugin {\n  const include = options.include ?? /\\.html$/\n  const { exclude } = options\n\n  let config: ResolvedConfig | null = null\n\n  return {\n    name: \"jq79\",\n    enforce: \"pre\",\n\n    configResolved(resolved) {\n      config = resolved\n    },\n\n    async resolveId(source, importer) {\n      if (!importer) return null // entry points are never components\n      if (source.includes(\"?\")) return null // ?raw, ?url, ... keep their meaning\n      if (!include.test(source)) return null\n\n      const resolved = await this.resolve(source, importer, { skipSelf: true })\n      if (!resolved || resolved.external) return null\n      if (exclude?.test(resolved.id)) return null\n      return resolved.id + COMPONENT_QUERY\n    },\n\n    async load(id) {\n      if (!id.endsWith(COMPONENT_QUERY)) return null\n      const file = id.slice(0, -COMPONENT_QUERY.length)\n\n      let source = await readFile(file, \"utf8\")\n      if (config) source = await compileStyleBlocks(source, file, config, dep => this.addWatchFile(dep))\n\n      // the runtime names the component's setup scripts after this, so devtools\n      // shows a path the user recognizes instead of an anonymous VM script\n      const filename = config ? relative(config.root, file) : file\n\n      return { code: componentModule(source, include, filename), map: null }\n    },\n  }\n}\n\nexport default jq79\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../dev/vite.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\"\nimport { relative } from \"node:path\"\nimport { preprocessCSS } from \"vite\"\nimport type { Plugin, ResolvedConfig } from \"vite\"\n\n// Vite plugin: import .html single-file components as modules.\n//\n//   import { jq79 } from \"jq79/vite\"          // vite.config\n//   import UserCard from \"./UserCard.html\"    // app code\n//\n// The imported value is a Component79 built from the file's source - the same\n// thing `await Component79.fetch(url)` resolves to, but bundled at build time\n// instead of fetched at runtime. The component source is inlined verbatim, so\n// a file keeps working unchanged if it's ever served from public/ and loaded\n// with fetch instead - with one deliberate exception: <style lang=\"scss\"> (or\n// less/stylus/sass) is compiled to plain CSS here. A component using `lang`\n// therefore only works through the bundler; loaded with fetch() it would\n// reach the runtime uncompiled, which the runtime warns about.\n//\n// Only .html files imported from other modules are claimed; entry points\n// (index.html) have no importer and imports carrying an explicit query\n// (?raw, ?url) keep their built-in Vite meaning.\n\nexport interface Jq79PluginOptions {\n  // which import specifiers are treated as components (default: any .html)\n  include?: RegExp\n  // resolved absolute paths to skip even when `include` matches\n  exclude?: RegExp\n}\n\n// claimed modules get this suffix so their id no longer ends in \".html\" and\n// Vite's own html handling (entries, asset pipeline) leaves them alone\nconst COMPONENT_QUERY = \"?jq79\"\n\nconst SCRIPT_BLOCK_RE = /<script\\b[^>]*>([\\s\\S]*?)<\\/script\\s*>/gi\n// import(\"...\") with a literal specifier, tried at word boundaries the\n// scanner below reaches (which is what skips $__import and foo.import(...))\nconst IMPORT_CALL_RE = /import\\s*\\(\\s*([\"'])([^\"'\\n]+?)\\1\\s*\\)/y\n// static import statements (factory scripts): optional clause + literal\n// specifier. The clause can't contain parens/quotes, so dynamic import()\n// and import.meta never match\nconst STATIC_IMPORT_RE = /import\\s*(?:[\\w$\\s,{}*]+?\\s*from\\s*)?([\"'])([^\"'\\n]+)\\1/y\n\nconst skipString = (src: string, start: number): number => {\n  const quote = src[start]\n  let i = start + 1\n  while (i < src.length) {\n    if (src[i] === \"\\\\\") { i += 2; continue }\n    if (src[i] === quote) return i + 1\n    i++\n  }\n  return src.length\n}\n\n// the literal import specifiers in one script body. A scanner rather than a\n// bare matchAll, because a specifier mentioned in a comment or a string is\n// not an import: hoisting a commented-out `import(\"./old.html\")` would pull\n// dead files into the bundle - or break the build once the file is gone\nconst importSpecifiers = (script: string): string[] => {\n  const specs: string[] = []\n  let i = 0\n  while (i < script.length) {\n    const ch = script[i]\n    if (ch === \"'\" || ch === '\"' || ch === \"`\") { i = skipString(script, i); continue }\n    if (ch === \"/\" && script[i + 1] === \"/\") {\n      const end = script.indexOf(\"\\n\", i)\n      i = end === -1 ? script.length : end + 1\n      continue\n    }\n    if (ch === \"/\" && script[i + 1] === \"*\") {\n      const end = script.indexOf(\"*/\", i + 2)\n      i = end === -1 ? script.length : end + 2\n      continue\n    }\n    if (ch === \"i\" && (i === 0 || !/[\\w$.]/.test(script[i - 1]))) {\n      IMPORT_CALL_RE.lastIndex = i\n      const call = IMPORT_CALL_RE.exec(script)\n      if (call) { specs.push(call[2]); i = IMPORT_CALL_RE.lastIndex; continue }\n      STATIC_IMPORT_RE.lastIndex = i\n      const staticImport = STATIC_IMPORT_RE.exec(script)\n      if (staticImport) { specs.push(staticImport[2]); i = STATIC_IMPORT_RE.lastIndex; continue }\n    }\n    i++\n  }\n  return specs\n}\n\nconst isHtmlUrl = (spec: string) => /\\.html?([?#]|$)/.test(spec)\nconst isExternalUrl = (spec: string) => /^[a-z][a-z0-9+.-]*:/i.test(spec) || spec.startsWith(\"/\")\n\n// literal import specifiers in the component's script blocks - dynamic\n// `import(\"...\")` calls and static factory-script imports - that should\n// resolve from the bundle instead of at runtime. Absolute paths and full\n// URLs are left alone (they point at served files, e.g. public/), and so\n// are .html specifiers the plugin wouldn't claim as components\nconst hoistableImports = (source: string, include: RegExp): string[] => {\n  const specifiers = new Set<string>()\n  for (const [, script] of source.matchAll(SCRIPT_BLOCK_RE)) {\n    for (const spec of importSpecifiers(script)) {\n      if (isExternalUrl(spec)) continue\n      if (isHtmlUrl(spec) && !include.test(spec)) continue // html left to runtime fetch\n      specifiers.add(spec) // a claimed component, a source file or an npm package\n    }\n  }\n  return [...specifiers]\n}\n\n// a <style> block with its attribute string, so `lang` can be read and the\n// content replaced. Attribute values are matched as quoted chunks so a \">\"\n// inside one doesn't end the tag early\nconst STYLE_BLOCK_RE = /<style((?:\"[^\"]*\"|'[^']*'|[^>\"'])*)>([\\s\\S]*?)<\\/style\\s*>/gi\nconst LANG_ATTR_RE = /\\blang\\s*=\\s*(?:\"([^\"]*)\"|'([^']*)'|([^\\s>]+))/i\n\n// compiles <style lang=\"scss|less|styl|sass\"> blocks to plain CSS with Vite's\n// own preprocessing (the same call @vitejs/plugin-vue makes), so the runtime\n// only ever sees CSS. The preprocessor picks its parser from the extension,\n// and resolving relative @use/@import against a filename in the component's\n// own directory is what makes `@use \"./vars\"` work. Files the preprocessor\n// pulls in are registered as watch deps, so editing a partial re-runs HMR for\n// every component that uses it. `lang` is dropped from the emitted tag: what\n// the runtime parses is a plain <style> (with `scoped` and the rest intact)\nconst compileStyleBlocks = async (\n  source: string,\n  file: string,\n  config: ResolvedConfig,\n  addWatchFile: (id: string) => void\n): Promise<string> => {\n  const blocks = [...source.matchAll(STYLE_BLOCK_RE)]\n  const compiled = await Promise.all(\n    blocks.map(async ([, attrs, content]) => {\n      const lang = attrs.match(LANG_ATTR_RE)\n      if (!lang) return null\n      const extension = lang[1] ?? lang[2] ?? lang[3]\n      const result = await preprocessCSS(content, `${file}.${extension}`, config)\n      result.deps?.forEach(addWatchFile)\n      return { attrs: attrs.replace(LANG_ATTR_RE, \"\").trimEnd(), css: result.code }\n    })\n  )\n\n  let out = \"\"\n  let last = 0\n  blocks.forEach((block, i) => {\n    const done = compiled[i]\n    if (!done) return\n    out += source.slice(last, block.index) + `<style${done.attrs}>${done.css}</style>`\n    last = block.index + block[0].length\n  })\n  return out + source.slice(last)\n}\n\n// the emitted module. Literal import(\"...\") specifiers found in the\n// component's scripts become real module imports, handed to Component79 as a\n// resolution map: at runtime $__import checks the map before falling back to\n// fetch, so bundled components ship with their imports and nothing changes\n// for unbundled ones. Claimed components import as their default (a\n// Component79, matching what runtime fetch resolves to); everything else as\n// a namespace (matching native import()).\n//\n// In dev, `hot.data` carries the exported instance across updates: importers\n// hold a reference to the *first* module evaluation's instance, so later\n// evaluations patch that same instance in place instead of exporting a new one\n// nobody sees. The patching itself is the runtime's `hotReplace` - the same\n// swap the jq79/dev server drives, from the one place that can reach a\n// component's markers. An instance only used as a definition has nothing to\n// re-render (nested clones can't be reached from this module), so it falls\n// back to a full reload.\nconst componentModule = (source: string, include: RegExp, filename: string): string => {\n  const hoisted = hoistableImports(source, include)\n  const imports = hoisted\n    .map((spec, i) =>\n      include.test(spec)\n        ? `import __jq79_${i} from ${JSON.stringify(spec)}`\n        : `import * as __jq79_${i} from ${JSON.stringify(spec)}`\n    )\n    .join(\"\\n\")\n  const modulesMap = `{ ${hoisted.map((spec, i) => `${JSON.stringify(spec)}: __jq79_${i}`).join(\", \")} }`\n\n  return `\nimport { Component79 } from \"jq79\"\n${imports}\n\nconst src = ${JSON.stringify(source)}\nconst modules = ${modulesMap}\nconst filename = ${JSON.stringify(filename)}\n\nlet component\n\nif (import.meta.hot && import.meta.hot.data.component) {\n  const prior = import.meta.hot.data.component\n  prior.modules = modules\n  prior.filename = filename\n  // re-renders it where it stands, keeping its data. false means it was never\n  // rendered - a definition used only as a nested component - and a reload is\n  // the only way to reach the clones made from it\n  if (!prior.hotReplace(src) && !prior.data) import.meta.hot.invalidate()\n  component = prior\n} else {\n  component = new Component79(src, { modules, filename })\n}\n\nif (import.meta.hot) {\n  import.meta.hot.data.component = component\n  import.meta.hot.accept()\n}\n\nexport default component\n`\n}\n\nexport function jq79(options: Jq79PluginOptions = {}): Plugin {\n  const include = options.include ?? /\\.html$/\n  const { exclude } = options\n\n  let config: ResolvedConfig | null = null\n\n  return {\n    name: \"jq79\",\n    enforce: \"pre\",\n\n    configResolved(resolved) {\n      config = resolved\n    },\n\n    async resolveId(source, importer) {\n      if (!importer) return null // entry points are never components\n      if (source.includes(\"?\")) return null // ?raw, ?url, ... keep their meaning\n      if (!include.test(source)) return null\n\n      const resolved = await this.resolve(source, importer, { skipSelf: true })\n      if (!resolved || resolved.external) return null\n      if (exclude?.test(resolved.id)) return null\n      return resolved.id + COMPONENT_QUERY\n    },\n\n    async load(id) {\n      if (!id.endsWith(COMPONENT_QUERY)) return null\n      const file = id.slice(0, -COMPONENT_QUERY.length)\n\n      let source = await readFile(file, \"utf8\")\n      if (config) source = await compileStyleBlocks(source, file, config, dep => this.addWatchFile(dep))\n\n      // the runtime names the component's setup scripts after this, so devtools\n      // shows a path the user recognizes instead of an anonymous VM script\n      const filename = config ? relative(config.root, file) : file\n\n      return { code: componentModule(source, include, filename), map: null }\n    },\n  }\n}\n\nexport default jq79\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jq79",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Mini reactive component library: single-file components, Svelte-style setup scripts, fine-grained proxy reactivity. Single-file build, zero dependencies.",
   "keywords": [
     "reactive",

package/src/jq79.ts

@@ -91,9 +91,11 @@ const interpolate = (template: string, scope: Record<string, any>): string =>
   template.replace(/{{\s*([\s\S]+?)\s*}}/g, (_, expr) => evalExpr(expr, scope) ?? "")
 
 
-const CONTROL_ATTRS = new Set([":attrs", ":if", ":elseif", ":else", ":each", ":key", ":with", ":text", ":html"])
-// the list expression can span lines, so it matches [\s\S] rather than `.`
-const EACH_PATTERN = /^\s*(\w+)\s+in\s+([\s\S]+)$/
+const CONTROL_ATTRS = new Set([":attrs", ":class", ":if", ":elseif", ":else", ":each", ":key", ":with", ":text", ":html"])
+// `item in items`, `item, i in items`, `(value, key) in props` - the second
+// binding is the array index or the object key, parens optional (Vue-style).
+// The list expression can span lines, so it matches [\s\S] rather than `.`
+const EACH_PATTERN = /^\s*\(?\s*(\w+)\s*(?:,\s*(\w+))?\s*\)?\s+in\s+([\s\S]+)$/
 
 type ConditionalBranch = { expr?: string; node: TemplateNode }
 
@@ -120,6 +122,40 @@ const bindEvent = (el: Element, attr: string, expr: string, scope: Record<string
 
 const kebabToCamel = (name: string) => name.replace(/-(\w)/g, (_, c: string) => c.toUpperCase())
 
+// the stable boundaries of a rendered chunk. An element is its own handle, but
+// a fragment (a nested component: two anchors with the instance's DOM between
+// them) empties itself into the parent on insertion - after that its identity
+// answers nothing, and what stays put are its first and last children. Callers
+// that reposition or remove a chunk later (:each entries, :if branches) must
+// capture its bounds *before* inserting it and work on the range
+type NodeRange = { first: Node; last: Node }
+
+const boundsOf = (node: Node): NodeRange =>
+  node instanceof DocumentFragment
+    ? { first: node.firstChild!, last: node.lastChild! }
+    : { first: node, last: node }
+
+// removes [first..last] inclusive - the range's content is dynamic (a nested
+// component's DOM comes and goes between its anchors), so it walks siblings
+// rather than assuming any particular nodes in between
+const removeRange = ({ first, last }: NodeRange) => {
+  for (let node: Node | null = first; node; ) {
+    const next: Node | null = node === last ? null : node.nextSibling
+    node.parentNode?.removeChild(node)
+    node = next
+  }
+}
+
+// moves [first..last] inclusive so the range starts right after `prev`
+const moveRangeAfter = ({ first, last }: NodeRange, prev: Node) => {
+  const ref = prev.nextSibling
+  for (let node: Node | null = first; node; ) {
+    const next: Node | null = node === last ? null : node.nextSibling
+    prev.parentNode!.insertBefore(node, ref)
+    node = next
+  }
+}
+
 // finds the scope variable a template tag refers to. HTML parsing lowercases
 // tag names, so <NestedComponent> arrives as "nestedcomponent" and matching is
 // case-insensitive with dashes stripped (<nested-component> works too). Only
@@ -149,9 +185,14 @@ const findComponentKey = (scope: Record<string, any>, tag: string): string | nul
 // tree, and a style that never applies to its own component would still be
 // restyling the page around it
 const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<string, any>, fx: EffectScope, shadow: boolean): Node => {
+  // two anchors bracketing everything this usage site ever renders: the
+  // instance's DOM is dynamic (the definition can resolve late or be swapped),
+  // so a caller that needs to move or remove this chunk later can't hold any
+  // of it - it holds the anchors, which never move on their own (see boundsOf)
   const anchor = document.createComment(key)
+  const endAnchor = document.createComment(`/${key}`)
   const wrapper = document.createDocumentFragment()
-  wrapper.appendChild(anchor)
+  wrapper.append(anchor, endAnchor)
 
   const props: Record<string, string> = {} // prop name -> expression in parent scope
   Object.entries(node.attrs).forEach(([attr, value]) => {
@@ -199,7 +240,7 @@ const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<st
     // they style, and the parent's shadow root is what scopes both
     const holder = document.createDocumentFragment()
     ;(shadow ? instance.renderShadow(seed) : instance.render(seed)).mount(holder)
-    anchor.parentNode!.insertBefore(holder, anchor.nextSibling)
+    endAnchor.parentNode!.insertBefore(holder, endAnchor)
 
     const syncFx = createEffectScope(scope)
     Object.entries(props).forEach(([name, expr]) => {
@@ -253,6 +294,20 @@ const createWithScope = (expr: string, scope: Record<string, any>): Record<strin
   })
 }
 
+// what :class accepts, flattened to single class tokens: a string of
+// space-separated names, an array (entries normalized recursively), or an
+// object whose truthy-valued keys are the names (a key may itself hold
+// several). Everything else - null, false, numbers - contributes nothing, so
+// `cond && 'active'` reads naturally. The object form reads each value, so a
+// store-backed flag is tracked per key
+const classNames = (value: any): string[] => {
+  if (typeof value === "string") return value.split(/\s+/).filter(Boolean)
+  if (Array.isArray(value)) return value.flatMap(classNames)
+  if (value !== null && typeof value === "object")
+    return Object.entries(value).flatMap(([name, on]) => (on ? classNames(name) : []))
+  return []
+}
+
 // renders a single element node: static attrs, @event listeners, a reactive
 // :attrs object, and its content - :text/:html override the element's own
 // children with a reactive textContent/innerHTML, otherwise children render
@@ -283,7 +338,12 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
       const key = findComponentKey(scope, node.tag)
       if (!key) return
       upgraded = true
-      el.replaceWith(renderNestedComponent(key, node, scope, fx, shadow))
+      const replacement = renderNestedComponent(key, node, scope, fx, shadow)
+      // whoever tears this subtree down holds `el`, which the swap detaches -
+      // so the component's anchors must remove themselves when the scope goes
+      const range = boundsOf(replacement)
+      fx.onDispose(() => removeRange(range))
+      el.replaceWith(replacement)
     })
   }
 
@@ -307,6 +367,25 @@ const renderNode = (node: TemplateNode, outerScope: Record<string, any>, fx: Eff
     })
   }
 
+  // :class="expr" adds classes on top of the static `class` attribute. Only
+  // classes this binding added are ever removed: the static list survives
+  // every re-run, even when the expression names one of its classes and then
+  // drops it (class="btn" :class="{ btn: cond }" keeps btn on false)
+  const classExpr = node.attrs[":class"]
+  if (classExpr !== undefined) {
+    const staticClasses = new Set(classNames(node.attrs.class ?? ""))
+    let bound: string[] = []
+
+    fx.effect(() => {
+      const next = classNames(evalExpr(classExpr, scope))
+      bound.forEach(name => {
+        if (!next.includes(name) && !staticClasses.has(name)) el.classList.remove(name)
+      })
+      el.classList.add(...next)
+      bound = next
+    })
+  }
+
   // :text="expr" sets textContent reactively, replacing any children.
   // :html="expr" sets innerHTML reactively, sanitizing the value first so
   // untrusted content can't inject scripts/attributes (see sanitizeHTML in
@@ -333,7 +412,7 @@ const renderConditional = (branches: ConditionalBranch[], scope: Record<string,
   const wrapper = document.createDocumentFragment()
   wrapper.appendChild(anchor)
 
-  let current: Node | null = null
+  let current: NodeRange | null = null
   let activeBranch: ConditionalBranch | null = null
   let branchFx: EffectScope | null = null
 
@@ -342,14 +421,17 @@ const renderConditional = (branches: ConditionalBranch[], scope: Record<string,
     if (next === activeBranch) return
 
     branchFx?.dispose()
-    if (current) current.parentNode?.removeChild(current)
+    if (current) removeRange(current)
     current = null
     activeBranch = next
     if (!next) return
 
     branchFx = createEffectScope(scope)
-    current = renderNode(next.node, scope, branchFx, shadow)
-    anchor.parentNode!.insertBefore(current, anchor.nextSibling)
+    // bounds captured before inserting: a component branch is a fragment, and
+    // inserting it is what empties it (see boundsOf)
+    const rendered = renderNode(next.node, scope, branchFx, shadow)
+    current = boundsOf(rendered)
+    anchor.parentNode!.insertBefore(rendered, anchor.nextSibling)
   })
 
   return wrapper
@@ -367,21 +449,32 @@ const defineScopeVar = (scope: Record<string, any>, key: string, value: any) =>
   Object.defineProperty(scope, key, { value, writable: true, enumerable: true, configurable: true })
 }
 
-type EachEntry = { key: any; item: any; scope: Record<string, any>; node: Node; fx: EffectScope }
+type EachEntry = { key: any; item: any; scope: Record<string, any>; range: NodeRange; fx: EffectScope }
+
+// what :each iterates besides arrays: dictionaries, as their entries. Class
+// instances, Maps and the rest stay out - the store doesn't wrap them
+// (isPlainData), so their contents wouldn't be tracked and the list would go
+// silently stale
+const isPlainObject = (value: any): value is Record<string, any> => {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) return false
+  const proto = Object.getPrototypeOf(value)
+  return proto === Object.prototype || proto === null
+}
 
-// :each="item in items", optionally keyed with :key="expr". Only depends on
-// the list expression itself (e.g. "items"), and on each run diffs by key:
-// unchanged items (same key, same item reference) keep their DOM/effects,
-// changed/added ones are (re)rendered, removed ones are disposed. Without
-// :key, position is used as the key, so reordering rebuilds every item after
-// the first change - add :key for anything that gets reordered or filtered.
-// Each item gets its own scope via Object.create(scope), so `item`/`$index`
-// shadow same-named outer bindings without copying the parent scope's keys
+// :each="item in items" (or "item, i in items" / "(value, key) in props"),
+// optionally keyed with :key="expr". Only depends on what the list expression
+// reads, and on each run diffs by key: unchanged items (same key, same item
+// reference) keep their DOM/effects, changed/added ones are (re)rendered,
+// removed ones are disposed. Without :key, an array uses position - fine for
+// append-only lists, wasteful for reordering - and an object uses the
+// property key, which is already the stable identity. Each item gets its own
+// scope via Object.create(scope), so the bindings and `$index` shadow
+// same-named outer names without copying the parent scope's keys
 const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectScope, shadow: boolean): Node => {
   const match = node.attrs[":each"].match(EACH_PATTERN)
   if (!match) return document.createComment(`invalid :each expression "${node.attrs[":each"]}"`)
 
-  const [, itemName, listExpr] = match
+  const [, itemName, atName, listExpr] = match
   const keyExpr = node.attrs[":key"]
   const { [":each"]: _each, [":key"]: _key, ...itemAttrs } = node.attrs
   const itemNode: TemplateNode = { ...node, attrs: itemAttrs }
@@ -390,46 +483,87 @@ const renderEach = (node: TemplateNode, scope: Record<string, any>, fx: EffectSc
   const wrapper = document.createDocumentFragment()
   wrapper.appendChild(anchor)
 
+  // :if on the same element is not per-item filtering, and rendering
+  // everything in silence reads like a broken filter - say it out loud
+  if (":if" in node.attrs || ":elseif" in node.attrs || ":else" in node.attrs) {
+    console.warn("jq79: :if/:elseif/:else on a :each element is ignored; filter the list expression instead")
+  }
+
   let entries: EachEntry[] = []
+  let warnedDuplicates = false
 
   fx.effect(() => {
     const list = evalExpr(listExpr, scope)
-    const items = Array.isArray(list) ? list : []
-    const previous = new Map(entries.map(entry => [entry.key, entry]))
+    // both sources normalize to [at, item] pairs: the index for an array, the
+    // property key for a plain object (insertion order). Object entries are
+    // read off the store proxy, so each value is tracked under its own key -
+    // adds, deletes and changes all wake this effect
+    const pairs: [any, any][] = Array.isArray(list)
+      ? list.map((item, index): [any, any] => [index, item])
+      : isPlainObject(list) ? Object.entries(list) : []
+    // buckets rather than a key->entry map: duplicate keys (a user error, but
+    // one that must degrade instead of corrupt) consume entries in order of
+    // appearance, so no entry is ever matched twice - matching one twice is
+    // how a reused row got disposed and a removed one resurrected
+    const previous = new Map<any, EachEntry[]>()
+    entries.forEach(entry => {
+      const bucket = previous.get(entry.key)
+      if (bucket) bucket.push(entry)
+      else previous.set(entry.key, [entry])
+    })
 
-    const nextEntries = items.map((item, index): EachEntry => {
+    const seen = new Set<any>()
+    const moved: EachEntry[] = []
+    const nextEntries = pairs.map(([at, item], index): EachEntry => {
       const itemScope = Object.create(scope)
       defineScopeVar(itemScope, itemName, item)
+      if (atName) defineScopeVar(itemScope, atName, at)
       defineScopeVar(itemScope, "$index", index)
-      const key = keyExpr !== undefined ? evalExpr(keyExpr, itemScope) : index
-      const existing = previous.get(key)
+      const key = keyExpr !== undefined ? evalExpr(keyExpr, itemScope) : at
+      if (seen.has(key) && !warnedDuplicates) {
+        warnedDuplicates = true
+        console.warn(`jq79: duplicate :key in :each "${node.attrs[":each"]}"; duplicates pair up by position`)
+      }
+      seen.add(key)
+      const existing = previous.get(key)?.shift()
 
       if (existing && Object.is(existing.item, item)) {
+        if (existing.scope.$index !== index) moved.push(existing)
         defineScopeVar(existing.scope, "$index", index)
+        if (atName) defineScopeVar(existing.scope, atName, at)
         return existing
       }
 
-      existing?.fx.dispose()
-      existing?.node.parentNode?.removeChild(existing.node)
+      if (existing) {
+        existing.fx.dispose()
+        removeRange(existing.range)
+      }
 
       const itemFx = createEffectScope(scope)
-      return { key, item, scope: itemScope, fx: itemFx, node: renderNode(itemNode, itemScope, itemFx, shadow) }
+      // bounds captured before the positioning pass inserts the entry: a
+      // component entry is a fragment, which empties on insertion (see boundsOf)
+      const range = boundsOf(renderNode(itemNode, itemScope, itemFx, shadow))
+      return { key, item, scope: itemScope, fx: itemFx, range }
     })
 
-    const nextKeys = new Set(nextEntries.map(entry => entry.key))
-    entries.forEach(entry => {
-      if (!nextKeys.has(entry.key)) {
-        entry.fx.dispose()
-        entry.node.parentNode?.removeChild(entry.node)
-      }
-    })
+    // whatever no new item consumed is gone
+    previous.forEach(bucket => bucket.forEach(entry => {
+      entry.fx.dispose()
+      removeRange(entry.range)
+    }))
 
     let prevNode: Node = anchor
     nextEntries.forEach(entry => {
-      if (prevNode.nextSibling !== entry.node) anchor.parentNode!.insertBefore(entry.node, prevNode.nextSibling)
-      prevNode = entry.node
+      if (prevNode.nextSibling !== entry.range.first) moveRangeAfter(entry.range, prevNode)
+      prevNode = entry.range.last
     })
 
+    // reused entries that changed position: their tracked bindings re-run off
+    // the list notification anyway, but a binding that reads only `$index` or
+    // the named key tracked nothing - refresh them so the move reaches those
+    // too. Untracked, so these runs don't feed this list effect's own deps
+    moved.forEach(entry => untracked(() => entry.fx.refresh()))
+
     entries = nextEntries
   })