From dcfef5ddb6ab123e6ad4d33bbcab3e2fe555d31f Mon Sep 17 00:00:00 2001 From: liaoxuezhi <2betop.cn@gmail.com> Date: Wed, 1 Jun 2022 21:35:49 +0800 Subject: [PATCH] =?UTF-8?q?=E8=AE=A9=E7=A4=BA=E4=BE=8B=E5=8F=AF=E4=BB=A5?= =?UTF-8?q?=E8=B7=91=E8=B5=B7=E6=9D=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/components/App.tsx | 4 +- examples/components/Doc.tsx | 2 +- examples/components/ECharts.tsx | 2 +- examples/components/Editor.jsx | 6 +- examples/components/Example.jsx | 3 - examples/components/Form/Custom.jsx | 2 +- examples/components/Form/Schem.jsx | 2 +- examples/components/MdRenderer.jsx | 9 +- examples/components/Play.jsx | 12 +- examples/components/SchemaRender.jsx | 8 +- examples/embed.tsx | 8 +- examples/index.html | 128 +++++++++--------- examples/mobile.jsx | 2 +- examples/style.scss | 6 +- package.json | 16 +++ packages/amis-core/package.json | 4 +- packages/amis-core/src/Root.tsx | 1 + packages/amis-core/src/index.tsx | 6 +- packages/amis-core/src/theme.tsx | 4 +- .../amis-core/src/utils/attachmentAdpator.ts | 4 +- packages/amis-core/src/utils/helper.ts | 2 +- packages/amis-core/src/utils/index.ts | 64 ++++++--- packages/amis-core/src/utils/markdown.ts | 12 +- packages/amis-core/src/utils/position.ts | 7 +- packages/amis-ui/package.json | 6 + packages/amis-ui/rollup.config.js | 83 +++++++++--- packages/amis-ui/scss/_thirds.scss | 12 +- 27 files changed, 249 insertions(+), 166 deletions(-) diff --git a/examples/components/App.tsx b/examples/components/App.tsx index 263d94252..718cd767d 100644 --- a/examples/components/App.tsx +++ b/examples/components/App.tsx @@ -11,8 +11,8 @@ import { Select, InputBox } from 'amis'; -import {eachTree, mapTree} from 'amis/lib/utils/helper'; -import 'amis/lib/locale/en-US'; +import {eachTree, mapTree} from 'amis-core'; +import 'amis-ui/lib/locale/en-US'; import {withRouter} from 'react-router'; import DocSearch from './DocSearch'; import Doc from './Doc'; diff --git a/examples/components/Doc.tsx b/examples/components/Doc.tsx index 102d9ac69..53fd66a10 100644 --- a/examples/components/Doc.tsx +++ b/examples/components/Doc.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Switch} from 'react-router-dom'; -import {flattenTree, filterTree, mapTree} from 'amis/lib/utils/helper'; +import {flattenTree, filterTree, mapTree} from 'amis-core'; import {navigations2route} from './App'; import DocNavCN from './DocNavCN'; diff --git a/examples/components/ECharts.tsx b/examples/components/ECharts.tsx index 22ddd1db1..7b2a51c40 100644 --- a/examples/components/ECharts.tsx +++ b/examples/components/ECharts.tsx @@ -7,7 +7,7 @@ import example from './EChartsEditor/Example'; import {lazyData} from './LazyData'; import React from 'react'; -import Spinner from 'amis/lib/components/Spinner'; +import {Spinner} from 'amis-ui'; const LazyComponent = lazyData( async () => diff --git a/examples/components/Editor.jsx b/examples/components/Editor.jsx index 820c1c472..24c4de86d 100644 --- a/examples/components/Editor.jsx +++ b/examples/components/Editor.jsx @@ -1,7 +1,7 @@ import React from 'react'; -import Editor from 'amis/editor/Editor'; -import Switch from 'amis/components/Switch'; -import Button from 'amis/components/Button'; +import {Editor} from 'amis-ui'; +import {Switch} from 'amis-ui'; +import {Button} from 'amis-ui'; import schema from './Form/Test'; import Portal from 'react-overlays/Portal'; diff --git a/examples/components/Example.jsx b/examples/components/Example.jsx index e3f8c699d..44f03389c 100644 --- a/examples/components/Example.jsx +++ b/examples/components/Example.jsx @@ -117,9 +117,6 @@ import Tab1Schema from './Tabs/Tab1'; import Tab2Schema from './Tabs/Tab2'; import Tab3Schema from './Tabs/Tab3'; -import TestComponent from './Test'; - -import {normalizeLink} from 'amis/utils/normalizeLink'; import {Switch} from 'react-router-dom'; import {navigations2route} from './App'; diff --git a/examples/components/Form/Custom.jsx b/examples/components/Form/Custom.jsx index e7f540ca7..9b0be6cf0 100644 --- a/examples/components/Form/Custom.jsx +++ b/examples/components/Form/Custom.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import {FormItem, Renderer} from 'amis'; +import {FormItem, Renderer} from 'amis-core'; @FormItem({ type: 'my-custom' diff --git a/examples/components/Form/Schem.jsx b/examples/components/Form/Schem.jsx index 498442ef9..0e5a4235e 100644 --- a/examples/components/Form/Schem.jsx +++ b/examples/components/Form/Schem.jsx @@ -1,5 +1,5 @@ import React from 'react'; -import TitleBar from 'amis/components/TitleBar'; +import {TitleBar} from 'amis-ui'; import {render} from 'amis'; const Schema = { diff --git a/examples/components/MdRenderer.jsx b/examples/components/MdRenderer.jsx index 7cf4837cf..76f71dee2 100644 --- a/examples/components/MdRenderer.jsx +++ b/examples/components/MdRenderer.jsx @@ -3,12 +3,9 @@ import React from 'react'; import {findDOMNode} from 'react-dom'; import {createRoot} from 'react-dom/client'; import {getTheme, render} from 'amis'; -import axios from 'axios'; -import TitleBar from 'amis/lib/components/TitleBar'; -import LazyComponent from 'amis/lib/components/LazyComponent'; -import Overlay from 'amis/lib/components/Overlay'; -import PopOver from 'amis/lib/components/PopOver'; -import NestedLinks from 'amis/lib/components/AsideNav'; +import {LazyComponent} from 'amis-core'; +import {Overlay} from 'amis-ui'; +import {PopOver} from 'amis-ui'; import classnames from 'classnames'; import {Link} from 'react-router-dom'; import Play from './Play'; diff --git a/examples/components/Play.jsx b/examples/components/Play.jsx index be344ee75..a58584e29 100644 --- a/examples/components/Play.jsx +++ b/examples/components/Play.jsx @@ -1,15 +1,15 @@ import React from 'react'; import {toast, render, makeTranslator} from 'amis'; -import {normalizeLink} from 'amis/lib/utils/normalizeLink'; -import {isMobile} from 'amis/lib/utils/helper'; -import attachmentAdpator from 'amis/lib/utils/attachmentAdpator'; -import {alert, confirm} from 'amis/lib/components/Alert'; +import {normalizeLink} from 'amis-core'; +import {isMobile} from 'amis-core'; +import {attachmentAdpator} from 'amis-core'; +import {alert, confirm} from 'amis-ui'; import axios from 'axios'; import JSON5 from 'json5'; -import CodeEditor from 'amis/lib/components/Editor'; +import {Editor as CodeEditor} from 'amis-ui'; import copy from 'copy-to-clipboard'; import {matchPath} from 'react-router-dom'; -import Drawer from 'amis/lib/components/Drawer'; +import {Drawer} from 'amis-ui'; const DEFAULT_CONTENT = `{ "$schema": "/schemas/page.json#", diff --git a/examples/components/SchemaRender.jsx b/examples/components/SchemaRender.jsx index a649b0562..65f58fe13 100644 --- a/examples/components/SchemaRender.jsx +++ b/examples/components/SchemaRender.jsx @@ -3,16 +3,14 @@ import {render, toast, Button, LazyComponent, Drawer} from 'amis'; import axios from 'axios'; import Portal from 'react-overlays/Portal'; import {toast} from 'amis'; -import {normalizeLink} from 'amis/lib/utils/normalizeLink'; +import {normalizeLink} from 'amis-core'; import {withRouter} from 'react-router'; -import {matchPath} from 'react-router-dom'; import copy from 'copy-to-clipboard'; -import {qsparse} from 'amis/lib/utils/helper'; +import {qsparse} from 'amis-core'; function loadEditor() { return new Promise(resolve => - require(['amis/lib/components/Editor'], component => - resolve(component.default)) + require(['amis-ui'], component => resolve(component.Editor)) ); } diff --git a/examples/embed.tsx b/examples/embed.tsx index 433419144..6b3607fc5 100644 --- a/examples/embed.tsx +++ b/examples/embed.tsx @@ -4,7 +4,7 @@ import {createRoot} from 'react-dom/client'; import axios from 'axios'; import {match} from 'path-to-regexp'; import copy from 'copy-to-clipboard'; -import {normalizeLink} from 'amis/lib/utils/normalizeLink'; +import {normalizeLink} from 'amis-core'; import qs from 'qs'; import { @@ -17,11 +17,11 @@ import { makeTranslator } from 'amis'; -import 'amis/lib/locale/en-US'; +import 'amis-ui/lib/locale/en-US'; import 'history'; -import attachmentAdpator from 'amis/lib/utils/attachmentAdpator'; +import {attachmentAdpator} from 'amis-core'; -import type {ToastLevel, ToastConf} from 'amis/lib/components/Toast'; +import type {ToastLevel, ToastConf} from 'amis-ui/lib/components/Toast'; export function embed( container: string | HTMLElement, diff --git a/examples/index.html b/examples/index.html index 77123d0f9..491551bf6 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,36 +1,31 @@ - - - amis - 低代码前端框架 - - - - - - - - - - - - - - - - - - + + + + - -
- - + - - + /* @require ./index.jsx 标记为同步依赖，提前加载 */ + amis.require(['./index.jsx'], function (app) { + var initialState = {}; + app.bootstrap(document.getElementById('root'), initialState); + }); + + + + \ No newline at end of file diff --git a/examples/mobile.jsx b/examples/mobile.jsx index 8c7573d22..174f310c0 100644 --- a/examples/mobile.jsx +++ b/examples/mobile.jsx @@ -9,7 +9,7 @@ import {createRoot} from 'react-dom/client'; import axios from 'axios'; import copy from 'copy-to-clipboard'; import {toast} from 'amis'; -import 'amis/lib/locale/en-US'; +import 'amis-ui/lib/locale/en-US'; import {render as renderAmis} from 'amis'; diff --git a/examples/style.scss b/examples/style.scss index 5129b9a53..16ee410ba 100644 --- a/examples/style.scss +++ b/examples/style.scss @@ -1,6 +1,6 @@ -@import 'node_modules/amis/scss/mixins'; -@import 'node_modules/amis/scss/functions'; -@import 'node_modules/amis/scss/variables'; +@import 'node_modules/amis-ui/scss/mixins'; +@import 'node_modules/amis-ui/scss/functions'; +@import 'node_modules/amis-ui/scss/variables'; body { background-color: #fff !important; diff --git a/package.json b/package.json index a35d11578..727728857 100644 --- a/package.json +++ b/package.json @@ -9,5 +9,21 @@ "stop": "fis3 server stop", "dev": "fis3 release -cwd ./public", "deploy-gh-page": "sh ./deploy-gh-pages.sh" + }, + "devDependencies": { + "fis-optimizer-terser": "^1.0.1", + "fis-parser-sass": "^1.1.1", + "fis-parser-svgr": "^1.0.0", + "fis3": "^3.4.41", + "fis3-deploy-skip-packed": "0.0.5", + "fis3-hook-commonjs": "^0.1.31", + "fis3-hook-node_modules": "^2.3.1", + "fis3-hook-relative": "^2.0.3", + "fis3-packager-deps-pack": "^0.1.2", + "fis3-parser-typescript": "^1.4.0", + "fis3-postpackager-loader": "^2.1.12", + "fis3-prepackager-stand-alone-pack": "^1.0.0", + "fis3-preprocessor-js-require-css": "^0.1.3", + "fis3-preprocessor-js-require-file": "^0.1.3" } } diff --git a/packages/amis-core/package.json b/packages/amis-core/package.json index f11bcbfb6..f83bdff36 100644 --- a/packages/amis-core/package.json +++ b/packages/amis-core/package.json @@ -55,7 +55,9 @@ "react-dom": "^18.0.0", "react-json-view": "1.21.3", "react-visibility-sensor": "5.1.1", - "tslib": "^2.3.1" + "tslib": "^2.3.1", + "markdown-it": "^12.0.6", + "markdown-it-html5-media": "^0.7.1" }, "jest": { "testEnvironment": "jsdom", diff --git a/packages/amis-core/src/Root.tsx b/packages/amis-core/src/Root.tsx index ee5f70809..ce746e527 100644 --- a/packages/amis-core/src/Root.tsx +++ b/packages/amis-core/src/Root.tsx @@ -146,6 +146,7 @@ export function renderChild( return ( ) { diff --git a/packages/amis-core/src/utils/attachmentAdpator.ts b/packages/amis-core/src/utils/attachmentAdpator.ts index 2389691c6..cc492d25d 100644 --- a/packages/amis-core/src/utils/attachmentAdpator.ts +++ b/packages/amis-core/src/utils/attachmentAdpator.ts @@ -5,7 +5,7 @@ * @returns */ -export default function attachmentAdpator(response: any, __: Function) { +export function attachmentAdpator(response: any, __: Function) { if (response && response.headers && response.headers['content-disposition']) { const disposition = response.headers['content-disposition']; let filename = ''; @@ -88,3 +88,5 @@ export default function attachmentAdpator(response: any, __: Function) { return response; } + +export default attachmentAdpator; diff --git a/packages/amis-core/src/utils/helper.ts b/packages/amis-core/src/utils/helper.ts index 85c22cbef..4e68ce750 100644 --- a/packages/amis-core/src/utils/helper.ts +++ b/packages/amis-core/src/utils/helper.ts @@ -162,7 +162,7 @@ export function findIndex( return -1; } -export function hasOwnProperty( +export function hasOwnPropertyInPath( data: {[propName: string]: any}, key: string ): boolean { diff --git a/packages/amis-core/src/utils/index.ts b/packages/amis-core/src/utils/index.ts index f23a1504c..8c18e2328 100644 --- a/packages/amis-core/src/utils/index.ts +++ b/packages/amis-core/src/utils/index.ts @@ -1,32 +1,54 @@ -export * from './helper'; -export * from './resize-sensor'; export * from './api'; -export * from './tpl'; -export * from './tpl-builtin'; -export * from './DataScope'; -export * from './DataSchema'; -export * from './normalizeOptions'; -export * from './validations'; -export * from './icon'; -export * from './style'; -export * from './RootClose'; -export * from './dom'; +export * from './attachmentAdpator'; +export * from './autobind'; +export * from './ColorScale'; export * from './columnsSplit'; -export * from './highlight'; +export * from './dataMapping'; +export * from './DataSchema'; +export * from './DataScope'; +export * from './date'; +export * from './debug'; +export * from './dom'; +export * from './errors'; +export * from './escapeHtml'; export * from './filter-schema'; -export * from './SimpleMap'; -export * from './optionValueCompare'; +export * from './filter'; +export * from './formatDuration'; +export * from './formula'; +export * from './getVariable'; +export * from './grammar'; +export * from './handleAction'; +export * from './helper'; +export * from './highlight'; +export * from './icon'; export * from './image'; +export * from './isPureVariable'; +export * from './json-schema-2-amis-schema'; +export * from './keyToPath'; +export * from './makeSorter'; +export * from './markdown'; +export * from './normalizeLink'; +export * from './normalizeOptions'; +export * from './object'; export * from './offset'; export * from './offsetParent'; -export * from './ColorScale'; +export * from './optionValueCompare'; +export * from './position'; +export * from './prettyBytes'; export * from './renderer-event'; -export * from './handleAction'; +export * from './replaceText'; +export * from './resize-sensor'; +export * from './resolveVariable'; +export * from './resolveVariableAndFilter'; +export * from './RootClose'; export * from './scrollPosition'; -export * from './formula'; -export * from './grammar'; - -import './debug'; +export * from './SimpleMap'; +export * from './string2regExp'; +export * from './style'; +export * from './tokenize'; +export * from './tpl-builtin'; +export * from './tpl'; +export * from './validations'; import animation from './Animation'; import markdownRender from './markdown'; diff --git a/packages/amis-core/src/utils/markdown.ts b/packages/amis-core/src/utils/markdown.ts index 6c96a3753..a38b8a935 100644 --- a/packages/amis-core/src/utils/markdown.ts +++ b/packages/amis-core/src/utils/markdown.ts @@ -6,13 +6,15 @@ import markdownIt from 'markdown-it'; // @ts-ignore import {html5Media} from 'markdown-it-html5-media'; -const markdown = markdownIt(); +const doMarkdown = markdownIt(); -markdown.use(html5Media); +doMarkdown.use(html5Media); -export default function (content: string, options?: markdownIt.Options) { +export function markdown(content: string, options?: markdownIt.Options) { if (options) { - markdown.set(options); + doMarkdown.set(options); } - return markdown.render(content); + return doMarkdown.render(content); } + +export default markdown; diff --git a/packages/amis-core/src/utils/position.ts b/packages/amis-core/src/utils/position.ts index e45398af1..da5f5862a 100644 --- a/packages/amis-core/src/utils/position.ts +++ b/packages/amis-core/src/utils/position.ts @@ -14,10 +14,7 @@ const nodeName = (node: Element) => * @param node the element * @param offsetParent the offset parent */ -export default function position( - node: HTMLElement, - offsetParent?: HTMLElement -) { +export function position(node: HTMLElement, offsetParent?: HTMLElement) { let parentOffset = {top: 0, left: 0}; let offset; // Fixed elements are offset from window (parentOffset = {top:0, left: 0}, @@ -53,3 +50,5 @@ export default function position( left: offset.left - parentOffset.left - (parseInt(marginLeft, 10) || 0) }; } + +export default position; diff --git a/packages/amis-ui/package.json b/packages/amis-ui/package.json index d09c95ac3..7b6a782c9 100644 --- a/packages/amis-ui/package.json +++ b/packages/amis-ui/package.json @@ -59,17 +59,23 @@ "@rollup/plugin-typescript": "^8.3.2", "@svgr/rollup": "^6.2.1", "@testing-library/jest-dom": "^5.16.4", + "@types/babel__core": "^7.1.19", "@types/jest": "^27.0.2", "@types/react": "^17.0.39", "@types/react-dom": "^17.0.11", + "autoprefixer": "^10.4.7", "jest": "^27.2.1", "moment-timezone": "^0.5.34", + "postcss-import": "^14.1.0", "react": "^18.0.0", "react-dom": "^18.0.0", "rimraf": "^3.0.2", "rollup": "^2.73.0", "rollup-plugin-auto-external": "^2.0.0", "rollup-plugin-license": "^2.7.0", + "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-scss": "^3.0.0", + "sass": "^1.52.1", "typescript": "^4.6.4" } } diff --git a/packages/amis-ui/rollup.config.js b/packages/amis-ui/rollup.config.js index 46fcba217..a0367cb68 100644 --- a/packages/amis-ui/rollup.config.js +++ b/packages/amis-ui/rollup.config.js @@ -5,6 +5,11 @@ import resolve from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; import license from 'rollup-plugin-license'; import autoExternal from 'rollup-plugin-auto-external'; +import sass from 'sass'; +import postcss from 'rollup-plugin-postcss'; +import postcssImport from 'postcss-import'; +import autoprefixer from 'autoprefixer'; + import { name, version, @@ -41,7 +46,14 @@ const input = [ export default [ { - input, + input: input.concat([ + './scss/themes/antd.scss', + './scss/themes/ang.scss', + './scss/themes/cxd.scss', + './scss/themes/dark.scss', + './scss/themes/default.scss', + './scss/helper.scss' + ]), output: [ { @@ -55,24 +67,42 @@ export default [ ], external, plugins: getPlugins('cjs') - }, - - { - input, - - output: [ - { - ...settings, - dir: path.dirname(module), - format: 'esm', - exports: 'named', - preserveModulesRoot: './src', - preserveModules: true // Keep directory structure and files - } - ], - external, - plugins: getPlugins('esm') + .concat( + ['antd', 'ang', 'cxd', 'dark', 'default'].map(theme => + postcss({ + include: `**/${theme}.scss`, + // process: processSass, + extract: path.resolve(`lib/themes/${theme}.css`), + plugins: [postcssImport(), autoprefixer()] + }) + ) + ) + .concat( + postcss({ + include: `**/helper.scss`, + // process: processSass, + extract: path.resolve(`lib/helper.css`), + plugins: [postcssImport(), autoprefixer()] + }) + ) } + + // { + // input, + + // output: [ + // { + // ...settings, + // dir: path.dirname(module), + // format: 'esm', + // exports: 'named', + // preserveModulesRoot: './src', + // preserveModules: true // Keep directory structure and files + // } + // ], + // external, + // plugins: getPlugins('esm') + // } ]; function transpileDynamicImportForCJS(options) { @@ -135,3 +165,20 @@ function getPlugins(format = 'esm') { }) ]; } + +function processSass(context, payload) { + return new Promise((resolve, reject) => { + sass.render( + { + file: context + }, + function (err, result) { + if (!err) { + resolve(result); + } else { + reject(err); + } + } + ); + }); +} diff --git a/packages/amis-ui/scss/_thirds.scss b/packages/amis-ui/scss/_thirds.scss index 12328debf..6c40d8c26 100644 --- a/packages/amis-ui/scss/_thirds.scss +++ b/packages/amis-ui/scss/_thirds.scss @@ -1,8 +1,8 @@ -@import url('../node_modules/codemirror/lib/codemirror.css?__inline'); -@import url('../node_modules/froala-editor/css/froala_style.min.css?__inline'); -@import url('../node_modules/froala-editor/css/froala_editor.pkgd.min.css?__inline'); -@import url('../node_modules/tinymce/skins/ui/oxide/skin.css?__inline'); -@import url('../node_modules/video-react/dist/video-react.css?__inline'); -@import url('../node_modules/cropperjs/dist/cropper.css?__inline'); +@import url('codemirror/lib/codemirror.css'); +@import url('froala-editor/css/froala_style.min.css'); +@import url('froala-editor/css/froala_editor.pkgd.min.css'); +@import url('tinymce/skins/ui/oxide/skin.css'); +@import url('video-react/dist/video-react.css'); +@import url('cropperjs/dist/cropper.css'); @import './components/react-datetime';