Components can only be edited in builder mode

Codebrahma · Dec 14, 2020 · c93a71a · c93a71a
1 parent 8e35af1
commit c93a71a
Show file tree

Hide file tree

Showing 7 changed files with 144 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "react-hotkeys-hook": "^2.2.2",
     "react-icons": "^3.9.0",
     "react-json-tree": "^0.11.2",
+    "react-live": "^2.2.3",
     "react-redux": "^7.1.3",
     "react-responsive-combo-box": "^1.2.4",
     "react-scripts": "3.4.0",

diff --git a/src/App.tsx b/src/App.tsx
@@ -57,12 +57,7 @@ const App = () => {
             <ThemeProvider theme={theme}>
               {/* <EditorErrorBoundary> */}
 
-              <Box
-                bg="white"
-                height={!showFullScreen ? 'calc(100vh - 3rem)' : '100vh'}
-              >
-                {showCode ? <CodePanel /> : <Editor />}
-              </Box>
+              {showCode ? <CodePanel /> : <Editor />}
               {/* </EditorErrorBoundary> */}
             </ThemeProvider>
           </Box>

diff --git a/src/babel-plugins/remove-imports-plugin.ts b/src/babel-plugins/remove-imports-plugin.ts
@@ -0,0 +1,11 @@
+const removeImportsPlugin = () => {
+  return {
+    visitor: {
+      ImportDeclaration(path: any) {
+        path.remove()
+      },
+    },
+  }
+}
+
+export default removeImportsPlugin
diff --git a/src/babel-queries/queries.ts b/src/babel-queries/queries.ts
@@ -12,6 +12,7 @@ import BabelAddComponentImports from '../babel-plugins/add-imports-plugin'
 import BabelMoveComponent from '../babel-plugins/move-component-plugin'
 import BabelSaveComponent from '../babel-plugins/save-component-plugin'
 import BabelAddCustomComponent from '../babel-plugins/add-custom-component-plugin'
+import BabelRemoveImports from '../babel-plugins/remove-imports-plugin'
 
 const getComponentsState = (code: string) => {
   const plugin = new BabelPluginGetComponents()
@@ -119,6 +120,12 @@ const addCustomComponent = (
   }).code
 }
 
