jq79 0.3.22 → 0.3.23

package/src/reactive.ts

@@ -41,9 +41,31 @@ const walkLeaves = (obj: Record<string, any>, path: string, visit: (dotKey: stri
 const pathsOverlap = (a: string, b: string): boolean =>
   a === b || a.startsWith(`${b}.`) || b.startsWith(`${a}.`)
 
+// reads the raw object behind a store proxy. Module-level (not per-store) so a
+// value that is already reactive - in this store or in another one - can be
+// unwrapped before being wrapped again. Without it, handing the same object to
+// two stores has each one wrapping the other's proxies, and since a wrap walks
+// what it wraps, the nesting compounds until the process stops responding
+const RAW = Symbol("jq79.raw")
+
+const toRaw = <T>(value: T): T => {
+  let raw: any = value
+  while (raw !== null && typeof raw === "object" && raw[RAW]) raw = raw[RAW]
+  return raw
+}
+
+// marks a store's *root* proxy. A store put inside another store (a setup
+// script's `const local = $reactive(...)`) has to pass through whole: it owns
+// its listeners and its $on/$effect, so unwrapping it would strip away the very
+// thing it is. Nested proxies carry no such marker and are unwrapped freely
+const STORE = Symbol("jq79.store")
+
+const isStore = (value: any): boolean =>
+  value !== null && typeof value === "object" && value[STORE] === true
+
 // active $effect() runs, innermost last - a module-level stack (rather than
 // one per store) so nested effects across stores still nest correctly; reads
-// during makeReactive's `get` trap are attributed to whichever run is on top
+// during a proxy's `get` trap are attributed to whichever run is on top
 const trackerStack: Set<string>[] = []
 
 // runs fn with dependency tracking suspended - reads inside it are attributed
@@ -63,12 +85,22 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
   const exactListeners = new Map<string, Set<ChangeListener>>()
   const anyListeners = new Set<AnyChangeListener>()
   const effects = new Set<Effect>()
-  // every proxy this store has ever handed out, so re-assigning an object
-  // that's already reactive (e.g. `data.list = [data.list[1], data.list[0]]`)
-  // doesn't wrap it a second time - which would hand out a *new* object
-  // identity for the same logical item, breaking reference-equality checks
-  // like :each's keyed diffing
-  const reactiveProxies = new WeakSet<object>()
+
+  // one proxy per raw object, for this store alone. Keyed by the *raw object*
+  // rather than by its path, so identity travels with the object: :each diffs
+  // its items by reference (Object.is), and a reordered list has to hand back
+  // the same proxy for the same item or every row would re-render. The flip
+  // side is that an object's path is fixed when it is first wrapped, so after a
+  // reorder its notifications carry the old index - effects that read the list
+  // itself still wake up (pathsOverlap), which is what makes it a non-issue in
+  // practice
+  const proxies = new WeakMap<object, Record<string, any>>()
+
+  // $on/$onAny/$effect are served from the root proxy's `get` instead of being
+  // defined on the object: a store must leave nothing behind on the data it was
+  // handed, and two stores over one object would otherwise clobber each other's
+  // handles. Null-prototype, so `key in storeApi` can't match Object.prototype
+  const storeApi: Record<string, any> = Object.create(null)
 
   const notify = (dotKey: string, value: any, isNewKey = false) => {
     exactListeners.get(dotKey)?.forEach(listener => listener(value, dotKey))
@@ -81,21 +113,32 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
     })
   }
 
