sygnal 5.4.0 → 6.0.0

package/src/index.ts

@@ -1,15 +1,26 @@
 'use strict'
 
 // export sygnal core functions
-export { default as component, ABORT } from "./component"
-export { default as collection, Collection } from "./collection"
-export { default as switchable, Switchable } from "./switchable"
+export { ABORT } from "./shared"
+export { defineComponent } from "./defineComponent"
+export { Collection } from "./collection"
+export { VirtualCollection } from "./extra/virtual"
+export { Switchable } from "./switchable"
 export { Portal, default as portal } from "./portal"
 export { Transition } from "./transition"
 export { Suspense } from "./suspense"
 export { Slot } from "./slot"
 export { lazy } from "./lazy"
 export { driverFromAsync } from "./extra/driverFactories"
+export { makeFetchDriver } from "./extra/fetchDriver"
+export { queryCache } from "./extra/queryCache"
+export { makeSocketDriver } from "./extra/socketDriver"
+export { makeRouter, makeRouterDriver } from "./extra/router"
+export { makeViewTransitionDOMDriver } from "./extra/viewTransitions"
+export { makeHeadDriver, renderHead } from "./extra/head"
+export { makeTimerDriver } from "./extra/timers"
+export { makeBrowserDriver, makeBrowserDriverWith, intersectionSource, resizeSource, mediaSource, storageSource, visibilitySource, onlineSource, geolocationSource, clipboardSource } from "./extra/browserSources"
+export { focusWithin } from "./extra/focusWithin"
 export { default as processForm } from "./extra/processForm"
 export { default as processDrag } from "./extra/processDrag"
 export { makeDragDriver } from "./extra/dragDriver"
@@ -20,12 +31,22 @@ export { default as classes } from './extra/classes'
 export { createElement } from './pragma/index'
 export { createCommand } from './extra/command'
 export { createRef, createRef$ } from './extra/ref'
+export { controls } from './extra/controls'
+export { defineWidget } from './extra/widget'
+export { defineBehavior } from './extra/behaviors'
+export { pager } from './extra/pager'
+export { form } from './extra/form'
+export { checkForm, formErrors, setField, getField, hasField, fieldName, fieldNames, replyErrors, focusInvalid } from './extra/formHelpers'
+export { selection, isSelected } from './extra/selection'
+export { sortable } from './extra/sortable'
+export { undoable, undo } from './extra/undo'
+export { persist } from './extra/persist'
 export { renderComponent } from './extra/testing'
 export { set, toggle, emit, event } from './extra/reducers'
 export { makeServiceWorkerDriver, onlineStatus$, createInstallPrompt } from './extra/pwa'
 export { renderToString } from './extra/ssr'
 export { default as xs } from './extra/xstreamCompat'
-export { getDevTools } from './extra/devtools'
+export { getDevTools } from './extra/devtoolsHook'
 export { getDiagnostics, clearDiagnostics, onDiagnostic } from './extra/diagnostics/index'
 
 // export dom helper functions (h, makeDOMDriver, etc.)

package/src/jsx-runtime.ts

@@ -1,8 +1,22 @@
+// P46-Q (D188): the pragma is the core's. The build makes './pragma/index' the external 'sygnal'
+// (the core entry) and keeps snabbdom external, so an app ships one copy of each; the element
+// fast path is the core createElement's `.a` (the children as one array)
 import { createElement } from './pragma/index'
