@player-ui/player 0.3.0-next.2 → 0.3.0-next.4

package/src/view/plugins/string-resolver.ts

@@ -0,0 +1,149 @@
+import { set } from 'timm';
+import { resolveDataRefs } from '../../string-resolver';
+import type { Options } from './options';
+import type { View, ViewPlugin } from './plugin';
+import type { Node } from '../parser';
+import { NodeType } from '../parser';
+import type { Resolver } from '../resolver';
+
+/** Create a function that checks for a start/end sequence in a string */
+const createPatternMatcher = (start: string, end: string) => {
+  return (testStr: string) => {
+    const startLocation = testStr.indexOf(start);
+
+    if (startLocation === -1) {
+      return false;
+    }
+
+    const endLocation = testStr.indexOf(end);
+
+    if (endLocation === -1) {
+      return false;
+    }
+
+    return startLocation < endLocation;
+  };
+};
+
+const bindingResolveLookup = createPatternMatcher('{{', '}}');
+const expressionResolveLookup = createPatternMatcher('@[', ']@');
+
+/** Check to see if a string contains a reference to dynamic content */
+function hasSomethingToResolve(str: string) {
+  return bindingResolveLookup(str) || expressionResolveLookup(str);
+}
+
+/** Resolve data refs in a string if necessary. */
+function resolveString(str: string, resolveOptions: Options) {
+  return hasSomethingToResolve(str)
+    ? resolveDataRefs(str, {
+        model: resolveOptions.data.model,
+        evaluate: resolveOptions.evaluate,
+      })
+    : str;
+}
+
+/** Recursively resolve all string references in an object or array */
+export function resolveAllRefs(
+  node: any,
+  resolveOptions: Options,
+  propertiesToSkip: Set<string | number>
+): any {
+  if (
+    node === null ||
+    node === undefined ||
+    (typeof node !== 'object' && typeof node !== 'string')
+  ) {
+    return node;
+  }
+
+  if (typeof node === 'string') {
+    return resolveString(node, resolveOptions);
+  }
+
+  let newNode = node;
+
+  Object.keys(node).forEach((key: string | number) => {
+    if (propertiesToSkip.has(key)) {
+      return;
+    }
+
+    const val = node[key];
+
+    let newVal = val;
+
+    if (typeof val === 'object') {
+      newVal = resolveAllRefs(val, resolveOptions, propertiesToSkip);
+    } else if (typeof val === 'string') {
+      newVal = resolveString(val, resolveOptions);
+    }
+
+    if (newVal !== val) {
+      newNode = set(newNode, key as any, newVal);
+    }
+  });
+
+  return newNode;
+}
+
+/** Traverse up the node tree finding the first available 'path' */
+const findBasePath = (node: Node.Node): Node.PathSegment[] => {
+  const parentNode = node.parent;
+  if (!parentNode) {
+    return [];
+  }
+
+  if ('children' in parentNode) {
+    return (
+      parentNode.children?.find((child) => child.value === node)?.path ?? []
+    );
+  }
+
+  if (parentNode.type !== NodeType.MultiNode) {
+    return [];
+  }
+
+  return findBasePath(parentNode);
+};
+
+/** A plugin that resolves all string references for each node */
+export default class StringResolverPlugin implements ViewPlugin {
+  applyResolver(resolver: Resolver) {
+    resolver.hooks.resolve.tap('string-resolver', (value, node, options) => {
+      if (node.type === NodeType.Empty || node.type === NodeType.Unknown) {
+        return null;
+      }
+
+      if (
+        node.type === NodeType.Value ||
+        node.type === NodeType.Asset ||
+        node.type === NodeType.View
+      ) {
+        /** Use specified properties to skip during string resolution, or default */
+        const propsToSkip = new Set<string>(
+          node.plugins?.stringResolver?.propertiesToSkip
+            ? node.plugins?.stringResolver?.propertiesToSkip
+            : []
+        );
+
+        const nodePath = findBasePath(node);
+
+        /** If the path includes something that is supposed to be skipped, this node should be skipped too. */
+        if (
+          nodePath.length > 0 &&
+          nodePath.some((segment) => propsToSkip.has(segment.toString()))
+        ) {
+          return node.value;
+        }
+
+        return resolveAllRefs(node.value, options, propsToSkip);
+      }
+
+      return value;
+    });
+  }
+
+  apply(view: View) {
+    view.hooks.resolver.tap('string-resolver', this.applyResolver.bind(this));
+  }
+}

