Allow rawCharacters to be passed as a string so we can access props (#39)

* Allow rawCharacters to be passed as a string so we can access props

* Add error handling for parsing

Author: tysoncadenhead

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vestaboard/vbml",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "description": "The Vestaboard markup language",
   "main": "lib/index.js",
   "scripts": {

src/__tests__/parseComponent.spec.ts

@@ -471,6 +471,36 @@ describe("Parse Component", () => {
     ]);
   });
 
+  it("Should parse a raw component string with inline prop interpolation", () => {
+    const input: IVBMLComponent = {
+      rawCharacters: "[[{{a}},{{b}}]]",
+    };
+    const result = parseComponent(3, 12, { a: 1, b: 2 })(input);
+    expect(result).toEqual([[1, 2]]);
+  });
+
+  it("Should parse a raw component string where the grid comes from a prop", () => {
+    const input: IVBMLComponent = {
+      rawCharacters: "{{grid}}",
+    };
+    const result = parseComponent(3, 12, { grid: "[[1,2],[3,4]]" })(input);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
+  it("Should parse a raw component passed as a JSON string", () => {
+    const input: IVBMLComponent = {
+      rawCharacters: "[[1,2],[3,4]]",
+    };
+    const result = parseComponent(3, 12)(input);
+    expect(result).toEqual([
+      [1, 2],
+      [3, 4],
+    ]);
+  });
+
   it("Should convert emoji characters to character codes", () => {
     const input: IVBMLComponent = {
       template: "🟥🟧🟨🟩🟦🟪⬜⬛",

src/parseComponent.ts

@@ -17,7 +17,17 @@ import { verticalAlign } from "./verticalAlign";
 export const parseComponent =
   (defaultHeight: number, defaultWidth: number, props?: VBMLProps) =>
   (component: IVBMLComponent) => {
-    if ("rawCharacters" in component) return component.rawCharacters;
+    if ("rawCharacters" in component) {
+      const raw = component.rawCharacters;
+      if (typeof raw === "string") {
+        try {
+          return JSON.parse(parseProps(props || {})(raw)) as number[][];
+        } catch (e) {
+          return [[]]; // Return an empty board if parsing fails
+        }
+      }
+      return raw;
+    }
 
     const width = component?.style?.width || defaultWidth;
     const height = component?.style?.height || defaultHeight;
@@ -27,7 +37,7 @@ export const parseComponent =
       return randomColors(
         component?.style?.height || height,
         component?.style?.width || width,
-        colors
+        colors,
       );
     }
 
@@ -44,7 +54,7 @@ export const parseComponent =
       map(convertCharactersToCharacterCodes),
       verticalAlign(height, component?.style?.align || Align.top),
       horizontalAlign(width, component?.style?.justify || Justify.left),
-      renderComponent(emptyComponent)
+      renderComponent(emptyComponent),
     )(template) as number[][];
   };
 
@@ -55,7 +65,7 @@ export const parseAbsoluteComponent =
       characters: parseComponent(
         defaultHeight,
         defaultWidth,
-        props
+        props,
       )(component) as number[][],
       x: component.style?.absolutePosition?.x || 0,
       y: component.style?.absolutePosition?.y || 0,

src/types.ts

@@ -37,7 +37,7 @@ export interface VBMLProps {
 
 export interface IVBMLRawComponent {
   style?: IComponentStyle;
-  rawCharacters?: number[][];
+  rawCharacters?: number[][] | string;
 }
 
 export interface IVBMLCalendarComponent {