jq79 0.3.21 → 0.3.23

package/dist/vite.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\"\nimport type { Plugin } 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 plugin is a pure loader: the component\n// source is inlined verbatim (no transforms), so a file keeps working\n// unchanged if it's ever served from public/ and loaded with fetch instead.\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// 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 (the parsed parts are public\n// fields) instead of exporting a new one nobody sees. A live instance is\n// re-rendered where it stands, seeded with a snapshot of its current store;\n// an instance only used as a definition (nested component clones can't be\n// reached from here) falls back to a full reload. `mountRoot` is internal to\n// Component79, but plugin and runtime ship in lockstep from the same package.\nconst componentModule = (source: string, include: RegExp): 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}\n\nlet component\n\nif (import.meta.hot && import.meta.hot.data.component) {\n  const prior = import.meta.hot.data.component\n  const next = new Component79(src)\n  prior.template = next.template\n  prior.scripts = next.scripts\n  prior.styles = next.styles\n  prior.modules = modules\n  const root = prior.mountRoot\n  if (root) {\n    prior.mount(root, { ...prior.data })\n  } else if (!prior.data) {\n    import.meta.hot.invalidate()\n  }\n  component = prior\n} else {\n  component = new Component79(src, { modules })\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  return {\n    name: \"jq79\",\n    enforce: \"pre\",\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      return { code: componentModule(await readFile(file, \"utf8\"), include), map: null }\n    },\n  }\n}\n\nexport default jq79\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAAyB;AA2BzB,IAAM,kBAAkB;AAExB,IAAM,kBAAkB;AAGxB,IAAM,oBAAoB;AAI1B,IAAM,2BAA2B;AAEjC,IAAM,YAAY,CAAC,SAAiB,kBAAkB,KAAK,IAAI;AAC/D,IAAM,gBAAgB,CAAC,SAAiB,uBAAuB,KAAK,IAAI,KAAK,KAAK,WAAW,GAAG;AAOhG,IAAM,mBAAmB,CAAC,QAAgB,YAA8B;AACtE,QAAM,aAAa,oBAAI,IAAY;AACnC,aAAW,CAAC,EAAE,MAAM,KAAK,OAAO,SAAS,eAAe,GAAG;AACzD,UAAM,QAAQ;AAAA,MACZ,GAAG,CAAC,GAAG,OAAO,SAAS,iBAAiB,CAAC,EAAE,IAAI,WAAS,MAAM,CAAC,CAAC;AAAA,MAChE,GAAG,CAAC,GAAG,OAAO,SAAS,wBAAwB,CAAC,EAAE,IAAI,WAAS,MAAM,CAAC,CAAC;AAAA,IACzE;AACA,eAAW,QAAQ,OAAO;AACxB,UAAI,cAAc,IAAI,EAAG;AACzB,UAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAG;AAC5C,iBAAW,IAAI,IAAI;AAAA,IACrB;AAAA,EACF;AACA,SAAO,CAAC,GAAG,UAAU;AACvB;AAkBA,IAAM,kBAAkB,CAAC,QAAgB,YAA4B;AACnE,QAAM,UAAU,iBAAiB,QAAQ,OAAO;AAChD,QAAM,UAAU,QACb;AAAA,IAAI,CAAC,MAAM,MACV,QAAQ,KAAK,IAAI,IACb,iBAAiB,CAAC,SAAS,KAAK,UAAU,IAAI,CAAC,KAC/C,sBAAsB,CAAC,SAAS,KAAK,UAAU,IAAI,CAAC;AAAA,EAC1D,EACC,KAAK,IAAI;AACZ,QAAM,aAAa,KAAK,QAAQ,IAAI,CAAC,MAAM,MAAM,GAAG,KAAK,UAAU,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC;AAEnG,SAAO;AAAA;AAAA,EAEP,OAAO;AAAA;AAAA,cAEK,KAAK,UAAU,MAAM,CAAC;AAAA,kBAClB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B5B;AAEO,SAAS,KAAK,UAA6B,CAAC,GAAW;AAC5D,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,EAAE,QAAQ,IAAI;AAEpB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,MAAM,UAAU,QAAQ,UAAU;AAChC,UAAI,CAAC,SAAU,QAAO;AACtB,UAAI,OAAO,SAAS,GAAG,EAAG,QAAO;AACjC,UAAI,CAAC,QAAQ,KAAK,MAAM,EAAG,QAAO;AAElC,YAAM,WAAW,MAAM,KAAK,QAAQ,QAAQ,UAAU,EAAE,UAAU,KAAK,CAAC;AACxE,UAAI,CAAC,YAAY,SAAS,SAAU,QAAO;AAC3C,UAAI,SAAS,KAAK,SAAS,EAAE,EAAG,QAAO;AACvC,aAAO,SAAS,KAAK;AAAA,IACvB;AAAA,IAEA,MAAM,KAAK,IAAI;AACb,UAAI,CAAC,GAAG,SAAS,eAAe,EAAG,QAAO;AAC1C,YAAM,OAAO,GAAG,MAAM,GAAG,CAAC,gBAAgB,MAAM;AAChD,aAAO,EAAE,MAAM,gBAAgB,UAAM,0BAAS,MAAM,MAAM,GAAG,OAAO,GAAG,KAAK,KAAK;AAAA,IACnF;AAAA,EACF;AACF;AAEA,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../src/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 (the parsed parts are public\n// fields) instead of exporting a new one nobody sees. A live instance is\n// re-rendered where it stands, seeded with a snapshot of its current store;\n// an instance only used as a definition (nested component clones can't be\n// reached from here) falls back to a full reload. `mountRoot` is internal to\n// Component79, but plugin and runtime ship in lockstep from the same package.\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  const next = new Component79(src)\n  prior.template = next.template\n  prior.scripts = next.scripts\n  prior.styles = next.styles\n  prior.modules = modules\n  prior.filename = filename\n  const root = prior.mountRoot\n  if (root) {\n    prior.mount(root, { ...prior.data })\n  } else if (!prior.data) {\n    import.meta.hot.invalidate()\n  }\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

