From fda6ddd6ee12e40b0fa4b04512a77164238c9f51 Mon Sep 17 00:00:00 2001 From: Nikolay Kostyurin Date: Wed, 9 Dec 2020 00:01:34 +0200 Subject: [PATCH] refactor: reduce dist files sizes (#76) * fix(parser): plugin-helper import, remove dist file code duplication * feat(plugin-helper): reduce bundle size, set new limits to 650 bytes * refactor(preset): html5, react presets to reduce the size of dist files --- packages/bbob-parser/src/parse.js | 2 +- packages/bbob-plugin-helper/package.json | 2 +- packages/bbob-plugin-helper/src/index.js | 20 ++-- packages/bbob-preset-html5/src/defaultTags.js | 106 ++++++------------ packages/bbob-preset-react/src/index.js | 28 +++-- packages/bbob-preset/src/index.js | 2 +- 6 files changed, 64 insertions(+), 96 deletions(-) diff --git a/packages/bbob-parser/src/parse.js b/packages/bbob-parser/src/parse.js index 4526c97..c70ee8a 100644 --- a/packages/bbob-parser/src/parse.js +++ b/packages/bbob-parser/src/parse.js @@ -1,5 +1,5 @@ import TagNode from '@bbob/plugin-helper/lib/TagNode'; -import { isTagNode } from '@bbob/plugin-helper'; +import { isTagNode } from '@bbob/plugin-helper/lib/index'; import { createLexer } from './lexer'; import { createList } from './utils'; diff --git a/packages/bbob-plugin-helper/package.json b/packages/bbob-plugin-helper/package.json index 98ab802..19c17b3 100644 --- a/packages/bbob-plugin-helper/package.json +++ b/packages/bbob-plugin-helper/package.json @@ -42,7 +42,7 @@ "bundlesize": [ { "path": "./dist/index.min.js", - "maxSize": "580 B" + "maxSize": "650 B" } ], "publishConfig": { diff --git a/packages/bbob-plugin-helper/src/index.js b/packages/bbob-plugin-helper/src/index.js index 31e0fab..a961085 100644 --- a/packages/bbob-plugin-helper/src/index.js +++ b/packages/bbob-plugin-helper/src/index.js @@ -4,6 +4,8 @@ const isTagNode = (el) => typeof el === 'object' && !!el.tag; const isStringNode = (el) => typeof el === 'string'; const isEOL = (el) => el === N; +const keysReduce = (obj, reduce, def) => Object.keys(obj).reduce(reduce, def); + const getNodeLength = (node) => { if (isTagNode(node)) { return node.content.reduce((count, contentNode) => count + getNodeLength(contentNode), 0); @@ -61,13 +63,15 @@ const attrValue = (name, value) => { */ const attrsToString = (values) => { // To avoid some malformed attributes - if (typeof values === 'undefined') { + if (values == null) { return ''; } - return Object.keys(values) - .reduce((arr, key) => [...arr, attrValue(key, values[key])], ['']) - .join(' '); + return keysReduce( + values, + (arr, key) => [...arr, attrValue(key, values[key])], + [''], + ).join(' '); }; /** @@ -77,9 +81,11 @@ const attrsToString = (values) => { * @param attrs * @returns {string} */ -const getUniqAttr = (attrs) => Object - .keys(attrs) - .reduce((res, key) => (attrs[key] === key ? attrs[key] : null), null); +const getUniqAttr = (attrs) => keysReduce( + attrs, + (res, key) => (attrs[key] === key ? attrs[key] : null), + null, +); export { attrsToString, diff --git a/packages/bbob-preset-html5/src/defaultTags.js b/packages/bbob-preset-html5/src/defaultTags.js index 2ebfd7a..8822d38 100644 --- a/packages/bbob-preset-html5/src/defaultTags.js +++ b/packages/bbob-preset-html5/src/defaultTags.js @@ -1,5 +1,5 @@ /* eslint-disable no-plusplus,no-lonely-if */ -import { getUniqAttr, isStringNode, isTagNode } from '@bbob/plugin-helper'; +import { getUniqAttr, isStringNode, isTagNode } from '@bbob/plugin-helper/lib/index'; import TagNode from '@bbob/plugin-helper/lib/TagNode'; const isStartsWith = (node, type) => (node[0] === type); @@ -59,75 +59,39 @@ const renderUrl = (node, render) => (getUniqAttr(node.attrs) ? getUniqAttr(node.attrs) : render(node.content)); +const toNode = (tag, attrs, content) => ({ + tag, + attrs, + content, +}); + export default { - b: (node) => ({ - tag: 'span', - attrs: { - style: 'font-weight: bold;', - }, - content: node.content, - }), - i: (node) => ({ - tag: 'span', - attrs: { - style: 'font-style: italic;', - }, - content: node.content, - }), - u: (node) => ({ - tag: 'span', - attrs: { - style: 'text-decoration: underline;', - }, - content: node.content, - }), - s: (node) => ({ - tag: 'span', - attrs: { - style: 'text-decoration: line-through;', - }, - content: node.content, - }), - url: (node, { render }, options) => ({ - tag: 'a', - attrs: { - href: renderUrl(node, render, options), - }, - content: node.content, - }), - img: (node, { render }) => ({ - tag: 'img', - attrs: { - src: render(node.content), - }, - content: null, - }), - quote: (node) => ({ - tag: 'blockquote', - attrs: {}, - content: [{ - tag: 'p', - attrs: {}, - content: node.content, - }], - }), - code: (node) => ({ - tag: 'pre', - attrs: {}, - content: node.content, - }), - style: (node) => ({ - tag: 'span', - attrs: { - style: getStyleFromAttrs(node.attrs), - }, - content: node.content, - }), - list: (node) => ({ - tag: getUniqAttr(node.attrs) ? 'ol' : 'ul', - attrs: getUniqAttr(node.attrs) ? { - type: getUniqAttr(node.attrs), - } : {}, - content: asListItems(node.content), - }), + b: (node) => toNode('span', { + style: 'font-weight: bold;', + }, node.content), + i: (node) => toNode('span', { + style: 'font-style: italic;', + }, node.content), + u: (node) => toNode('span', { + style: 'text-decoration: underline;', + }, node.content), + s: (node) => toNode('span', { + style: 'text-decoration: line-through;', + }, node.content), + url: (node, { render }, options) => toNode('a', { + href: renderUrl(node, render, options), + }, node.content), + img: (node, { render }) => toNode('img', { + src: render(node.content), + }, null), + quote: (node) => toNode('blockquote', {}, [toNode('p', {}, node.content)]), + code: (node) => toNode('pre', {}, node.content), + style: (node) => toNode('span', { + style: getStyleFromAttrs(node.attrs), + }, node.content), + list: (node) => { + const type = getUniqAttr(node.attrs); + + return toNode(type ? 'ol' : 'ul', type ? { type } : {}, asListItems(node.content)); + }, }; diff --git a/packages/bbob-preset-react/src/index.js b/packages/bbob-preset-react/src/index.js index fb270a0..8c7d7d2 100644 --- a/packages/bbob-preset-react/src/index.js +++ b/packages/bbob-preset-react/src/index.js @@ -1,33 +1,31 @@ import presetHTML5 from '@bbob/preset-html5'; +const tagAttr = (style) => ({ + attrs: { + style, + }, +}); + export default presetHTML5.extend((tags) => ({ ...tags, b: (...args) => ({ ...tags.b(...args), - attrs: { - style: { fontWeight: 'bold' }, - }, + ...tagAttr({ fontWeight: 'bold' }), }), i: (...args) => ({ - ...tags.b(...args), - attrs: { - style: { fontStyle: 'italic' }, - }, + ...tags.i(...args), + ...tagAttr({ fontStyle: 'italic' }), }), u: (...args) => ({ - ...tags.b(...args), - attrs: { - style: { textDecoration: 'underline' }, - }, + ...tags.u(...args), + ...tagAttr({ textDecoration: 'underline' }), }), s: (...args) => ({ - ...tags.b(...args), - attrs: { - style: { textDecoration: 'line-through' }, - }, + ...tags.s(...args), + ...tagAttr({ textDecoration: 'line-through' }), }), })); diff --git a/packages/bbob-preset/src/index.js b/packages/bbob-preset/src/index.js index b10aceb..73e3ed4 100644 --- a/packages/bbob-preset/src/index.js +++ b/packages/bbob-preset/src/index.js @@ -1,5 +1,5 @@ /* eslint-disable indent */ -import { isTagNode } from '@bbob/plugin-helper'; +import { isTagNode } from '@bbob/plugin-helper/lib/index'; function process(tags, tree, core, options) { tree.walk((node) => (isTagNode(node) && tags[node.tag]