-  const makeReactive = (obj: Record<string, any>, path: string): Record<string, any> => {
-    if (reactiveProxies.has(obj)) return obj
+  const isWrappable = (value: any): value is Record<string, any> =>
+    value !== null && typeof value === "object" && isPlainData(value)
 
-    Object.entries(obj).forEach(([key, value]) => {
-      if (value && typeof value === "object" && isPlainData(value)) {
-        obj[key] = makeReactive(value, path ? `${path}.${key}` : key)
-      }
-    })
+  // the reactive view of `raw`, created on demand. Callers must hand it a raw
+  // object (see toRaw at both call sites): wrapping a proxy is what compounds
+  const wrap = (raw: Record<string, any>, path: string): Record<string, any> => {
+    const cached = proxies.get(raw)
+    if (cached) return cached
 
-    const proxy = new Proxy(obj, {
+    const proxy: Record<string, any> = new Proxy(raw, {
       get(target, key, receiver) {
-        if (typeof key === "string") {
-          trackerStack[trackerStack.length - 1]?.add(path ? `${path}.${key}` : key)
-        }
-        return Reflect.get(target, key, receiver)
+        if (key === RAW) return target
+        if (key === STORE) return path === ""
+        if (typeof key !== "string") return Reflect.get(target, key, receiver)
+        if (path === "" && key in storeApi) return storeApi[key]
+
+        const dotKey = path ? `${path}.${key}` : key
+        trackerStack[trackerStack.length - 1]?.add(dotKey)
+
+        // nested objects are wrapped here rather than up front, so the object
+        // handed to $reactive is never rewritten
+        const value = Reflect.get(target, key, receiver)
+        if (isStore(value)) return value
+
+        const raw = toRaw(value)
+        return isWrappable(raw) ? wrap(raw, dotKey) : raw
       },
       set(target, key: string, value, receiver) {
         // an assignment delegated up the prototype chain from a derived scope
@@ -110,21 +153,24 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
         }
 
         const dotKey = path ? `${path}.${key}` : key
-        if (value && typeof value === "object" && isPlainData(value)) {
-          value = makeReactive(value, dotKey)
-        }
+        // store the raw value, never a proxy - including one of our own, so
+        // that `list = [list[1], list[0]]` doesn't write proxies back into the
+        // data. Reads re-wrap it, from the cache, as the very same proxy. A
+        // whole store assigned in is the exception: it stays as it is
+        const stored = isStore(value) ? value : toRaw(value)
         const isNewKey = !Object.prototype.hasOwnProperty.call(target, key)
-        target[key] = value
-        notify(dotKey, value, isNewKey)
+        target[key] = stored
+        const notified = isStore(stored) || !isWrappable(stored) ? stored : wrap(stored, dotKey)
+        notify(dotKey, notified, isNewKey)
         return true
       }
     })
 
-    reactiveProxies.add(proxy)
+    proxies.set(raw, proxy)
     return proxy
   }
 
-  const reactive = makeReactive(data, "") as ReactiveDeepData<T>
+  const reactive = wrap(toRaw(data), "") as ReactiveDeepData<T>
 
   const $on = (dotKey: string, listener: ChangeListener, { immediate = false }: ListenerOptions = {}): Unsubscribe => {
     if (!exactListeners.has(dotKey)) exactListeners.set(dotKey, new Set())
@@ -158,9 +204,9 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
     return () => { effects.delete(effect) }
   }
 
-  Object.defineProperty(reactive, "$on", { value: $on, enumerable: false })
-  Object.defineProperty(reactive, "$onAny", { value: $onAny, enumerable: false })
-  Object.defineProperty(reactive, "$effect", { value: $effect, enumerable: false })
+  storeApi.$on = $on
+  storeApi.$onAny = $onAny
+  storeApi.$effect = $effect
 
   return reactive
 }

package/src/transform.ts

@@ -48,9 +48,33 @@ const skipBlockComment = (src: string, start: number): number => {
   return end === -1 ? src.length : end + 2
 }
 
-// end of a statement starting at `start`: the first newline or `;` that isn't
-// inside a string/comment or unbalanced brackets, so multi-line RHS like a
-// wrapped function call or template literal stays in one piece
+// index of the next thing that isn't whitespace or a comment
+const skipToToken = (src: string, start: number): number => {
+  let i = start
+  while (i < src.length) {
+    if (/\s/.test(src[i])) { i++; continue }
+    if (src[i] === "/" && src[i + 1] === "/") { i = skipLineComment(src, i); continue }
+    if (src[i] === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
+    break
+  }
+  return i
+}
+
+// tokens that can't *start* a statement, so a line beginning with one is
+// continuing the previous expression rather than opening a new statement -
+// the same call JS's automatic semicolon insertion makes. Unary-only forms
+// (!, ~, ++, --) are deliberately absent: those do start a statement, and JS
+// inserts the semicolon before them
+const CONTINUATION_RE = /^(\?\.|\?\?|&&|\|\||\*\*|[.,+\-*/%&|^<>=?:([])/
+
+// end of a statement starting at `start`: the first `;` or line break that
+// isn't inside a string/comment or unbalanced brackets. A line break only
+// ends the statement if the next line can't continue it, so leading-dot
+// method chains and multi-line operator chains stay in one piece:
+//
+//   $: total = items
+//     .filter(item => item.active)      <- still the same statement
+//     .length
 const findStatementEnd = (src: string, start: number): number => {
   let depth = 0
   let i = start
@@ -61,7 +85,13 @@ const findStatementEnd = (src: string, start: number): number => {
     if (ch === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
     if ("([{".includes(ch)) depth++
     else if (")]}".includes(ch)) depth--
-    else if (depth <= 0 && (ch === "\n" || ch === ";")) return i
+    else if (depth <= 0 && ch === ";") return i
+    else if (depth <= 0 && ch === "\n") {
+      const next = skipToToken(src, i + 1)
+      if (next >= src.length || !CONTINUATION_RE.test(src.slice(next, next + 2))) return i
+      i = next
+      continue
+    }
     i++
   }
   return src.length

package/src/vite.ts

@@ -1,5 +1,7 @@
 import { readFile } from "node:fs/promises"
-import type { Plugin } from "vite"
+import { relative } from "node:path"
+import { preprocessCSS } from "vite"
+import type { Plugin, ResolvedConfig } from "vite"
 
 // Vite plugin: import .html single-file components as modules.
 //
@@ -8,9 +10,12 @@ import type { Plugin } from "vite"
 //
 // The imported value is a Component79 built from the file's source - the same
 // thing `await Component79.fetch(url)` resolves to, but bundled at build time
-// instead of fetched at runtime. The plugin is a pure loader: the component
-// source is inlined verbatim (no transforms), so a file keeps working
-// unchanged if it's ever served from public/ and loaded with fetch instead.
+// instead of fetched at runtime. The component source is inlined verbatim, so
+// a file keeps working unchanged if it's ever served from public/ and loaded
+// with fetch instead - with one deliberate exception: <style lang="scss"> (or
+// less/stylus/sass) is compiled to plain CSS here. A component using `lang`
+// therefore only works through the bundler; loaded with fetch() it would
+// reach the runtime uncompiled, which the runtime warns about.
 //
 // Only .html files imported from other modules are claimed; entry points
 // (index.html) have no importer and imports carrying an explicit query
@@ -60,6 +65,49 @@ const hoistableImports = (source: string, include: RegExp): string[] => {
   return [...specifiers]
 }
 
+// a <style> block with its attribute string, so `lang` can be read and the
+// content replaced. Attribute values are matched as quoted chunks so a ">"
+// inside one doesn't end the tag early
+const STYLE_BLOCK_RE = /<style((?:"[^"]*"|'[^']*'|[^>"'])*)>([\s\S]*?)<\/style\s*>/gi
+const LANG_ATTR_RE = /\blang\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+))/i
+
+// compiles <style lang="scss|less|styl|sass"> blocks to plain CSS with Vite's
+// own preprocessing (the same call @vitejs/plugin-vue makes), so the runtime
+// only ever sees CSS. The preprocessor picks its parser from the extension,
+// and resolving relative @use/@import against a filename in the component's
+// own directory is what makes `@use "./vars"` work. Files the preprocessor
+// pulls in are registered as watch deps, so editing a partial re-runs HMR for
+// every component that uses it. `lang` is dropped from the emitted tag: what
+// the runtime parses is a plain <style> (with `scoped` and the rest intact)
+const compileStyleBlocks = async (
+  source: string,
+  file: string,
+  config: ResolvedConfig,
+  addWatchFile: (id: string) => void
+): Promise<string> => {
+  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)
+}
+
 // the emitted module. Literal import("...") specifiers found in the
 // component's scripts become real module imports, handed to Component79 as a
 // resolution map: at runtime $__import checks the map before falling back to
@@ -76,7 +124,7 @@ const hoistableImports = (source: string, include: RegExp): string[] => {
 // an instance only used as a definition (nested component clones can't be
 // reached from here) falls back to a full reload. `mountRoot` is internal to
 // Component79, but plugin and runtime ship in lockstep from the same package.
-const componentModule = (source: string, include: RegExp): string => {
+const componentModule = (source: string, include: RegExp, filename: string): string => {
   const hoisted = hoistableImports(source, include)
   const imports = hoisted
     .map((spec, i) =>
@@ -93,6 +141,7 @@ ${imports}
 
 const src = ${JSON.stringify(source)}
 const modules = ${modulesMap}
+const filename = ${JSON.stringify(filename)}
 
 let component
 
@@ -103,6 +152,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 })
@@ -111,7 +161,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) {
@@ -127,10 +177,16 @@ export function jq79(options: Jq79PluginOptions = {}): Plugin {
   const include = options.include ?? /\.html$/
   const { exclude } = options
 
+  let config: ResolvedConfig | null = null
+
   return {
     name: "jq79",
     enforce: "pre",
 
+    configResolved(resolved) {
+      config = resolved
+    },
+
     async resolveId(source, importer) {
       if (!importer) return null // entry points are never components
       if (source.includes("?")) return null // ?raw, ?url, ... keep their meaning
@@ -145,7 +201,15 @@ export function jq79(options: Jq79PluginOptions = {}): Plugin {
     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))
+
+      // the runtime names the component's setup scripts after this, so devtools
+      // shows a path the user recognizes instead of an anonymous VM script
+      const filename = config ? relative(config.root, file) : file
+
+      return { code: componentModule(source, include, filename), map: null }
     },
   }
 }