Syncing workspace and code

decs.d.ts

@@ -1 +1,6 @@
 declare module 'css-to-object'
+declare module '@babel/standalone'
+declare module '@babel/plugin-syntax-jsx'
+declare module '@babel/helper-plugin-utils'
+declare module '@babel/template'
+declare module 'prettier-standalone'

netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200

package.json

@@ -3,29 +3,29 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/helper-plugin-utils": "^7.10.4",
+    "@babel/plugin-syntax-jsx": "^7.12.1",
+    "@babel/standalone": "^7.12.9",
+    "@babel/template": "^7.12.7",
+    "@babel/traverse": "^7.12.9",
+    "@babel/types": "^7.12.7",
     "@bugsnag/js": "^6.5.2",
     "@bugsnag/plugin-react": "^6.5.0",
     "@chakra-ui/core": "^1.0.0-rc.5",
     "@chakra-ui/icons": "^1.0.0-rc.3",
-    "@mdx-js/react": "^1.5.5",
-    "@rehooks/local-storage": "^2.1.1",
+    "@monaco-editor/react": "^3.7.1",
     "@rematch/core": "^1.3.0",
-    "@types/react": "^16.9.49",
-    "@types/react-json-tree": "^0.6.11",
-    "@types/webfontloader": "^1.6.32",
-    "better-docs": "^2.3.2",
+    "@types/prettier": "^2.2.0",
     "browser-nativefs": "^0.7.1",
     "codesandbox": "^2.1.11",
     "coloreact": "^0.3.1",
     "copy-to-clipboard": "^3.2.1",
     "css-to-object": "^1.1.0",
-    "jsdoc": "^3.6.6",
+    "file-saver": "^2.0.5",
+    "jszip": "^3.5.0",
     "lodash": "^4.17.15",
-    "lodash-es": "^4.17.15",
-    "lz-string": "^1.4.4",
-    "prism-react-renderer": "^1.0.2",
+    "prettier": "^2.2.1",
     "react": "^16.12.0",
-    "react-color": "^2.18.0",
     "react-color-picker": "^4.0.2",
     "react-dnd": "^10.0.2",
     "react-dnd-html5-backend": "^10.0.2",
@@ -35,18 +35,18 @@
     "react-json-tree": "^0.11.2",
     "react-redux": "^7.1.3",
     "react-responsive-combo-box": "^1.2.4",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "3.4.0",
     "redux": "^4.0.5",
     "redux-persist": "^6.0.0",
     "redux-undo": "^1.0.0",
     "reselect": "^4.0.0",
     "typescript": "^3.7.5",
