@player-ui/player 0.0.1-next.1

package/src/view/asset-transform.ts

@@ -0,0 +1,147 @@
+import type { Node } from '@player-ui/view';
+import { NodeType } from '@player-ui/view';
+import { LocalStateStore } from './store';
+import type { TransformRegistry } from './types';
+import type { ViewController } from './controller';
+import { PlayerPlugin } from '..';
+
+/** Traverse up the nodes until the target is found */
+function findUp(node: Node.Node, target: Node.Node): boolean {
+  if (node === target) {
+    return true;
+  }
+
+  if (node.parent) {
+    return findUp(node.parent, target);
+  }
+
+  return false;
+}
+
+/**
+ * A plugin to register custom transforms on certain asset types
+ * This allows users to embed stateful data into transforms.
+ */
+export class AssetTransformCorePlugin {
+  public readonly stateStore: Map<Node.Node, LocalStateStore>;
+  private readonly registry: TransformRegistry;
+  private beforeResolveSymbol: symbol;
+  private resolveSymbol: symbol;
+  private beforeResolveCountSymbol: symbol;
+  private resolveCountSymbol: symbol;
+
+  constructor(registry: TransformRegistry) {
+    this.registry = registry;
+    this.stateStore = new Map();
+    this.beforeResolveSymbol = Symbol('before resolve');
+    this.resolveSymbol = Symbol('resolve');
+    this.beforeResolveCountSymbol = Symbol('before resolve count');
+    this.resolveCountSymbol = Symbol('resolve count');
+  }
+
+  apply(viewController: ViewController) {
+    viewController.hooks.view.tap('asset-transform', (view) => {
+      // Clear out everything when we create a new view
+      this.stateStore.clear();
+
+      view.hooks.resolver.tap('asset-transform', (resolver) => {
+        let lastUpdatedNode: Node.Node | undefined;
+
+        /** A function to update the state and trigger a view re-compute */
+        const updateState = (node: Node.Node) => {
+          lastUpdatedNode = node;
+          view.update(new Set());
+        };
+
+        /** Given a node and a transform step, fetch a local store */
+        const getStore = (node: Node.Node, stepKey: symbol) => {
+          let store: LocalStateStore;
+          const countKey =
+            stepKey === this.resolveSymbol
+              ? this.resolveCountSymbol
+              : this.beforeResolveCountSymbol;
+
+          const storedState = this.stateStore.get(node);
+
+          if (storedState) {
+            store = storedState;
+            store.removeKey(countKey);
+          } else {
+            store = new LocalStateStore(() => {
+              updateState(node);
+            });
+            this.stateStore.set(node, store);
+          }
+
+          return {
+            useSharedState: (
+              key: string | symbol
+            ): (<T>(initialState: T) => readonly [T, (value: T) => void]) => {
+              return store.useSharedState(key);
+            },
+            useLocalState: <T>(initialState: T) => {
+              return store.getLocalStateFunction<T>(
+                stepKey,
+                countKey
+              )(initialState);
+            },
+          };
+        };
+
+        resolver.hooks.beforeResolve.tap('asset-transform', (node, options) => {
+          if (node && (node.type === 'asset' || node.type === 'view')) {
+            const transform = this.registry.get(node.value);
+
+            if (transform?.beforeResolve) {
+              const store = getStore(node, this.beforeResolveSymbol);
+
+              return transform.beforeResolve(node, options, store);
+            }
+          }
+
+          return node;
+        });
+
+        resolver.hooks.afterUpdate.tap('asset-transform', () => {
+          lastUpdatedNode = undefined;
+        });
+
+        resolver.hooks.skipResolve.tap('asset-transform', (skip, node) => {
+          if (!skip || !lastUpdatedNode) {
+            return skip;
+          }
+
+          const isParentOfUpdated = findUp(lastUpdatedNode, node);
+          const isChildOfUpdated = findUp(node, lastUpdatedNode);
+
+          return !isParentOfUpdated && !isChildOfUpdated;
+        });
+
+        resolver.hooks.afterResolve.tap(
+          'asset-transform',
+          (value, node, options) => {
+            if (node.type !== NodeType.Asset && node.type !== NodeType.View) {
+              return value;
+            }
+
+            const originalNode = resolver.getSourceNode(node);
+
+            if (!originalNode) {
+              return value;
+            }
+
+            const transform = this.registry.get(value);
+
+            if (transform?.resolve) {
+              const store = getStore(originalNode, this.resolveSymbol);
+
+              return transform?.resolve(value, options, store);
+            }
+
+            return value;
+          }
+        );
+      });
+    });
+  }
+}

