Setting prop in the workspace will affect the code

src/babel-plugins/get-components-plugin/addProps.ts

@@ -58,6 +58,9 @@ const addProps = (payload: IAddProps) => {
   const { path, props, openingElement, componentId, functionName } = payload
   // Get the props of each component by attributes property
   openingElement.attributes.forEach((attr: any) => {
+    const propName = attr.name.name
+    // component-id need not to be added as the prop for the component.
+    if (propName === 'compId') return
     const value = attr.value
     const propId = generatePropId()
     props.byComponentId[componentId].push(propId)
@@ -67,7 +70,7 @@ const addProps = (payload: IAddProps) => {
     if (value && t.isJSXExpressionContainer(value)) {
       props.byId[propId] = {
         id: propId,
-        name: attr.name.name,
+        name: propName,
         value: '',
         derivedFromPropName: null,
         derivedFromComponentType: null,

src/babel-plugins/get-components-plugin/get-components.ts

@@ -1,7 +1,11 @@
 import { declare } from '@babel/helper-plugin-utils'
 import { functionOnEnter, functionOnExit } from './functionDeclaration'
 import addProps, { identifierPropHandler } from './addProps'
-import { generateComponentId, generatePropId } from '../../utils/generateId'
+import { generatePropId } from '../../utils/generateId'
+import {
+  getComponentId,
+  getParentComponentId,
+} from '../utils/babel-plugin-utils'
 
 class getComponentsPlugin {
   state: {
@@ -115,9 +119,9 @@ class getComponentsPlugin {
           },
           JSXElement: (path: any) => {
             const openingElement = path.node.openingElement
-            const componentId = generateComponentId()
+            const componentId = getComponentId(openingElement)
             const isCustomComponent = functionName !== 'App'
-            const parentId = path.parent.id
+            const parentId = getParentComponentId(path)
 
             const components = isCustomComponent
               ? this.state.customComponents

src/babel-plugins/set-prop-plugin.ts

@@ -1,12 +1,37 @@
-const setPropPlugin = (payload: {
-  componentId: string
-  propName: string
-  propValue: string
-}) => {
+import * as t from '@babel/types'
+
+import { getComponentId } from './utils/babel-plugin-utils'
+
+const setPropPlugin = (
+  _: any,
+  options: {
+    componentId: string
+    propName: string
+    value: string
+  },
+) => {
+  const { componentId, propName, value } = options
+
   return {
     visitor: {
       JSXOpeningElement(path: any) {
-        console.log(path)
+        const visitedComponentId = getComponentId(path.node)
+
+        if (visitedComponentId === componentId) {
+          // Convert to jsx attribute using propName and prop-value
+          const jsxAttribute = t.jsxAttribute(
+            t.jsxIdentifier(propName),
+            t.stringLiteral(value),
+          )
+          const existingAttrIndex = path.node.attributes.findIndex(
+            (node: any) => node.name.name === propName,
+          )
+          if (existingAttrIndex !== -1) {
+            path.node.attributes[existingAttrIndex] = jsxAttribute
+          } else {
+            path.node.attributes.push(jsxAttribute)
+          }
+        }
       },
     },
   }

src/babel-queries/queries.ts

@@ -2,6 +2,8 @@ import { transform } from '@babel/standalone'
 import babelPluginSyntaxJsx from '@babel/plugin-syntax-jsx'
 import BabelPluginGetComponents from '../babel-plugins/get-components-plugin/get-components'
 import BabelPluginSetProp from '../babel-plugins/set-prop-plugin'
+import BabelSetComponentId from '../babel-plugins/set-componentId-plugin'
+import BabelRemoveComponentId from '../babel-plugins/remove-componentId-plugin'
 
 export const getComponentsState = (code: string) => {
   const plugin = new BabelPluginGetComponents()
@@ -16,7 +18,21 @@ export const getComponentsState = (code: string) => {
 export const setProp = (
   code: string,
   options: { componentId: string; propName: string; value: string },
-) =>
-  transform(code, {
+) => {
+  return transform(code, {
     plugins: [babelPluginSyntaxJsx, [BabelPluginSetProp, options]],
+  }).code
+}
+
+export const setIdToComponents = (code: string) => {
+  const transformed = transform(code, {
+    plugins: [babelPluginSyntaxJsx, BabelSetComponentId],
   })
+  return transformed.code
+}
+
+export const removeComponentId = (code: string) => {
+  return transform(code, {
+    plugins: [babelPluginSyntaxJsx, BabelRemoveComponentId],
+  }).code
+}

src/components/Header.tsx

@@ -134,7 +134,10 @@ const Header = () => {
             <ActionButton
               label="Code"
               icon={<RiCodeLine />}
-              onClick={() => dispatch.app.toggleCodePanel()}
+              onClick={() => {
+                dispatch.components.unselect()
+                dispatch.app.toggleCodePanel()
+              }}
               bg={showCode ? 'primary.100' : 'white'}
               color={showCode ? 'primary.900' : 'black'}
               size="sm"

src/components/inspector/Inspector.tsx

@@ -73,6 +73,7 @@ const Inspector = () => {
 
   const { clearActiveProps } = useInspectorUpdate()
 
+  console.log(component)
   const { type, id } = component
   const children = useSelector(getChildrenBy(id))
   const customComponentsList = useSelector(getCustomComponentsList)

src/hooks/useForm.ts

@@ -12,15 +12,19 @@ export const useForm = () => {
 
   const setValue = useCallback(
     (id: string, name: string, value: any) => {
+      // Updated the AST tree using babel plugin
+      const updatedCode = setProp(code, { componentId, propName: name, value })
+      // update the code
+      dispatch.code.setCode(updatedCode)
+
       dispatch.components.updateProp({
         componentId,
         id,
         name,
         value,
       })
-      setProp(code, { componentId, propName: name, value })
     },
-    [code, componentId, dispatch.components],
+    [code, componentId, dispatch.code, dispatch.components],
   )
 
   return { setValue }