sprae 11.2.0 → 11.2.2

package/readme.md

@@ -3,7 +3,7 @@
 > DOM tree microhydration
 
 _Sprae_ is open & minimalistic progressive enhancement framework with _preact-signals_ based reactivity.<br/>
-Perfect for small-scale websites, static pages, landings, prototypes, lightweight UI or as [nextjs / SSR companion](#JSX).<br/>
+Perfect for small-scale websites, static pages, landings, prototypes, lightweight UI or as [SSR companion](#JSX).<br/>
 A light and fast alternative to _alpine_, _petite-vue_ etc (see [why](#justification)).
 
 ## Usage
@@ -366,7 +366,6 @@ sprae.use({ compile })
 * `key` is not used, `:each` uses direct list mapping instead of DOM diffing.
 * `await` is not supported in attributes, it’s a strong indicator you need to put these methods into state.
 * `:ref` comes after `:if` for mount/unmount events `<div :if="cond" :ref="(init(), ()=>dispose())"></div>`.
-* Directives be `s-` prefixed instead of `:` for JSX.
 
 ## Justification
 
@@ -457,21 +456,19 @@ npm run results
 
 ## JSX
 
-Sprae works with JSX, eg. Next.js companion for SSR via `s-` prefixed attributes.
+Sprae works with JSX via `s-` attributes, eg. Next.js companion for SSR.
 
-Next.js server components fall short for dynamic UI, like active nav items, collapsible sections, tabs etc. That forces into client components, which screws up data fetching, bloats hydration and adds overhead.`<Script>` is heavy and clunky hack.
-
-Sprae can offload UI logic to keep server components intact.
+Next.js server components fail at dynamic UI, like active nav, tabs, sliders etc. That forces into client components, which screws up data fetching, bloats hydration and adds overhead.`<Script>` is heavy and clunky hack. Sprae can offload UI logic to keep server components intact.
 
 ```jsx
-// app/page.jsx
+// app/page.jsx - server component
 export default function Page() {
   return <>
     <nav id="nav">
       <a href="/" s-class="location.path === '/' && 'active'">Home</a>
       <a href="/about" s-class="location.path === '/about' && 'active'">About</a>
     </nav>
-    <script src="https://unpkg.com/sprae" init></script>
+    ...
   </>
 }
 ```

package/signal.js

@@ -40,14 +40,13 @@ export let signal = (v, s, obs = new Set) => (
     c
   ),
   batch = fn => fn(),
-  untracked = batch
+  untracked = batch,
 
-// signals adapter - allows switching signals implementation and not depend on core
-
-export function use(s) {
-  signal = s.signal
-  effect = s.effect
-  computed = s.computed
-  batch = s.batch || batch
-  untracked = s.untracked || batch
-}
+  // signals adapter - allows switching signals implementation and not depend on core
+  use = (s) => (
+    signal = s.signal,
+    effect = s.effect,
+    computed = s.computed,
+    batch = s.batch || batch,
+    untracked = s.untracked || untracked
+  )

package/store.js

@@ -1,111 +1,111 @@
 // signals-based proxy
 import { signal, computed, batch } from './signal.js'
 
-export const _signals = Symbol('signals'), _change = Symbol('change');
+export const _signals = Symbol('signals'), _change = Symbol('change'),
 
-// object store is not lazy
-export default function store(values, parent) {
-  if (!values) return values
+  // object store is not lazy
+  store = (values, parent) => {
+    if (!values) return values
 
-  // ignore existing state as argument
-  if (values[_signals]) return values;
+    // ignore existing state as argument
+    if (values[_signals]) return values;
 
-  // redirect for optimized array store
-  if (Array.isArray(values)) return list(values)
+    // redirect for optimized array store
+    if (Array.isArray(values)) return list(values)
 
-  // ignore non-objects or custom objects
-  if (values.constructor !== Object || values[Symbol.toStringTag]) return values;
+    // ignore non-objects or custom objects
+    if (values.constructor !== Object || values[Symbol.toStringTag]) return values;
 
-  // NOTE: if you decide to unlazy values, think about large arrays - init upfront can be costly
-  let signals = { ...parent?.[_signals] }, _len = signal(Object.values(values).length)
+    // NOTE: if you decide to unlazy values, think about large arrays - init upfront can be costly
+    let signals = { ...parent?.[_signals] }, _len = signal(Object.values(values).length)
 
-  // proxy conducts prop access to signals
-  const state = new Proxy(signals, {
-    get: (_, key) => key === _change ? _len : key === _signals ? signals : signals[key]?.valueOf(),
-    set: (_, key, v, s) => (s = signals[key], set(signals, key, v), s ?? (++_len.value), 1), // bump length for new signal
-    deleteProperty: (_, key) => (signals[key] && (signals[key][Symbol.dispose]?.(), delete signals[key], _len.value--), 1),
-    // subscribe to length when object is spread
-    ownKeys: () => (_len.value, Reflect.ownKeys(signals)),
-  })
+    // proxy conducts prop access to signals
+    const state = new Proxy(signals, {
+      get: (_, key) => key === _change ? _len : key === _signals ? signals : signals[key]?.valueOf(),
+      set: (_, key, v, s) => (s = signals[key], set(signals, key, v), s ?? (++_len.value), 1), // bump length for new signal
+      deleteProperty: (_, key) => (signals[key] && (signals[key][Symbol.dispose]?.(), delete signals[key], _len.value--), 1),
+      // subscribe to length when object is spread
+      ownKeys: () => (_len.value, Reflect.ownKeys(signals)),
+    })
 
-  // init signals for values
-  for (let key in values) {
-    const desc = Object.getOwnPropertyDescriptor(values, key)
+    // init signals for values
+    for (let key in values) {
+      const desc = Object.getOwnPropertyDescriptor(values, key)
 
-    // getter turns into computed
-    if (desc?.get) {
-      // stash setter
-      (signals[key] = computed(desc.get.bind(state)))._set = desc.set?.bind(state);
-    }
-    else {
-      // init blank signal - make sure we don't take prototype one
-      signals[key] = null
-      set(signals, key, values[key]);
+      // getter turns into computed
+      if (desc?.get) {
+        // stash setter
+        (signals[key] = computed(desc.get.bind(state)))._set = desc.set?.bind(state);
+      }
+      else {
+        // init blank signal - make sure we don't take prototype one
+        signals[key] = null
+        set(signals, key, values[key]);
+      }
     }
-  }
 
-  return state
-}
+    return state
+  },
 
-// length changing methods
-const mut = ['push', 'pop', 'shift', 'unshift', 'splice']
+  // array store - signals are lazy since arrays can be very large & expensive
+  list = values => {
+    // track last accessed property to find out if .length was directly accessed from expression or via .push/etc method
+    let lastProp
 
-// array store - signals are lazy since arrays can be very large & expensive
-export function list(values) {
-  // track last accessed property to find out if .length was directly accessed from expression or via .push/etc method
-  let lastProp
+    // ignore existing state as argument
+    if (values[_signals]) return values;
 
-  // ignore existing state as argument
-  if (values[_signals]) return values;
+    // .length signal is stored separately, since it cannot be replaced on array
+    let _len = signal(values.length),
+      // gotta fill with null since proto methods like .reduce may fail
+      signals = Array(values.length).fill();
 
-  // .length signal is stored separately, since it cannot be replaced on array
-  let _len = signal(values.length),
-    // gotta fill with null since proto methods like .reduce may fail
-    signals = Array(values.length).fill();
+    // proxy conducts prop access to signals
+    const state = new Proxy(signals, {
+      get(_, key) {
+        // covers Symbol.isConcatSpreadable etc.
+        if (typeof key === 'symbol') return key === _change ? _len : key === _signals ? signals : signals[key]
 
-  // proxy conducts prop access to signals
-  const state = new Proxy(signals, {
-    get(_, key) {
-      // covers Symbol.isConcatSpreadable etc.
-      if (typeof key === 'symbol') return key === _change ? _len : key === _signals ? signals : signals[key]
+        // if .length is read within .push/etc - peek signal to avoid recursive subscription
+        if (key === 'length') return mut.includes(lastProp) ? _len.peek() : _len.value;
 
-      // if .length is read within .push/etc - peek signal to avoid recursive subscription
-      if (key === 'length') return mut.includes(lastProp) ? _len.peek() : _len.value;
+        lastProp = key;
 
-      lastProp = key;
+        if (signals[key]) return signals[key].valueOf()
 
-      if (signals[key]) return signals[key].valueOf()
+        // I hope reading values here won't diverge from signals
+        if (key < signals.length) return (signals[key] = signal(store(values[key]))).value
+      },
 
-      // I hope reading values here won't diverge from signals
-      if (key < signals.length) return (signals[key] = signal(store(values[key]))).value
-    },
+      set(_, key, v) {
+        // .length
+        if (key === 'length') {
+          // force cleaning up tail
+          for (let i = v; i < signals.length; i++) delete state[i]
+          // .length = N directly
+          _len.value = signals.length = v;
+          return true
+        }
 
-    set(_, key, v) {
-      // .length
-      if (key === 'length') {
-        // force cleaning up tail
-        for (let i = v; i < signals.length; i++) delete state[i]
-        // .length = N directly
-        _len.value = signals.length = v;
-        return true
-      }
+        set(signals, key, v)
 
-      set(signals, key, v)
+        // force changing length, if eg. a=[]; a[1]=1 - need to come after setting the item
+        if (key >= _len.peek()) _len.value = signals.length = +key + 1
 
-      // force changing length, if eg. a=[]; a[1]=1 - need to come after setting the item
-      if (key >= _len.peek()) _len.value = signals.length = +key + 1
+        return true
+      },
 
-      return true
-    },
+      deleteProperty: (_, key) => (signals[key]?.[Symbol.dispose]?.(), delete signals[key], 1),
+    })
 
-    deleteProperty: (_, key) => (signals[key]?.[Symbol.dispose]?.(), delete signals[key], 1),
-  })
+    return state
+  }
 
-  return state
-}
+// length changing methods
+const mut = ['push', 'pop', 'shift', 'unshift', 'splice']
 
 // set/update signal value
-function set(signals, key, v) {
+const set = (signals, key, v) => {
   let s = signals[key]
 
   // untracked
@@ -129,3 +129,5 @@ function set(signals, key, v) {
   // .x = y
   else s.value = store(v)
 }
+
+export default store