package/src/view/controller.ts

@@ -0,0 +1,148 @@
+import { SyncHook, SyncWaterfallHook } from 'tapable';
+import type { Resolve } from '@player-ui/view';
+import { ViewInstance } from '@player-ui/view';
+import type { Logger } from '@player-ui/logger';
+import type { FlowInstance, FlowController } from '@player-ui/flow';
+import type { View, NavigationFlowViewState } from '@player-ui/types';
+import { resolveDataRefsInString } from '@player-ui/string-resolver';
+import { Registry } from '@player-ui/partial-match-registry';
+import queueMicrotask from 'queue-microtask';
+import type { DataController } from '../data';
+import { AssetTransformCorePlugin } from './asset-transform';
+import type { TransformRegistry } from './types';
+import type { BindingInstance } from '..';
+
+export interface ViewControllerOptions {
+  /** Where to get data from */
+  model: DataController;
+
+  /** Where to log data */
+  logger?: Logger;
+
+  /** A flow-controller instance to listen for view changes */
+  flowController: FlowController;
+}
+
+/** A controller to manage updating/switching views */
+export class ViewController {
+  public readonly hooks = {
+    /** Do any processing before the `View` instance is created */
+    resolveView: new SyncWaterfallHook<View, string, NavigationFlowViewState>([
+      'view',
+      'viewRef',
+      'viewState',
+    ]),
+
+    // The hook right before the View starts resolving. Attach anything custom here
+    view: new SyncHook<ViewInstance>(['view']),
+  };
+
+  private readonly viewMap: Record<string, View>;
+  private readonly viewOptions: Resolve.ResolverOptions & ViewControllerOptions;
+  private pendingUpdate?: {
+    /** pending data binding changes */
+    changedBindings?: Set<BindingInstance>;
+  };
+
+  public currentView?: ViewInstance;
+  public transformRegistry: TransformRegistry = new Registry();
+  public optimizeUpdates = true;
+
+  constructor(
+    initialViews: View[],
+    options: Resolve.ResolverOptions & ViewControllerOptions
+  ) {
+    this.viewOptions = options;
+    this.viewMap = initialViews.reduce<Record<string, View>>(
+      (viewMap, view) => ({
+        ...viewMap,
+        [view.id]: view,
+      }),
+      {}
+    );
+
+    new AssetTransformCorePlugin(this.transformRegistry).apply(this);
+
+    options.flowController.hooks.flow.tap(
+      'viewController',
+      (flow: FlowInstance) => {
+        flow.hooks.transition.tap('viewController', (_oldState, newState) => {
+          if (newState.value.state_type === 'VIEW') {
+            this.onView(newState.value);
+          } else {
+            this.currentView = undefined;
+          }
+        });
+      }
+    );
+
+    options.model.hooks.onUpdate.tap('viewController', (updates) => {
+      if (this.currentView) {
+        if (this.optimizeUpdates) {
+          this.queueUpdate(new Set(updates.map((t) => t.binding)));
+        } else {
+          this.currentView.update();
+        }
+      }
+    });
+  }
+
+  private queueUpdate(bindings: Set<BindingInstance>) {
+    if (this.pendingUpdate?.changedBindings) {
+      this.pendingUpdate.changedBindings = new Set([
+        ...this.pendingUpdate.changedBindings,
+        ...bindings,
+      ]);
+    } else {
+      this.pendingUpdate = { changedBindings: bindings };
+      queueMicrotask(() => {
+        const updates = this.pendingUpdate?.changedBindings;
+        this.pendingUpdate = undefined;
+        this.currentView?.update(updates);
+      });
+    }
+  }
+
+  private getViewForRef(viewRef: string): View | undefined {
+    // First look for a 1:1 viewRef -> id mapping (this is most common)
+    if (this.viewMap[viewRef]) {
+      return this.viewMap[viewRef];
+    }
+
+    // The view ids saved may also contain model refs, resolve those and try again
+    const matchingViewId = Object.keys(this.viewMap).find(
+      (possibleViewIdMatch) =>
+        viewRef ===
+        resolveDataRefsInString(possibleViewIdMatch, {
+          model: this.viewOptions.model,
+          evaluate: this.viewOptions.evaluator.evaluate,
+        })
+    );
+
+    if (matchingViewId && this.viewMap[matchingViewId]) {
+      return this.viewMap[matchingViewId];
+    }
+  }
+
+  public onView(state: NavigationFlowViewState) {
+    const viewId = state.ref;
+
+    const source = this.hooks.resolveView.call(
+      this.getViewForRef(viewId),
+      viewId,
+      state
+    );
+
+    if (!source) {
+      throw new Error(`No view with id ${viewId}`);
+    }
+
+    const view = new ViewInstance(source, this.viewOptions);
+    this.currentView = view;
+
+    // Give people a chance to attach their
+    // own listeners to the view before we resolve it
+    this.hooks.view.call(view);
+    view.update();
+  }
+}

