From d574db15b81ac5129e2c7c906c8519a75f390842 Mon Sep 17 00:00:00 2001 From: bac-joker Date: Fri, 25 Dec 2020 20:41:48 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9Eicon=E7=9A=84?= =?UTF-8?q?=E8=83=BD=E5=8A=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .fatherrc.js | 1 + packages/fes-core/src/service/pluginAPI.js | 18 ++-- packages/fes-plugin-icon/.fatherrc.js | 3 + packages/fes-plugin-icon/package.json | 22 +++++ packages/fes-plugin-icon/src/Icon/Icon.jsx | 39 ++++++++ .../src}/Icon/icon.less | 7 +- .../src}/Icon/index.js | 0 packages/fes-plugin-icon/src/icons.tpl | 9 ++ packages/fes-plugin-icon/src/index.js | 76 ++++++++++++++++ packages/fes-plugin-icon/src/optimizeSvg.js | 91 +++++++++++++++++++ packages/fes-plugin-icon/src/runtime.tpl | 5 + .../src/plugins/features/devScripts.js | 2 +- .../src/plugins/features/html.js | 2 +- packages/fes-template-h5/package.json | 3 +- .../src/components/Icon/Icon.vue | 50 ---------- .../src/components/Icon/IconBase.js | 36 -------- .../src/components/Icon/icons.js | 8 -- .../src/components/Icon/util.js | 33 ------- .../src/{components/Icon => }/icons/smile.svg | 0 packages/fes-template-h5/src/pages/index.vue | 18 +++- .../src/styles/mixins/hairline.less | 4 + yarn.lock | 2 +- 22 files changed, 283 insertions(+), 146 deletions(-) create mode 100644 packages/fes-plugin-icon/.fatherrc.js create mode 100644 packages/fes-plugin-icon/package.json create mode 100644 packages/fes-plugin-icon/src/Icon/Icon.jsx rename packages/{fes-template-h5/src/components => fes-plugin-icon/src}/Icon/icon.less (91%) rename packages/{fes-template-h5/src/components => fes-plugin-icon/src}/Icon/index.js (100%) create mode 100644 packages/fes-plugin-icon/src/icons.tpl create mode 100644 packages/fes-plugin-icon/src/index.js create mode 100644 packages/fes-plugin-icon/src/optimizeSvg.js create mode 100644 packages/fes-plugin-icon/src/runtime.tpl delete mode 100644 packages/fes-template-h5/src/components/Icon/Icon.vue delete mode 100644 packages/fes-template-h5/src/components/Icon/IconBase.js delete mode 100644 packages/fes-template-h5/src/components/Icon/icons.js delete mode 100644 packages/fes-template-h5/src/components/Icon/util.js rename packages/fes-template-h5/src/{components/Icon => }/icons/smile.svg (100%) diff --git a/.fatherrc.js b/.fatherrc.js index fa714010..fcb12e40 100644 --- a/.fatherrc.js +++ b/.fatherrc.js @@ -13,6 +13,7 @@ const headPkgs = [ "fes-plugin-access", "fes-plugin-model", "fes-plugin-layout", + "fes-plugin-icon", ]; const tailPkgs = []; // const otherPkgs = readdirSync(join(__dirname, 'packages')).filter( diff --git a/packages/fes-core/src/service/pluginAPI.js b/packages/fes-core/src/service/pluginAPI.js index 64e2efd4..d4d67511 100644 --- a/packages/fes-core/src/service/pluginAPI.js +++ b/packages/fes-core/src/service/pluginAPI.js @@ -28,7 +28,7 @@ export default class PluginAPI { if (plugins[id]) { const name = plugins[id].isPreset ? 'preset' : 'plugin'; throw new Error( - `api.describe() failed, ${name} ${id} is already registered by ${plugins[id].path}.`, + `api.describe() failed, ${name} ${id} is already registered by ${plugins[id].path}.` ); } plugins[id] = plugins[this.id]; @@ -51,11 +51,11 @@ export default class PluginAPI { register(hook) { assert( hook.key && typeof hook.key === 'string', - `api.register() failed, hook.key must supplied and should be string, but got ${hook.key}.`, + `api.register() failed, hook.key must supplied and should be string, but got ${hook.key}.` ); assert( hook.fn && typeof hook.fn === 'function', - `api.register() failed, hook.fn must supplied and should be function, but got ${hook.fn}.`, + `api.register() failed, hook.fn must supplied and should be function, but got ${hook.fn}.` ); this.service.hooksByPluginId[this.id] = ( this.service.hooksByPluginId[this.id] || [] @@ -66,7 +66,7 @@ export default class PluginAPI { const { name, alias } = command; assert( !this.service.commands[name], - `api.registerCommand() failed, the command ${name} is exists.`, + `api.registerCommand() failed, the command ${name} is exists.` ); this.service.commands[name] = command; if (alias) { @@ -79,11 +79,11 @@ export default class PluginAPI { assert( this.service.stage === ServiceStage.initPresets || this.service.stage === ServiceStage.initPlugins, - 'api.registerPlugins() failed, it should only be used in registering stage.', + 'api.registerPlugins() failed, it should only be used in registering stage.' ); assert( Array.isArray(plugins), - 'api.registerPlugins() failed, plugins must be Array.', + 'api.registerPlugins() failed, plugins must be Array.' ); const extraPlugins = plugins.map(plugin => (isValidPlugin(plugin) ? (plugin) @@ -102,11 +102,11 @@ export default class PluginAPI { registerPresets(presets) { assert( this.service.stage === ServiceStage.initPresets, - 'api.registerPresets() failed, it should only used in presets.', + 'api.registerPresets() failed, it should only used in presets.' ); assert( Array.isArray(presets), - 'api.registerPresets() failed, presets must be Array.', + 'api.registerPresets() failed, presets must be Array.' ); const extraPresets = presets.map(preset => (isValidPlugin(preset) ? (preset) @@ -127,7 +127,7 @@ export default class PluginAPI { if (this.service.pluginMethods[name]) { if (exitsError) { throw new Error( - `api.registerMethod() failed, method ${name} is already exist.`, + `api.registerMethod() failed, method ${name} is already exist.` ); } else { return; diff --git a/packages/fes-plugin-icon/.fatherrc.js b/packages/fes-plugin-icon/.fatherrc.js new file mode 100644 index 00000000..332f1bff --- /dev/null +++ b/packages/fes-plugin-icon/.fatherrc.js @@ -0,0 +1,3 @@ +export default { + disableTypeCheck: false, +}; diff --git a/packages/fes-plugin-icon/package.json b/packages/fes-plugin-icon/package.json new file mode 100644 index 00000000..4a8c204b --- /dev/null +++ b/packages/fes-plugin-icon/package.json @@ -0,0 +1,22 @@ +{ + "name": "@webank/fes-plugin-icon", + "version": "1.0.0", + "description": "", + "main": "lib/index.js", + "files": [ + "lib" + ], + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "module": "dist/index.esm.js", + "keywords": [], + "author": "", + "license": "MIT", + "peerDependencies": { + "vue": "^3.0.4" + }, + "dependencies": { + "svgo": "1.3.2" + } +} diff --git a/packages/fes-plugin-icon/src/Icon/Icon.jsx b/packages/fes-plugin-icon/src/Icon/Icon.jsx new file mode 100644 index 00000000..beccaa64 --- /dev/null +++ b/packages/fes-plugin-icon/src/Icon/Icon.jsx @@ -0,0 +1,39 @@ +import { computed } from 'vue'; +// eslint-disable-next-line +import icons from './icons'; + +const noop = () => { }; + +export default { + name: 'FesIcon', + props: ['type', 'spin', 'rotate', 'tabIndex'], + setup(props, { attrs }) { + const CurrentIcon = computed(() => icons[props.type]); + const iconTabIndex = computed(() => { + let tabIndex = props.tabIndex; + if (tabIndex == null && attrs.onClick) { + tabIndex = -1; + } + return tabIndex; + }); + const svgStyle = computed(() => (props.rotate + ? { + msTransform: `rotate(${props.rotate}deg)`, + transform: `rotate(${props.rotate}deg)` + } + : null)); + const svgCls = computed(() => ({ + 'inner-icon--spin': !!props.spin || props.type === 'loading' + })); + return () => ( + + + + ); + } +}; diff --git a/packages/fes-template-h5/src/components/Icon/icon.less b/packages/fes-plugin-icon/src/Icon/icon.less similarity index 91% rename from packages/fes-template-h5/src/components/Icon/icon.less rename to packages/fes-plugin-icon/src/Icon/icon.less index 260abebd..e2efbaaa 100644 --- a/packages/fes-template-h5/src/components/Icon/icon.less +++ b/packages/fes-plugin-icon/src/Icon/icon.less @@ -1,8 +1,6 @@ -@import "~@/styles/theme.less"; - .inner-icon { display: inline-block; - color: @icon-color; + color: inherit; font-style: normal; line-height: 0; text-align: center; @@ -19,6 +17,9 @@ svg { display: inline-block; + width: 1em; + height: 1em; + fill: currentColor; } &::before { diff --git a/packages/fes-template-h5/src/components/Icon/index.js b/packages/fes-plugin-icon/src/Icon/index.js similarity index 100% rename from packages/fes-template-h5/src/components/Icon/index.js rename to packages/fes-plugin-icon/src/Icon/index.js diff --git a/packages/fes-plugin-icon/src/icons.tpl b/packages/fes-plugin-icon/src/icons.tpl new file mode 100644 index 00000000..9bb58afb --- /dev/null +++ b/packages/fes-plugin-icon/src/icons.tpl @@ -0,0 +1,9 @@ +{{#ICON_NAMES}} +import smile from './icons/{{.}}'; +{{/ICON_NAMES}} + +export default { + {{#ICON_NAMES}} + {{.}} + {{/ICON_NAMES}} +}; \ No newline at end of file diff --git a/packages/fes-plugin-icon/src/index.js b/packages/fes-plugin-icon/src/index.js new file mode 100644 index 00000000..9b7819ce --- /dev/null +++ b/packages/fes-plugin-icon/src/index.js @@ -0,0 +1,76 @@ +import { readFileSync, copyFileSync, statSync } from 'fs'; +import { join, basename } from 'path'; +import optimizeSvg from './optimizeSvg'; + +export default (api) => { + api.addRuntimePluginKey(() => ''); + // 配置 + api.describe({ + key: 'icon', + config: { + schema(joi) { + return joi.object(); + } + } + }); + + const namespace = 'plugin-icon'; + const absRuntimeFilePath = join(namespace, 'runtime.js'); + + // TODO 监听 icons 文件变更，重新生成文件 + api.onGenerateFiles(async () => { + const base = join(api.paths.absSrcPath, 'icons'); + const iconFiles = api.utils.glob.sync('**/*', { + cwd: join(api.paths.absSrcPath, 'icons') + }); + const svgDatas = await optimizeSvg(iconFiles.map(item => join(base, item))); + const iconNames = []; + const SVG_COMPONENT_TMPLATE = 'export default () => (SVG)'; + for (const { fileName, data } of svgDatas) { + iconNames.push(basename(fileName, '.svg')); + api.writeTmpFile({ + path: `${namespace}/icons/${basename(fileName, '.svg')}.js`, + content: SVG_COMPONENT_TMPLATE + .replace('SVG', data) + }); + } + + api.writeTmpFile({ + path: `${namespace}/icons.js`, + content: api.utils.Mustache.render( + readFileSync(join(__dirname, './icons.tpl'), 'utf-8'), + { + ICON_NAMES: iconNames + } + ) + }); + + api.writeTmpFile({ + path: absRuntimeFilePath, + content: api.utils.Mustache.render(readFileSync(join(__dirname, 'runtime.tpl'), 'utf-8'), { + }) + }); + }); + + let generatedOnce = false; + api.onGenerateFiles(() => { + if (generatedOnce) return; + generatedOnce = true; + const cwd = join(__dirname, '../src/Icon'); + const files = api.utils.glob.sync('**/*', { + cwd + }); + const base = join(api.paths.absTmpPath, namespace); + files.forEach((file) => { + const source = join(cwd, file); + const target = join(base, file); + if (statSync(source).isDirectory()) { + api.utils.mkdirp.sync(target); + } else { + copyFileSync(source, target); + } + }); + }); + + api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); +}; diff --git a/packages/fes-plugin-icon/src/optimizeSvg.js b/packages/fes-plugin-icon/src/optimizeSvg.js new file mode 100644 index 00000000..f5c2886b --- /dev/null +++ b/packages/fes-plugin-icon/src/optimizeSvg.js @@ -0,0 +1,91 @@ +import { extname, basename } from 'path'; +import { statSync, readFileSync } from 'fs'; + + +import SVGO from 'svgo/lib/svgo'; + +const svgo = new SVGO({ + plugins: [{ + cleanupAttrs: true + }, { + removeDoctype: true + }, { + removeXMLProcInst: true + }, { + removeComments: true + }, { + removeMetadata: true + }, { + removeTitle: true + }, { + removeDesc: true + }, { + removeUselessDefs: true + }, { + removeEditorsNSData: true + }, { + removeEmptyAttrs: true + }, { + removeHiddenElems: true + }, { + removeEmptyText: true + }, { + removeEmptyContainers: true + }, { + removeViewBox: false + }, { + cleanupEnableBackground: true + }, { + convertStyleToAttrs: true + }, { + convertColors: true + }, { + convertPathData: true + }, { + convertTransform: true + }, { + removeUnknownsAndDefaults: true + }, { + removeNonInheritableGroupAttrs: true + }, { + removeUselessStrokeAndFill: true + }, { + removeUnusedNS: true + }, { + cleanupIDs: true + }, { + cleanupNumericValues: true + }, { + moveElemsAttrsToGroup: true + }, { + moveGroupAttrsToElems: true + }, { + collapseGroups: true + }, { + removeRasterImages: false + }, { + mergePaths: true + }, { + convertShapeToPath: true + }, { + sortAttrs: true + }, { + removeDimensions: true + }, { + removeAttrs: { attrs: '(stroke|fill)' } + }] +}); + +export default function optimizeSvg(files) { + const optimizedSvgData = []; + for (const filePath of files) { + if (statSync(filePath).isFile() && extname(filePath) === '.svg') { + const data = readFileSync(filePath, 'utf-8'); + optimizedSvgData.push(svgo.optimize(data, { path: filePath }).then(svgData => ({ + fileName: basename(filePath), + ...svgData + }))); + } + } + return Promise.all(optimizedSvgData); +} diff --git a/packages/fes-plugin-icon/src/runtime.tpl b/packages/fes-plugin-icon/src/runtime.tpl new file mode 100644 index 00000000..ecedb2b7 --- /dev/null +++ b/packages/fes-plugin-icon/src/runtime.tpl @@ -0,0 +1,5 @@ +import Icon from './index'; + +export function onAppCreated({ app }) { + app.component('fes-icon', Icon); +} diff --git a/packages/fes-preset-built-in/src/plugins/features/devScripts.js b/packages/fes-preset-built-in/src/plugins/features/devScripts.js index 954d2ead..7260ab4e 100644 --- a/packages/fes-preset-built-in/src/plugins/features/devScripts.js +++ b/packages/fes-preset-built-in/src/plugins/features/devScripts.js @@ -46,7 +46,7 @@ export default (api) => { }); api.addHTMLHeadScripts(() => [{ - src: `${api.config.publicPath}@@/devScripts.js` + src: '@@/devScripts.js' }]); api.onGenerateFiles(() => { diff --git a/packages/fes-preset-built-in/src/plugins/features/html.js b/packages/fes-preset-built-in/src/plugins/features/html.js index 5dc7590e..3a5d4924 100644 --- a/packages/fes-preset-built-in/src/plugins/features/html.js +++ b/packages/fes-preset-built-in/src/plugins/features/html.js @@ -112,7 +112,7 @@ export default (api) => { webpackConfig .plugin('html-tags') .use(HtmlWebpackTagsPlugin, [{ - append: true, + append: false, scripts: headScripts.map(script => ({ path: script.src })) diff --git a/packages/fes-template-h5/package.json b/packages/fes-template-h5/package.json index 16594710..c6fc0b1f 100644 --- a/packages/fes-template-h5/package.json +++ b/packages/fes-template-h5/package.json @@ -34,6 +34,7 @@ }, "dependencies": { "vue": "^3.0.4", - "@webank/fes": "^2.0.0" + "@webank/fes": "^2.0.0", + "@webank/fes-plugin-icon": "^1.0.0" } } diff --git a/packages/fes-template-h5/src/components/Icon/Icon.vue b/packages/fes-template-h5/src/components/Icon/Icon.vue deleted file mode 100644 index edce5d17..00000000 --- a/packages/fes-template-h5/src/components/Icon/Icon.vue +++ /dev/null @@ -1,50 +0,0 @@ - - - diff --git a/packages/fes-template-h5/src/components/Icon/IconBase.js b/packages/fes-template-h5/src/components/Icon/IconBase.js deleted file mode 100644 index 8ee7d187..00000000 --- a/packages/fes-template-h5/src/components/Icon/IconBase.js +++ /dev/null @@ -1,36 +0,0 @@ -import { generate } from './util'; - -const IconBase = { - functional: true, - props: ['icon'], - render(h, ctx) { - const { - data: { attrs, ...restData } = {}, - props = {}, - listeners - } = ctx; - const { icon, ...restProps } = { - ...attrs, - ...props - }; - if (!icon) return null; - const target = icon; - - return generate(h, target.icon, `svg-${target.name}`, { - ...restData, - attrs: { - 'data-icon': target.name, - width: '1em', - height: '1em', - fill: 'currentColor', - 'aria-hidden': 'true', - ...restProps - }, - on: listeners - }); - } -}; - -IconBase.name = 'IconBase'; - -export default IconBase; diff --git a/packages/fes-template-h5/src/components/Icon/icons.js b/packages/fes-template-h5/src/components/Icon/icons.js deleted file mode 100644 index b69602e4..00000000 --- a/packages/fes-template-h5/src/components/Icon/icons.js +++ /dev/null @@ -1,8 +0,0 @@ -/* Automatically generated by './build/bin/gen-icons.js' */ - -import smile from './icons/smile.svg'; - - -export default { - smile -}; diff --git a/packages/fes-template-h5/src/components/Icon/util.js b/packages/fes-template-h5/src/components/Icon/util.js deleted file mode 100644 index f57f95bd..00000000 --- a/packages/fes-template-h5/src/components/Icon/util.js +++ /dev/null @@ -1,33 +0,0 @@ -export function normalizeAttrs(attrs = {}) { - return Object.keys(attrs).reduce((acc, key) => { - const val = attrs[key]; - switch (key) { - case 'class': - acc.className = val; - delete acc.class; - break; - default: - acc[key] = val; - } - return acc; - }, {}); -} - -export function generate(h, node, key, rootProps) { - if (!rootProps) { - return h( - node.tag, - { key, attrs: { ...normalizeAttrs(node.attrs) } }, - (node.children || []).map((child, index) => generate(h, child, `${key}-${node.tag}-${index}`)) - ); - } - return h( - node.tag, - { - key, - ...rootProps, - attrs: { ...normalizeAttrs(node.attrs), ...rootProps.attrs } - }, - (node.children || []).map((child, index) => generate(h, child, `${key}-${node.tag}-${index}`)) - ); -} diff --git a/packages/fes-template-h5/src/components/Icon/icons/smile.svg b/packages/fes-template-h5/src/icons/smile.svg similarity index 100% rename from packages/fes-template-h5/src/components/Icon/icons/smile.svg rename to packages/fes-template-h5/src/icons/smile.svg diff --git a/packages/fes-template-h5/src/pages/index.vue b/packages/fes-template-h5/src/pages/index.vue index 59343bbf..60c4add9 100644 --- a/packages/fes-template-h5/src/pages/index.vue +++ b/packages/fes-template-h5/src/pages/index.vue @@ -1,7 +1,7 @@ @@ -18,6 +18,7 @@ import { useRouter } from '@webank/fes'; export default { setup() { const fes = ref('fes upgrade to vue3'); + const rotate = ref(90); const router = useRouter(); onMounted(() => { console.log(router); @@ -27,8 +28,13 @@ export default { onMounted(() => { console.log('mounted2!!'); }); + const clickIcon = () => { + console.log('click Icon'); + }; return { - fes + fes, + rotate, + clickIcon }; } }; @@ -36,6 +42,7 @@ export default { diff --git a/packages/fes-template-h5/src/styles/mixins/hairline.less b/packages/fes-template-h5/src/styles/mixins/hairline.less index f0bb934d..c95c6f3d 100644 --- a/packages/fes-template-h5/src/styles/mixins/hairline.less +++ b/packages/fes-template-h5/src/styles/mixins/hairline.less @@ -18,6 +18,7 @@ html:not([data-scale]) & { @media (min-resolution: 2dppx) { border-top: none; + position: relative; &::before { .scale-hairline-common(@color, 0, auto, auto, 0); @@ -40,6 +41,7 @@ html:not([data-scale]) & { @media (min-resolution: 2dppx) { border-right: none; + position: relative; &::after { .scale-hairline-common(@color, 0, 0, auto, auto); @@ -63,6 +65,7 @@ html:not([data-scale]) & { @media (min-resolution: 2dppx) { border-bottom: none; + position: relative; &::after { .scale-hairline-common(@color, auto, auto, 0, 0); @@ -85,6 +88,7 @@ html:not([data-scale]) & { @media (min-resolution: 2dppx) { border-left: none; + position: relative; &::before { .scale-hairline-common(@color, 0, auto, auto, 0); diff --git a/yarn.lock b/yarn.lock index 4c05634e..428f0802 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13752,7 +13752,7 @@ svg-tags@^1.0.0: resolved "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q= -svgo@^1.0.0, svgo@^1.2.2: +svgo@1.3.2, svgo@^1.0.0, svgo@^1.2.2: version "1.3.2" resolved "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167" integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw==