@player-ui/markdown-plugin 0.8.0--canary.307.9621 → 0.8.0-next.0

package/src/__tests__/index.test.ts

@@ -0,0 +1,464 @@
+import { describe, it, expect } from "vitest";
+import type { InProgressState, Flow } from "@player-ui/player";
+import { Player } from "@player-ui/player";
+import { Registry } from "@player-ui/partial-match-registry";
+import { PartialMatchFingerprintPlugin } from "@player-ui/partial-match-fingerprint-plugin";
+import { mockMappers } from "./helpers";
+import { MarkdownPlugin } from "..";
+
+describe("MarkdownPlugin", () => {
+  describe("Transform Operation", () => {
+    const unparsedFlow: Flow = {
+      id: "markdown-flow",
+      data: {
+        internal: {
+          locale: {
+            linkMarkdown:
+              "Learn more at [TurboTax Canada](https://turbotax.intuit.ca)",
+          },
+        },
+      },
+      views: [
+        {
+          id: "markdown-view",
+          type: "questionAnswer",
+          title: {
+            asset: {
+              id: "markdown-view-title",
+              type: "markdown",
+              value: "{{internal.locale.linkMarkdown}}",
+            },
+          },
+          primaryInfo: {
+            asset: {
+              id: "markdown-primaryInfo-collection",
+              type: "collection",
+              values: [
+                {
+                  asset: {
+                    id: "markdown-primaryInfo-collection-bold",
+                    type: "markdown",
+                    value: "some **bold text**",
+                  },
+                },
+                {
+                  asset: {
+                    id: "markdown-primaryInfo-collection-italic",
+                    type: "markdown",
+                    value: "*italicized text*",
+                  },
+                },
+                {
+                  asset: {
+                    id: "markdown-primaryInfo-collection-orderd-list",
+                    type: "markdown",
+                    value: "1. First\n2. Second\n3. Third",
+                  },
+                },
+                {
+                  asset: {
+                    id: "markdown-primaryInfo-collection-unorderd-list",
+                    type: "markdown",
+                    value:
+                      "- [First](https://turbotax.intuit.ca)\n- Second\n- Third",
+                  },
+                },
+                {
+                  asset: {
+                    id: "markdown-primaryInfo-collection-image",
+                    type: "markdown",
+                    value: "![alt text](image.png)",
+                  },
+                },
+                {
+                  asset: {
+                    id: "markdown-primaryInfo-collection-unsupported",
+                    type: "markdown",
+                    value: "Highlights are ==not supported==",
+                  },
+                },
+              ],
+            },
+          },
+        },
+      ],
+      navigation: {
+        BEGIN: "FLOW_1",
+        FLOW_1: {
+          startState: "VIEW_1",
+          VIEW_1: {
+            state_type: "VIEW",
+            ref: "markdown-view",
+            transitions: {
+              "*": "END_Done",
+            },
+          },
+          END_Done: {
+            state_type: "END",
+            outcome: "done",
+          },
+        },
+      },
+    };
+
+    it("parses the flow containing markdown into valid FRF, based on the given mappers", () => {
+      const player = new Player({
+        plugins: [new MarkdownPlugin(mockMappers)],
+      });
+      player.start(unparsedFlow);
+
+      const view = (player.getState() as InProgressState).controllers.view
+        .currentView?.lastUpdate;
+
+      expect(view).toMatchInlineSnapshot(`
+        {
+          "id": "markdown-view",
+          "primaryInfo": {
+            "asset": {
+              "id": "markdown-primaryInfo-collection",
+              "type": "collection",
+              "values": [
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-bold-composite-7",
+                    "type": "composite",
+                    "values": [
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-bold-text-4",
+                          "type": "text",
+                          "value": "some ",
+                        },
+                      },
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-bold-text-5",
+                          "modifiers": [
+                            {
+                              "type": "tag",
+                              "value": "important",
+                            },
+                          ],
+                          "type": "text",
+                          "value": "bold text",
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-italic-text-8",
+                    "modifiers": [
+                      {
+                        "type": "tag",
+                        "value": "emphasis",
+                      },
+                    ],
+                    "type": "text",
+                    "value": "italicized text",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-orderd-list-list-20",
+                    "metaData": {
+                      "listType": "ordered",
+                    },
+                    "type": "list",
+                    "values": [
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-orderd-list-text-11",
+                          "type": "text",
+                          "value": "First",
+                        },
+                      },
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-orderd-list-text-14",
+                          "type": "text",
+                          "value": "Second",
+                        },
+                      },
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-orderd-list-text-17",
+                          "type": "text",
+                          "value": "Third",
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-unorderd-list-list-31",
+                    "type": "list",
+                    "values": [
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-unorderd-list-text-21",
+                          "modifiers": [
+                            {
+                              "metaData": {
+                                "ref": "https://turbotax.intuit.ca",
+                              },
+                              "type": "link",
+                            },
+                          ],
+                          "type": "text",
+                          "value": "First",
+                        },
+                      },
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-unorderd-list-text-25",
+                          "type": "text",
+                          "value": "Second",
+                        },
+                      },
+                      {
+                        "asset": {
+                          "id": "markdown-primaryInfo-collection-unorderd-list-text-28",
+                          "type": "text",
+                          "value": "Third",
+                        },
+                      },
+                    ],
+                  },
+                },
+                {
+                  "asset": {
+                    "accessibility": "alt text",
+                    "id": "markdown-primaryInfo-collection-image-image-32",
+                    "metaData": {
+                      "ref": "image.png",
+                    },
+                    "type": "image",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-unsupported-text-34",
+                    "type": "text",
+                    "value": "Highlights are ==not supported==",
+                  },
+                },
+              ],
+            },
+          },
+          "title": {
+            "asset": {
+              "id": "markdown-view-title-composite-3",
+              "type": "composite",
+              "values": [
+                {
+                  "asset": {
+                    "id": "markdown-view-title-text-0",
+                    "type": "text",
+                    "value": "Learn more at ",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-view-title-text-1",
+                    "modifiers": [
+                      {
+                        "metaData": {
+                          "ref": "https://turbotax.intuit.ca",
+                        },
+                        "type": "link",
+                      },
+                    ],
+                    "type": "text",
+                    "value": "TurboTax Canada",
+                  },
+                },
+              ],
+            },
+          },
+          "type": "questionAnswer",
+        }
+      `);
+    });
+
+    it("parses the flow, with only the required mappers", () => {
+      const player = new Player({
+        plugins: [
+          new MarkdownPlugin({
+            text: mockMappers.text,
+            paragraph: mockMappers.paragraph,
+            collection: mockMappers.collection,
+          }),
+        ],
+      });
+      player.start(unparsedFlow);
+
+      const view = (player.getState() as InProgressState).controllers.view
+        .currentView?.lastUpdate;
+
+      expect(view).toMatchInlineSnapshot(`
+        {
+          "id": "markdown-view",
+          "primaryInfo": {
+            "asset": {
+              "id": "markdown-primaryInfo-collection",
+              "type": "collection",
+              "values": [
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-bold",
+                    "type": "text",
+                    "value": "some **bold text**",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-italic",
+                    "type": "text",
+                    "value": "*italicized text*",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-orderd-list",
+                    "type": "text",
+                    "value": "1. First
+        2. Second
+        3. Third",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-unorderd-list",
+                    "type": "text",
+                    "value": "- [First](https://turbotax.intuit.ca)
+        - Second
+        - Third",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-image",
+                    "type": "text",
+                    "value": "![alt text](image.png)",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "markdown-primaryInfo-collection-unsupported-text-36",
+                    "type": "text",
+                    "value": "Highlights are ==not supported==",
+                  },
+                },
+              ],
+            },
+          },
+          "title": {
+            "asset": {
+              "id": "markdown-view-title",
+              "type": "text",
+              "value": "Learn more at [TurboTax Canada](https://turbotax.intuit.ca)",
+            },
+          },
+          "type": "questionAnswer",
+        }
+      `);
+    });
+  });
+
+  describe("Interactions with Asset Registry", () => {
+    it("parses regular flow and maps assets", () => {
+      const fingerprint = new PartialMatchFingerprintPlugin(new Registry());
+
+      fingerprint.register({ type: "action" }, 0);
+      fingerprint.register({ type: "text" }, 1);
+      fingerprint.register({ type: "composite" }, 2);
+
+      const player = new Player({
+        plugins: [fingerprint, new MarkdownPlugin(mockMappers)],
+      });
+
+      player.start({
+        id: "action-with-expression",
+        views: [
+          {
+            id: "action",
+            type: "action",
+            exp: "{{count}} = {{count}} + 1",
+            label: {
+              asset: {
+                id: "action-label",
+                type: "markdown",
+                value: "Clicked {{count}} *times*",
+              },
+            },
+          },
+        ],
+        data: {
+          count: 0,
+        },
+        navigation: {
+          BEGIN: "FLOW_1",
+          FLOW_1: {
+            startState: "VIEW_1",
+            VIEW_1: {
+              state_type: "VIEW",
+              ref: "action",
+              transitions: {
+                "*": "END_Done",
+              },
+            },
+            END_Done: {
+              state_type: "END",
+              outcome: "done",
+            },
+          },
+        },
+      });
+
+      // the parser should create 2 text assets: `Clicked {{count}}` and a italicized `times`:
+      const view = (player.getState() as InProgressState).controllers.view
+        .currentView?.lastUpdate;
+
+      expect(view).toMatchInlineSnapshot(`
+        {
+          "exp": "{{count}} = {{count}} + 1",
+          "id": "action",
+          "label": {
+            "asset": {
+              "id": "action-label-composite-41",
+              "type": "composite",
+              "values": [
+                {
+                  "asset": {
+                    "id": "action-label-text-38",
+                    "type": "text",
+                    "value": "Clicked 0 ",
+                  },
+                },
+                {
+                  "asset": {
+                    "id": "action-label-text-39",
+                    "modifiers": [
+                      {
+                        "type": "tag",
+                        "value": "emphasis",
+                      },
+                    ],
+                    "type": "text",
+                    "value": "times",
+                  },
+                },
+              ],
+            },
+          },
+          "type": "action",
+        }
+      `);
+      expect(fingerprint.get("action-label-text-38")).toBe(1);
+      expect(fingerprint.get("action-label-text-39")).toBe(1);
+    });
+  });
+});