+const removeImports = (code: string) => {
+  return transform(code, {
+    plugins: [babelPluginSyntaxJsx, BabelRemoveImports],
+  }).code
+}
+
 export default {
   getComponentsState,
   setProp,
@@ -132,4 +139,5 @@ export default {
   moveComponent,
   saveComponent,
   addCustomComponent,
+  removeImports,
 }
diff --git a/src/components/editor/Editor.tsx b/src/components/editor/Editor.tsx
@@ -1,5 +1,7 @@
 import React, { memo } from 'react'
 import { Box, Text } from '@chakra-ui/core'
+import * as chakraComponent from '@chakra-ui/core'
+import { LiveProvider, LivePreview, LiveError } from 'react-live'
 import ComponentPreview from './ComponentPreview'
 import { useDropComponent } from '../../hooks/useDropComponent'
 import { useSelector } from 'react-redux'
@@ -9,8 +11,10 @@ import {
   getPropsBy,
   getShowCustomComponentPage,
 } from '../../core/selectors/components'
-import { getShowLayout } from '../../core/selectors/app'
+import { getShowLayout, getShowFullScreen } from '../../core/selectors/app'
 import generatePropsKeyValue from '../../utils/generatePropsKeyValue'
+import { getCode } from '../../core/selectors/code'
+import babelQueries from '../../babel-queries/queries'
 
 export const gridStyles = {
   backgroundImage:
@@ -19,46 +23,41 @@ export const gridStyles = {
 }
 
 const Editor: React.FC = () => {
-  const showLayout = useSelector(getShowLayout)
+  const isBuilderMode = useSelector(getShowLayout)
   const dispatch = useDispatch()
 
   const { drop } = useDropComponent('root')
   const children = useSelector(getChildrenBy('root'))
   const isEmpty = !children.length
   const rootProps = useSelector(getPropsBy('root'))
   const isComponentsCreationPage = useSelector(getShowCustomComponentPage)
+  const showFullScreen = useSelector(getShowFullScreen)
 
-  let editorBackgroundProps = {}
+  const scope = { ...chakraComponent, React }
+  const code = useSelector(getCode)
+
+  // React-live does not support import statements
+  const codeWithoutImports = babelQueries.removeImports(code)
 
   const onSelectBackground = () => {
     dispatch.components.unselect()
   }
-
-  if (showLayout) {
-    editorBackgroundProps = gridStyles
-  }
-
-  editorBackgroundProps = {
-    ...editorBackgroundProps,
+  let editorBackgroundProps = {
+    height: '100%',
+    minWidth: '10rem',
+    width: '100%',
+    display: isEmpty ? 'flex' : 'block',
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'auto',
+    position: 'relative',
+    flexDirection: 'column',
+    onClick: onSelectBackground,
     ...generatePropsKeyValue(rootProps),
   }
 
-  return (
-    <Box
-      bg="white"
-      {...editorBackgroundProps}
-      height="100%"
-      minWidth="10rem"
-      width="100%"
-      display={isEmpty ? 'flex' : 'block'}
-      justifyContent="center"
-      alignItems="center"
-      overflow="auto"
-      ref={drop}
-      position="relative"
-      flexDirection="column"
-      onClick={onSelectBackground}
-    >
+  const EditorPreview = (
+    <Box ref={drop} {...editorBackgroundProps} {...gridStyles}>
       {isEmpty && (
         <Text maxWidth="md" color="gray.400" fontSize="xl" textAlign="center">
           {isComponentsCreationPage
@@ -72,6 +71,25 @@ const Editor: React.FC = () => {
       ))}
     </Box>
   )
+
+  const OnlyPreview = (
+    <Box {...editorBackgroundProps}>
+      <LiveProvider
+        code={codeWithoutImports + `\n render(<App />)`}
+        scope={scope}
+        noInline={true}
+      >
+        <LivePreview />
+        <LiveError />
+      </LiveProvider>
+    </Box>
+  )
+
+  return (
+    <Box height={!showFullScreen ? 'calc(100vh - 3rem)' : '100vh'}>
+      {isBuilderMode ? EditorPreview : OnlyPreview}
+    </Box>
+  )
 }
 
 export default memo(Editor)
diff --git a/src/core/models/code.ts b/src/core/models/code.ts
@@ -15,8 +15,6 @@ const App = () => {
     </ChakraProvider>
   )
 }
-
-export default App
 `
 
 const INITIAL_CODE = {

diff --git a/yarn.lock b/yarn.lock
@@ -3918,6 +3918,18 @@ [email protected]:
   dependencies:
     node-int64 "^0.4.0"
 
+[email protected]:
+  version "0.19.6"
+  resolved "https://registry.yarnpkg.com/buble/-/buble-0.19.6.tgz#915909b6bd5b11ee03b1c885ec914a8b974d34d3"
+  integrity sha512-9kViM6nJA1Q548Jrd06x0geh+BG2ru2+RMDkIHHgJY/8AcyCs34lTHwra9BX7YdPrZXd5aarkpr/SY8bmPgPdg==
+  dependencies:
+    chalk "^2.4.1"
+    magic-string "^0.25.1"
+    minimist "^1.2.0"
+    os-homedir "^1.0.1"
+    regexpu-core "^4.2.0"
+    vlq "^1.0.0"
+
 buffer-alloc-unsafe@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
@@ -4599,6 +4611,16 @@ component-emitter@^1.2.1:
   resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
   integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
 
+[email protected]:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/component-props/-/component-props-1.1.1.tgz#f9b7df9b9927b6e6d97c9bd272aa867670f34944"
+  integrity sha1-+bffm5kntubZfJvScqqGdnDzSUQ=
+
+[email protected]:
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/component-xor/-/component-xor-0.0.4.tgz#c55d83ccc1b94cd5089a4e93fa7891c7263e59aa"
+  integrity sha1-xV2DzMG5TNUImk6T+niRxyY+Wao=
+
 [email protected]:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/compose-function/-/compose-function-3.0.3.tgz#9ed675f13cc54501d30950a486ff6a7ba3ab185f"
@@ -4774,6 +4796,11 @@ core-js@^2.4.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
+core-js@^2.4.1:
+  version "2.6.12"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
+  integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
+
 core-js@^3.5.0:
   version "3.6.5"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
@@ -5526,6 +5553,14 @@ dom-helpers@^5.0.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
+dom-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/dom-iterator/-/dom-iterator-1.0.0.tgz#9c09899846ec41c2d257adc4d6015e4759ef05ad"
+  integrity sha512-7dsMOQI07EMU98gQM8NSB3GsAiIeBYIPKpnxR3c9xOvdvBjChAcOM0iJ222I3p5xyiZO9e5oggkNaCusuTdYig==
+  dependencies:
+    component-props "1.1.1"
+    component-xor "0.0.4"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -9152,6 +9187,13 @@ lz-string@^1.4.4:
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
   integrity sha1-wNjq82BZ9wV5bh40SBHPTEmNOiY=
 
+magic-string@^0.25.1:
+  version "0.25.7"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"
+  integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  dependencies:
+    sourcemap-codec "^1.4.4"
+
 make-dir@^1.0.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-1.3.0.tgz#79c1033b80515bd6d24ec9933e860ca75ee27f0c"
@@ -11322,7 +11364,7 @@ pretty-quick@^2.0.1:
     mri "^1.1.4"
     multimatch "^4.0.0"
 
-prism-react-renderer@^1.0.2:
+prism-react-renderer@^1.0.1, prism-react-renderer@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/prism-react-renderer/-/prism-react-renderer-1.1.1.tgz#1c1be61b1eb9446a146ca7a50b7bcf36f2a70a44"
   integrity sha512-MgMhSdHuHymNRqD6KM3eGS0PNqgK9q4QF5P0yoQQvpB6jNjeSAi3jcSAz0Sua/t9fa4xDOMar9HJbLa08gl9ug==
@@ -11900,6 +11942,19 @@ react-json-tree@^0.11.2:
     prop-types "^15.5.8"
     react-base16-styling "^0.5.1"
 
+react-live@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/react-live/-/react-live-2.2.3.tgz#260f99194213799f0005e473e7a4154c699d6a7c"
+  integrity sha512-tpKruvfytNETuzO3o1mrQUj180GVrq35IE8F5gH1NJVPt4szYCx83/dOSCOyjgRhhc3gQvl0pQ3k/CjOjwJkKQ==
+  dependencies:
+    buble "0.19.6"
+    core-js "^2.4.1"
+    dom-iterator "^1.0.0"
+    prism-react-renderer "^1.0.1"
+    prop-types "^15.5.8"
+    react-simple-code-editor "^0.10.0"
+    unescape "^1.0.1"
+
 react-redux@^7.1.3:
   version "7.2.1"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.1.tgz#8dedf784901014db2feca1ab633864dee68ad985"
@@ -12000,6 +12055,11 @@ [email protected]:
   optionalDependencies:
     fsevents "2.1.2"
 
+react-simple-code-editor@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.10.0.tgz#73e7ac550a928069715482aeb33ccba36efe2373"
+  integrity sha512-bL5W5mAxSW6+cLwqqVWY47Silqgy2DKDTR4hDBrLrUqC5BXc29YVx17l2IZk5v36VcDEq1Bszu2oHm1qBwKqBA==
+
 react-style-singleton@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4"
@@ -12235,7 +12295,7 @@ regexpp@^3.0.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.1.0.tgz#206d0ad0a5648cffbdb8ae46438f3dc51c9f78e2"
   integrity sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==
 
-regexpu-core@^4.7.1:
+regexpu-core@^4.2.0, regexpu-core@^4.7.1:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.1.tgz#2dea5a9a07233298fbf0db91fa9abc4c6e0f8ad6"
   integrity sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==
@@ -13065,6 +13125,11 @@ source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
+sourcemap-codec@^1.4.4:
+  version "1.4.8"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
+  integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
+
 spdx-correct@^3.0.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-3.1.1.tgz#dece81ac9c1e6713e5f7d1b6f17d468fa53d89a9"
@@ -13926,6 +13991,13 @@ underscore@~1.10.2:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.10.2.tgz#73d6aa3668f3188e4adb0f1943bd12cfd7efaaaf"
   integrity sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg==
 
+unescape@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/unescape/-/unescape-1.0.1.tgz#956e430f61cad8a4d57d82c518f5e6cc5d0dda96"
+  integrity sha512-O0+af1Gs50lyH1nUu3ZyYS1cRh01Q/kUKatTOkSs7jukXE6/NebucDVxyiDsA9AQ4JC1V1jUH9EO8JX2nMDgGQ==
+  dependencies:
+    extend-shallow "^2.0.1"
+
 unicode-canonical-property-names-ecmascript@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz#2619800c4c825800efdd8343af7dd9933cbe2818"
@@ -14192,6 +14264,11 @@ [email protected]:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vlq@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-1.0.1.tgz#c003f6e7c0b4c1edd623fd6ee50bbc0d6a1de468"
+  integrity sha512-gQpnTgkubC6hQgdIcRdYGDSDc+SaujOdyesZQMv6JlfQee/9Mp0Qhnys6WxDWvQnL5WZdT7o2Ul187aSt0Rq+w==
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"