jq79 0.4.0 → 0.4.2

package/src/reactive.ts

@@ -153,7 +153,17 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
     const cached = proxies.get(raw)
     if (cached) return cached
 
+    // keys that were deleted off this object. `with ($scope)` resolves a name
+    // through [[HasProperty]], so without a claim here a deleted key would fall
+    // through to globalThis and the *whole* expression would die of
+    // ReferenceError - `user ? user.name : "none"` must take its else branch
+    // instead. The cost: `"user" in store` stays true after a delete
+    let tombstones: Set<string> | null = null
+
     const proxy: Record<string, any> = new Proxy(raw, {
+      has(target, key) {
+        return Reflect.has(target, key) || (typeof key === "string" && tombstones?.has(key) === true)
+      },
       get(target, key, receiver) {
         if (key === RAW) return target
         if (key === STORE) return path === ""
@@ -193,12 +203,40 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
         // 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)
+        // a primitive write that changes nothing notifies nobody: it's what
+        // lets an effect write the value it just read (a normalizing
+        // assignment, a prop sync) and settle instead of waking itself
+        // forever. Only primitives and functions: re-writing the SAME object
+        // reference stays loud, because that is the cross-store "deep touch"
+        // channel - a parent's prop sync forwards `user.name = x` to the
+        // child's store by re-assigning the same `user`, and the child's
+        // listeners live on the child's store, not the parent's. A new key
+        // always announces itself - the sweep is its whole point
+        if (!isNewKey && Object.is(target[key], stored) && (stored === null || typeof stored !== "object")) return true
         target[key] = stored
+        tombstones?.delete(key) // the key exists again: no claim needed
         if (isStore(stored)) bridge(stored, dotKey)
         else unbridge(dotKey)
         const notified = isStore(stored) || !isWrappable(stored) ? stored : wrap(stored, dotKey)
         notify(dotKey, notified, isNewKey)
         return true
+      },
+      // `delete data.user` is a plain-object mutation like any other, so it
+      // notifies like one - with `undefined`, which is what a read returns
+      // afterwards. Array methods that shrink (pop, splice) delete their dead
+      // slots through this trap too. No new-key sweep: whoever depended on the
+      // key tracked it while it existed, so dep matching wakes exactly them
+      deleteProperty(target, key) {
+        if (typeof key !== "string") return Reflect.deleteProperty(target, key)
+        const had = Object.prototype.hasOwnProperty.call(target, key)
+        const deleted = Reflect.deleteProperty(target, key)
+        if (deleted && had) {
+          const dotKey = path ? `${path}.${key}` : key
+          ;(tombstones ??= new Set()).add(key)
+          unbridge(dotKey) // a nested store it held: stop listening to it
+          notify(dotKey, undefined)
+        }
+        return deleted
       }
     })
 