-export { Fragment } from './cycle/dom/snabbdom'
+export { Fragment } from './cycle/dom/fragment'
+
+// G-351: a 'sygnal' without `.a` (an older core next to this runtime): createElement itself
+const createTag = (createElement as any).a || ((t: any, p: any, c: any[], k: any) => {
+  const { children, ...rest } = p
+  if (k !== undefined) rest.key = k
+  return createElement(t, rest, ...c)
+})
 
 export function jsx(type: any, props: any, key?: any): any {
   if (props == null) return createElement(type, null)
+  if (typeof type == 'string') {
+    const c = props.children
+    return createTag(type, props, c === undefined ? [] : Array.isArray(c) ? c : [c], key)
+  }
   const { children, ...rest } = props
   if (key !== undefined) rest.key = key
   if (children === undefined) return createElement(type, rest)

package/src/jsx.ts

@@ -1,2 +1,3 @@
+// P46-Q (D188): the core's pragma ('./pragma/index' is the external 'sygnal' in this build)
 export { createElement as jsx } from './pragma/index'
-export { Fragment } from "snabbdom"
+export { Fragment } from './cycle/dom/fragment'

package/src/lazy.ts

@@ -1,6 +1,45 @@
-export function lazy(loadFn: () => Promise<any>): any {
+// the core's resolver for lazy components, registered on import (D157)
+import './core/markers/lazy';
+
+/**
+ * PLAN-5 B-4 (D103): `when` defers the import: 'visible' starts it when a placeholder enters the
+ * viewport (IntersectionObserver, `rootMargin`; at once without one), 'idle' when the browser is
+ * idle after a placeholder is on the page (requestIdleCallback with a 2 s timeout; setTimeout
+ * without it). Until then the placeholder is data-sygnal-lazy="deferred" (not "loading": a Suspense
+ * boundary doesn't wait for it, G-385) plus `data-sygnal-when`, in its own place, so it can scroll
+ * into view; once the import starts the owners render again (markers/lazy.ts) and it is the
+ * loading one. `placeholderHeight` gives the
+ * placeholders a min-height (empty ones stacked together would all be visible at once).
+ * SSR and renderComponent's mock DOM run no hooks: the placeholder stays until `load()`
+ * (preloading, e.g. on hover). All instances share one import.
+ */
+export interface LazyOptions {
+  when?: 'visible' | 'idle';
+  /** 'visible': the IntersectionObserver's rootMargin ('200px' starts the import a little earlier) */
+  rootMargin?: string;
+  /** the placeholder's min-height (a number: px), e.g. the component's expected height */
+  placeholderHeight?: number | string;
+}
+
+const WHEN = 'data-sygnal-when';
+
+export function lazy(loadFn: () => Promise<any>, options?: LazyOptions): any {
   let cachedComponent: any = null;
   let loadError: any = null;
+  const g: any = globalThis, when = options?.when, ph = options?.placeholderHeight;
+  // the deferred import's trigger (once), its observer, the placeholder's hooks
+  let go: any, io: any;
+  const start = () => { io?.disconnect(); go?.(); go = 0; };
+  const arm = (v: any) => {
+    if (!go) return;
+    if (when == 'idle') {
+      const f = () => start();
+      g.requestIdleCallback ? g.requestIdleCallback(f, {timeout: 2000}) : setTimeout(f, 1);
+    } else if (!g.IntersectionObserver) start();
+    else (io ||= new g.IntersectionObserver((es: any[]) => es.some(e => e.isIntersecting) && start(), {rootMargin: options?.rootMargin})).observe(v.elm);
+  };
+  const hook = when && {insert: arm, update: (_: any, v: any) => when != 'idle' && arm(v), destroy: (v: any) => io?.unobserve(v.elm)};
+  const style = ph != null && {minHeight: typeof ph == 'number' ? ph + 'px' : ph};
 
   // View function that delegates to the loaded component
   function LazyWrapper(viewArgs: any) {
@@ -12,22 +51,22 @@ export function lazy(loadFn: () => Promise<any>): any {
     }
     if (!cachedComponent) {
       return {
-        sel: 'div', data: { attrs: { 'data-sygnal-lazy': 'loading' } },
+        sel: 'div', data: { attrs: { 'data-sygnal-lazy': go ? 'deferred' : 'loading', ...go && { [WHEN]: when } }, ...go && { hook }, ...style && { style } },
         children: [], text: undefined, elm: undefined, key: undefined,
       };
     }
     return cachedComponent(viewArgs);
   }
 
-  // Start loading eagerly and copy static properties when done
-  const loadPromise = loadFn()
+  // Start loading eagerly (with `when`, once triggered) and copy static properties when done
+  const started = when && new Promise(r => go = r);
+  const loadPromise = (started ? started.then(loadFn) : loadFn())
     .then((mod: any) => {
       cachedComponent = mod.default || mod;
       (LazyWrapper as any).__sygnalLazyLoadedComponent = cachedComponent;
       // Copy static properties so the component works on next render
-      const statics = ['model', 'intent', 'hmrActions', 'context', 'peers', 'components',
-        'initialState', 'calculated', 'storeCalculatedInState', 'DOMSourceName',
-        'stateSourceName', 'onError', 'debug', 'componentName'];
+      const statics = ['model', 'intent', 'context', 'initialState', 'calculated', 'isolatedState',
+        'onError', 'debug', 'componentName', 'connections', 'resources', 'route', 'head', 'uses', 'timers', 'persist', 'viewTransitions', 'browser'];
       for (const key of statics) {
         if (cachedComponent[key] !== undefined && (LazyWrapper as any)[key] === undefined) {
           (LazyWrapper as any)[key] = cachedComponent[key];
@@ -44,7 +83,11 @@ export function lazy(loadFn: () => Promise<any>): any {
   (LazyWrapper as any).__sygnalLazyLoaded = () => cachedComponent !== null;
   (LazyWrapper as any).__sygnalLazyLoadedComponent = null;
   (LazyWrapper as any).__sygnalLazyPromise = loadPromise;
+  // a deferred import's start (G-385: Suspense waits for its placeholder from then on)
+  (LazyWrapper as any).__sygnalLazyStarted = started;
   (LazyWrapper as any).__sygnalLazyReRenderScheduled = false;
+  // start the import now (a deferred one too); resolves once it has loaded (or failed)
+  (LazyWrapper as any).load = () => (start(), loadPromise);
 
   return LazyWrapper;
 }

package/src/portal.ts

@@ -1,10 +1,12 @@
 import {h} from './cycle/dom/snabbdom';
+// the core's handler for this marker, registered on import (D157)
+import './core/markers/portal';
 
 const Portal = (props: any) => {
   const {children, ...sanitizedProps} = props;
   return h('portal', {props: sanitizedProps}, children);
 };
-(Portal as any).label = 'portal';
+(Portal as any).componentName = 'portal';
 (Portal as any).preventInstantiation = true;
 
 export {Portal};