-    "webfontloader": "^1.6.28",
-    "webpack-bundle-analyzer": "^3.6.0"
+    "webfontloader": "^1.6.28"
   },
   "scripts": {
     "start": "react-app-rewired start",
-    "build": "react-app-rewired build",
+    "build": "react-app-rewired --max_old_space_size=4096 build",
     "test": "react-app-rewired test --env=jsdom",
     "analyze": "BUNDLE_VISUALIZE=1 react-app-rewired build",
     "docs": "jsdoc -c jsdoc.conf.json"
@@ -70,17 +70,21 @@
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^8.1.0",
+    "@types/file-saver": "^2.0.1",
     "@types/jest": "^25.1.2",
     "@types/lodash": "^4.14.149",
-    "@types/lz-string": "^1.3.33",
-    "@types/prettier": "^1.19.0",
+    "@types/react": "^16.9.49",
     "@types/react-color": "^3.0.1",
+    "@types/react-json-tree": "^0.6.11",
     "@types/react-redux": "^7.1.7",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/webfontloader": "^1.6.32",
+    "better-docs": "^2.3.2",
     "customize-cra": "^0.9.1",
     "customize-cra-react-refresh": "^1.0.1",
     "husky": "^4.2.1",
+    "jsdoc": "^3.6.6",
     "lint-staged": "^10.0.7",
-    "prettier": "^1.19.1",
     "pretty-quick": "^2.0.1",
     "react-app-rewired": "^2.1.5",
     "typedoc": "^0.16.9"

src/App.tsx

@@ -1,10 +1,6 @@
-import React from 'react'
+import React, { Suspense, lazy } from 'react'
 import { Flex, Box, ThemeProvider, IconButton } from '@chakra-ui/core'
-import { DndProvider } from 'react-dnd'
-import Backend from 'react-dnd-html5-backend'
 import { useSelector } from 'react-redux'
-import Editor from './components/editor/Editor'
-import Header from './components/Header'
 import { Global } from '@emotion/core'
 import { ArrowBackIcon } from '@chakra-ui/icons'
 // import EditorErrorBoundary from './components/errorBoundaries/EditorErrorBoundary'
@@ -16,9 +12,12 @@ import {
 import useDispatch from './hooks/useDispatch'
 import loadFonts from './utils/loadFonts'
 import useCustomTheme from './hooks/useCustomTheme'
-import CodePanel from './components/CodePanel'
-import Sidebar from './components/sidebar/Sidebar'
 import useShortCutKeys from './hooks/useShortcutKeys'
+import EditorRouting from './components/editor/EditorRouting'
+import Header from './components/Header/Header'
+import Sidebar from './components/sidebar/Sidebar'
+
+const CodePanel = lazy(() => import('./components/CodePanel'))
 
 const App = () => {
   const showFullScreen = useSelector(getShowFullScreen)
@@ -49,27 +48,33 @@ const App = () => {
           />
         </Box>
       ) : null}
-      <DndProvider backend={Backend}>
-        <Flex width="100%">
-          <Box flex={1}>
-            {!showFullScreen ? <Header /> : null}
 
-            <ThemeProvider theme={theme}>
-              {/* <EditorErrorBoundary> */}
+      <Flex width="100%" overflowX="hidden">
+        <Box flex={1}>
+          {!showFullScreen ? <Header /> : null}
 
-              <Box
-                bg="white"
-                height={!showFullScreen ? 'calc(100vh - 3rem)' : '100vh'}
-              >
-                {showCode ? <CodePanel /> : <Editor />}
-              </Box>
-              {/* </EditorErrorBoundary> */}
-            </ThemeProvider>
-          </Box>
+          <ThemeProvider theme={theme}>
+            {/* <EditorErrorBoundary> */}
+
+            <Box
+              bg="white"
+              height={!showFullScreen ? 'calc(100vh - 3rem)' : '100vh'}
+              width={!showFullScreen ? 'calc(100vw - 15rem)' : '100vw'}
+            >
+              {showCode ? (
+                <Suspense fallback={<Box />}>
+                  <CodePanel />{' '}
+                </Suspense>
+              ) : (
+                <EditorRouting />
+              )}
+            </Box>
+            {/* </EditorErrorBoundary> */}
+          </ThemeProvider>
+        </Box>
 
-          {!showFullScreen ? <Sidebar /> : null}
-        </Flex>
-      </DndProvider>
+        {!showFullScreen ? <Sidebar /> : null}
+      </Flex>
     </Box>
   )
 }

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

@@ -0,0 +1,61 @@
+import template from '@babel/template'
+import * as t from '@babel/types'
+import union from 'lodash/union'
+
+import { getComponentId } from './utils/babel-plugin-utils'
+
+export interface IComponentIds {
+  [type: string]: string
+}
+
+const addComponentPlugin = (
+  _: any,
+  options: {
+    parentId: string
+    componentsToImport: string[]
+    componentCode: string
+  },
+) => {
+  const { componentCode, parentId, componentsToImport } = options
+
+  return {
+    visitor: {
+      ImportDeclaration(path: any) {
+        if (path.node.source.value !== '@chakra-ui/core') return
+
+        const importedComponents = path.node.specifiers.map(
+          (specifier: any) => specifier.local.name,
+        )
+
+        const components = union(importedComponents, componentsToImport)
+
+        path.node.specifiers = components.map(component =>
+          t.importSpecifier(t.identifier(component), t.identifier(component)),
+        )
+      },
+      JSXElement(path: any) {
+        const openingElement = path.node.openingElement
+
+        const visitedComponentId = getComponentId(openingElement)
+        if (visitedComponentId && visitedComponentId === parentId) {
+          // Change the JSX element in the string to node template
+          const node = template.ast(componentCode, {
+            plugins: ['jsx'],
+          }).expression
+
+          const newLineText = t.jsxText('\n')
+
+          // Add to the children of the parent component
+          if (path.node.children.length > 0) {
+            path.node.children.push(node)
+            path.node.children.push(newLineText)
+          } else {
+            path.node.children = [newLineText, node, newLineText]
+          }
+        }
+      },
+    },
+  }
+}
+
+export default addComponentPlugin

src/babel-plugins/add-custom-component-plugin.ts