package/src/view/index.ts

@@ -0,0 +1,4 @@
+export * from './asset-transform';
+export * from './controller';
+export * from './store';
+export * from './types';

package/src/view/store.ts

@@ -0,0 +1,94 @@
+export interface Store {
+  useLocalState<T>(initialState: T): readonly [T, (value: T) => void];
+  useSharedState<T>(
+    key: string | symbol
+  ): (initialState: T) => readonly [T, (value: T) => void];
+}
+
+interface SharedStore {
+  getLocalStateFunction<T>(
+    key: string | symbol,
+    countKey: symbol
+  ): (initialState: T) => readonly [T, (value: T) => void];
+  useSharedState<T>(
+    key: string | symbol
+  ): (initialState: T) => readonly [T, (value: T) => void];
+}
+
+/** A store that holds on to state for a transform */
+export class LocalStateStore implements SharedStore {
+  private state: Map<string | symbol, any>;
+
+  private updateCallback?: () => void;
+
+  constructor(onUpdate?: () => void) {
+    this.updateCallback = onUpdate;
+
+    this.state = new Map();
+  }
+
+  public removeKey(key: symbol | string) {
+    this.state.delete(key);
+  }
+
+  public reset() {
+    this.state.clear();
+  }
+
+  useSharedState<T>(key: string | symbol) {
+    return (initialState: T) => {
+      if (!this.state.has(key)) {
+        this.state.set(key, initialState);
+      }
+
+      return [
+        this.state.get(key) as T,
+        (newState: T) => {
+          const current = this.state.get(key) as T;
+
+          this.state.set(key, newState);
+
+          if (current !== newState) {
+            this.updateCallback?.();
+          }
+        },
+      ] as const;
+    };
+  }
+
+  getLocalStateFunction<T>(key: symbol, countKey: symbol) {
+    return (initialState: T) => {
+      // initialize if not already created
+      if (!this.state.has(key)) {
+        this.state.set(key, []);
+      }
+
+      if (!this.state.has(countKey)) {
+        this.state.set(countKey, 0);
+      }
+
+      const localState = this.state.get(key);
+      const oldCount = this.state.get(countKey);
+
+      this.state.set(countKey, oldCount + 1);
+
+      if (localState.length <= oldCount) {
+        localState.push(initialState);
+      }
+
+      const value = localState[oldCount] as T;
+
+      return [
+        value,
+        (newState: T) => {
+          const oldValue = localState[oldCount] as T;
+          localState[oldCount] = newState;
+
+          if (oldValue !== newState) {
+            this.updateCallback?.();
+          }
+        },
+      ] as const;
+    };
+  }
+}

package/src/view/types.ts

@@ -0,0 +1,31 @@
+import type { Asset } from '@player-ui/types';
+import type { Resolve, Node } from '@player-ui/view';
+import type { Registry } from '@player-ui/partial-match-registry';
+import type { Store } from './store';
+
+/** Transform function that is ran on the Asset before it's resolved */
+export type BeforeTransformFunction<AuthoredAsset extends Asset = Asset> = (
+  asset: Node.Asset<AuthoredAsset> | Node.View<AuthoredAsset>,
+  options: Resolve.NodeResolveOptions,
+  store: Store
+) => Node.Node;
+
+/** Transform function that is ran on the Asset after it's resolved */
+export type TransformFunction<
+  AuthoredAsset extends Asset = Asset,
+  TransformedAsset extends Asset = AuthoredAsset
+> = (
+  asset: AuthoredAsset,
+  options: Resolve.NodeResolveOptions,
+  store: Store
+) => TransformedAsset;
+
+export interface TransformFunctions {
+  /** A function that is executed as an AST -> AST transform before resolving the node to a value */
+  beforeResolve?: BeforeTransformFunction<any>;
+
+  /** A function to resolve an AST to a value */
+  resolve?: TransformFunction<any>;
+}
+
+export type TransformRegistry = Registry<TransformFunctions>;