@player-ui/player 0.11.0-next.3 → 0.11.0-next.4

package/src/view/plugins/template.ts

@@ -12,6 +12,8 @@ import type { Options } from "./options";
 import type { Resolver } from "../resolver";
 import { hasTemplateKey } from "../parser/utils";
 
+const templateSymbol = Symbol("template");
+
 export interface TemplateItemInfo {
   /** The index of the data for the current iteration of the template */
   index: number;
@@ -37,7 +39,12 @@ export type TemplateSubstitutionsFunc = (
 export default class TemplatePlugin implements ViewPlugin {
   private readonly options: Options;
 
-  hooks = {
+  hooks: {
+    resolveTemplateSubstitutions: SyncWaterfallHook<
+      [TemplateSubstitution[], TemplateItemInfo],
+      Record<string, any>
+    >;
+  } = {
     resolveTemplateSubstitutions: new SyncWaterfallHook<
       [TemplateSubstitution[], TemplateItemInfo]
     >(),
@@ -106,10 +113,15 @@ export default class TemplatePlugin implements ViewPlugin {
       values,
     };
 
+    // Removes undefined Symbol property
+    if (node.placement !== undefined) {
+      (result as any)[templateSymbol] = node.placement;
+    }
+
     return result;
   }
 
-  applyParser(parser: Parser) {
+  applyParser(parser: Parser): void {
     parser.hooks.onCreateASTNode.tap("template", (node) => {
       if (node && node.type === NodeType.Template && !node.dynamic) {
         return this.parseTemplate(
@@ -122,6 +134,55 @@ export default class TemplatePlugin implements ViewPlugin {
       return node;
     });
 
+    parser.hooks.onCreateASTNode.tap("template", (node) => {
+      function getTemplateSymbolValue(node: Node.Node): string | undefined {
+        if (node.type === NodeType.MultiNode) {
+          return (node as any)[templateSymbol];
+        } else if (node.type === NodeType.Template) {
+          return node.placement;
+        }
+        return undefined;
+      }
+
+      if (
+        node &&
+        (node.type === NodeType.View || node.type === NodeType.Asset) &&
+        Array.isArray(node.children)
+      ) {
+        node.children = node.children.sort((a, b) => {
+          // compare template output with static values
+          const aPath = a.path.join();
+          const bPath = b.path.join();
+
+          const pathsEqual = aPath === bPath;
+
+          if (pathsEqual) {
+            const aPlacement = getTemplateSymbolValue(a.value);
+            const bPlacement = getTemplateSymbolValue(b.value);
+
+            if (aPlacement !== undefined && bPlacement === undefined) {
+              return aPlacement === "prepend" ? -1 : 1;
+            } else if (bPlacement !== undefined && aPlacement === undefined) {
+              return bPlacement === "prepend" ? 1 : -1;
+            } else if (aPlacement !== undefined && bPlacement !== undefined) {
+              // Both have placement values
+              if (aPlacement === bPlacement) {
+                return 0; // Same placement, no preference
+              }
+              // "prepend" should come before "append"
+              return aPlacement === "prepend" ? -1 : 1;
+            }
+            return 0;
+          }
+
+          // Trigger more sorting for nested assets
+          return aPath > bPath ? 1 : -1;
+        });
+      }
+
+      return node;
+    });
+
     parser.hooks.parseNode.tap(
       "template",
       (
@@ -140,6 +201,7 @@ export default class TemplatePlugin implements ViewPlugin {
                   data: template.data,
                   template: template.value,
                   dynamic: template.dynamic ?? false,
+                  placement: template.placement,
                 },
                 template,
               );
@@ -163,7 +225,8 @@ export default class TemplatePlugin implements ViewPlugin {
     );
   }
 
-  applyResolverHooks(resolver: Resolver) {
+  applyResolverHooks(resolver: Resolver): void {
+    // Transform dynamic templates into MultiNodes
     resolver.hooks.beforeResolve.tap("template", (node, options) => {
       if (node && node.type === NodeType.Template && node.dynamic) {
         return this.parseTemplate(options.parseNode, node, options);
@@ -173,7 +236,7 @@ export default class TemplatePlugin implements ViewPlugin {
     });
   }
 
-  apply(view: ViewInstance) {
+  apply(view: ViewInstance): void {
     view.hooks.parser.tap("template", this.applyParser.bind(this));
     view.hooks.resolver.tap("template", this.applyResolverHooks.bind(this));
   }

package/types/view/builder/index.d.ts

@@ -38,5 +38,13 @@ export declare class Builder {
      * @param child - The child node
      */
     static addChild<N extends Node.BaseWithChildren<NT>, NT extends NodeType>(node: N, path: Node.PathSegment | Node.PathSegment[], child: Node.Node): N;
+    /**
+     * Updates children of a node of the same path and preserves order
+     *
+     * @param node - The node to update children for
+     * @param pathToMatch - The path to match against child paths
+     * @param mapFn - Function to transform matching children
+     */
+    static updateChildrenByPath<T extends Node.ViewOrAsset | Node.Value>(node: T, pathToMatch: Node.PathSegment[], updateFn: (child: Node.Child) => Node.Node): T;
 }
 //# sourceMappingURL=index.d.ts.map

package/types/view/parser/types.d.ts

@@ -54,8 +54,10 @@ export declare namespace Node {
         template: unknown;
         /** The number of nested templates so far */
         depth: number;
-        /** should the template recomputed when data changes */
+        /** Should the template recompute when data changes */
         dynamic?: boolean;
+        /** Specifies the template placement in relation to existing elements*/
+        placement?: "prepend" | "append";
     }
     interface Value extends BaseWithChildren<NodeType.Value>, PluginOptions {
         /** A simple node representing a value */

package/types/view/plugins/template.d.ts

@@ -22,7 +22,10 @@ export type TemplateSubstitutionsFunc = (baseSubstitutions: TemplateSubstitution
 export default class TemplatePlugin implements ViewPlugin {
     private readonly options;
     hooks: {
-        resolveTemplateSubstitutions: SyncWaterfallHook<[TemplateSubstitution[], TemplateItemInfo], Record<string, any>>;
+        resolveTemplateSubstitutions: SyncWaterfallHook<[
+            TemplateSubstitution[],
+            TemplateItemInfo
+        ], Record<string, any>>;
     };
     constructor(options: Options);
     private parseTemplate;