chore: using vite

elliothux · elliothux · commit 9f89143b077c · 2022-06-01T18:43:56.000+08:00
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "@sentry/react": "^6.5.0",
     "@sentry/tracing": "^6.5.0",
     "@udecode/slate-plugins": "^1.0.0-alpha.25",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
     "@vize/richtext-editor": "^0.1.5",
     "@vize/runtime-web": "^0.1.2",
     "@vize/types": "^0.1.15",
@@ -72,6 +73,8 @@
     "styled-components": "^5.1.1",
     "throttle-debounce": "^2.1.0",
     "tinycolor2": "^1.4.1",
+    "vite": "^2.9.9",
+    "vite-tsconfig-paths": "^3.5.0",
     "wouter": "^2.5.3"
   },
   "devDependencies": {
@@ -124,7 +127,7 @@
     "sass": "^1.32.12",
     "sass-loader": "^8.0.2",
     "typedoc": "^0.20.35",
-    "typescript": "^4.2.4",
+    "typescript": "4.3.5",
     "vuepress": "^1.8.0",
     "vuepress-plugin-code-copy": "^1.0.6",
     "vuepress-plugin-code-switcher": "^1.1.0",
diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta charset="utf-8" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
+    <link rel="icon" type="image/x-icon" sizes="16x16 32x32" href="/favicon.ico" />
+    <link rel="icon" sizes="192x192" href="/favicon-192.png" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon-180-precomposed.png" />
+    <title>Vize</title>
+  </head>
+
+  <body>
+    <div id="main-entry"><!-- HTML_PLACEHOLDER --></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/packages/editor/package.js b/packages/editor/package.js
diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -3,8 +3,9 @@
   "version": "0.1.9",
   "main": "package.js",
   "scripts": {
-    "start": "SKIP_PREFLIGHT_CHECK=true PORT=3000 ../../node_modules/.bin/react-app-rewired start --max-old-space-size=12288",
-    "build": "rm -r ./build; SKIP_PREFLIGHT_CHECK=true NODE_ENV=production ../../node_modules/.bin/react-app-rewired build --max-old-space-size=12288",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview",
     "publish": "npm publish --access public"
   },
   "browserslist": {
diff --git a/packages/editor/public/index.html b/packages/editor/public/index.html
diff --git a/packages/editor/src/components/AttributesEditor/ChildrenComponentsEdit/index.scss b/packages/editor/src/components/AttributesEditor/ChildrenComponentsEdit/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .editor-prop-edit-children {
   & > p {
diff --git a/packages/editor/src/components/AttributesEditor/DataAttrsEdit/index.scss b/packages/editor/src/components/AttributesEditor/DataAttrsEdit/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .editor-prop-edit-data {
   &.global {
diff --git a/packages/editor/src/components/AttributesEditor/EventAttrForm/EventInstances/index.scss b/packages/editor/src/components/AttributesEditor/EventAttrForm/EventInstances/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .event_instances {
   margin-top: 32px;
diff --git a/packages/editor/src/components/AttributesEditor/StyleAttrsEdit/CommonStyleForm/DistanceForm/index.scss b/packages/editor/src/components/AttributesEditor/StyleAttrsEdit/CommonStyleForm/DistanceForm/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 $border-color: #666;
 $border-active-color: black;
diff --git a/packages/editor/src/components/AttributesEditor/StyleAttrsEdit/CommonStyleForm/index.scss b/packages/editor/src/components/AttributesEditor/StyleAttrsEdit/CommonStyleForm/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .ant-collapse-content-box .ant-collapse-item {
   &:last-child {
diff --git a/packages/editor/src/components/AttributesEditor/StyleAttrsEdit/index.scss b/packages/editor/src/components/AttributesEditor/StyleAttrsEdit/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .editor-prop-edit-style {
   &.component {
diff --git a/packages/editor/src/components/AttributesEditor/index.scss b/packages/editor/src/components/AttributesEditor/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 $prop-edit-width: 326px;
 
 .vize-attributes-editor {
diff --git a/packages/editor/src/components/ComponentItem/index.iframe.scss b/packages/editor/src/components/ComponentItem/index.iframe.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 @import '../HotAreaItem/index';
 
 .vize-component-item {
diff --git a/packages/editor/src/components/ContextMenu/index.scss b/packages/editor/src/components/ContextMenu/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .react-contexify {
   border-radius: 2px;
diff --git a/packages/editor/src/components/Header/OperationBar/Resize/index.scss b/packages/editor/src/components/Header/OperationBar/Resize/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .editor-resize {
   position: relative;
diff --git a/packages/editor/src/components/Header/index.scss b/packages/editor/src/components/Header/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .main-header {
   background: white;
diff --git a/packages/editor/src/components/HotAreaManager/index.scss b/packages/editor/src/components/HotAreaManager/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .hot-area-manager {
   position: relative;
diff --git a/packages/editor/src/components/MaterialsView/InstancesView/MaterialsTree/index.scss b/packages/editor/src/components/MaterialsView/InstancesView/MaterialsTree/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .vize-materials-tree {
   margin-bottom: 32px;
diff --git a/packages/editor/src/components/MaterialsView/MaterialsLibrary/index.scss b/packages/editor/src/components/MaterialsView/MaterialsLibrary/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .vize-components-library,
 .vize-plugins-library {
diff --git a/packages/editor/src/components/MaterialsView/index.scss b/packages/editor/src/components/MaterialsView/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .vize-materials-view {
   background-color: white;
diff --git a/packages/editor/src/components/Renderer/index.iframe.scss b/packages/editor/src/components/Renderer/index.iframe.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 * {
   @include hide-scroll-bar;
diff --git a/packages/editor/src/components/ResourceManager/index.scss b/packages/editor/src/components/ResourceManager/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .vize-resource-manager {
   .ant-modal-close-x {
diff --git a/packages/editor/src/components/ResourceManager/list/index.scss b/packages/editor/src/components/ResourceManager/list/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .resources-items {
   display: flex;
diff --git a/packages/editor/src/components/Simulator/index.scss b/packages/editor/src/components/Simulator/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .vize-simulator-container {
   height: calc(100vh - 50px);
diff --git a/packages/editor/src/main.tsx b/packages/editor/src/main.tsx
diff --git a/packages/editor/src/styles/common.scss b/packages/editor/src/styles/common.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .editor-materials-tab,
 .editor-prop-editor-tab {
diff --git a/packages/editor/src/widgets/Form/Fields/Color/index.scss b/packages/editor/src/widgets/Form/Fields/Color/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .form-color-picker {
   position: relative;
diff --git a/packages/editor/src/widgets/Form/Fields/Image/index.scss b/packages/editor/src/widgets/Form/Fields/Image/index.scss
@@ -1,4 +1,4 @@
-@import 'styles/helper';
+@import 'src/styles/helper';
 
 .form-image-picker {
   width: 100%;
diff --git a/packages/editor/src/widgets/Form/Fields/index.ts b/packages/editor/src/widgets/Form/Fields/index.ts
@@ -1,5 +1,5 @@
 import { ComponentType, memo } from 'react';
-import { withDynamicImport } from 'widgets/WithDynamicImport';
+// import { withDynamicImport } from 'widgets/WithDynamicImport';
 import { FormProps } from '../types';
 import { updateSchemaField } from '../SchemaForm/fields';
 import { Color } from './Color';
@@ -10,7 +10,7 @@ export type FormFieldComponent<T = any> = ComponentType<FormProps<T>>;
 export const fieldWidgets = {
   Color: memo(Color),
   Image: memo(Image),
-  RichText: memo(withDynamicImport(() => import('./RichText'), 'RichText')),
+  // RichText: memo(withDynamicImport(() => import('./RichText'), 'RichText')),
 };
 
 export function registerFormFieldWidgets(widgetsMap: { [type: string]: FormFieldComponent }) {
diff --git a/packages/editor/vite.config.ts b/packages/editor/vite.config.ts
@@ -0,0 +1,23 @@
+import reactRefresh from '@vitejs/plugin-react-refresh';
+import { defineConfig } from 'vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh(), tsconfigPaths()],
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+  },
+  resolve: {
+    alias: [{ find: /^~/, replacement: '' }],
+  },
+  build: {
+    chunkSizeWarningLimit: 2048,
+    sourcemap: true,
+    minify: false,
+  },
+});
diff --git a/packages/types/src/form.ts b/packages/types/src/form.ts
@@ -1,5 +1,5 @@
 import { ComponentType } from 'react';
-import { createSchemaField } from '@formily/react/esm/components/SchemaFieid';
+import { createSchemaField } from '@formily/react';
 import { JsonSchemaProperties } from './schema';
 
 export interface SchemaFormProps<T extends object = object> {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/scripts/link_packages.js b/scripts/link_packages.js

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-@import 'styles/helper';`
	`1`	`+@import 'src/styles/helper';`
`2`	`2`
`3`	`3`	`.editor-prop-edit-children {`
`4`	`4`	`& > p {`