From f34dd6cfd79b77b586e988d64f589abb49102caf Mon Sep 17 00:00:00 2001 From: zsynuting Date: Sun, 31 Mar 2024 15:49:45 +0800 Subject: [PATCH] init --- .gitignore | 96 ++++++++++ .prettierrc.js | 7 + build.json | 35 ++++ build.plugin.js | 57 ++++++ package.json | 57 ++++++ public/favicon.png | Bin 0 -> 3612 bytes public/index.ejs | 48 +++++ public/index.html | 1 + public/mock-pages.json | 1 + public/mock/info.json | 3 + public/preview.html | 25 +++ scripts/watchdog.js | 15 ++ src/global.scss | 55 ++++++ src/index.ts | 104 +++++++++++ .../plugin-custom-setter-sample/index.tsx | 19 ++ .../setters/behavior-setter.tsx | 27 +++ .../setters/custom-setter.tsx | 13 ++ .../plugin-default-setters-registry/index.tsx | 34 ++++ src/plugins/plugin-editor-init/index.tsx | 51 ++++++ .../index.tsx | 170 ++++++++++++++++++ src/plugins/plugin-logo-sample/index.scss | 25 +++ src/plugins/plugin-logo-sample/index.tsx | 74 ++++++++ src/plugins/plugin-preview-sample/index.tsx | 40 +++++ src/plugins/plugin-save-sample/index.tsx | 52 ++++++ src/preview.tsx | 79 ++++++++ src/services/assets.json | 76 ++++++++ src/services/mockService.ts | 94 ++++++++++ src/services/schema.json | 73 ++++++++ tsconfig.json | 44 +++++ 29 files changed, 1375 insertions(+) create mode 100644 .gitignore create mode 100644 .prettierrc.js create mode 100644 build.json create mode 100644 build.plugin.js create mode 100644 package.json create mode 100644 public/favicon.png create mode 100644 public/index.ejs create mode 100644 public/index.html create mode 100644 public/mock-pages.json create mode 100644 public/mock/info.json create mode 100644 public/preview.html create mode 100644 scripts/watchdog.js create mode 100644 src/global.scss create mode 100644 src/index.ts create mode 100644 src/plugins/plugin-custom-setter-sample/index.tsx create mode 100644 src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx create mode 100644 src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx create mode 100644 src/plugins/plugin-default-setters-registry/index.tsx create mode 100644 src/plugins/plugin-editor-init/index.tsx create mode 100644 src/plugins/plugin-load-incremental-assets-widget/index.tsx create mode 100644 src/plugins/plugin-logo-sample/index.scss create mode 100644 src/plugins/plugin-logo-sample/index.tsx create mode 100644 src/plugins/plugin-preview-sample/index.tsx create mode 100644 src/plugins/plugin-save-sample/index.tsx create mode 100644 src/preview.tsx create mode 100644 src/services/assets.json create mode 100644 src/services/mockService.ts create mode 100644 src/services/schema.json create mode 100644 tsconfig.json diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1288c08 --- /dev/null +++ b/.gitignore @@ -0,0 +1,96 @@ +# project custom +build +dist +package-lock.json +yarn.lock + +# IDE +.vscode +.idea + +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +lerna-debug.log* + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + + +# Directory for instrumented libs generated by jscoverage/JSCover +lib-cov + +# Coverage directory used by tools like istanbul +coverage + +# nyc test coverage +.nyc_output + +# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) +.grunt + +# Bower dependency directory (https://bower.io/) +bower_components + +# node-waf configuration +.lock-wscript + +# Compiled binary addons (https://nodejs.org/api/addons.html) +build/Release +lib + +# Dependency directories +node_modules/ +jspm_packages/ + +# TypeScript v1 declaration files +typings/ + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# dotenv environment variables file +.env +.env.test + +# parcel-bundler cache (https://parceljs.org/) +.cache + +# next.js build output +.next + +# nuxt.js build output +.nuxt + +# vuepress build output +.vuepress/dist + +# Serverless directories +.serverless/ + +# FuseBox cache +.fusebox/ + +# DynamoDB Local files +.dynamodb/ + +# mac config files +.DS_Store diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000..24c5859 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,7 @@ +module.exports = { + printWidth: 100, + tabWidth: 2, + semi: true, + singleQuote: true, + trailingComma: 'all', +}; diff --git a/build.json b/build.json new file mode 100644 index 0000000..1d9ea4a --- /dev/null +++ b/build.json @@ -0,0 +1,35 @@ +{ + "entry": { + "preview": "./src/preview.tsx", + "index": "./src/index.ts" + }, + "vendor": false, + "devServer": { + "hot": false + }, + "publicPath": "/", + "externals": { + "react": "var window.React", + "react-dom": "var window.ReactDOM", + "prop-types": "var window.PropTypes", + "@alifd/next": "var window.Next", + "@alilc/lowcode-engine": "var window.AliLowCodeEngine", + "@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt", + "moment": "var window.moment", + "lodash": "var window._" + }, + "plugins": [ + [ + "build-plugin-react-app" + ], + [ + "build-plugin-moment-locales", + { + "locales": [ + "zh-cn" + ] + } + ], + "./build.plugin.js" + ] +} diff --git a/build.plugin.js b/build.plugin.js new file mode 100644 index 0000000..8796fea --- /dev/null +++ b/build.plugin.js @@ -0,0 +1,57 @@ +const fs = require('fs-extra'); +const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); +const HtmlWebpackPlugin = require('html-webpack-plugin'); + +const { version } = JSON.parse(fs.readFileSync('./package.json', 'utf8')); + +module.exports = ({ onGetWebpackConfig }) => { + onGetWebpackConfig((config) => { + config.resolve.plugin('tsconfigpaths').use(TsconfigPathsPlugin, [ + { + configFile: './tsconfig.json', + }, + ]); + + config.merge({ + node: { + fs: 'empty', + }, + }); + + config + .plugin('index') + .use(HtmlWebpackPlugin, [ + { + inject: false, + minify: false, + templateParameters: { + version, + }, + template: require.resolve('./public/index.ejs'), + filename: 'index.html', + }, + ]); + config + .plugin('preview') + .use(HtmlWebpackPlugin, [ + { + inject: false, + templateParameters: { + }, + template: require.resolve('./public/preview.html'), + filename: 'preview.html', + }, + ]); + + config.plugins.delete('hot'); + config.devServer.hot(false); + + config.module // fixes https://github.com/graphql/graphql-js/issues/1272 + .rule('mjs$') + .test(/\.mjs$/) + .include + .add(/node_modules/) + .end() + .type('javascript/auto'); + }); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..4a7068c --- /dev/null +++ b/package.json @@ -0,0 +1,57 @@ +{ + "name": "@alilc/lowcode-demo-basic-antd", + "version": "1.0.28", + "description": "Low-Code Engine 低代码搭建引擎 Demo 项目 - 基础antd组件", + "repository": "git@github.com:alibaba/lowcode-demo.git", + "license": "MIT", + "main": "index.js", + "scripts": { + "start": "build-scripts start --disable-reload --port 5556", + "build": "build-scripts build", + "prepublishOnly": "npm run build", + "pub": "node ./scripts/watchdog.js && npm pub" + }, + "files": [ + "build" + ], + "config": {}, + "dependencies": { + "@alilc/lowcode-datasource-fetch-handler": "^1.0.1", + "@alilc/lowcode-plugin-code-editor": "^1.0.3", + "@alilc/lowcode-plugin-code-generator": "^1.0.4", + "@alilc/lowcode-plugin-components-pane": "^2.0.0", + "@alilc/lowcode-plugin-datasource-pane": "^1.0.9", + "@alilc/lowcode-plugin-inject": "^1.2.1", + "@alilc/lowcode-plugin-manual": "^1.0.4", + "@alilc/lowcode-plugin-schema": "^1.0.2", + "@alilc/lowcode-plugin-simulator-select": "^1.0.2", + "@alilc/lowcode-plugin-undo-redo": "^1.0.0", + "@alilc/lowcode-plugin-zh-en": "^1.0.0", + "@alilc/lowcode-plugin-set-ref-prop": "^1.0.1", + "@alilc/lowcode-react-renderer": "^1.1.2", + "@alilc/lowcode-setter-behavior": "^1.0.0", + "@alilc/lowcode-setter-title": "^1.0.2", + "antd": "^4.21.4", + "moment": "^2.29.3", + "uuid": "^8.3.2" + }, + "devDependencies": { + "@alib/build-scripts": "^0.1.18", + "@alilc/lowcode-engine": "^1.1.2", + "@alilc/lowcode-engine-ext": "^1.0.0", + "@alilc/lowcode-types": "^1.1.1", + "@types/events": "^3.0.0", + "@types/react": "^16.8.3", + "@types/react-dom": "^16.8.2", + "@types/streamsaver": "^2.0.0", + "@types/uuid": "^8.3.4", + "build-plugin-fusion": "^0.1.0", + "build-plugin-moment-locales": "^0.1.0", + "build-plugin-react-app": "^1.1.2", + "fs-extra": "^10.0.1", + "tsconfig-paths-webpack-plugin": "^3.2.0" + }, + "resolutions": { + "@babel/core": "7.20.12" + } +} diff --git a/public/favicon.png b/public/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..307ffbd82dba398d6db6459102bff331eef7df6b GIT binary patch literal 3612 zcmV+%4&(8OP)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91TA%{}1ONa40RR91S^xk507-m{w*UYQhDk(0RCodHT?>#D#Towp*}H|i z+dTn!mde8i1wu-BR8XSvS)#mzvO>hDgg^x>qli)9_Kq+LcPJ3Bu+SK-ynID85>dgJ zf)ItMP%%POG)f4F%3HbJz2lbM?R>q<9(%hpvoo`^$1F!z?agfW|Ns5>H@$y%|NT!N z)9I8O0kys}9V_WeB7QCjaV`-)%ss()2JZ3U%EY}OCKh25^exJF;@jsa+eD=m&vNcs z+8Bi@I#8tHdjNF^fEtX}4+gmB!oBs2;z-h|Ic09)=5q&i}FecJ(A2&TE=5fm5G(0gxyZEdH6iu2h_ zJ5PO}Rndte;mJhtI{@%`&ZB5b;y0%*&~w8>C>pyHqyEk4y=A80C>Rkpo_d2}APn0Z z`vpM$ZW1@AMzs8%!l?uF-0&cZ#+Q(YU7a5!1>j~nT>L<*4QEp%S__bGgNbmbDHL?D zc!5q%(PmRq>|XRi*kE^<2+iLE7c0;;;j#2>=t+RvRkLC4%RE$EJ$gCjzI#K9DHglS zeOMZ5R79pjJ=zx_zkpTT#fD9CW1*mZ$u+$jl}p#DIy8xzBJUR^$g&*@ZFlD=odQ`E zK8ge%$2fOuDyulJJixs`2f{tzOEWnqjtV>cMgWq9ydk)0#$pb)OGC2 zyd5S;I^_@Jm(l@C^gfV%VZr9$OrMgxyy6}LKnkatcPA59cwD{W7OGqAKlB1Ib~J_y8w|V z(BsGFq%}`aO$#gQ+ynI7-~fuz1~k&So~-aRs`dZcJSL!&e(UPcGF)d^;?pO-3_x#k z&U92aoJAbJ4vzIcP_j3Es=aY-kL$P40h^Wh2!VU$OZ3`ZRN~o1W#zjmz=tRh9t>Z_ z>u9BOATvK;8Dt3-vw)s60d`MZ^Xu76A?oGdoDeJj*iI_;)*=lf;8d5p7NY@_$GR+x z$|Opy^BHmQR*dw6F$l$ts0_#@IJscGzkIqrLKORm9_ zztJAZQU#|$hDhewd4Vj|Qn?=J)XH1ii4{5CB$7R#tLn#5{1{ehG&Cj1HCN`ZskY)x zNAxN6{RU61$+j$o*QI!^104v>1oNuo95f}yRoB%CJL`l>Du*EE@3urSA0SWp))cQb zpaUV;W3eQ~?9yvu-s+fcEdFg%)=TN;%RJEP(ep7|cpmoHJdaHc^I{X?i@f-=n3a85 zS!ObXcs`xX9B8WWV&(KQ7(1pjyYk-Su|Lz$YLKuK|G|5x&c88ToH?K)p(>b+@1!%j z_FlxhJE|Mg*_P$8cp-C~$PIK&us+@u)9l)7QFbbQk(&@iM-USUU$Y~z z(@$d;<#r>8PM8k)(u@$+wtb8wySYs6ehcd55XeDd&+J^yJpuH=@H`NopNrvic?JTk z%%{4FuQPJ9z9#3<~?2N zQD&F{Spucd2jL%~HxD_DnneVdUZn+?!I(_2(c-5jX-|`-5MaW_ZRw2ES2I@$^hIU} zPt&9!Ab1KbDBGEqlk--=G$*Ga&ncx%5%6+a=zqy-ljZbolU1fROV6|!fjRfvX}^Nu z@L{+EUHnRuon{q;=NsbE3E0_=*pZG{oXU-`)6=llkJ=H?Hh9nx70)E9E!$9Bm&2;z=LrvB2-VO*34&C5jyZdzE$Q1+DZ*F{8q%WHYTlza1|{p z3#rcMNCdzMr;-yb^p<}J(-U(-)Jd1Yw9F}xWm}vDT8_vpcAs>R@>M{-j!{=>V+UNn zVrPL))WiSMudWD6n4hCs-_M-Zv;aWkJ(QwNa!bm0M`k#e6V0&4E`?wy@F}co(!2pRl&bu%6DZ}elcXU z^H%`u2B%du)uRQi#7jV-XHofakfj=lqa){QDx`?zn)$_$8ExuO2sLv8odkKy)2Muc zh61+;3S=u*Te%7gns+tm-Jc~Q+3j&aYeS%6E>OPZcj&znwd;~mrcoSurjb0#beNV# zjS_cf#o5{T>f^1|1v&|G__qN0R%2wubU{nYvS{Y}wjy8!zLO$LOs&_W@#-iBNjdNd z!=R8PgyKx1y^}TJto1#OsgewqES|*FIz2iG@+=uhqYa)GWL@?y6rHA?tyM(5eDZa< z)tY5)%#4e|_vqswBO+2vHHATkZ-{QjI63hTl{9Gc22CCr^HAp>2Q%_uQOvKIr6P=(QnL6x-x1jUm>r*5A3!InnSvDC$&IC3sHSD&_svj zDiL7kND|}`YvA{bXA_n;Fb)03O40qti8uPQ36P`m;e;c-lfM@>4ekNxZ@Ft4h+{1Z zkR-UxNzkkXI1-||IV1Dtyw7lcIL0+t0>iZDoEWVeGm?)y_NF0Ss_+S%aImLwFm`W- zvlo+-HX+xPp1~GY%sTSVjPcA0FY%XasxeJ z+g%C3?6$dG6VY{R+ta|UnEHkH2)ciBY>OL-nU?~%Wok1G@Miq5B zX!tM;xRXV3u)lsIQP7`8D&!!057B-MzI1n5!HHWOZjB(G)=BcT#g0BK)(V%5f$q6; zN?uhU&G{i*9dOdD*b1ju;#cE<$< z0&o(5UJ~32rh|9mS92|??LXI3!>N2-psAr`9xBN>{nJ$BSSisfSc&gAU$gjlCVU?4 z^nb1jOh-WzZ-Drrg|y4*>g$`1PKQRN6PmscV+Qx?c$nXA1}q$ejlP~~!A@NwdCFEn z5>6gaxCa0FZYkUW8h(U=RH{7~iaSfbPo4%KW-;xD&-^tEe4+G#FH1%UIX5sZc_*tR zJtJNK)4}{cdFXbU@6$I~={h)guWdTQzH2Sj!4xH-JVGx{jO73sD=r?%w0Kia`Dd0n zXF6o;xAb9neZy$JztusOZPfZV8PepGabK+9{gy0CdE9B`g}50qGU8c zep{a=tt5F2F&<2wNgmA2%B2ZM5f04GQ<`mdZ5!P=@-pr7?xNC2uNIPV!V&#`cUPJHzcr5%K8(PTA^(8r%Hd@r^OOPu)!m&GEUkz-rMJJ8ESi2>fK*KG6 zRLqJD$JrH+K=37)0&Pd%UrnU|cQL`MrkCJrPI~*&2xKGqMnp8NOUpEOo0#H>mJizu zC-Wz8NKKXJHk%=D4H`|LWyQRRzQSdKMJ3jP{?0TWI67!NK>ll5p7~oAU*RDSG0l*$ z#k7dJ`5x3ea>ukRhY59owpUNZ985VX!Fvln*d zf&lGk3j)CjFdxqWOzD7XnV2`?o$RT!p#7&U3*7h3{Xk31 + + + + + + 阿里低代码引擎 Demo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/public/index.html b/public/index.html new file mode 100644 index 0000000..9992af0 --- /dev/null +++ b/public/index.html @@ -0,0 +1 @@ +勿删，删了有奇妙的 bug😄~ \ No newline at end of file diff --git a/public/mock-pages.json b/public/mock-pages.json new file mode 100644 index 0000000..9251342 --- /dev/null +++ b/public/mock-pages.json @@ -0,0 +1 @@ +{"success":true,"content":[{"gmtModified":"2021-03-06 00:40:54","formUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentNavUuid":"NAV-SYSTEM-PARENT-UUID","hidden":"n","navUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","navType":"PAGE","isIndex":"n","isNew":"n","gmtCreate":"2021-03-06 00:27:26","title":{"en-US":"页面1","zh-CN":"页面1","type":"i18n"},"relateUuid":"FORM-6X866SC1KM4O4BLF3U7879QB0EMT2Z3TGIWLKW","parentId":0,"listOrder":0,"id":556103}]} \ No newline at end of file diff --git a/public/mock/info.json b/public/mock/info.json new file mode 100644 index 0000000..006209b --- /dev/null +++ b/public/mock/info.json @@ -0,0 +1,3 @@ +{ + "info": "Hello AliLowCode!!" +} \ No newline at end of file diff --git a/public/preview.html b/public/preview.html new file mode 100644 index 0000000..330e024 --- /dev/null +++ b/public/preview.html @@ -0,0 +1,25 @@ + + + + + + 阿里低代码引擎 Demo - 预览页 + + + + +
+ + + + + + + + + + diff --git a/scripts/watchdog.js b/scripts/watchdog.js new file mode 100644 index 0000000..57964a5 --- /dev/null +++ b/scripts/watchdog.js @@ -0,0 +1,15 @@ +#!/usr/bin/env node +const fs = require('fs'); +const { join } = require('path'); + +const workingDir = process.cwd(); + +const pkg = JSON.parse(fs.readFileSync(join(workingDir, 'package.json'), 'utf-8')); +if (pkg.private) return; +const { files } = pkg; +files.forEach(file => { + const fileDir = join(workingDir, file); + if (!fs.existsSync(fileDir)) { + throw new Error(`${fileDir} does not exist, plz run build`); + } +}); diff --git a/src/global.scss b/src/global.scss new file mode 100644 index 0000000..02906a3 --- /dev/null +++ b/src/global.scss @@ -0,0 +1,55 @@ +body { + font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei; + font-size: 12px; + * { + box-sizing: border-box; + } +} + +body, #lce-container { + position: fixed; + left: 0; + right: 0; + bottom: 0; + top: 0; + box-sizing: border-box; + padding: 0; + margin: 0; + overflow: hidden; + text-rendering: optimizeLegibility; + -webkit-user-select: none; + -webkit-user-drag: none; + -webkit-text-size-adjust: none; + -webkit-touch-callout: none; + -webkit-font-smoothing: antialiased; + #engine { + width: 100%; + height: 100%; + } +} + +html { + min-width: 1024px; +} + +.save-sample { + width: 80px; + height: 30px; + background-color: #5584FF; + border: none; + outline: none; + border-radius: 4px; + color: white; + cursor: pointer; +} + +.load-assets { + width: 100px; + height: 30px; + background-color: #5584FF; + border: none; + outline: none; + border-radius: 4px; + color: white; + cursor: pointer; +} diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 0000000..e8a2be0 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,104 @@ +import { init, plugins } from '@alilc/lowcode-engine'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' +import EditorInitPlugin from './plugins/plugin-editor-init'; +import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo'; +import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en'; +import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator'; +import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane'; +import SchemaPlugin from '@alilc/lowcode-plugin-schema'; +import CodeEditorPlugin from "@alilc/lowcode-plugin-code-editor"; +import ManualPlugin from "@alilc/lowcode-plugin-manual"; +import InjectPlugin from '@alilc/lowcode-plugin-inject'; +import SimulatorResizerPlugin from '@alilc/lowcode-plugin-simulator-select'; +import ComponentPanelPlugin from '@alilc/lowcode-plugin-components-pane'; +import DefaultSettersRegistryPlugin from './plugins/plugin-default-setters-registry'; +import LoadIncrementalAssetsWidgetPlugin from './plugins/plugin-load-incremental-assets-widget'; +import SaveSamplePlugin from './plugins/plugin-save-sample'; +import PreviewSamplePlugin from './plugins/plugin-preview-sample'; +import CustomSetterSamplePlugin from './plugins/plugin-custom-setter-sample'; +import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop'; +import LogoSamplePlugin from './plugins/plugin-logo-sample'; +import './global.scss'; + +async function registerPlugins() { + await plugins.register(InjectPlugin); + + await plugins.register(EditorInitPlugin, { + scenarioName: 'basic-antd', + displayName: '基础 AntD 组件', + info: { + urls: [ + { + key: '设计器', + value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-basic-antd', + }, + { + "key": "antd 物料", + "value": "https://github.com/alibaba/lowcode-materials/tree/main/packages/antd-lowcode-materials" + } + ], + }, + }); + + // 设置内置 setter 和事件绑定、插件绑定面板 + await plugins.register(DefaultSettersRegistryPlugin); + + await plugins.register(LogoSamplePlugin); + + await plugins.register(ComponentPanelPlugin); + + await plugins.register(SchemaPlugin); + + await plugins.register(ManualPlugin); + // 注册回退/前进 + await plugins.register(UndoRedoPlugin); + + // 注册中英文切换 + await plugins.register(ZhEnPlugin); + + await plugins.register(SetRefPropPlugin); + + await plugins.register(SimulatorResizerPlugin); + + await plugins.register(LoadIncrementalAssetsWidgetPlugin); + + + // 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#设置插件参数版本示例 + await plugins.register(DataSourcePanePlugin, { + importPlugins: [], + dataSourceTypes: [ + { + type: 'fetch', + }, + { + type: 'jsonp', + } + ] + }); + + await plugins.register(CodeEditorPlugin); + + // 注册出码插件 + await plugins.register(CodeGenPlugin); + + await plugins.register(SaveSamplePlugin); + + await plugins.register(PreviewSamplePlugin); + + await plugins.register(CustomSetterSamplePlugin); +}; + +(async function main() { + await registerPlugins(); + + init(document.getElementById('lce-container')!, { + // locale: 'zh-CN', + enableCondition: true, + enableCanvasLock: true, + // 默认绑定变量 + supportVariableGlobally: true, + requestHandlersMap: { + fetch: createFetchHandler() + }, + }); +})(); diff --git a/src/plugins/plugin-custom-setter-sample/index.tsx b/src/plugins/plugin-custom-setter-sample/index.tsx new file mode 100644 index 0000000..8eefcd0 --- /dev/null +++ b/src/plugins/plugin-custom-setter-sample/index.tsx @@ -0,0 +1,19 @@ +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import TitleSetter from '@alilc/lowcode-setter-title'; +import BehaviorSetter from './setters/behavior-setter'; +import CustomSetter from './setters/custom-setter'; + +// 保存功能示例 +const CustomSetterSamplePlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { setters } = ctx; + + setters.registerSetter('TitleSetter', TitleSetter); + setters.registerSetter('BehaviorSetter', BehaviorSetter); + setters.registerSetter('CustomSetter', CustomSetter); + }, + }; +} +CustomSetterSamplePlugin.pluginName = 'CustomSetterSamplePlugin'; +export default CustomSetterSamplePlugin; \ No newline at end of file diff --git a/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx b/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx new file mode 100644 index 0000000..34e9be5 --- /dev/null +++ b/src/plugins/plugin-custom-setter-sample/setters/behavior-setter.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import BehaviorSetter from '@alilc/lowcode-setter-behavior'; + + +const defaultExtraBehaviorActions: any[] = []; +class LocalBehaviorSetter extends React.Component { + render() { + // ignore url && responseFormatter props, use default ones + const { url: propsUrl, responseFormatter: propsFormatter, extraBehaviorActions: propsExtraBehaviorActions = [], ...otherProps } = this.props; + const url = 'https://hn.algolia.com/api/v1/search?query'; + const responseFormatter = (response) => response.hits.map((item) => ({ + label: item.title, + value: item.author + })); + const extraBehaviorActions = propsExtraBehaviorActions.concat(defaultExtraBehaviorActions); + return ( + + ); + } +} + +export default LocalBehaviorSetter; \ No newline at end of file diff --git a/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx b/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx new file mode 100644 index 0000000..9fe9d51 --- /dev/null +++ b/src/plugins/plugin-custom-setter-sample/setters/custom-setter.tsx @@ -0,0 +1,13 @@ +import React, { Component } from 'react'; +// import classNames from 'classnames'; + +class CustomSetter extends Component { + render() { + const { defaultValue, value, onChange } = this.props; + const { editor } = this.props.field; + + return
hello world
; + } +} + +export default CustomSetter; diff --git a/src/plugins/plugin-default-setters-registry/index.tsx b/src/plugins/plugin-default-setters-registry/index.tsx new file mode 100644 index 0000000..7ab0789 --- /dev/null +++ b/src/plugins/plugin-default-setters-registry/index.tsx @@ -0,0 +1,34 @@ +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext'; + +// 设置内置 setter 和事件绑定、插件绑定面板 +const DefaultSettersRegistryPlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { setterMap, pluginMap } = AliLowCodeEngineExt; + const { setters, skeleton } = ctx; + // 注册 setterMap + setters.registerSetter(setterMap); + // 注册插件 + // 注册事件绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.EventBindDialog, + name: 'eventBindDialog', + props: {}, + }); + + // 注册变量绑定面板 + skeleton.add({ + area: 'centerArea', + type: 'Widget', + content: pluginMap.VariableBindDialog, + name: 'variableBindDialog', + props: {}, + }); + }, + }; +} +DefaultSettersRegistryPlugin.pluginName = 'DefaultSettersRegistryPlugin'; +export default DefaultSettersRegistryPlugin; \ No newline at end of file diff --git a/src/plugins/plugin-editor-init/index.tsx b/src/plugins/plugin-editor-init/index.tsx new file mode 100644 index 0000000..84b9f4e --- /dev/null +++ b/src/plugins/plugin-editor-init/index.tsx @@ -0,0 +1,51 @@ +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { injectAssets } from '@alilc/lowcode-plugin-inject'; +import assets from '../../services/assets.json'; +import { getPageSchema } from '../../services/mockService'; +const EditorInitPlugin = (ctx: IPublicModelPluginContext, options: any) => { + return { + async init() { + const { material, project, config } = ctx; + const scenarioName = options['scenarioName']; + const scenarioDisplayName = options['displayName'] || scenarioName; + const scenarioInfo = options['info'] || {}; + // 保存在config中用于引擎范围其他插件使用 + config.set('scenarioName', scenarioName); + config.set('scenarioDisplayName', scenarioDisplayName); + config.set('scenarioInfo', scenarioInfo); + + // 设置物料描述 + + await material.setAssets(await injectAssets(assets)); + + const schema = await getPageSchema(scenarioName); + + // 加载 schema + project.openDocument(schema); + }, + }; +} +EditorInitPlugin.pluginName = 'EditorInitPlugin'; +EditorInitPlugin.meta = { + preferenceDeclaration: { + title: '保存插件配置', + properties: [ + { + key: 'scenarioName', + type: 'string', + description: '用于localstorage存储key', + }, + { + key: 'displayName', + type: 'string', + description: '用于显示的场景名', + }, + { + key: 'info', + type: 'object', + description: '用于扩展信息', + } + ], + }, +}; +export default EditorInitPlugin; \ No newline at end of file diff --git a/src/plugins/plugin-load-incremental-assets-widget/index.tsx b/src/plugins/plugin-load-incremental-assets-widget/index.tsx new file mode 100644 index 0000000..015182d --- /dev/null +++ b/src/plugins/plugin-load-incremental-assets-widget/index.tsx @@ -0,0 +1,170 @@ +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { Button } from '@alifd/next'; +import { material } from '@alilc/lowcode-engine'; +import { Message } from '@alifd/next'; + +const loadIncrementalAssets = () => { + material?.onChangeAssets(() => { + Message.success('[MCBreadcrumb] 物料加载成功'); + }); + + material.loadIncrementalAssets({ + packages: [ + { + title: 'MCBreadcrumb', + package: 'mc-breadcrumb', + version: '1.0.0', + urls: [ + 'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js', + 'https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css', + ], + library: 'MCBreadcrumb', + }, + ], + components: [ + { + componentName: 'MCBreadcrumb', + title: 'MCBreadcrumb', + docUrl: '', + screenshot: '', + npm: { + package: 'mc-breadcrumb', + version: '1.0.0', + exportName: 'MCBreadcrumb', + main: 'lib/index.js', + destructuring: false, + subName: '', + }, + props: [ + { + name: 'prefix', + propType: 'string', + description: '样式类名的品牌前缀', + defaultValue: 'next-', + }, + { + name: 'title', + propType: 'string', + description: '标题', + defaultValue: 'next-', + }, + { + name: 'rtl', + propType: 'bool', + }, + { + name: 'children', + propType: { + type: 'instanceOf', + value: 'node', + }, + description: '面包屑子节点，需传入 Breadcrumb.Item', + }, + { + name: 'maxNode', + propType: { + type: 'oneOfType', + value: [ + 'number', + { + type: 'oneOf', + value: ['auto'], + }, + ], + }, + description: + '面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。', + defaultValue: 100, + }, + { + name: 'separator', + propType: { + type: 'instanceOf', + value: 'node', + }, + description: '分隔符，可以是文本或 Icon', + }, + { + name: 'component', + propType: { + type: 'oneOfType', + value: ['string', 'func'], + }, + description: '设置标签类型', + defaultValue: 'nav', + }, + { + name: 'className', + propType: 'any', + }, + { + name: 'style', + propType: 'object', + }, + ], + configure: { + component: { + isContainer: true, + isModel: true, + rootSelector: 'div.MCBreadcrumb', + }, + }, + }, + ], + + componentList: [ + { + title: '常用', + icon: '', + children: [ + { + componentName: 'MCBreadcrumb', + title: 'MC面包屑', + icon: '', + package: 'mc-breadcrumb', + library: 'MCBreadcrumb', + snippets: [ + { + title: 'MC面包屑', + screenshot: + 'https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png', + schema: { + componentName: 'MCBreadcrumb', + props: { + title: '物料中心', + prefix: 'next-', + maxNode: 100, + }, + }, + }, + ], + }, + ], + }, + ], + }); +}; +const LoadIncrementalAssetsWidgetPlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { skeleton } = ctx; + + skeleton.add({ + name: 'loadAssetsSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + width: 80, + }, + content: ( + + ), + }); + }, + }; +} +LoadIncrementalAssetsWidgetPlugin.pluginName = 'LoadIncrementalAssetsWidgetPlugin'; +export default LoadIncrementalAssetsWidgetPlugin; \ No newline at end of file diff --git a/src/plugins/plugin-logo-sample/index.scss b/src/plugins/plugin-logo-sample/index.scss new file mode 100644 index 0000000..d8b63f6 --- /dev/null +++ b/src/plugins/plugin-logo-sample/index.scss @@ -0,0 +1,25 @@ +.lowcode-plugin-logo { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: flex-end; + width: 300px; + .logo { + display: block; + width: 139px; + height: 26px; + cursor: pointer; + background-size: contain; + background-position: center; + background-repeat: no-repeat; + } + .scenario-name { + display: block; + margin-left: 20px; + margin-right: 5px; + font-size: 15px; + } + .info-dropdown { + display: block; + } +} diff --git a/src/plugins/plugin-logo-sample/index.tsx b/src/plugins/plugin-logo-sample/index.tsx new file mode 100644 index 0000000..6ffc2b9 --- /dev/null +++ b/src/plugins/plugin-logo-sample/index.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { Dropdown, Menu } from '@alifd/next'; +import './index.scss'; +export interface IProps { + logo?: string; + href?: string; + scenarioInfo?: any; + scenarioDisplayName?: string; +} + +const Logo: React.FC = (props): React.ReactElement => { + const { scenarioDisplayName, scenarioInfo } = props; + const urls = scenarioInfo?.urls || []; + return ( + + ); +}; +// 示例 Logo widget +const LogoSamplePlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { skeleton, config } = ctx; + const scenarioDisplayName = config.get('scenarioDisplayName'); + const scenarioInfo = config.get('scenarioInfo'); + // 注册 logo widget + skeleton.add({ + area: 'topArea', + type: 'Widget', + name: 'logo', + content: , + contentProps: { + logo: 'https://img.alicdn.com/imgextra/i4/O1CN013w2bmQ25WAIha4Hx9_!!6000000007533-55-tps-137-26.svg', + href: 'https://lowcode-engine.cn', + }, + props: { + align: 'left', + }, + }); + }, + }; +} +LogoSamplePlugin.pluginName = 'LogoSamplePlugin'; +LogoSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default LogoSamplePlugin; \ No newline at end of file diff --git a/src/plugins/plugin-preview-sample/index.tsx b/src/plugins/plugin-preview-sample/index.tsx new file mode 100644 index 0000000..38cd0cf --- /dev/null +++ b/src/plugins/plugin-preview-sample/index.tsx @@ -0,0 +1,40 @@ +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { Button } from '@alifd/next'; +import { + saveSchema, +} from '../../services/mockService'; + +// 保存功能示例 +const PreviewSamplePlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { skeleton, config } = ctx; + const doPreview = () => { + const scenarioName = config.get('scenarioName'); + saveSchema(scenarioName); + setTimeout(() => { + const search = location.search ? `${location.search}&scenarioName=${scenarioName}` : `?scenarioName=${scenarioName}`; + window.open(`./preview.html${search}`); + }, 500); + }; + skeleton.add({ + name: 'previewSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + }, + }; +} +PreviewSamplePlugin.pluginName = 'PreviewSamplePlugin'; +PreviewSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default PreviewSamplePlugin; \ No newline at end of file diff --git a/src/plugins/plugin-save-sample/index.tsx b/src/plugins/plugin-save-sample/index.tsx new file mode 100644 index 0000000..8785c67 --- /dev/null +++ b/src/plugins/plugin-save-sample/index.tsx @@ -0,0 +1,52 @@ +import { IPublicModelPluginContext } from '@alilc/lowcode-types'; +import { Button } from '@alifd/next'; +import { + saveSchema, + resetSchema, +} from '../../services/mockService'; + +// 保存功能示例 +const SaveSamplePlugin = (ctx: IPublicModelPluginContext) => { + return { + async init() { + const { skeleton, hotkey, config } = ctx; + const scenarioName = config.get('scenarioName'); + + skeleton.add({ + name: 'saveSample', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + skeleton.add({ + name: 'resetSchema', + area: 'topArea', + type: 'Widget', + props: { + align: 'right', + }, + content: ( + + ), + }); + hotkey.bind('command+s', (e) => { + e.preventDefault(); + saveSchema(scenarioName); + }); + }, + }; +} +SaveSamplePlugin.pluginName = 'SaveSamplePlugin'; +SaveSamplePlugin.meta = { + dependencies: ['EditorInitPlugin'], +}; +export default SaveSamplePlugin; \ No newline at end of file diff --git a/src/preview.tsx b/src/preview.tsx new file mode 100644 index 0000000..ac3c51c --- /dev/null +++ b/src/preview.tsx @@ -0,0 +1,79 @@ +import ReactDOM from 'react-dom'; +import React, { useState } from 'react'; +import { Loading } from '@alifd/next'; +import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils'; +import ReactRenderer from '@alilc/lowcode-react-renderer'; +import { injectComponents } from '@alilc/lowcode-plugin-inject'; +import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler' + +import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage } from './services/mockService'; + +const getScenarioName = function () { + if (location.search) { + return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index'; + } + return 'index'; +} + +const SamplePreview = () => { + const [data, setData] = useState({}); + + async function init() { + const scenarioName = getScenarioName(); + const packages = getPackagesFromLocalStorage(scenarioName); + const projectSchema = getProjectSchemaFromLocalStorage(scenarioName); + const { componentsMap: componentsMapArray, componentsTree } = projectSchema; + const componentsMap: any = {}; + componentsMapArray.forEach((component: any) => { + componentsMap[component.componentName] = component; + }); + const schema = componentsTree[0]; + + const libraryMap = {}; + const libraryAsset = []; + packages.forEach(({ package: _package, library, urls, renderUrls }) => { + libraryMap[_package] = library; + if (renderUrls) { + libraryAsset.push(renderUrls); + } else if (urls) { + libraryAsset.push(urls); + } + }); + + const vendors = [assetBundle(libraryAsset, AssetLevel.Library)]; + + // TODO asset may cause pollution + const assetLoader = new AssetLoader(); + await assetLoader.load(libraryAsset); + const components = await injectComponents(buildComponents(libraryMap, componentsMap)); + + setData({ + schema, + components, + }); + } + + const { schema, components } = data; + + if (!schema || !components) { + init(); + return ; + } + + return ( +
+ +
+ ); +}; + +ReactDOM.render(, document.getElementById('ice-container')); diff --git a/src/services/assets.json b/src/services/assets.json new file mode 100644 index 0000000..166ff40 --- /dev/null +++ b/src/services/assets.json @@ -0,0 +1,76 @@ +{ + "packages": [ + { + "package": "moment", + "version": "2.24.0", + "urls": ["https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"], + "library": "moment" + }, + { + "package": "lodash", + "library": "_", + "urls": ["https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"] + }, + { + "package": "iconfont-icons", + "urls": "//at.alicdn.com/t/font_2369445_ukrtsovd92r.js" + }, + { + "package": "@ant-design/icons", + "version": "4.7.0", + "urls": ["//g.alicdn.com/code/npm/@ali/ant-design-icons-cdn/4.5.0/index.umd.min.js"], + "library": "icons" + }, + { + "package": "antd", + "version": "4.19.5", + "urls": [ + "//g.alicdn.com/code/lib/antd/4.23.0/antd.min.js", + "//g.alicdn.com/code/lib/antd/4.23.0/antd.min.css" + ], + "library": "antd" + }, + { + "title": "fusion组件库", + "package": "@alifd/next", + "version": "1.26.4", + "urls": [ + "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next.min.css", + "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next-with-locales.min.js" + ], + "library": "Next" + }, + { + "package": "@alilc/antd-lowcode-materials", + "version": "1.2.1", + "library": "AntdLowcode", + "urls": [ + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.css" + ], + "editUrls": [ + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.js", + "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/view.css" + ] + } + ], + "components": [ + { + "exportName": "AlilcAntdLowcodeMaterialsMeta", + "npm": { + "package": "@alilc/antd-lowcode-materials", + "version": "1.2.1" + }, + "url": "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/meta.js", + "urls": { + "default": "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.2.1/build/lowcode/meta.js" + } + } + ], + "sort": { + "groupList": ["精选组件", "原子组件"], + "categoryList": ["通用", "导航", "信息输入", "信息展示", "信息反馈"] + }, + "groupList": ["精选组件", "原子组件"], + "ignoreComponents": {} +} diff --git a/src/services/mockService.ts b/src/services/mockService.ts new file mode 100644 index 0000000..0154ff6 --- /dev/null +++ b/src/services/mockService.ts @@ -0,0 +1,94 @@ +import { material, project } from '@alilc/lowcode-engine'; +import { filterPackages } from '@alilc/lowcode-plugin-inject' +import { Message, Dialog } from '@alifd/next'; +import { IPublicEnumTransformStage } from '@alilc/lowcode-types'; +import schema from './schema.json'; + +export const saveSchema = async (scenarioName: string = 'unknown') => { + setProjectSchemaToLocalStorage(scenarioName); + await setPackagesToLocalStorage(scenarioName); + Message.success('成功保存到本地'); +}; + +export const resetSchema = async (scenarioName: string = 'unknown') => { + try { + await new Promise((resolve, reject) => { + Dialog.confirm({ + content: '确定要重置吗？您所有的修改都将消失！', + onOk: () => { + resolve(); + }, + onCancel: () => { + reject() + }, + }) + }) + } catch(err) { + return; + } + + let defaultSchema = schema || { + componentsTree: [{ componentName: 'Page', fileName: 'sample' }], + componentsMap: material.componentsMap, + version: '1.0.0', + i18n: {}, + }; + + project.getCurrentDocument()?.importSchema(defaultSchema as any); + project.simulatorHost?.rerender(); + + setProjectSchemaToLocalStorage(scenarioName); + await setPackagesToLocalStorage(scenarioName); + Message.success('成功重置页面'); +} + +const getLSName = (scenarioName: string, ns: string = 'projectSchema') => `${scenarioName}:${ns}`; + +export const getProjectSchemaFromLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + return JSON.parse(window.localStorage.getItem(getLSName(scenarioName)) || '{}'); +} + +const setProjectSchemaToLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + window.localStorage.setItem( + getLSName(scenarioName), + JSON.stringify(project.exportSchema(IPublicEnumTransformStage.Save)) + ); +} + +const setPackagesToLocalStorage = async (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + const packages = await filterPackages(material.getAssets().packages); + window.localStorage.setItem( + getLSName(scenarioName, 'packages'), + JSON.stringify(packages), + ); +} + +export const getPackagesFromLocalStorage = (scenarioName: string) => { + if (!scenarioName) { + console.error('scenarioName is required!'); + return; + } + return JSON.parse(window.localStorage.getItem(getLSName(scenarioName, 'packages')) || '{}'); +} + +export const getPageSchema = async (scenarioName: string = 'unknown') => { + const pageSchema = getProjectSchemaFromLocalStorage(scenarioName).componentsTree?.[0]; + + if (pageSchema) { + return pageSchema; + } + + return schema; +}; diff --git a/src/services/schema.json b/src/services/schema.json new file mode 100644 index 0000000..96d6820 --- /dev/null +++ b/src/services/schema.json @@ -0,0 +1,73 @@ +{ + "componentName": "Page", + "id": "node_dockcviv8fo1", + "props": { + "ref": "outerView", + "style": { + "height": "100%" + } + }, + "fileName": "/", + "dataSource": { + "list": [ + { + "type": "fetch", + "isInit": true, + "options": { + "params": {}, + "method": "GET", + "isCors": true, + "timeout": 5000, + "headers": {}, + "uri": "mock/info.json" + }, + "id": "info", + "shouldFetch": { + "type": "JSFunction", + "value": "function() { \n console.log('should fetch.....');\n return true; \n}" + } + } + ] + }, + "state": { + "text": { + "type": "JSExpression", + "value": "\"outer\"" + }, + "isShowDialog": { + "type": "JSExpression", + "value": "false" + } + }, + "css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}", + "lifeCycles": { + "componentDidMount": { + "type": "JSFunction", + "value": "function componentDidMount() {\n console.log('did mount');\n}" + }, + "componentWillUnmount": { + "type": "JSFunction", + "value": "function componentWillUnmount() {\n console.log('will unmount');\n}" + } + }, + "methods": { + "testFunc": { + "type": "JSFunction", + "value": "function testFunc() {\n console.log('test func');\n}" + }, + "onClick": { + "type": "JSFunction", + "value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}" + }, + "closeDialog": { + "type": "JSFunction", + "value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}" + } + }, + "originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}", + "hidden": false, + "title": "", + "isLocked": false, + "condition": true, + "conditionGroup": "" +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..23314ab --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,44 @@ +{ + "compilerOptions": { + "baseUrl": ".", + "declaration": true, + "lib": ["es2015", "dom"], + // Target latest version of ECMAScript. + "target": "esnext", + // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. + "module": "esnext", + // Search under node_modules for non-relative imports. + "moduleResolution": "node", + // Process & infer types from .js files. + "allowJs": true, + // Report errors in .js files. + "checkJs": false, + // Don't emit; allow Babel to transform files. + // "noEmit": true, + // Enable strictest settings like strictNullChecks & noImplicitAny. + "strict": true, + // Allow default imports from modules with no default export. This does not affect code emit, just typechecking. + "allowSyntheticDefaultImports": true, + // Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. + "esModuleInterop": true, + // Specify JSX code generation: 'preserve', 'react-native', or 'react'. + "jsx": "preserve", + // Import emit helpers (e.g. __extends, __rest, etc..) from tslib + "importHelpers": true, + // Enables experimental support for ES7 decorators. + "experimentalDecorators": true, + // Generates corresponding .map file. + "sourceMap": true, + // Disallow inconsistently-cased references to the same file. + "forceConsistentCasingInFileNames": true, + // Allow json import + "resolveJsonModule": true, + // skip type checking of declaration files + "skipLibCheck": true, + "outDir": "lib" + }, + "include": [ + "./src/" + ], + "exclude": ["**/test", "**/lib", "**/es", "node_modules"] +}