Deletion of comp in workspace affects code

src/babel-plugins/delete-component-plugin.ts

@@ -0,0 +1,23 @@
+const deleteComponentPlugin = (
+  _: any,
+  options: {
+    componentId: string
+  },
+) => {
+  const { componentId } = options
+
+  return {
+    visitor: {
+      JSXOpeningElement(path: any) {
+        const idAttribute = path.node.attributes.find(
+          (node: any) => node.name.name === 'compId',
+        )
+        if (idAttribute && idAttribute.value.value === componentId) {
+          path.parentPath.remove()
+        } else return
+      },
+    },
+  }
+}
+
+export default deleteComponentPlugin

src/babel-queries/queries.ts

@@ -4,8 +4,9 @@ import BabelPluginGetComponents from '../babel-plugins/get-components-plugin/get
 import BabelPluginSetProp from '../babel-plugins/set-prop-plugin'
 import BabelSetComponentId from '../babel-plugins/set-componentId-plugin'
 import BabelRemoveComponentId from '../babel-plugins/remove-componentId-plugin'
+import BabelDeleteComponent from '../babel-plugins/delete-component-plugin'
 
-export const getComponentsState = (code: string) => {
+const getComponentsState = (code: string) => {
   const plugin = new BabelPluginGetComponents()
 
   transform(code, {
@@ -15,7 +16,7 @@ export const getComponentsState = (code: string) => {
   return plugin.state
 }
 
-export const setProp = (
+const setProp = (
   code: string,
   options: { componentId: string; propName: string; value: string },
 ) => {
@@ -24,15 +25,29 @@ export const setProp = (
   }).code
 }
 
-export const setIdToComponents = (code: string) => {
+const setIdToComponents = (code: string) => {
   const transformed = transform(code, {
     plugins: [babelPluginSyntaxJsx, BabelSetComponentId],
   })
   return transformed.code
 }
 
-export const removeComponentId = (code: string) => {
+const removeComponentId = (code: string) => {
   return transform(code, {
     plugins: [babelPluginSyntaxJsx, BabelRemoveComponentId],
   }).code
 }
+
+const deleteComponent = (code: string, options: { componentId: string }) => {
+  return transform(code, {
+    plugins: [babelPluginSyntaxJsx, [BabelDeleteComponent, options]],
+  }).code
+}
+
+export default {
+  getComponentsState,
+  setProp,
+  setIdToComponents,
+  removeComponentId,
+  deleteComponent,
+}

src/components/CodePanel.tsx

@@ -3,11 +3,7 @@ import { Box, Button, useClipboard } from '@chakra-ui/core'
 import { useSelector } from 'react-redux'
 import { getCode } from '../core/selectors/code'
 import MonacoEditor from '@monaco-editor/react'
-import {
-  getComponentsState,
-  setIdToComponents,
-  removeComponentId,
-} from '../babel-queries/queries'
+import babelQueries from '../babel-queries/queries'
 import useDispatch from '../hooks/useDispatch'
 
 const CodePanel = () => {
@@ -18,7 +14,7 @@ const CodePanel = () => {
   const transformedCode = useSelector(getCode)
 
   // While displaying the code, the comp-id that is been added should be removed.
-  const code = removeComponentId(transformedCode)
+  const code = babelQueries.removeComponentId(transformedCode)
 
   const handleEditorDidMount = (_: any, editor: any) => {
     editorRef.current = editor
@@ -30,8 +26,8 @@ const CodePanel = () => {
 
       // Id is set to the props of the every component.
       // This is done for identification of components using id.
-      const transformedCode = setIdToComponents(newCode)
-      const componentsState = getComponentsState(transformedCode)
+      const transformedCode = babelQueries.setIdToComponents(newCode)
+      const componentsState = babelQueries.getComponentsState(transformedCode)
       dispatch.code.setCode(transformedCode)
       dispatch.components.updateComponentsState(componentsState)
     }

src/components/inspector/Inspector.tsx

@@ -37,6 +37,8 @@ import {
   getSelectedTextDetails,
   getIsSelectionEnabled,
 } from '../../core/selectors/text'
+import babelQueries from '../../babel-queries/queries'
+import { getCode } from '../../core/selectors/code'
 
 const CodeActionButton = memo(() => {
   const [isLoading, setIsLoading] = useState(false)
@@ -73,7 +75,6 @@ const Inspector = () => {
 
   const { clearActiveProps } = useInspectorUpdate()
 
-  console.log(component)
   const { type, id } = component
   const children = useSelector(getChildrenBy(id))
   const customComponentsList = useSelector(getCustomComponentsList)
@@ -94,6 +95,7 @@ const Inspector = () => {
   )
   const isSelectionEnabled = useSelector(getIsSelectionEnabled)
   const isContainerComponent = useSelector(checkIsContainerComponent(id))
+  const code = useSelector(getCode)
 
   // check if its a normal component or a container component
   const isNormalOrContainer = () => {
@@ -139,6 +141,14 @@ const Inspector = () => {
     }
   }
 
+  const removeComponentHandler = () => {
+    dispatch.components.deleteComponent(component.id)
+    const updatedCode = babelQueries.deleteComponent(code, {
+      componentId: component.id,
+    })
+    dispatch.code.setCode(updatedCode)
+  }
+
   return (
     <>
       <Box bg="white">
@@ -262,7 +272,7 @@ const Inspector = () => {
             />
             <ActionButton
               label="Remove"
-              onClick={() => dispatch.components.deleteComponent(component.id)}
+              onClick={removeComponentHandler}
               icon={<FiTrash2 />}
             />
           </Flex>

src/hooks/useForm.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useSelector } from 'react-redux'
 import useDispatch from './useDispatch'
 import { getSelectedComponentId } from '../core/selectors/components'
-import { setProp } from '../babel-queries/queries'
+import babelQueries from '../babel-queries/queries'
 import { getCode } from '../core/selectors/code'
 
 export const useForm = () => {
@@ -13,7 +13,11 @@ 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 })
+      const updatedCode = babelQueries.setProp(code, {
+        componentId,
+        propName: name,
+        value,
+      })
       // update the code
       dispatch.code.setCode(updatedCode)
 

src/hooks/useShortcuts.ts

@@ -1,5 +1,9 @@
 import useDispatch from './useDispatch'
 import { ActionCreators as UndoActionCreators } from 'redux-undo'
+import babelQueries from '../babel-queries/queries'
+import { useSelector } from 'react-redux'
+import { getCode } from '../core/selectors/code'
+import { getSelectedComponentId } from '../core/selectors/components'
 
 /**
  * @member
@@ -26,12 +30,18 @@ const hasNoSpecialKeyPressed = (event: KeyboardEvent | undefined) =>
 
 const useShortcuts = () => {
   const dispatch = useDispatch()
+  const code = useSelector(getCode)
+  const selectedComponentId = useSelector(getSelectedComponentId)
 
   const deleteNode = (event: KeyboardEvent | undefined) => {
     if (event) {
       event.preventDefault()
     }
     dispatch.components.deleteComponent()
+    const updatedCode = babelQueries.deleteComponent(code, {
+      componentId: selectedComponentId,
+    })
+    dispatch.code.setCode(updatedCode)
   }
 
   const toggleBuilderMode = (event: KeyboardEvent | undefined) => {