package/src/view/plugins/switch.ts

@@ -0,0 +1,120 @@
+import type { View, ViewPlugin } from './plugin';
+import type { Options } from './options';
+import type { Parser, Node, ParseObjectOptions } from '../parser';
+import { EMPTY_NODE, NodeType } from '../parser';
+import type { Resolver } from '../resolver';
+
+/** A view plugin to resolve switches */
+export default class SwitchPlugin implements ViewPlugin {
+  private readonly options: Options;
+
+  constructor(options: Options) {
+    this.options = options;
+  }
+
+  private resolveSwitch(node: Node.Switch, options: Options): Node.Node {
+    for (const switchCase of node.cases) {
+      const isApplicable = options.evaluate(switchCase.case);
+
+      if (isApplicable) {
+        return switchCase.value;
+      }
+    }
+
+    return EMPTY_NODE;
+  }
+
+  applyParser(parser: Parser) {
+    /** Switches resolved during the parsing phase are static */
+    parser.hooks.onCreateASTNode.tap('switch', (node) => {
+      if (node && node.type === NodeType.Switch && !node.dynamic) {
+        return this.resolveSwitch(node, this.options);
+      }
+
+      return node;
+    });
+
+    parser.hooks.determineNodeType.tap('switch', (obj) => {
+      if (
+        Object.prototype.hasOwnProperty.call(obj, 'dynamicSwitch') ||
+        Object.prototype.hasOwnProperty.call(obj, 'staticSwitch')
+      ) {
+        return NodeType.Switch;
+      }
+    });
+
+    parser.hooks.parseNode.tap(
+      'switch',
+      (
+        obj: any,
+        nodeType: Node.ChildrenTypes,
+        options: ParseObjectOptions,
+        determinedNodeType: null | NodeType
+      ) => {
+        if (determinedNodeType === NodeType.Switch) {
+          const dynamic = 'dynamicSwitch' in obj;
+          const switchContent =
+            'dynamicSwitch' in obj ? obj.dynamicSwitch : obj.staticSwitch;
+
+          const cases: Node.SwitchCase[] = [];
+
+          switchContent.forEach(
+            (switchCase: { [x: string]: any; case: any }) => {
+              const { case: switchCaseExpr, ...switchBody } = switchCase;
+              const value = parser.parseObject(
+                switchBody,
+                NodeType.Value,
+                options
+              );
+
+              if (value) {
+                cases.push({
+                  case: switchCaseExpr,
+                  value: value as Node.Value,
+                });
+              }
+            }
+          );
+
+          const switchAST = parser.hooks.onCreateASTNode.call(
+            {
+              type: NodeType.Switch,
+              dynamic,
+              cases,
+            },
+            obj
+          );
+
+          if (switchAST?.type === NodeType.Switch) {
+            switchAST.cases.forEach((sCase) => {
+              // eslint-disable-next-line no-param-reassign
+              sCase.value.parent = switchAST;
+            });
+          }
+
+          if (switchAST?.type === NodeType.Empty) {
+            return null;
+          }
+
+          return switchAST ?? null;
+        }
+      }
+    );
+  }
+
+  applyResolver(resolver: Resolver) {
+    /** Switches resolved during the parsing phase are dynamic */
+    resolver.hooks.beforeResolve.tap('switch', (node, options) => {
+      if (node && node.type === NodeType.Switch && node.dynamic) {
+        return this.resolveSwitch(node, options);
+      }
+
+      return node;
+    });
+  }
+
+  apply(view: View) {
+    view.hooks.parser.tap('switch', this.applyParser.bind(this));
+    view.hooks.resolver.tap('switch', this.applyResolver.bind(this));
+  }
+}

package/src/view/plugins/template-plugin.ts

