Update

renderer/next.config.js

@@ -1,31 +1,27 @@
 const withCSS = require('@zeit/next-css')
 const withLess = require('@zeit/next-less')
 
-module.exports = withCSS(
-  withLess({
-    webpack(config) {
-      config.module.rules.forEach(rule => {
-        if (Array.isArray(rule.use)) {
-          rule.use.forEach(u => {
-            if (u.loader === 'css-loader' && u.options) {
-              delete u.options.minimize
-            }
-          })
-        }
-      })
+module.exports = withLess({
+  lessLoaderOptions: {
+    javascriptEnabled: true
+  },
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.css$/,
+      use: ['style-loader', 'css-loader']
+    })
 
-      return Object.assign(config, {
-        target: 'electron-renderer',
-        devtool: 'cheap-module-source-map',
-        plugins: config.plugins.filter(p => {
-          return p.constructor.name !== 'UglifyJsPlugin'
-        })
+    return Object.assign(config, {
+      target: 'electron-renderer',
+      devtool: 'cheap-module-source-map',
+      plugins: config.plugins.filter(p => {
+        return p.constructor.name !== 'UglifyJsPlugin'
       })
-    },
-    exportPathMap() {
-      return {
-        '/main': { page: '/main' }
-      }
+    })
+  },
+  exportPathMap() {
+    return {
+      '/main': { page: '/main' }
     }
-  })
-)
+  }
+})

renderer/pages/_app.tsx

@@ -1,19 +1,19 @@
 import App from 'next/app'
-import 'antd/dist/antd.css'
+import 'antd/dist/antd.less'
 
 export default class IMApp extends App {
-	componentDidCatch(error: any, errorInfo: any) {
-		// This is needed to render errors correctly in development / production
-		// todo
-		// super.componentDidCatch(error, errorInfo)
-	}
+  componentDidCatch(error: any, errorInfo: any) {
+    // This is needed to render errors correctly in development / production
+    // todo
+    // super.componentDidCatch(error, errorInfo)
+  }
 
-	componentDidMount() {
-		console.log('app componentDidMount')
-	}
+  componentDidMount() {
+    console.log('app componentDidMount')
+  }
 
-	render() {
-		const { Component, pageProps } = this.props
-		return <Component {...pageProps} />
-	}
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
 }

renderer/pages/main/Editor/LeftPanel/Hover/index.tsx

@@ -1,5 +1,5 @@
 import uuid from 'uuid'
-import { useState } from 'react'
+import { useState, useRef, useEffect } from 'react'
 import store from '../../store/editorStore'
 import useSubscribe from '../../../../../hooks/useSubscribe'
 import classnames from 'classnames'
@@ -11,8 +11,13 @@ interface Hover {
 
 export default function Hover(props) {
   const [editorStoreState] = useSubscribe(store)
+  const ref = useRef(props.children)
   const { uuid: key } = props
 
+  useEffect(() => {
+    console.log(ref.current)
+  }, [])
+
   function onClick() {
     store.setIndex('0')
     store.setComponentKey(key)

renderer/pages/main/Editor/LeftPanel/MonacoEditor.tsx

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import MonacoEditor from 'react-monaco-editor'
+
+export default props => (
+  <MonacoEditor
+    width={500}
+    height={200}
+    language='javascript'
+    theme='vs-dark'
+    value=''
+    options={{ selectOnLineNumbers: true }}
+    onChange={() => null}
+    editorDidMount={() => null}
+    {...props}
+  />
+)

renderer/pages/main/Editor/LeftPanel/index.tsx

@@ -5,11 +5,10 @@ import Hover from './Hover'
 import editorStore from '../store/editorStore'
 import uuid from 'uuid'
 import useSubscribe from '../../../../hooks/useSubscribe'
-import MonacoEditor from 'react-monaco-editor'
-import dynamic from 'next/dynamic'
 import './index.less'
+// import MonacoEditor from './MonacoEditor'
 
-function RightPanel() {
+function LeftPanel() {
   const [components, setComponents] = useState([])
   const [editorState] = useSubscribe(editorStore)
   const [collectedProps, drop] = useDrop({
@@ -58,18 +57,8 @@ function RightPanel() {
   return (
     <div className='LeftPanel' ref={drop}>
       {components}
-      {/* <MonacoEditor
-        language='javascript'
-        theme='vs-dark'
-        value={'todo'}
-        options={{
-          selectOnLineNumbers: true
-        }}
-      /> */}
     </div>
   )
 }
 
-export default dynamic(() => Promise.resolve(RightPanel), {
-  ssr: false
-})
+export default LeftPanel

renderer/pages/main/index.tsx

@@ -53,11 +53,11 @@ class LayoutComponent extends React.Component {
             mode='inline'>
             <Menu.Item key='1'>
               <Icon type='message' />
-              <span>编辑</span>
+              <span>Editor</span>
             </Menu.Item>
             <Menu.Item key='5'>
               <Icon type='setting' />
-              <span>设置</span>
+              <span>Setting</span>
             </Menu.Item>
           </Menu>
         </Sider>

renderer/tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -18,12 +14,6 @@
     "isolatedModules": true,
     "jsx": "preserve"
   },
-  "exclude": [
-    "node_modules"
-  ],
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ]
+  "exclude": ["node_modules"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
 }