@wardic/solid 1.0.0-rc.4 → 1.0.0-rc.6

package/src/unstable/v2/live-value.ts

@@ -25,18 +25,15 @@
  */
 import type * as InterpolatorRegistry from "@wardic/core/InterpolatorRegistry"
 import * as LiveValue from "@wardic/core/LiveValue"
-import type * as ScrollOffset from "@wardic/dom/ScrollOffset"
-import * as Arr from "effect/Array"
 import * as Bool from "effect/Boolean"
 import * as Effect from "effect/Effect"
-import * as Option from "effect/Option"
 import * as Predicate from "effect/Predicate"
-import { Atom, AtomRegistry } from "effect/reactivity"
-import * as Rec from "effect/Record"
+import * as Atom from "effect/reactivity/Atom"
+import * as AtomRegistry from "effect/reactivity/AtomRegistry"
 import * as Scope from "effect/Scope"
 import * as UndefinedOr from "effect/UndefinedOr"
 import { isServer } from "@solidjs/web"
-import { type Accessor, createEffect, createMemo, createSignal, onCleanup, untrack } from "solid-js"
+import { type Accessor, createEffect, createMemo, onCleanup, untrack } from "solid-js"
 import {
   atomOf,
   type FollowAccessor,
@@ -59,7 +56,7 @@ import { eachFrameOf } from "../../animation-frame.ts"
 import * as OwnerScope from "../../owner-scope.ts"
 import { withServerInterpolators } from "../../server-interpolators.ts"
 import { followAtom } from "./bridge.ts"
-import { CLIENT_ONLY, CLIENT_ONLY_DEFERRED, onSettledClientOnly } from "./solid-reactivity.ts"
+import { CLIENT_ONLY, CLIENT_ONLY_DEFERRED } from "./solid-reactivity.ts"
 import { useWardicRuntime, useWardicSkipAnimations } from "./provider.tsx"
 
 /** A Live value read now on a server: an Atom through a server's own registry, an accessor called. */
@@ -87,7 +84,7 @@ const sourceAtomOf = <A>(source: LiveSource<A>, registry: AtomRegistry.AtomRegis
   })
 
 /** What a helper's Scope reports when one of its finalizers fails as its owner goes. */