@@ -0,0 +1,172 @@
+import { SyncWaterfallHook } from 'tapable-ts';
+import type { Node, ParseObjectOptions, Parser } from '../parser';
+import { NodeType } from '../parser';
+import type { ViewPlugin } from '.';
+import type { View } from './plugin';
+import type { Options } from './options';
+import type { Resolver } from '../resolver';
+
+export interface TemplateItemInfo {
+  /** The index of the data for the current iteration of the template */
+  index: number;
+  /** The data for the current iteration of the template */
+  data: any;
+  /** The depth of the template node */
+  depth: number;
+}
+
+export interface TemplateSubstitution {
+  /** Regular expression to find and replace. The global flag will be always be added to this expression. */
+  expression: string | RegExp;
+  /** The value to replace matches with. */
+  value: string;
+}
+
+export type TemplateSubstitutionsFunc = (
+  baseSubstitutions: TemplateSubstitution[],
+  templateItemInfo: TemplateItemInfo
+) => TemplateSubstitution[];
+
+/** A view plugin to resolve/manage templates */
+export default class TemplatePlugin implements ViewPlugin {
+  private readonly options: Options;
+
+  hooks = {
+    resolveTemplateSubstitutions: new SyncWaterfallHook<
+      [TemplateSubstitution[], TemplateItemInfo]
+    >(),
+  };
+
+  constructor(options: Options) {
+    this.options = options;
+  }
+
+  private parseTemplate(
+    parseObject: any,
+    node: Node.Template,
+    options: Options
+  ): Node.Node | null {
+    const { template, depth } = node;
+    const data = options.data.model.get(node.data);
+
+    if (!data) {
+      return null;
+    }
+
+    if (!Array.isArray(data)) {
+      throw new Error(`Template using '${node.data}' but is not an array`);
+    }
+
+    const values: Array<Node.Node> = [];
+
+    data.forEach((dataItem, index) => {
+      const templateSubstitutions =
+        this.hooks.resolveTemplateSubstitutions.call(
+          [
+            {
+              expression: new RegExp(`_index${depth || ''}_`),
+              value: String(index),
+            },
+          ],
+          {
+            depth,
+            data: dataItem,
+            index,
+          }
+        );
+      let templateStr = JSON.stringify(template);
+
+      for (const { expression, value } of templateSubstitutions) {
+        let flags = 'g';
+        if (typeof expression === 'object') {
+          flags = `${expression.flags}${expression.global ? '' : 'g'}`;
+        }
+
+        templateStr = templateStr.replace(new RegExp(expression, flags), value);
+      }
+
+      const parsed = parseObject(JSON.parse(templateStr), NodeType.Value, {
+        templateDepth: node.depth + 1,
+      });
+
+      if (parsed) {
+        values.push(parsed);
+      }
+    });
+
+    const result: Node.MultiNode = {
+      parent: node.parent,
+      type: NodeType.MultiNode,
+      values,
+    };
+
+    result.values.forEach((innerNode) => {
+      // eslint-disable-next-line no-param-reassign
+      innerNode.parent = result;
+    });
+
+    return result;
+  }
+
+  applyParser(parser: Parser) {
+    parser.hooks.onCreateASTNode.tap('template', (node) => {
+      if (node && node.type === NodeType.Template && !node.dynamic) {
+        return this.parseTemplate(
+          parser.parseObject.bind(parser),
+          node,
+          this.options
+        );
+      }
+
+      return node;
+    });
+
+    parser.hooks.determineNodeType.tap('template', (obj: any) => {
+      if (obj === 'template') {
+        return NodeType.Template;
+      }
+    });
+
+    parser.hooks.parseNode.tap(
+      'template',
+      (
+        obj: any,
+        nodeType: Node.ChildrenTypes,
+        options: ParseObjectOptions,
+        determinedNodeType: null | NodeType
+      ) => {
+        if (determinedNodeType === NodeType.Template) {
+          const templateNode = parser.createASTNode(
+            {
+              type: NodeType.Template,
+              depth: options.templateDepth ?? 0,
+              data: obj.data,
+              template: obj.value,
+              dynamic: obj.dynamic ?? false,
+            },
+            obj
+          );
+
+          if (templateNode) {
+            return templateNode;
+          }
+        }
+      }
+    );
+  }
+
+  applyResolverHooks(resolver: Resolver) {
+    resolver.hooks.beforeResolve.tap('template', (node, options) => {
+      if (node && node.type === NodeType.Template && node.dynamic) {
+        return this.parseTemplate(options.parseNode, node, options);
+      }
+
+      return node;
+    });
+  }
+
+  apply(view: View) {
+    view.hooks.parser.tap('template', this.applyParser.bind(this));
+    view.hooks.resolver.tap('template', this.applyResolverHooks.bind(this));
+  }
+}