@plitzi/plitzi-sdk 0.38.3 → 0.38.5

package/dist/index.d.ts

@@ -2,8 +2,10 @@ import { default as sdkComponents } from './modules/Element';
 import { createShaderProgram, ShaderError, useAnimationFrame, useCanvas2d, useReducedMotion, useWebGL, useWebGL2, CanvasHandle, CanvasOptions, CanvasSize, Frame } from '@plitzi/sdk-elements/canvas';
 import { default as ComponentProvider } from '@plitzi/sdk-elements/Component/ComponentProvider';
 import { default as useFlag } from '@plitzi/sdk-elements/dataSource/useFlag';
+import { default as elementChildren, ElementChild } from '@plitzi/sdk-elements/Element/helpers/elementChildren';
 import { default as withElement } from '@plitzi/sdk-elements/Element/hocs/withElement';
 import { default as useElement } from '@plitzi/sdk-elements/Element/hooks/useElement';
+import { default as useElementVisible } from '@plitzi/sdk-elements/Element/hooks/useElementVisible';
 import { default as useRscData } from '@plitzi/sdk-elements/Element/hooks/useRscData';
 import { default as JsxManager } from '@plitzi/sdk-elements/Element/JsxManager';
 import { default as PluginManager } from '@plitzi/sdk-elements/Element/PluginManager';
@@ -14,8 +16,11 @@ import { default as useChannel, ChannelHandle } from '@plitzi/sdk-elements/realt
 import { default as ComponentContext } from '@plitzi/sdk-shared/elements/ComponentContext';
 import { PlitziServiceProvider } from '@plitzi/sdk-shared/hooks/usePlitziServiceContext';
 import { default as useRscRefresh } from '@plitzi/sdk-shared/server/rsc/useRscRefresh';
+import { default as usePluginRoute } from '@plitzi/sdk-shared/server/usePluginRoute';
 import { useSdkStore } from '@plitzi/sdk-shared/store';
+import { default as useDisplayMode } from '@plitzi/sdk-shared/style/useDisplayMode';
 import { track } from './modules/Analytics';
+import { DeferredPlugin, PluginComponent } from './modules/Sdk/deferredPlugins';
 import { ElementContextValue } from '@plitzi/sdk-elements/Element/ElementContext';
 import { default as EventBridge } from '@plitzi/sdk-event-bridge';
 import { default as InteractionsManager } from '@plitzi/sdk-interactions/InteractionsManager';
@@ -31,19 +36,35 @@ import { ReactNode } from 'react';
  * caller for it made the parameter impossible to satisfy without a cast: everybody registering a component of
  * their own has a React component and nothing else, which is also exactly what `<Sdk.Plugin component>` declares.
  */