@@ -0,0 +1,101 @@
+import { getComponentId } from './utils/babel-plugin-utils'
+import template from '@babel/template'
+import * as t from '@babel/types'
+import checkIsComponentId from '../utils/checkIsComponentId'
+
+const addCustomComponentPlugin = (
+  _: any,
+  options: {
+    componentId: string
+    parentId: string
+    type: string
+    defaultProps: IProp[]
+    isContainerComponent: boolean
+  },
+) => {
+  const {
+    componentId,
+    parentId,
+    type,
+    defaultProps,
+    isContainerComponent,
+  } = options
+
+  // If the value of the prop is a component-id, then the box component should be added.
+  // or else its respective value will be added.
+  const defaultPropsProvider = () => {
+    return defaultProps
+      .filter(prop => prop.name !== 'children')
+      .map(prop => {
+        if (checkIsComponentId(prop.value)) {
+          return `${prop.name}={<Box compId="${prop.value}"></Box>}`
+        } else {
+          return `${prop.name}="${prop.value}"`
+        }
+      })
+      .join(' ')
+  }
+
+  const buildImportDeclaration = (name: string) =>
+    t.importDeclaration(
+      [t.importDefaultSpecifier(t.identifier(name))],
+      t.stringLiteral(`./components/${name}.js`),
+    )
+
+  return {
+    visitor: {
+      Program(path: any) {
+        const importDeclarations = path.node.body.filter(
+          (declaration: any) => declaration.type === 'ImportDeclaration',
+        )
+
+        const isComponentImported =
+          importDeclarations.findIndex(
+            (declaration: any) =>
+              declaration.source.value === `./components/${type}.js`,
+          ) !== -1
+
+        if (isComponentImported) return
+
+        path.node.body.splice(
+          importDeclarations.length,
+          0,
+          buildImportDeclaration(type),
+        )
+      },
+      JSXElement(path: any) {
+        const openingElement = path.node.openingElement
+
+        const visitedComponentId = getComponentId(openingElement)
+        if (visitedComponentId && visitedComponentId === parentId) {
+          let component: string = ``
+
+          // If the component is container component, the element will be <Card></Card>
+          // If the component is not a container component, the element will be <Card />
+
+          if (isContainerComponent) {
+            component = `<${type} compId="${componentId}" ${defaultPropsProvider()}></${type}>`
+          } else {
+            component = `<${type} compId="${componentId}" ${defaultPropsProvider()}/>`
+          }
+
+          // Change the JSX element in the string to node template
+          const node = template.ast(component, {
+            plugins: ['jsx'],
+          }).expression
+          const newLineText = t.jsxText('\n')
+
+          // Add to the children of the parent component
+          if (path.node.children.length > 0) {
+            path.node.children.push(node)
+            path.node.children.push(newLineText)
+          } else {
+            path.node.children = [newLineText, node, newLineText]
+          }
+        }
+      },
+    },
+  }
+}
+
+export default addCustomComponentPlugin

src/babel-plugins/add-prop-in-all-instances.ts

@@ -0,0 +1,44 @@
+import * as t from '@babel/types'
+import { toJsxAttribute, getJSXElement } from './utils/babel-plugin-utils'
+
+const addPropInAllInstances = (
+  _: any,
+  options: {
+    propName: string
+    propValue: string
+    componentName: string
+    boxId?: string
+  },
+) => {
+  // If the prop boxId is present, then it denotes that children prop is exposed.
+  // And the custom prop will hold jsx element
+  // For example : <Layout top={<Box><Text>Hello world</Text></Box>} bottom={<Box><Button>Click me</Button></Box>}/>
+  const { propName, propValue, componentName, boxId } = options
+
+  return {
+    visitor: {
+      JSXOpeningElement(path: any) {
+        const visitedComponentName = path.node.name.name
+
+        if (visitedComponentName === componentName) {
+          if (boxId) {
+            const boxComponent = `<Box compId="${boxId}"></Box>`
+
+            const element = getJSXElement(boxComponent)
+
+            const jsxAttribute = t.jsxAttribute(
+              t.jsxIdentifier(propName),
+              t.jsxExpressionContainer(element),
+            )
+            path.node.attributes.push(jsxAttribute)
+          } else {
+            const jsxAttribute = toJsxAttribute(propName, propValue)
+            path.node.attributes.push(jsxAttribute)
+          }
+        } else return
+      },
+    },
+  }
+}
+
+export default addPropInAllInstances