package/src/index.ts

@@ -1,15 +1,15 @@
-import type { Player, PlayerPlugin } from '@player-ui/player';
-import { resolveDataRefsInString, NodeType } from '@player-ui/player';
-import type { Mappers } from './types';
-import { parseAssetMarkdownContent } from './utils';
+import type { Player, PlayerPlugin } from "@player-ui/player";
+import { resolveDataRefsInString, NodeType } from "@player-ui/player";
+import type { Mappers } from "./types";
+import { parseAssetMarkdownContent } from "./utils";
 
-export * from './types';
+export * from "./types";
 
 /**
  * A plugin that parses markdown written into text assets using the given converters for markdown features into existing assets.
  */
 export class MarkdownPlugin implements PlayerPlugin {
-  name = 'MarkdownPlugin';
+  name = "MarkdownPlugin";
 
   private mappers: Mappers;
 
@@ -21,13 +21,13 @@ export class MarkdownPlugin implements PlayerPlugin {
     player.hooks.view.tap(this.name, (view) => {
       view.hooks.resolver.tap(this.name, (resolver) => {
         resolver.hooks.beforeResolve.tap(this.name, (node, options) => {
-          if (node?.type === NodeType.Asset && node.value.type === 'markdown') {
+          if (node?.type === NodeType.Asset && node.value.type === "markdown") {
             const resolvedContent = resolveDataRefsInString(
               node.value.value as string,
               {
                 evaluate: options.evaluate,
                 model: options.data.model,
-              }
+              },
             );
 
             const parsed = parseAssetMarkdownContent({

package/src/types.ts

@@ -1,4 +1,4 @@
-import type { Asset } from '@player-ui/types';
+import type { Asset } from "@player-ui/types";
 
 export interface BaseArgs {
   /**
@@ -14,7 +14,7 @@ export type LiteralMapper<T extends object = object> = (
      */
     value: string;
   } & BaseArgs &
-    T
+    T,
 ) => Asset;
 
 export type CompositeMapper<T extends object = object> = (
@@ -24,7 +24,7 @@ export type CompositeMapper<T extends object = object> = (
      */
     value: Asset[];
   } & BaseArgs &
-    T
+    T,
 ) => Asset;
 
 export type FallbackMapper = (
@@ -33,7 +33,7 @@ export type FallbackMapper = (
      * markdown element value
      */
     value: string | Asset[];
-  } & BaseArgs
+  } & BaseArgs,
 ) => Asset;
 
 export interface Mappers {

package/src/utils/index.ts

@@ -1,2 +1,2 @@
-export * from './markdownParser';
-export * from './transformers';
+export * from "./markdownParser";
+export * from "./transformers";

package/src/utils/markdownParser.ts

@@ -1,9 +1,9 @@
-import type { Node, ParseObjectOptions } from '@player-ui/player';
-import { NodeType } from '@player-ui/player';
-import type { Asset } from '@player-ui/types';
-import { fromMarkdown } from 'mdast-util-from-markdown';
-import type { Mappers } from '../types';
-import { transformers } from './transformers';
+import type { Node, ParseObjectOptions } from "@player-ui/player";
+import { NodeType } from "@player-ui/player";
+import type { Asset } from "@player-ui/types";
+import { fromMarkdown } from "mdast-util-from-markdown";
+import type { Mappers } from "../types";
+import { transformers } from "./transformers";
 
 /**
  * Parses markdown content using a provided mappers record.
@@ -29,7 +29,7 @@ export function parseAssetMarkdownContent({
   parser?: (
     obj: object,
     type?: Node.ChildrenTypes,
-    options?: ParseObjectOptions
+    options?: ParseObjectOptions,
   ) => Node.Node | null;
 }): Node.Node | null {
   const { children } = fromMarkdown(asset.value as string);

package/src/utils/transformers.ts

@@ -1,4 +1,4 @@
-import type { Asset } from '@player-ui/types';
+import type { Asset } from "@player-ui/types";
 import type {
   Blockquote,
   Code,
@@ -13,14 +13,14 @@ import type {
   Strong,
   Text,
   ThematicBreak,
-} from 'mdast-util-from-markdown/lib';
-import type { Transformer } from '../types';
+} from "mdast-util-from-markdown/lib";
+import type { Transformer } from "../types";
 
 /**
  * Swap markdown type to text
  */
 function swapMarkdownType(asset: Asset): Asset {
-  return { ...asset, type: 'text' };
+  return { ...asset, type: "text" };
 }
 
 /**
@@ -48,7 +48,7 @@ const emphasisTransformer: Transformer<Emphasis> = ({
     const { children } = astNode;
 
     const value = children.map((node) =>
-      transformers[node.type]({ astNode: node, asset, mappers, transformers })
+      transformers[node.type]({ astNode: node, asset, mappers, transformers }),
     );
 
     return mappers.emphasis({
@@ -73,7 +73,7 @@ const strongTransformer: Transformer<Strong> = ({
     const { children } = astNode;
 
     const value = children.map((node) =>
-      transformers[node.type]({ astNode: node, asset, mappers, transformers })
+      transformers[node.type]({ astNode: node, asset, mappers, transformers }),
     );
 
     return mappers.strong({
@@ -100,7 +100,7 @@ const paragraphTransformer: Transformer<Paragraph> = ({
     children.every(({ type }) => Boolean(mappers[type as keyof typeof mappers]))
   ) {
     const value = children.map((node) =>
-      transformers[node.type]({ astNode: node, asset, mappers, transformers })
+      transformers[node.type]({ astNode: node, asset, mappers, transformers }),
     );
 
     return mappers.paragraph({
@@ -125,7 +125,7 @@ const listTransformer: Transformer<List> = ({
     const { children, ordered, start } = astNode;
 
     const value = children.map((node) =>
-      transformers[node.type]({ astNode: node, asset, mappers, transformers })
+      transformers[node.type]({ astNode: node, asset, mappers, transformers }),
     );
 
     return mappers.list({
@@ -151,7 +151,7 @@ const listItemTransformer: Transformer<ListItem> = ({
   const { children } = astNode;
 
   const value = children.map((node) =>
-    transformers[node.type]({ astNode: node, asset, mappers, transformers })
+    transformers[node.type]({ astNode: node, asset, mappers, transformers }),
   );
 
   const mapper = mappers.listItem || mappers.paragraph;
@@ -175,7 +175,7 @@ const linkTransformer: Transformer<Link> = ({
     const { children, url } = astNode;
 
     const value = children.map((node) =>
-      transformers[node.type]({ astNode: node, asset, mappers, transformers })
+      transformers[node.type]({ astNode: node, asset, mappers, transformers }),
     );
 
     return mappers.link({
@@ -198,7 +198,7 @@ const imageTransformer: Transformer<Image> = ({ astNode, asset, mappers }) => {
     return mappers.image({
       originalAsset: asset,
       src: url,
-      value: title || alt || '',
+      value: title || alt || "",
     });
   }
 
@@ -218,7 +218,7 @@ const blockquoteTransformer: Transformer<Blockquote> = ({
     const { children } = astNode;
 
     const value = children.map((node) =>
-      transformers[node.type]({ astNode: node, asset, mappers, transformers })
+      transformers[node.type]({ astNode: node, asset, mappers, transformers }),
     );
 
     return mappers.blockquote({
@@ -277,7 +277,7 @@ const horizontalRuleTransformer: Transformer<ThematicBreak> = ({
   if (mappers.horizontalRule) {
     return mappers.horizontalRule({
       originalAsset: asset,
-      value: '---',
+      value: "---",
     });
   }
 
@@ -297,7 +297,7 @@ const headingTransformer: Transformer<Heading> = ({
     const { children, depth } = astNode;
 
     const value = children.map((node) =>
-      transformers[node.type]({ astNode: node, asset, mappers, transformers })
+      transformers[node.type]({ astNode: node, asset, mappers, transformers }),
     );
 
     return mappers.heading({

package/types/index.d.ts

@@ -0,0 +1,13 @@
+import type { Player, PlayerPlugin } from "@player-ui/player";
+import type { Mappers } from "./types";
+export * from "./types";
+/**
+ * A plugin that parses markdown written into text assets using the given converters for markdown features into existing assets.
+ */
+export declare class MarkdownPlugin implements PlayerPlugin {
+    name: string;
+    private mappers;
+    constructor(mappers: Mappers);
+    apply(player: Player): void;
+}
+//# sourceMappingURL=index.d.ts.map