-export type RenderPlugins = Record<string, {
+type RenderPluginBase = {
+    props?: Record<string, unknown>;
+    clientOnly?: boolean;
+};
+export type RenderPlugins = Record<string, (RenderPluginBase & {
     /**
      * A plugin's props ARE the hosting element's attributes, which this package cannot know — so the parameter is
      * left open. Narrowed to `ComponentPluginFC` with its default `unknown`, it refuses every component anybody
      * actually writes: a component declaring `{ label?: string }` has nothing in common with the runtime-supplied
      * props alone, and TypeScript reads that as a mistake rather than as the intended widening.
      */
-    component: ComponentPluginFC<any>;
-    props?: Record<string, unknown>;
-    clientOnly?: boolean;
-}>;
-export declare function render(widgetContainer: string, params?: PlitziSdkProps, plugins?: RenderPlugins, debugMode?: boolean, ssrMode?: boolean): {
+    component: PluginComponent;
+})
+/** One the page draws none of — see `deferredPlugin`. */
+ | (RenderPluginBase & DeferredPlugin)>;
+export type RenderOptions = {
+    /**
+     * Development: the page's plugins can be swapped while it runs (`replacePlugin` on what `render` returns) — what a
+     * server rebuilding a plugin hands an open page, so an edit shows without loading the page again.
+     */
+    hotPlugins?: boolean;
+};
+export declare function render(widgetContainer: string, params?: PlitziSdkProps, renderPlugins?: RenderPlugins, debugMode?: boolean, ssrMode?: boolean, { hotPlugins }?: RenderOptions): {
     unmount: () => void;
+    /**
+     * Swaps a plugin where it is drawn, with `hotPlugins` on: `false` when it cannot be swapped in place — not
+     * registered by this page, or its declaration changed — and the page should load again.
+     */
+    replacePlugin: (key: string, component: PluginComponent) => boolean;
 } | undefined;
 declare global {
     interface Window {
@@ -134,8 +155,8 @@ declare const PlitziSdk: {
 };
 type PlitziServiceContextValue = BasePlitziServiceContextValue<InstanceType<typeof EventBridge>, InstanceType<typeof InteractionsManager>>;
 declare const usePlitziServiceContext: () => PlitziServiceContextValue;
-export { track, useSdkStore as useStore, ComponentProvider, ComponentContext, usePlitziServiceContext, PlitziServiceProvider, RootElement, withElement, JsxManager, PluginManager, sdkComponents, PluginRemote, ReplicaProvider, useElement, useRscData, useRscRefresh, useChannel, useFlag, useAnimationFrame, useReducedMotion, useCanvas2d, useWebGL, useWebGL2, createShaderProgram, ShaderError };
-export type { AnalyticsConfig, ElementContextValue, Element, Schema, Style, ComponentPlugin, ComponentPluginFC, PlitziServiceContextValue, OfflineDataRaw, InteractionCallback, InteractionCallbackParamValues, PluginDeclaration, ChannelHandle, RealtimeMember, RealtimeMessage, CanvasHandle, CanvasOptions, CanvasSize, Frame };
+export { track, useSdkStore as useStore, ComponentProvider, ComponentContext, usePlitziServiceContext, PlitziServiceProvider, RootElement, withElement, JsxManager, PluginManager, sdkComponents, PluginRemote, ReplicaProvider, useElement, useRscData, useElementVisible, elementChildren, useDisplayMode, useRscRefresh, usePluginRoute, useChannel, useFlag, useAnimationFrame, useReducedMotion, useCanvas2d, useWebGL, useWebGL2, createShaderProgram, ShaderError };
+export type { AnalyticsConfig, ElementContextValue, Element, Schema, Style, ComponentPlugin, ComponentPluginFC, PlitziServiceContextValue, OfflineDataRaw, InteractionCallback, InteractionCallbackParamValues, PluginDeclaration, ChannelHandle, ElementChild, RealtimeMember, RealtimeMessage, CanvasHandle, CanvasOptions, CanvasSize, Frame };
 export declare const version: string;
 export declare const getStateManager: () => RuntimeStateInstance;
 export declare const getEventBridge: () => EventBridgeContextValue;

package/dist/index.html

@@ -30,21 +30,9 @@
       }
     </script>
 
-    <link
-      rel="preload"
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
-      as="style"
-      onload="
-        this.onload = null;
-        this.rel = 'stylesheet';
-      "
-    />
-    <noscript>
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
-    </noscript>
-
     <link href="/plitzi-sdk.css" rel="preload" as="style" />
     <link href="/plitzi-sdk.css" rel="stylesheet" />
+    <link href="/plitzi-sdk-icons.css" rel="stylesheet" />
   </head>
 
   <body>

package/dist/modules/App/MotionReveal.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Plays the space's arrivals that wait to be seen (`motion: { on: 'view' }`) as each first comes into view — every one
+ * under the SDK's root, the pages navigated to included. Renders nothing.
+ */
+declare const MotionReveal: () => null;
+export default MotionReveal;

package/dist/modules/App/ThemedRoot.d.ts

@@ -18,7 +18,8 @@ export type ThemedRootProps = {
  *
  * It also says when the page is interactive: `data-hydrated` appears once React has taken over the server's markup
  * (at once for a page rendered in the browser). A space's CSS keys decorative motion that repaints every frame off it
- * — `[data-hydrated] .glow { animation-play-state: running; }` — so the load has the main thread to itself.
+ * — `[data-hydrated] .glow { animation-play-state: running; }` — so the load has the main thread to itself. And it
+ * plays the arrivals that wait to be seen (`MotionReveal`).
  */
 declare const ThemedRoot: ({ className, scoped, children }: ThemedRootProps) => import('react').JSX.Element;
 export default ThemedRoot;

package/dist/modules/Plugins/PluginsContextProvider.d.ts

@@ -3,6 +3,7 @@ export type PluginsContextProviderProps = {
     children: React.ReactNode;
     plugins?: Record<string, ComponentDefinition>;
     sdkStylePath?: string;
+    sdkIconsPath?: string;
 };
-declare const PluginsContextProvider: ({ children, plugins: pluginsProp, sdkStylePath }: PluginsContextProviderProps) => import('react').JSX.Element;
+declare const PluginsContextProvider: ({ children, plugins: pluginsProp, sdkStylePath, sdkIconsPath }: PluginsContextProviderProps) => import('react').JSX.Element;
 export default PluginsContextProvider;

package/dist/modules/Sdk/deferredPlugins.d.ts

@@ -0,0 +1,21 @@
+import { ComponentPluginFC, PluginDeclaration } from '@plitzi/sdk-shared';
+export type PluginComponent = ComponentPluginFC<any> & {
+    plugins?: Record<string, PluginComponent>;
+};
+/** A plugin this page draws none of: what it declares now, its code and stylesheet when a page draws it. */
+export type DeferredPlugin = {
+    load: () => Promise<{
+        default: PluginComponent;
+    }>;
+    css?: string | null;
+    declaration: PluginDeclaration;
+};
+/**
+ * The plugin registered as `key`, standing in for itself until it is drawn.
+ *
+ * It carries the declaration — the definition, the sub-plugins, each a stand-in of its own — so the space knows its
+ * types from the start. The first one drawn loads the code and the stylesheet, once, before anything of it mounts: the
+ * stylesheet first, or the plugin would paint unstyled for a frame. Its own `Suspense`, so only the element waits and
+ * not the page around it.
+ */
+export declare const deferredPlugin: (key: string, { load, css, declaration }: DeferredPlugin) => PluginComponent;

package/dist/modules/Sdk/hotPlugins.d.ts

@@ -0,0 +1,17 @@
+import { ComponentPluginFC } from '@plitzi/sdk-shared';
+type PluginComponent = ComponentPluginFC<any>;
+/**
+ * Plugins a development page can swap while it runs: each one is registered as a proxy that never changes and
+ * renders whichever component is current, so swapping one re-mounts the elements of that type alone — the rest of the
+ * page, its state and its scroll, stays as it was. A plugin's own state starts again: it is a new component.
+ *
+ * The proxy carries the plugin's statics (its declaration, its settings panel) as the original did, so nothing that
+ * reads them can tell the difference.
+ */
+export declare const createHotPlugins: <T extends {
+    component: PluginComponent;
+}>(plugins: Record<string, T>) => {
+    plugins: Record<string, T>;
+    replace: (key: string, next: PluginComponent) => boolean;
+};
+export {};