@@ -232,16 +270,41 @@ export const $reactive = <T extends Record<string, any>>(data: T): ReactiveDeepD
   }
 
   const $effect = (run: () => void): Unsubscribe => {
+    // a notify landing while this effect runs (an item's render writing to
+    // the store, waking the very effect that is rendering it) must not
+    // re-enter mid-run - the half-done run would race its own repeat over
+    // shared state, which is how :each once tripled its rows. It marks the
+    // run dirty instead, and repeats *after* it finishes, against settled
+    // state, until clean. Still fully synchronous: everything happens before
+    // the triggering assignment returns
+    let running = false
+    let dirty = false
     const effect: Effect = {
       deps: new Set(),
       run: () => {
-        const deps = new Set<string>()
-        trackerStack.push(deps)
+        if (running) {
+          dirty = true
+          return
+        }
+        running = true
         try {
-          run()
+          let cycles = 0
+          do {
+            dirty = false
+            const deps = new Set<string>()
+            trackerStack.push(deps)
+            try {
+              run()
+            } finally {
+              trackerStack.pop()
+              effect.deps = deps
+            }
+          } while (dirty && ++cycles < 100)
+          // an effect that keeps writing its own dependencies used to die by
+          // stack overflow; now it is cut off and named
+          if (dirty) console.error("jq79: an effect re-woke itself 100 times in a row (it writes what it reads); giving up on it settling")
         } finally {
-          trackerStack.pop()
-          effect.deps = deps
+          running = false
         }
       },
     }
@@ -272,14 +335,27 @@ export type EffectScope = {
   // registers an arbitrary cleanup (e.g. destroying a nested component) to
   // run when this subtree is torn down
   onDispose: (fn: Unsubscribe) => void
+  // re-runs every effect registered on this scope, nested scopes excluded:
+  // how :each tells a reused, repositioned entry's dep-less bindings (the
+  // `{{ $index }}`-only case) about their move. Deps stay as they were -
+  // callers run it untracked
+  refresh: () => void
   dispose: () => void
 }
 
 export const createEffectScope = (scope: Record<string, any>): EffectScope => {
   const disposers: Unsubscribe[] = []
+  const runs: (() => void)[] = []
   return {
-    effect: run => { disposers.push(scope.$effect(run)) },
+    effect: run => {
+      disposers.push(scope.$effect(run))
+      runs.push(run)
+    },
     onDispose: fn => { disposers.push(fn) },
-    dispose: () => { disposers.splice(0).forEach(dispose => dispose()) },
+    refresh: () => { runs.forEach(run => run()) },
+    dispose: () => {
+      disposers.splice(0).forEach(dispose => dispose())
+      runs.length = 0
+    },
   }
 }

package/src/transform.ts

@@ -60,6 +60,78 @@ const skipToToken = (src: string, start: number): number => {
   return i
 }
 
+// ---------------------------------------------------------------------------
+// regex literals. The scanners walk the source counting bracket depth, and a
+// regex walked as if it were code poisons that count: `split(/\//)` puts two
+// slashes side by side (a line comment, as far as a scanner knows) and the
+// `)` after them is skipped uncounted; `/[(]/` inflates the depth for good.
+// So a `/` that opens a regex is consumed whole - and whether it opens one is
+// the classic lexer call, made the way every tokenizer makes it: by what came
+// before. Division needs a completed expression on its left; everywhere else
+// a `/` can only be a regex.
+// ---------------------------------------------------------------------------
+
+// reserved words a regex can follow. Reserved only - `of` is not (`const of
+// = 4; of / 2` is legal division), so `for (x of /re/)` stays unrescued
+// rather than risking real code
+const REGEX_AFTER_WORD = new Set([
+  "return", "typeof", "case", "in", "instanceof", "new", "delete", "void", "do", "else", "yield", "await",
+])
+
+// whether a `/` at `at` opens a regex literal rather than a division: looks
+// backward past whitespace and block comments for the last meaningful thing.
+// A completed expression - identifier, number, closing quote or bracket,
+// postfix ++/-- - takes division; a reserved word or any other punctuator
+// admits a regex. Only consulted for the rare `/` that is neither `//` nor
+// `/*`, so the scanners pay nothing on the common path
+const regexAllowed = (src: string, at: number): boolean => {
+  let i = at - 1
+  while (i >= 0) {
+    const ch = src[i]
+    if (/\s/.test(ch)) { i--; continue }
+    if (ch === "/" && src[i - 1] === "*") {
+      const open = src.lastIndexOf("/*", i - 2)
+      if (open === -1) return true // an unopened comment tail: malformed input
+      i = open - 1
+      continue
+    }
+    break
+  }
+  if (i < 0) return true // the start of the source starts an expression
+  const ch = src[i]
+  if (/[\w$]/.test(ch)) {
+    let start = i
+    while (start > 0 && /[\w$]/.test(src[start - 1])) start--
+    return REGEX_AFTER_WORD.has(src.slice(start, i + 1))
+  }
+  if ((ch === "+" || ch === "-") && src[i - 1] === ch) return false // postfix ++/--
+  return !")]}\"'`.".includes(ch)
+}
+
+// consumes a regex literal (with its flags): backslash escapes, and character
+// classes, where an unescaped `/` doesn't close the literal (`/[/]/` is one
+// regex). A literal can't contain an unescaped newline, so hitting one means
+// the classification was wrong or the input malformed - stop there, bounding
+// any damage to a single line
+const skipRegex = (src: string, start: number): number => {
+  let i = start + 1
+  let inClass = false
+  while (i < src.length) {
+    const ch = src[i]
+    if (ch === "\\") { i += 2; continue }
+    if (ch === "\n") return i
+    if (ch === "[") inClass = true
+    else if (ch === "]") inClass = false
+    else if (ch === "/" && !inClass) {
+      i++
+      while (i < src.length && /[a-z]/i.test(src[i])) i++ // flags
+      return i
+    }
+    i++
+  }
+  return src.length
+}
+
 // 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
@@ -83,6 +155,7 @@ const findStatementEnd = (src: string, start: number): number => {
     if (ch === "'" || ch === '"' || ch === "`") { i = skipString(src, i); continue }
     if (ch === "/" && src[i + 1] === "/") { i = skipLineComment(src, i); continue }
     if (ch === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
+    if (ch === "/" && regexAllowed(src, i)) { i = skipRegex(src, i); continue }
     if ("([{".includes(ch)) depth++
     else if (")]}".includes(ch)) depth--
     else if (depth <= 0 && ch === ";") return i
@@ -121,6 +194,13 @@ export const transformSetupScript = (src: string): SetupTransform => {
       i = end
       continue
     }
+    if (ch === "/" && regexAllowed(src, i)) {
+      const end = skipRegex(src, i)
+      out += src.slice(i, end)
+      i = end
+      atStatementStart = false
+      continue
+    }
 
     // `import(...)` is a keyword form, so it can't be intercepted through the
     // scope - rewrite the identifier to the injected $__import (which loads
@@ -155,7 +235,12 @@ export const transformSetupScript = (src: string): SetupTransform => {
         if (assign) vars.push(assign[1])
         const start = i + label[0].length
         const end = findStatementEnd(src, start)
-        out += `$__effect(() => { ${src.slice(start, end)} });`
+        // the body is re-scanned rather than sliced raw, so an `import()`
+        // inside it gets the $__import rewrite like anywhere else. Safe to
+        // recurse: strings/comments/regexes copy through unchanged, and a
+        // depth-0 declaration inside a labeled statement is a SyntaxError
+        // in JS anyway, so nothing else can rewrite
+        out += `$__effect(() => { ${transformSetupScript(src.slice(start, end)).code} });`
         i = end
         continue
       }
@@ -266,6 +351,7 @@ const indexOfTopLevel = (src: string, ch: string): number => {
     if (c === "'" || c === '"' || c === "`") { i = skipString(src, i); continue }
     if (c === "/" && src[i + 1] === "/") { i = skipLineComment(src, i); continue }
     if (c === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
+    if (c === "/" && c !== ch && regexAllowed(src, i)) { i = skipRegex(src, i); continue }
     if ("([{".includes(c)) depth++
     else if (")]}".includes(c)) depth--
     else if (depth === 0 && c === ch) return i
@@ -284,6 +370,7 @@ const splitTopLevel = (src: string): string[] => {
     if (ch === "'" || ch === '"' || ch === "`") { i = skipString(src, i); continue }
     if (ch === "/" && src[i + 1] === "/") { i = skipLineComment(src, i); continue }
     if (ch === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
+    if (ch === "/" && regexAllowed(src, i)) { i = skipRegex(src, i); continue }
     if (ch !== undefined && "([{".includes(ch)) depth++
     else if (ch !== undefined && ")]}".includes(ch)) depth--
     else if (i === src.length || (ch === "," && depth === 0)) {
@@ -325,6 +412,9 @@ export const parsePropsPattern = (pattern: string | undefined): PropDecl[] | nul
   while (close < src.length) {
     const ch = src[close]
     if (ch === "'" || ch === '"' || ch === "`") { close = skipString(src, close); continue }
+    if (ch === "/" && src[close + 1] === "/") { close = skipLineComment(src, close); continue }
+    if (ch === "/" && src[close + 1] === "*") { close = skipBlockComment(src, close); continue }
+    if (ch === "/" && regexAllowed(src, close)) { close = skipRegex(src, close); continue }
     if ("([{".includes(ch)) depth++
     else if (")]}".includes(ch) && --depth === 0) break
     close++
@@ -357,6 +447,7 @@ const findExportDefault = (src: string): number => {
     if (ch === "'" || ch === '"' || ch === "`") { i = skipString(src, i); atStatementStart = false; continue }
     if (ch === "/" && src[i + 1] === "/") { i = skipLineComment(src, i); continue }
     if (ch === "/" && src[i + 1] === "*") { i = skipBlockComment(src, i); continue }
+    if (ch === "/" && regexAllowed(src, i)) { i = skipRegex(src, i); atStatementStart = false; continue }
 
     if (ch === "e" && depth === 0 && atStatementStart && (i === 0 || !/[\w$.]/.test(src[i - 1]))) {
       EXPORT_DEFAULT_RE.lastIndex = i
@@ -396,6 +487,9 @@ const firstParameterSource = (src: string): string | null => {
   while (end < src.length) {
     const ch = src[end]
     if (ch === "'" || ch === '"' || ch === "`") { end = skipString(src, end); continue }
+    if (ch === "/" && src[end + 1] === "/") { end = skipLineComment(src, end); continue }
+    if (ch === "/" && src[end + 1] === "*") { end = skipBlockComment(src, end); continue }
+    if (ch === "/" && regexAllowed(src, end)) { end = skipRegex(src, end); continue }
     if ("([{".includes(ch)) depth++
     else if (")]}".includes(ch) && --depth === 0) break
     end++
@@ -450,6 +544,13 @@ export const transformFactoryScript = (src: string): string | null => {
       i = end
       continue
     }
+    if (ch === "/" && regexAllowed(src, i)) {
+      const end = skipRegex(src, i)
+      out += src.slice(i, end)
+      i = end
+      atStatementStart = false
+      continue
+    }
 
     if (ch === "i" && atWordBoundary) {
       // dynamic import() -> $__import, same rewrite as setup scripts