jq79 0.2.0 → 0.3.1

package/dist/vite.js

@@ -0,0 +1,92 @@
+// src/vite.ts
+import { readFile } from "fs/promises";
+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 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) {
+      if (isExternalUrl(spec)) continue;
+      if (isHtmlUrl(spec) && !include.test(spec)) continue;
+      specifiers.add(spec);
+    }
+  }
+  return [...specifiers];
+};
+var componentModule = (source, include) => {
+  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)}`
+  ).join("\n");
+  const modulesMap = `{ ${hoisted.map((spec, i) => `${JSON.stringify(spec)}: __jq79_${i}`).join(", ")} }`;
+  return `
+import { Component79 } from "jq79"
+${imports}
+
+const src = ${JSON.stringify(source)}
+const modules = ${modulesMap}
+
+let component
+
+if (import.meta.hot && import.meta.hot.data.component) {
+  const prior = import.meta.hot.data.component
+  const next = new Component79(src)
+  prior.template = next.template
+  prior.scripts = next.scripts
+  prior.styles = next.styles
+  prior.modules = modules
+  const root = prior.mountRoot
+  if (root) {
+    prior.mount(root, { ...prior.data })
+  } else if (!prior.data) {
+    import.meta.hot.invalidate()
+  }
+  component = prior
+} else {
+  component = new Component79(src, { modules })
+}
+
+if (import.meta.hot) {
+  import.meta.hot.data.component = component
+  import.meta.hot.accept()
+}
+
+export default component
+`;
+};
+function jq79(options = {}) {
+  const include = options.include ?? /\.html$/;
+  const { exclude } = options;
+  return {
+    name: "jq79",
+    enforce: "pre",
+    async resolveId(source, importer) {
+      if (!importer) return null;
+      if (source.includes("?")) return null;
+      if (!include.test(source)) return null;
+      const resolved = await this.resolve(source, importer, { skipSelf: true });
+      if (!resolved || resolved.external) return null;
+      if (exclude?.test(resolved.id)) return null;
+      return resolved.id + COMPONENT_QUERY;
+    },
+    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 };
+    }
+  };
+}
+var vite_default = jq79;
+export {
+  vite_default as default,
+  jq79
+};
+//# sourceMappingURL=vite.js.map

package/dist/vite.js.map

@@ -0,0 +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 isRelative = (spec: string) => spec.startsWith(\"./\") || spec.startsWith(\"../\")\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;AAE/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":[]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "jq79",
-  "version": "0.2.0",
-  "description": "Mini reactive component library: single-file components, Svelte-style setup scripts, fine-grained proxy reactivity. One file, zero dependencies.",
+  "version": "0.3.1",
+  "description": "Mini reactive component library: single-file components, Svelte-style setup scripts, fine-grained proxy reactivity. Single-file build, zero dependencies.",
   "keywords": [
     "reactive",
     "components",
@@ -30,25 +30,45 @@
       "import": "./dist/jq79.js",
       "require": "./dist/jq79.cjs",
       "default": "./dist/jq79.js"
+    },
+    "./vite": {
+      "types": "./dist/vite.d.ts",
+      "import": "./dist/vite.js",
+      "require": "./dist/vite.cjs",
+      "default": "./dist/vite.js"
     }
   },
   "unpkg": "./dist/jq79.global.js",
   "jsdelivr": "./dist/jq79.global.js",
   "files": [
     "dist",
-    "src/jq79.ts"
+    "src",
+    "assets"
   ],
   "sideEffects": false,
   "scripts": {
-    "build": "tsup && tsc src/jq79.ts --declaration --emitDeclarationOnly --strict --lib dom,es2020 --target es2020 --module es2020 --moduleResolution bundler --outDir dist",
+    "build": "tsup && tsc src/jq79.ts src/vite.ts --declaration --emitDeclarationOnly --strict --skipLibCheck --lib dom,es2020 --target es2020 --module es2020 --moduleResolution bundler --outDir dist",
     "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "site": "node scripts/build-site.mjs",
     "prepublishOnly": "npm test && npm run build"
   },
+  "peerDependencies": {
+    "vite": ">=5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "vite": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@types/node": "^26.1.1",
+    "@vitest/coverage-v8": "^4.1.10",
     "jsdom": "^29.1.1",
+    "marked": "^18.0.6",
     "tsup": "^8.5.1",
     "typescript": "^7.0.2",
+    "vite": "^8.1.4",
     "vitest": "^4.1.10"
   }
 }

package/src/dom.ts

@@ -0,0 +1,33 @@
+// DOM helpers: tiny query/create utilities, also injected into component
+// scripts as $, $$ and $create
+
+export const $ = (selectorOrEl: string | Element, selector?: string) => 
+  typeof selectorOrEl === "string"
+    ? document.querySelector(selectorOrEl)
+    : selectorOrEl.querySelector(selector || "")
+
+export const $$ = (selectorOrEl: string | Element, selector?: string) => Array.from(
+  typeof selectorOrEl === "string"
+    ? document.querySelectorAll(selectorOrEl)
+    : selectorOrEl.querySelectorAll(selector || "")
+)
+
+// $create(tag, attrs): attrs are set as attributes, except className, which
+// may be a string or an array of class names.
+export const $create = (tag: string, attrs: Record<string, any> = {}): HTMLElement => {
+  const el = document.createElement(tag);
+  for (const [name, value] of Object.entries(attrs)) {
+    if (name === 'className') {
+      el.className = Array.isArray(value) ? value.join(' ') : value;
+    } else if (name === 'textContent') {
+      el.textContent = value;
+    } else if (name === 'children') {
+      for (const child of value) {
+        el.appendChild(child);
+      }
+    } else {
+      el.setAttribute(name, value);
+    }
+  }
+  return el;
+};