From 7407b6223ce55732d43d5d1a43f5c37182cb7935 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E5=A4=9A=E7=9B=8A?= Date: Thu, 23 Sep 2021 12:34:34 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20=E4=BF=AE=E5=A4=8D=E5=AE=98=E7=BD=91?= =?UTF-8?q?=E5=9C=A8=20IE11=20=E4=B8=8B=E6=89=93=E4=B8=8D=E5=BC=80?= =?UTF-8?q?=E9=97=AE=E9=A2=98=20(#2602)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 +- docs/zh-CN/components/web-component.md | 41 +++++++++++---- examples/components/Example.tsx | 1 - examples/components/WebComponent.jsx | 29 ----------- fis-conf.js | 71 ++++++++++++++++++++++++-- package.json | 1 - 6 files changed, 98 insertions(+), 47 deletions(-) delete mode 100644 examples/components/WebComponent.jsx diff --git a/.gitignore b/.gitignore index 0f5382b1d..bdaee866b 100644 --- a/.gitignore +++ b/.gitignore @@ -21,7 +21,7 @@ node_modules /toolkit/amis-renderer /toolkit/output /coverage -/package-lock.json +package-lock.json /schema.json /npm /mock/cfc/cfc.zip diff --git a/docs/zh-CN/components/web-component.md b/docs/zh-CN/components/web-component.md index 109809d26..2ca9ae6d4 100644 --- a/docs/zh-CN/components/web-component.md +++ b/docs/zh-CN/components/web-component.md @@ -14,26 +14,48 @@ order: 73 比如下面这个 web component -``` +```html ``` +对应代码类似 + +```javascript +import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter'; + +class RandomNumber extends HTMLElement { + connectedCallback() { + const prefix = this.getAttribute('prefix') || ''; + const shadow = this.attachShadow({mode: 'open'}); + const text = document.createElement('span'); + text.textContent = `${prefix}: ${Math.floor(Math.random() * 1000)}`; + shadow.appendChild(text); + setInterval(function () { + const count = `${prefix}: ${Math.floor(Math.random() * 1000)}`; + text.textContent = count; + }, 2000); + } +} + +customElements.define('random-number', RandomNumber); +``` + 使用 amis 可以这样渲染出来 -```schema: scope="body" +```json { - "type": "web-component", - "tag": "random-number", - "props": { - "prefix": "hello", - "class": "my-class" - } + "type": "web-component", + "tag": "random-number", + "props": { + "prefix": "hello", + "class": "my-class" + } } ``` 其中 `tag` 指定标签，属性放在 `props` 对象里，props 里的值支持变量替换，比如： -```schema +```json { "data": { "text": "World" @@ -47,7 +69,6 @@ order: 73 } } } - ``` ## 属性表 diff --git a/examples/components/Example.tsx b/examples/components/Example.tsx index 917529ef6..5886dde41 100644 --- a/examples/components/Example.tsx +++ b/examples/components/Example.tsx @@ -85,7 +85,6 @@ import Tab3Schema from './Tabs/Tab3'; import TestComponent from './Test'; import APP from './APP/index'; import {normalizeLink} from '../../src/utils/normalizeLink'; -import './WebComponent'; export const examples = [ { diff --git a/examples/components/WebComponent.jsx b/examples/components/WebComponent.jsx deleted file mode 100644 index 0298c835e..000000000 --- a/examples/components/WebComponent.jsx +++ /dev/null @@ -1,29 +0,0 @@ -/** - * web component 的示例 - */ - -import '@webcomponents/webcomponentsjs/custom-elements-es5-adapter'; - -class RandomNumber extends HTMLElement { - connectedCallback() { - const prefix = this.getAttribute('prefix') || ''; - const shadow = this.attachShadow({mode: 'open'}); - const text = document.createElement('span'); - text.textContent = `${prefix}: ${Math.floor(Math.random() * 1000)}`; - shadow.appendChild(text); - setInterval(function () { - const count = `${prefix}: ${Math.floor(Math.random() * 1000)}`; - text.textContent = count; - }, 2000); - } -} - -class WebContainer extends HTMLElement { - connectedCallback() { - const shadow = this.attachShadow({mode: 'open'}); - shadow.innerHTML = 'web-container'; - } -} - -customElements.define('random-number', RandomNumber); -customElements.define('web-container', WebContainer); diff --git a/fis-conf.js b/fis-conf.js index 99cd41336..011d1af75 100644 --- a/fis-conf.js +++ b/fis-conf.js @@ -784,19 +784,72 @@ if (fis.project.currentMedia() === 'publish') { '!jquery/**', '!zrender/**', '!echarts/**', + '!echarts-stat/**', '!papaparse/**', - '!exceljs/**' + '!exceljs/**', + '!docsearch.js/**', + '!monaco-editor/**.css', + '!src/components/RichText.tsx', + '!src/components/Tinymce.tsx', + '!src/components/ColorPicker.tsx', + '!react-color/**', + '!material-colors/**', + '!reactcss/**', + '!tinycolor2/**', + '!cropperjs/**', + '!react-cropper/**', + '!src/lib/renderers/Form/CityDB.js', + '!src/components/Markdown.tsx', + '!src/utils/markdown.ts', + '!highlight.js/**', + '!entities/**', + '!linkify-it/**', + '!mdurl/**', + '!uc.micro/**', + '!markdown-it/**', + '!markdown-it-html5-media/**', + '!punycode/**' ], + 'pkg/rich-text.js': [ 'src/components/RichText.js', 'froala-editor/**', 'jquery/**' ], + 'pkg/tinymce.js': ['src/components/Tinymce.tsx', 'tinymce/**'], - 'pkg/charts.js': ['zrender/**', 'echarts/**'], + 'pkg/papaparse.js': ['papaparse/**'], + 'pkg/exceljs.js': ['exceljs/**'], + + 'pkg/markdown.js': [ + 'src/components/Markdown.tsx', + 'src/utils/markdown.ts', + 'highlight.js/**', + 'entities/**', + 'linkify-it/**', + 'mdurl/**', + 'uc.micro/**', + 'markdown-it/**', + 'markdown-it-html5-media/**', + 'punycode/**' + ], + + 'pkg/color-picker.js': [ + 'src/components/ColorPicker.tsx', + 'react-color/**', + 'material-colors/**', + 'reactcss/**', + 'tinycolor2/**' + ], + + 'pkg/cropperjs.js': ['cropperjs/**', 'react-cropper/**'], + + 'pkg/charts.js': ['zrender/**', 'echarts/**', 'echarts-stat/**'], + 'pkg/api-mock.js': ['mock/*.ts'], + 'pkg/app.js': [ '/examples/components/App.tsx', '/examples/components/App.tsx:deps' @@ -810,17 +863,25 @@ if (fis.project.currentMedia() === 'publish') { 'pkg/rest.js': [ '**.{js,jsx,ts,tsx}', - '!static/mod.js', '!monaco-editor/**', '!mpegts.js/**', '!hls.js/**', '!froala-editor/**', + '!src/components/RichText.tsx', '!jquery/**', - '!src/components/RichText.js', '!zrender/**', '!echarts/**', '!papaparse/**', - '!exceljs/**' + '!exceljs/**', + '!src/utils/markdown.ts', + '!highlight.js/**', + '!argparse/**', + '!entities/**', + '!linkify-it/**', + '!mdurl/**', + '!uc.micro/**', + '!markdown-it/**', + '!markdown-it-html5-media/**' ], 'pkg/npm.css': ['node_modules/*/**.css', '!monaco-editor/**'], diff --git a/package.json b/package.json index c3e76ed77..2c60a22f0 100644 --- a/package.json +++ b/package.json @@ -118,7 +118,6 @@ "@types/react-transition-group": "^2.0.6", "@types/sortablejs": "^1.3.32", "@types/tinymce": "^4.5.24", - "@webcomponents/webcomponentsjs": "^2.6.0", "axios": "0.21.1", "bce-sdk-js": "^0.2.9", "concurrently": "^6.2.1",