@@ -1,5 +1,7 @@
 // src/vite.ts
 import { readFile } from "fs/promises";
+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;
@@ -21,7 +23,31 @@ var hoistableImports = (source, include) => {
   }
   return [...specifiers];
 };
-var componentModule = (source, include) => {
+var STYLE_BLOCK_RE = /<style((?:"[^"]*"|'[^']*'|[^>"'])*)>([\s\S]*?)<\/style\s*>/gi;
+var LANG_ATTR_RE = /\blang\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i;
+var compileStyleBlocks = async (source, file, config, addWatchFile) => {
+  const blocks = [...source.matchAll(STYLE_BLOCK_RE)];
+  const compiled = await Promise.all(
+    blocks.map(async ([, attrs, content]) => {
+      const lang = attrs.match(LANG_ATTR_RE);
+      if (!lang) return null;
+      const extension = lang[1] ?? lang[2] ?? lang[3];
+      const result = await preprocessCSS(content, `${file}.${extension}`, config);
+      result.deps?.forEach(addWatchFile);
+      return { attrs: attrs.replace(LANG_ATTR_RE, "").trimEnd(), css: result.code };
+    })
+  );
+  let out = "";
+  let last = 0;
+  blocks.forEach((block, i) => {
+    const done = compiled[i];
+    if (!done) return;
+    out += source.slice(last, block.index) + `<style${done.attrs}>${done.css}</style>`;
+    last = block.index + block[0].length;
+  });
+  return out + source.slice(last);
+};
+var componentModule = (source, include, filename) => {
   const hoisted = hoistableImports(source, include);
   const imports = hoisted.map(
     (spec, i) => include.test(spec) ? `import __jq79_${i} from ${JSON.stringify(spec)}` : `import * as __jq79_${i} from ${JSON.stringify(spec)}`
@@ -33,6 +59,7 @@ ${imports}
 
 const src = ${JSON.stringify(source)}
 const modules = ${modulesMap}
+const filename = ${JSON.stringify(filename)}
 
 let component
 
@@ -43,6 +70,7 @@ if (import.meta.hot && import.meta.hot.data.component) {
   prior.scripts = next.scripts
   prior.styles = next.styles
   prior.modules = modules
+  prior.filename = filename
   const root = prior.mountRoot
   if (root) {
     prior.mount(root, { ...prior.data })
@@ -51,7 +79,7 @@ if (import.meta.hot && import.meta.hot.data.component) {
   }
   component = prior
 } else {
-  component = new Component79(src, { modules })
+  component = new Component79(src, { modules, filename })
 }
 
 if (import.meta.hot) {
@@ -65,9 +93,13 @@ export default component
 function jq79(options = {}) {
   const include = options.include ?? /\.html$/;
   const { exclude } = options;
+  let config = null;
   return {
     name: "jq79",
     enforce: "pre",
+    configResolved(resolved) {
+      config = resolved;
+    },
     async resolveId(source, importer) {
       if (!importer) return null;
       if (source.includes("?")) return null;
@@ -80,7 +112,10 @@ function jq79(options = {}) {
     async load(id) {
       if (!id.endsWith(COMPONENT_QUERY)) return null;
       const file = id.slice(0, -COMPONENT_QUERY.length);
-      return { code: componentModule(await readFile(file, "utf8"), include), map: null };
+      let source = await readFile(file, "utf8");
+      if (config) source = await compileStyleBlocks(source, file, config, (dep) => this.addWatchFile(dep));
+      const filename = config ? relative(config.root, file) : file;
+      return { code: componentModule(source, include, filename), map: null };
     }
   };
 }

package/dist/vite.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/vite.ts"],"sourcesContent":["import { readFile } from \"node:fs/promises\"\nimport type { Plugin } 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 plugin is a pure loader: the component\n// source is inlined verbatim (no transforms), so a file keeps working\n// unchanged if it's ever served from public/ and loaded with fetch instead.\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// 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 (the parsed parts are public\n// fields) instead of exporting a new one nobody sees. A live instance is\n// re-rendered where it stands, seeded with a snapshot of its current store;\n// an instance only used as a definition (nested component clones can't be\n// reached from here) falls back to a full reload. `mountRoot` is internal to\n// Component79, but plugin and runtime ship in lockstep from the same package.\nconst componentModule = (source: string, include: RegExp): 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}\n\nlet component\n\nif (import.meta.hot && import.meta.hot.data.component) {\n  const prior = import.meta.hot.data.component\n  const next = new Component79(src)\n  prior.template = next.template\n  prior.scripts = next.scripts\n  prior.styles = next.styles\n  prior.modules = modules\n  const root = prior.mountRoot\n  if (root) {\n    prior.mount(root, { ...prior.data })\n  } else if (!prior.data) {\n    import.meta.hot.invalidate()\n  }\n  component = prior\n} else {\n  component = new Component79(src, { modules })\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  return {\n    name: \"jq79\",\n    enforce: \"pre\",\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      return { code: componentModule(await readFile(file, \"utf8\"), include), map: null }\n    },\n  }\n}\n\nexport default jq79\n"],"mappings":";AAAA,SAAS,gBAAgB;AA2BzB,IAAM,kBAAkB;AAExB,IAAM,kBAAkB;AAGxB,IAAM,oBAAoB;AAI1B,IAAM,2BAA2B;AAEjC,IAAM,YAAY,CAAC,SAAiB,kBAAkB,KAAK,IAAI;AAC/D,IAAM,gBAAgB,CAAC,SAAiB,uBAAuB,KAAK,IAAI,KAAK,KAAK,WAAW,GAAG;AAOhG,IAAM,mBAAmB,CAAC,QAAgB,YAA8B;AACtE,QAAM,aAAa,oBAAI,IAAY;AACnC,aAAW,CAAC,EAAE,MAAM,KAAK,OAAO,SAAS,eAAe,GAAG;AACzD,UAAM,QAAQ;AAAA,MACZ,GAAG,CAAC,GAAG,OAAO,SAAS,iBAAiB,CAAC,EAAE,IAAI,WAAS,MAAM,CAAC,CAAC;AAAA,MAChE,GAAG,CAAC,GAAG,OAAO,SAAS,wBAAwB,CAAC,EAAE,IAAI,WAAS,MAAM,CAAC,CAAC;AAAA,IACzE;AACA,eAAW,QAAQ,OAAO;AACxB,UAAI,cAAc,IAAI,EAAG;AACzB,UAAI,UAAU,IAAI,KAAK,CAAC,QAAQ,KAAK,IAAI,EAAG;AAC5C,iBAAW,IAAI,IAAI;AAAA,IACrB;AAAA,EACF;AACA,SAAO,CAAC,GAAG,UAAU;AACvB;AAkBA,IAAM,kBAAkB,CAAC,QAAgB,YAA4B;AACnE,QAAM,UAAU,iBAAiB,QAAQ,OAAO;AAChD,QAAM,UAAU,QACb;AAAA,IAAI,CAAC,MAAM,MACV,QAAQ,KAAK,IAAI,IACb,iBAAiB,CAAC,SAAS,KAAK,UAAU,IAAI,CAAC,KAC/C,sBAAsB,CAAC,SAAS,KAAK,UAAU,IAAI,CAAC;AAAA,EAC1D,EACC,KAAK,IAAI;AACZ,QAAM,aAAa,KAAK,QAAQ,IAAI,CAAC,MAAM,MAAM,GAAG,KAAK,UAAU,IAAI,CAAC,YAAY,CAAC,EAAE,EAAE,KAAK,IAAI,CAAC;AAEnG,SAAO;AAAA;AAAA,EAEP,OAAO;AAAA;AAAA,cAEK,KAAK,UAAU,MAAM,CAAC;AAAA,kBAClB,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6B5B;AAEO,SAAS,KAAK,UAA6B,CAAC,GAAW;AAC5D,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,EAAE,QAAQ,IAAI;AAEpB,SAAO;AAAA,IACL,MAAM;AAAA,IACN,SAAS;AAAA,IAET,MAAM,UAAU,QAAQ,UAAU;AAChC,UAAI,CAAC,SAAU,QAAO;AACtB,UAAI,OAAO,SAAS,GAAG,EAAG,QAAO;AACjC,UAAI,CAAC,QAAQ,KAAK,MAAM,EAAG,QAAO;AAElC,YAAM,WAAW,MAAM,KAAK,QAAQ,QAAQ,UAAU,EAAE,UAAU,KAAK,CAAC;AACxE,UAAI,CAAC,YAAY,SAAS,SAAU,QAAO;AAC3C,UAAI,SAAS,KAAK,SAAS,EAAE,EAAG,QAAO;AACvC,aAAO,SAAS,KAAK;AAAA,IACvB;AAAA,IAEA,MAAM,KAAK,IAAI;AACb,UAAI,CAAC,GAAG,SAAS,eAAe,EAAG,QAAO;AAC1C,YAAM,OAAO,GAAG,MAAM,GAAG,CAAC,gBAAgB,MAAM;AAChD,aAAO,EAAE,MAAM,gBAAgB,MAAM,SAAS,MAAM,MAAM,GAAG,OAAO,GAAG,KAAK,KAAK;AAAA,IACnF;AAAA,EACF;AACF;AAEA,IAAO,eAAQ;","names":[]}
+{"version":3,"sources":["../src/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 (the parsed parts are public\n// fields) instead of exporting a new one nobody sees. A live instance is\n// re-rendered where it stands, seeded with a snapshot of its current store;\n// an instance only used as a definition (nested component clones can't be\n// reached from here) falls back to a full reload. `mountRoot` is internal to\n// Component79, but plugin and runtime ship in lockstep from the same package.\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  const next = new Component79(src)\n  prior.template = next.template\n  prior.scripts = next.scripts\n  prior.styles = next.styles\n  prior.modules = modules\n  prior.filename = filename\n  const root = prior.mountRoot\n  if (root) {\n    prior.mount(root, { ...prior.data })\n  } else if (!prior.data) {\n    import.meta.hot.invalidate()\n  }\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.3.21",
+  "version": "0.3.23",
   "description": "Mini reactive component library: single-file components, Svelte-style setup scripts, fine-grained proxy reactivity. Single-file build, zero dependencies.",
   "keywords": [
     "reactive",
@@ -51,6 +51,7 @@
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "site": "node scripts/build-site.mjs",
+    "site.dev": "node scripts/site-dev.mjs",
     "prepublishOnly": "npm test && npm run build"
   },
   "peerDependencies": {
@@ -64,10 +65,12 @@
   "devDependencies": {
     "@types/node": "^26.1.1",
     "@vitest/coverage-v8": "^4.1.10",
+    "chokidar": "^5.0.0",
     "highlight.js": "^11.11.1",
     "jsdom": "^29.1.1",
     "marked": "^18.0.6",
     "marked-highlight": "^2.2.4",
+    "sass": "^1.101.0",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2",
     "vite": "^8.1.4",

package/src/jq79.ts

@@ -15,6 +15,10 @@ type TemplateNode = {
 type TagBlock = {
   attrs: Record<string, string>
   content: string
+  // <style scoped> only: `content` rewritten to require the component's scope
+  // attribute. Kept beside the original rather than replacing it, because a
+  // shadow root doesn't want it - see headStyle()
+  scoped?: string
 }
 
 const elementAttrs = (el: Element): Record<string, string> =>
@@ -52,12 +56,15 @@ const evalExpr = (expr: string, scope: Record<string, any>, extras?: Record<stri
   }
 }
 
+// [\s\S] rather than `.` so an expression can span lines, like the ones in
+// directive attributes (which reach evalExpr wrapped in parens either way)
 const interpolate = (template: string, scope: Record<string, any>): string =>
-  template.replace(/{{\s*(.+?)\s*}}/g, (_, expr) => evalExpr(expr, scope) ?? "")
+  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"])
-const EACH_PATTERN = /^\s*(\w+)\s+in\s+(.+)$/
+// the list expression can span lines, so it matches [\s\S] rather than `.`
+const EACH_PATTERN = /^\s*(\w+)\s+in\s+([\s\S]+)$/
 
 type ConditionalBranch = { expr?: string; node: TemplateNode }
 
@@ -114,7 +121,9 @@ const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<st
 
   const props: Record<string, string> = {} // prop name -> expression in parent scope
   Object.entries(node.attrs).forEach(([attr, value]) => {
-    if (CONTROL_ATTRS.has(attr) || attr.startsWith("@")) return
+    // the parent's scope stamp is stamped on every template element, this tag
+    // included - it's not a prop, and the child renders under its own scope
+    if (attr === SCOPE_ATTR || CONTROL_ATTRS.has(attr) || attr.startsWith("@")) return
     if (attr.startsWith(":")) {
       const name = kebabToCamel(attr.slice(1))
       props[name] = value || name
@@ -141,7 +150,13 @@ const renderNestedComponent = (key: string, node: TemplateNode, scope: Record<st
 
     // a fresh instance per usage site: the definition's parsed parts (and
     // pre-resolved modules) are shared, but store/effects/DOM are per instance
-    const instance = new Component79({ template: nextDef.template, scripts: nextDef.scripts, styles: nextDef.styles, modules: nextDef.modules })
+    const instance = new Component79({
+      template: nextDef.template,
+      scripts: nextDef.scripts,
+      styles: nextDef.styles,
+      modules: nextDef.modules,
+      filename: nextDef.filename,
+    })
     const seed = untracked(() =>
       Object.fromEntries(Object.entries(props).map(([name, expr]) => [name, evalExpr(expr, scope)]))
     )
@@ -442,6 +457,9 @@ type ComponentParts = {
   // the literal specifier. Bundlers (the jq79/vite plugin) fill this so
   // imports resolve from the bundle instead of being fetched at runtime
   modules?: Record<string, any>
+  // where this component came from (a URL for fetch(), a path for the vite
+  // plugin). Names the setup scripts in devtools - see scriptSourceUrl
+  filename?: string
 }
 
 const VOID_ELEMENTS = new Set([
@@ -471,6 +489,68 @@ const expandSelfClosingTags = (src: string): string =>
     )
     .join("")
 
+// <style scoped> support. Every element of the component's own template is
+// stamped with data-jq79="<hash>" and the style's selectors are rewritten to
+// require that attribute, so its rules can't reach anything the component
+// didn't render. Purely a runtime transform (the browser parses the CSS), so
+// it works the same for a bundled component and one loaded with fetch()
+const SCOPE_ATTR = "data-jq79"
+
+// FNV-1a over the source: stable per definition (not per instance), so N
+// instances of the same component share one refcounted <style> in the head
+const scopeHash = (src: string): string => {
+  let hash = 2166136261
+  for (let i = 0; i < src.length; i++) hash = Math.imul(hash ^ src.charCodeAt(i), 16777619)
+  return (hash >>> 0).toString(36)
+}
+
+const stampScope = (nodes: (TemplateNode | string)[], scope: string) => {
+  nodes.forEach(node => {
+    if (typeof node === "string") return
+    node.attrs[SCOPE_ATTR] = scope
+    stampScope(node.children, scope)
+  })
+}
+
+// the scope attribute goes on the selector's last compound - the element the
+// rule actually targets - but *before* a pseudo-element, which must stay last
+// (".a::before" scopes to ".a[data-jq79='x']::before", not "::before[...]")
+const scopeSelector = (selectorText: string, scope: string): string =>
+  selectorText
+    .split(",")
+    .map(part => {
+      const selector = part.trim()
+      const pseudoAt = selector.indexOf("::")
+      const target = pseudoAt === -1 ? selector : selector.slice(0, pseudoAt)
+      const pseudoElement = pseudoAt === -1 ? "" : selector.slice(pseudoAt)
+      return `${target}[${SCOPE_ATTR}="${scope}"]${pseudoElement}`
+    })
+    .join(", ")
+
+// CSSStyleRule is scoped in place; CSSGroupingRule (@media, @supports,
+// @container) is recursed into; everything else - notably @keyframes, whose
+// "selectors" are percentages - is left alone
+const scopeRules = (rules: CSSRuleList, scope: string) => {
+  Array.from(rules).forEach(rule => {
+    if (rule instanceof CSSStyleRule) rule.selectorText = scopeSelector(rule.selectorText, scope)
+    else if (rule instanceof CSSGroupingRule) scopeRules(rule.cssRules, scope)
+  })
+}
+
+// the CSS parser is the browser's own (no dependency, no hand-rolled parser).
+// Note browsers *silently drop* rules whose selector they can't parse, which
+// is what Vue's :deep()/::v-deep/>>> escape hatches are - unsupported here,
+// and warned about rather than left to vanish
+const scopeCss = (css: string, scope: string): string => {
+  if (/:deep\(|::v-deep|>>>/.test(css)) {
+    console.warn("jq79: :deep()/::v-deep/>>> are not supported in <style scoped>; the rule will be dropped by the browser")
+  }
+  const sheet = new CSSStyleSheet()
+  sheet.replaceSync(css)
+  scopeRules(sheet.cssRules, scope)
+  return Array.from(sheet.cssRules).map(rule => rule.cssText).join("\n")
+}
+
 // converts a string of HTML into an AST representation of the component:
 // - template: the non-script/style top-level elements, as TemplateNodes
 // - scripts/styles: { attrs, content } blocks in source order
@@ -501,13 +581,39 @@ const parseComponentString = (component: string): ComponentParts => {
   const template: TemplateNode[] = []
 
   Array.from(root.content.children).forEach(el => {
-    const block = { attrs: elementAttrs(el), content: el.textContent ?? "" }
+    const block: TagBlock = { attrs: elementAttrs(el), content: el.textContent ?? "" }
 
     if (el.tagName === "SCRIPT") scripts.push(block)
     else if (el.tagName === "STYLE") styles.push(block)
     else template.push(elementToAST(el))
   })
 
+  // <style lang="scss"> is compiled by the jq79/vite plugin, so a `lang` still
+  // here means this component never went through it - it was fetched, loaded
+  // from a URL, or built from an inline string. The browser would drop the
+  // uncompiled source without a word, so say it out loud instead
+  styles.forEach(style => {
+    if ("lang" in style.attrs) {
+      console.warn(
+        `jq79: <style lang="${style.attrs.lang}"> needs the jq79/vite plugin to compile it. ` +
+        "This component didn't go through the bundler, so its styles were left uncompiled and the browser will ignore them."
+      )
+    }
+  })
+
+  // scoping is resolved once, here: the stamped template and the scoped CSS
+  // are what every instance of this definition renders and injects. An
+  // uncompiled `lang` block is left as it was written - rewriting selectors
+  // in something that isn't CSS yet would only garble what devtools shows
+  const isScoped = (style: TagBlock) => "scoped" in style.attrs && !("lang" in style.attrs)
+  if (styles.some(isScoped)) {
+    const scope = scopeHash(component)
+    stampScope(template, scope)
+    styles.forEach(style => {
+      if (isScoped(style)) style.scoped = scopeCss(style.content, scope)
+    })
+  }
+
   return { template, scripts, styles }
 }
 
@@ -515,6 +621,40 @@ const parseComponentString = (component: string): ComponentParts => {
 const importResource = (url: string): Promise<any> =>
   /\.html?([?#]|$)/.test(url) ? Component79.fetch(url) : import(url)
 
+// ---------------------------------------------------------------------------
+// naming scripts for devtools
+//
+// setup scripts are compiled with new Function (they need `with`, which is a
+// SyntaxError in a module), so no bundler source map can reach them: they show
+// up as an anonymous "VM1234" script, breakpoints don't survive a reload, and
+// stack traces name nothing. A //# sourceURL comment fixes all three - the
+// compiled script takes the component's name, so it is findable in the sources
+// tree, keeps its breakpoints, and appears by name in stack traces.
+//
+// The line numbers it reports are the compiled script's own, not the .html
+// file's: the engine wraps a Function body in a header ("function anonymous(
+// args\n) {\n") that shifts everything down, and no amount of padding can
+// shift code *up* to match a <script> sitting on line 1. Reporting the
+// component's real lines would need a source map, which the runtime doesn't
+// emit today
+// ---------------------------------------------------------------------------
+
+// where a script block came from: the component's filename, and its index
+// among the component's scripts (two scripts in one file need distinct names,
+// or devtools shows only one of them)
+type ScriptLocation = { filename?: string; index?: number }
+
+// nothing to name an inline component's scripts after, so they stay anonymous
+const sourceUrlComment = (filename: string | undefined, index: number): string =>
+  filename ? `\n//# sourceURL=${filename}?jq79-script=${index}` : ""
+
+// what a <style> block injects into document.head: the scoped rewrite when it
+// has one, the source otherwise. A shadow root uses `content` directly instead
+// - scoping is what a shadow root already does, and doing both would break the
+// `:host` rules only shadow rendering can have (`:host[data-jq79=...]` matches
+// nothing: the host element is outside the template, so it carries no stamp)
+const headStyle = (style: TagBlock): string => style.scoped ?? style.content
+
 // document.head styles are shared by content and refcounted, so N instances
 // of the same component (e.g. one per :each item) inject a single <style> tag
 // that goes away when the last instance is destroyed
@@ -556,7 +696,7 @@ const SETUP_HELPERS: Record<string, any> = { $, $$, $create, $reactive }
 // The body is wrapped in an async IIFE so top-level `await` works: everything
 // up to the first await runs synchronously (before the template renders), and
 // later assignments update the DOM reactively when they happen
-const runSetupScript = (code: string, scope: Record<string, any>, effect: (run: () => void) => void, instanceHelpers: Record<string, any> = {}, importer: (url: string) => Promise<any> = importResource) => {
+const runSetupScript = (code: string, scope: Record<string, any>, effect: (run: () => void) => void, instanceHelpers: Record<string, any> = {}, importer: (url: string) => Promise<any> = importResource, at: ScriptLocation = {}) => {
   // instanceHelpers are per-component-instance additions (e.g. $emit, which
   // is bound to this instance's DOM position)
   const helpers = { ...SETUP_HELPERS, ...instanceHelpers }
@@ -567,7 +707,7 @@ const runSetupScript = (code: string, scope: Record<string, any>, effect: (run:
   })
   const result: Promise<void> = new Function(
     "$scope", "$__effect", "$__import", ...Object.keys(helpers),
-    `return (async () => { with ($scope) { ${code} } })()`
+    `return (async () => { with ($scope) { ${code} } })()${sourceUrlComment(at.filename, at.index ?? 0)}`
   )(scriptScope, effect, importer, ...Object.values(helpers))
   result.catch(error => console.error("jq79: error in :setup script", error))
 }
@@ -583,12 +723,12 @@ const interopDefault = (mod: any) => (mod && mod.default !== undefined ? mod.def
 // synchronous body invokes the factory before the first render, matching
 // setup-script timing; bodies with top-level await (static imports included)
 // resolve later and the template updates reactively
-const runFactoryScript = (code: string, scope: Record<string, any>, effect: (run: () => void) => void, instanceHelpers: Record<string, any> = {}, importer: (url: string) => Promise<any> = importResource) => {
+const runFactoryScript = (code: string, scope: Record<string, any>, effect: (run: () => void) => void, instanceHelpers: Record<string, any> = {}, importer: (url: string) => Promise<any> = importResource, at: ScriptLocation = {}) => {
   const helpers = { ...SETUP_HELPERS, ...instanceHelpers }
   const $__exports: { default?: (ctx: Record<string, any>) => any; done?: boolean } = {}
   const result: Promise<void> = new Function(
     "$__exports", "$__default", "$__import", ...Object.keys(helpers),
-    `return (async () => { "use strict";\n${code}\n;$__exports.done = true })()`
+    `return (async () => { "use strict";\n${code}\n;$__exports.done = true })()${sourceUrlComment(at.filename, at.index ?? 0)}`
   )($__exports, interopDefault, importer, ...Object.values(helpers))
 
   const logError = (error: any) => console.error("jq79: error in factory script", error)
@@ -633,6 +773,8 @@ export class Component79 {
   // pre-resolved modules for setup-script `import(...)` calls (see
   // ComponentParts.modules); checked before falling back to fetch/import
   modules?: Record<string, any>
+  // the component's origin, used to name its scripts in devtools
+  filename?: string
 
   data: ReactiveDeepData<Record<string, any>> | null = null
 
@@ -657,18 +799,21 @@ export class Component79 {
   // outside the render generation so they survive re-render and destroy()
   private emitListeners = new Map<string, Set<EmitListener>>()
 
-  constructor(src: string | ComponentParts, options: { modules?: Record<string, any> } = {}) {
+  constructor(src: string | ComponentParts, options: { modules?: Record<string, any>; filename?: string } = {}) {
     const parts = typeof src === "string" ? parseComponentString(src) : src
     this.template = parts.template
     this.scripts = parts.scripts
     this.styles = parts.styles
     this.modules = options.modules ?? (typeof src === "string" ? undefined : src.modules)
+    this.filename = options.filename ?? (typeof src === "string" ? undefined : src.filename)
   }
 
   static async fetch(url: string): Promise<Component79> {
     const response = await fetch(url)
     if (!response.ok) throw new Error(`failed to fetch component from ${url}: ${response.status}`)
-    return new Component79(await response.text())
+    // the URL names the component's scripts in devtools, and is where the
+    // browser will look for the source when a breakpoint lands in one
+    return new Component79(await response.text(), { filename: url })
   }
 
   // subscribes to this instance's $emit events, on top of the DOM CustomEvent
@@ -763,20 +908,25 @@ export class Component79 {
     // scripts run before the template renders so `$:` values are initialized;
     // a `:mounted` script defers entirely until mount() instead. A top-level
     // `export default` switches the script to factory mode (plain lexical JS)
-    this.scripts.forEach(script => {
+    // a `:mounted` script is deferred by prepending the await on the code's own
+    // first line, so deferring doesn't shift the lines devtools reports for it
+    const defer = (code: string) => `await $mounted();${code}`
+
+    this.scripts.forEach((script, index) => {
       const instanceHelpers = { $emit, $mounted, $self, $$self }
+      const at: ScriptLocation = { filename: this.filename, index }
       const factoryCode = transformFactoryScript(script.content)
       if (factoryCode !== null) {
-        const body = ":mounted" in script.attrs ? `await $mounted();\n${factoryCode}` : factoryCode
-        runFactoryScript(body, store, fx.effect, instanceHelpers, $import)
+        const body = ":mounted" in script.attrs ? defer(factoryCode) : factoryCode
+        runFactoryScript(body, store, fx.effect, instanceHelpers, $import, at)
         return
       }
       const { vars, code } = transformSetupScript(script.content)
       // pre-declare script vars on the store so `with` resolves assignments
       // to them (and reads of them) through the reactive proxy
       vars.forEach(name => { if (!(name in store)) (store as any)[name] = undefined })
-      const body = ":mounted" in script.attrs ? `await $mounted();\n${code}` : code
-      runSetupScript(body, store, fx.effect, instanceHelpers, $import)
+      const body = ":mounted" in script.attrs ? defer(code) : code
+      runSetupScript(body, store, fx.effect, instanceHelpers, $import, at)
     })
 
     const content = document.createDocumentFragment()
@@ -786,11 +936,11 @@ export class Component79 {
     if (shadow) {
       this.styleEls = this.styles.map(style => {
         const el = document.createElement("style")
-        el.textContent = style.content
+        el.textContent = style.content // the source: a shadow root scopes it already
         return el
       })
     } else {
-      this.styles.forEach(style => acquireStyle(style.content))
+      this.styles.forEach(style => acquireStyle(headStyle(style)))
       this.ownsSharedStyles = true
     }
 
@@ -858,7 +1008,7 @@ export class Component79 {
     this.styleEls.forEach(el => el.parentNode?.removeChild(el))
     this.styleEls = []
     if (this.ownsSharedStyles) {
-      this.styles.forEach(style => releaseStyle(style.content))
+      this.styles.forEach(style => releaseStyle(headStyle(style)))
       this.ownsSharedStyles = false
     }
     this.content = null