feat: fix demo

prevwong · Jan 6, 2024 · f65b2fd · f65b2fd
1 parent e68b0fc
commit f65b2fd
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 15 deletions.
diff --git a/packages/types/src/utils.ts b/packages/types/src/utils.ts
@@ -420,3 +420,31 @@ export const clone = (value: any, options?: Partial<CloneOpts>) => {
 
   return value;
 };
+
+export const toJSON = (value: any) => {
+  const x = JSON.parse(JSON.stringify(value));
+
+  return x;
+};
+
+export const fromJSON = (value: any) => {
+  if (Array.isArray(value)) {
+    return value.map((item) => fromJSON(item));
+  }
+
+  if (isObjectLiteral(value)) {
+    if (value['type'] && !!Schema.get(value['type'])) {
+      return Schema.fromJSON(value);
+    }
+
+    return Object.keys(value).reduce(
+      (accum, key) => ({
+        ...accum,
+        [key]: fromJSON(value[key]),
+      }),
+      {}
+    );
+  }
+
+  return value;
+};
diff --git a/site/components/editor-layout/AddFrameModal.tsx b/site/components/editor-layout/AddFrameModal.tsx
@@ -23,17 +23,17 @@ const getInitialComponentProps = (
   if (component instanceof t.RekaComponent) {
     const props: Record<string, t.Expression> = component.props.reduce(
       (accum, prop) => {
+        const value = t.fromJSON(existingProps[prop.name]);
         return {
           ...accum,
-          [prop.name]:
-            existingProps[prop.name] ?? prop.init ?? t.literal({ value: '' }),
+          [prop.name]: value ?? prop.init ?? t.literal({ value: '' }),
         };
       },
       {}
     );
 
     if (existingProps['children']) {
-      props['children'] = existingProps['children'];
+      props['children'] = t.Schema.fromJSON(existingProps['children']);
     }
 
     return props;
@@ -117,7 +117,7 @@ export const AddFrameModal = (props: AddFrameModalProps) => {
                 return;
               }
 
-              existingFrame.props = componentProps;
+              existingFrame.props = t.toJSON(componentProps);
             });
 
             editor.activeComponentEditor?.setActiveFrame(frameName);

diff --git a/site/constants/encoded-dummy-program.ts b/site/constants/encoded-dummy-program.ts
diff --git a/site/extensions/UserFrameExtension.ts b/site/extensions/UserFrameExtension.ts
@@ -4,7 +4,7 @@ import * as t from '@rekajs/types';
 export type UserFrame = {
   id: string;
   name: string;
-  props?: string;
+  props?: Record<string, any>;
   width?: string;
   height?: string;
 };
@@ -22,7 +22,7 @@ export const UserFrameExtensionFactory = () => {
         {
           id: 'Test Feature',
           name: 'Feature',
-          props: JSON.stringify({
+          props: t.toJSON({
             title: t.literal({ value: 'Test Feature' }),
             description: t.literal({
               value: 'An interesting feature description',
@@ -40,7 +40,7 @@ export const UserFrameExtensionFactory = () => {
         {
           id: 'Basic Card',
           name: 'Card',
-          props: JSON.stringify({
+          props: t.toJSON({
             name: t.literal({ value: 'Dummy Card' }),
             description: t.literal({ value: 'Dummy description for card' }),
           }),
@@ -50,7 +50,7 @@ export const UserFrameExtensionFactory = () => {
         {
           id: 'Demo Modal',
           name: 'Modal',
-          props: JSON.stringify({
+          props: t.toJSON({
             title: t.literal({ value: 'My Modal' }),
             isOpen: t.literal({ value: true }),
             children: t.tagTemplate({
@@ -65,7 +65,7 @@ export const UserFrameExtensionFactory = () => {
         {
           id: 'Primary Button',
           name: 'Button',
-          props: JSON.stringify({
+          props: t.toJSON({
             text: t.literal({ value: 'Click me' }),
           }),
           width: '300px',
@@ -74,7 +74,7 @@ export const UserFrameExtensionFactory = () => {
         {
           id: 'Button with Icon',
           name: 'Button',
-          props: JSON.stringify({
+          props: t.toJSON({
             text: t.literal({ value: 'Icon' }),
             icon: t.literal({ value: 'ArrowRightIcon' }),
           }),
@@ -84,7 +84,7 @@ export const UserFrameExtensionFactory = () => {
         {
           id: 'Basic text input',
           name: 'Input',
-          props: JSON.stringify({
+          props: t.toJSON({
             text: t.literal({ value: 'Hello!' }),
           }),
         },
@@ -121,7 +121,7 @@ export const UserFrameExtensionFactory = () => {
               return;
             }
 
-            stateFrame.setProps(props);
+            stateFrame.setProps(t.fromJSON(props));
           });
         }
       );
@@ -149,7 +149,7 @@ export const UserFrameExtensionFactory = () => {
               id: currentFrame.id,
               component: {
                 name: currentFrame.name,
-                props: currentFrame.props ? JSON.parse(currentFrame.props) : {},
+                props: t.fromJSON(currentFrame.props),
               },
               syncImmediately: false,
             });