-const CLOSE_FAILED = "wardic.liveValue: a finalizer failed"
+export const CLOSE_FAILED = "wardic.liveValue: a finalizer failed"
 
 /** A helper's Atom, made on the provider's runtime in a Scope its owner's disposal closes, as an accessor carrying it. */
 const liveOf = <A, R>(runtime: WardicRuntime, live: Effect.Effect<Atom.Atom<A>, never, R>): Accessor<A> => {
@@ -264,7 +261,8 @@ export const createTime = (): Accessor<number> => {
   return liveOf(useWardicRuntime(), LiveValue.time())
 }
 
-const SERVER_ZERO: Accessor<number> = () => 0
+/** A server render's value of a Live helper: 0, and no Atom. Internal. */
+export const SERVER_ZERO: Accessor<number> = () => 0
 
 /**
  * A `will-change` for an element's `style`: `"auto"` until the element first animates a transform key,
@@ -309,106 +307,3 @@ export const createAnimationFrame = (callback: (time: number, delta: number) =>
   runtime.runSync(eachFrameOf(runtime, callback).pipe(Scope.provide(scope)))
 }
 
-/** An element, or an accessor of one, such as `() => box` for a ref: read once it's there. */
-export type ElementSource = Element | Accessor<Element | undefined>
-
-/** `createScroll`'s options, as Motion's `useScroll`'s. */
-export interface ScrollOptions {
-  /** The scrolling element, as an accessor of its ref: `() => box`. The page's scroll when left out. */
-  readonly container?: ElementSource
-  /** An element whose way through the container the progress reads, between the `offset`s. */
-  readonly target?: ElementSource
-  /**
-   * Where the progress runs, as Motion's: each stop pairs an edge of the target with an edge of the
-   * container, `["start end", "end start"]`, 0 at the first and 1 at the last. An edge is `start`,
-   * `center` or `end`, a fraction, or a length. With a target, `["start start", "end end"]` by default.
-   */
-  // The DOM's syntax (`@wardic/dom/ScrollOffset`); with a target and none given, its `All`.
-  readonly offset?: ScrollOffset.ScrollOffset
-  /** The axis `target` and `offset` read: `"y"` (the default) or `"x"`. */
-  readonly axis?: "x" | "y"
-}
-
-/** `createScroll`'s values, Motion's four, each an accessor. */
-export interface ScrollValues {
-  /** How far it's scrolled across, in pixels. */
-  readonly scrollX: Accessor<number>
-  /** How far it's scrolled down, in pixels. */
-  readonly scrollY: Accessor<number>
-  /** Its progress across, from 0 to 1: through its range, or, with a `target` or `offset`, through theirs. */
-  readonly scrollXProgress: Accessor<number>
-  /** Its progress down, from 0 to 1: through its range, or, with a `target` or `offset`, through theirs. */
-  readonly scrollYProgress: Accessor<number>
-}
-
-const SCROLL_KEYS = ["scrollX", "scrollY", "scrollXProgress", "scrollYProgress"] as const
-/** `createScroll`'s elements before the render has settled: none yet. */
-const NOT_YET = { container: Option.none(), target: Option.none() } as const
-const SERVER_SCROLL: ScrollValues = { scrollX: SERVER_ZERO, scrollY: SERVER_ZERO, scrollXProgress: SERVER_ZERO, scrollYProgress: SERVER_ZERO }
-
-/** An element source read now: `None` for an accessor whose ref hasn't arrived. */
-const elementOf = (source: ElementSource | undefined): Option.Option<Element | undefined> =>
-  Bool.match(Predicate.isFunction(source), {
-    onTrue: () => Option.fromUndefinedOr((source as Accessor<Element | undefined>)()),
-    onFalse: () => Option.some(source as Element | undefined),
-  })
-
-/**
- * A scroll as values: `scrollX` and `scrollY`, how far it's scrolled, in pixels, and `scrollXProgress`
- * and `scrollYProgress`, from 0 to 1 through its range. The page's, or a `container`'s. With a
- * `target`, the progress is the target's way through, between two `offset`s, on `axis`. Each is set in
- * the scroll's own event, so a value derived from one paints in the frame that shows the scroll. A
- * `container` or `target` given as an accessor of a ref reads 0s until the ref is there. 0s on a
- * server. Motion's `useScroll`.
- *
- * @example
- * let box!: HTMLDivElement
- * const { scrollYProgress } = createScroll({ container: () => box })
- * <div ref={box}>…</div>
- * <w.div style={{ scaleX: scrollYProgress }} />
- * @see https://wardic.dev/reference/solid/live-values/create-scroll
- */
-// #234. An accessor `container` or `target` is read in an effect, and a change of either follows the
-// new one. Each value carries one Atom for its life.
-export const createScroll = (options: ScrollOptions = {}): ScrollValues => {
-  if (isServer) return SERVER_SCROLL
-  const runtime = useWardicRuntime()
-  const registry = runtime.runSync(AtomRegistry.AtomRegistry)
-  // Its own four Atoms, set from the scroll of the elements there now.
-  const outs = Rec.fromIterableWith(SCROLL_KEYS, (key) => [key, Atom.make(0)] as const)
-  Arr.forEach(SCROLL_KEYS, (key) => onCleanup(registry.mount(outs[key])))
-  // Its elements are read once the render has settled: a ref given as `() => box` is set during the
-  // render, after this effect's first compute, and isn't a signal, so nothing would read it again.
-  const [settled, setSettled] = createSignal(false)
-  onSettledClientOnly(() => {
-    setSettled(true)
-  })
-  createEffect(
-    () =>
-      Bool.match(settled(), {
-        onTrue: () => ({ container: elementOf(options.container), target: elementOf(options.target) }),
-        onFalse: () => NOT_YET,
-      }),
-    ({ container, target }) => {
-      // A ref not there yet: the values hold until it is.
-      if (Bool.or(Option.isNone(container), Option.isNone(target))) return undefined
-      const scope = OwnerScope.open(runtime)
-      const values = runtime.runSync(
-        LiveValue.scroll({
-          ...UndefinedOr.match(Option.getOrUndefined(container), { onUndefined: () => ({}), onDefined: (element) => ({ container: element }) }),
-          ...UndefinedOr.match(Option.getOrUndefined(target), { onUndefined: () => ({}), onDefined: (element) => ({ target: element }) }),
-          ...UndefinedOr.match(options.offset, { onUndefined: () => ({}), onDefined: (offset) => ({ offset }) }),
-          ...UndefinedOr.match(options.axis, { onUndefined: () => ({}), onDefined: (axis) => ({ axis }) }),
-        }).pipe(Scope.provide(scope)),
-      )
-      // Each derived Atom is read at once: it tracks the scroll only once it's been read.
-      const stops = Arr.map(SCROLL_KEYS, (key) => registry.subscribe(values[key], (v) => registry.set(outs[key], v), { immediate: true }))
-      return () => {
-        Arr.forEach(stops, (stop) => stop())
-        OwnerScope.close(runtime, scope, CLOSE_FAILED)
-      }
-    },
-    CLIENT_ONLY,
-  )
-  return Rec.map(outs, (atom) => followAtom(registry, atom)) as unknown as ScrollValues
-}

package/src/unstable/v2/provider.tsx

@@ -77,6 +77,23 @@ const WardicContext = createContext<WardicContextValue | null>(null)
 /** The nearest provider's value, `undefined` outside one. */
 const contextValue = (): WardicContextValue | undefined => Option.getOrUndefined(Option.fromNullishOr(useContext(WardicContext)))
 
+/**
+ * A provider's context: a server render's, inert, or the client's. Decided by a plain `if`: a client
+ * build folds `isServer` and drops the server render's code, where `Bool.match` kept it (#518: 8.4 KB
+ * gzipped in every Solid 2 app). `env` and `appear` are read once, as the provider's docs say.
+ */
+const contextOf = (given: Parameters<typeof WardicProvider>[0]): WardicContextValue => {
+  if (isServer) return serverContext(given.env, serverAppearOf(given.appear, given.reducedMotion, given.nonce), () => untrack(() => given.reducedMotion))
+  return clientContext(
+    given.env,
+    applyAndFlush,
+    () => untrack(() => given.reducedMotion),
+    // The provider's setting, tracked too: `createReducedMotionConfig` reads it where it tracks (#584).
+    () => given.reducedMotion,
+    untrack(() => given.scaleCorrectors),
+  )
+}
+
 /**
  * Puts Wardic in your app: every Wardic element sits under one. Give it the Environment, `DomLive` in
  * a browser, and the Features your elements use.
@@ -124,18 +141,7 @@ export function WardicProvider(props: {
   readonly strict?: boolean | undefined
   readonly children?: JSX.Element
 }): JSX.Element {
-  const value = Bool.match(isServer, {
-    onTrue: () => serverContext(props.env, serverAppearOf(props.appear, props.reducedMotion, props.nonce), () => untrack(() => props.reducedMotion)),
-    onFalse: () =>
-      clientContext(
-        props.env,
-        applyAndFlush,
-        () => untrack(() => props.reducedMotion),
-        // eslint-disable-next-line solid/reactivity -- the provider's setting, tracked too: `createReducedMotionConfig` reads it where it tracks (#584)
-        () => props.reducedMotion,
-        untrack(() => props.scaleCorrectors),
-      ),
-  })
+  const value = contextOf(props)
   // Disposing the runtime closes its Scope: the projection system, then the gate (#132). Its
   // disposal rejects first, ending every `animateLayout` still waiting: their flights won't end (#257).
   let abort = constUndefined as (reason: DOMException) => void
@@ -156,7 +162,7 @@ export function WardicProvider(props: {
   // element mounted after pays none of it. One mounted before then builds it itself, as before. Asked
   // for here, with no computation of the provider's own (an `onSettled`'s would shift a hydration's
   // owners from the server's), and on the client alone.
-  if (Bool.not(isServer)) onCleanup(whenIdle(() => prepareIdle(value, section)))
+  if (!isServer) onCleanup(whenIdle(() => prepareIdle(value, section)))
   return <WardicContext value={value}>{props.children}</WardicContext>
 }
 

package/src/unstable/v2/ward.tsx

@@ -66,7 +66,7 @@ import { constFalse, constTrue, constUndefined, constVoid, identity, pipe } from
 import * as Option from "effect/Option"
 import * as Predicate from "effect/Predicate"
 import * as UndefinedOr from "effect/UndefinedOr"
-import { Atom } from "effect/reactivity"
+import * as Atom from "effect/reactivity/Atom"
 import { isServer, type JSX, useHead } from "@solidjs/web"
 import {
   type Accessor,

package/src/ward-keys.ts

@@ -14,7 +14,7 @@
  * @module
  */
 import type * as Machine from "@wardic/core/Machine"
-import type { Atom } from "effect/reactivity"
+import type * as Atom from "effect/reactivity/Atom"
 import type {
   WardicInertia,
   WardicInherit,