From ac4941f69a44522f37fcc83d0e8b2079be6ed87c Mon Sep 17 00:00:00 2001 From: Alek Date: Sat, 9 Jan 2021 12:58:41 -0300 Subject: [PATCH] feat: Vue3 migration (#28) BREAKING CHANGE: - Require Vue 3 --- package.json | 3 +- src/index.js | 57 +++++++++++++++--------------- src/utils.js | 7 ---- yarn.lock | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 4 files changed, 123 insertions(+), 41 deletions(-) delete mode 100644 src/utils.js diff --git a/package.json b/package.json index 7624da7..affa6ae 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ "lint": "xo", "prepublishOnly": "npm run build", "build": "npm run build:umd && npm run build:cjs", - "build:umd": "bili --file-name \"vue-prism-component[min].js\" --format umd --format umd-min --env.NODE_ENV production --module-name PrismComponent --external prismjs", + "build:umd": "bili --file-name \"vue-prism-component[min].js\" --format umd --format umd-min --env.NODE_ENV production --module-name PrismComponent --external prismjs --external vue", "build:cjs": "bili --file-name \"vue-prism-component.common.js\" --format cjs" }, "author": "egoist <0x142857@gmail.com>", @@ -28,6 +28,7 @@ "bili": "^4.9.0", "eslint-config-rem": "^3.0.0", "prismjs": "^1.6.0", + "vue": "^3.0.4", "xo": "^0.18.0" }, "xo": { diff --git a/src/index.js b/src/index.js index 2b62168..1f4a872 100644 --- a/src/index.js +++ b/src/index.js @@ -1,8 +1,7 @@ +import { h, defineComponent } from 'vue' import Prism from 'prismjs' -import { assign } from './utils' -export default { - functional: true, +export default defineComponent({ props: { code: { type: String @@ -16,12 +15,14 @@ export default { default: 'markup' } }, - render(h, ctx) { + setup(props, { slots, attrs }) { + const defaultSlot = (slots && slots.default && slots.default()) || [] const code = - ctx.props.code || - (ctx.children && ctx.children.length > 0 ? ctx.children[0].text : '') - const inline = ctx.props.inline - const language = ctx.props.language + props.code || (defaultSlot && defaultSlot.length) + ? defaultSlot[0].children + : '' + const inline = props.inline + const language = props.language const prismLanguage = Prism.languages[language] const className = `language-${language}` @@ -30,32 +31,28 @@ export default { `Prism component for language "${language}" was not found, did you forget to register it? See all available ones: https://cdn.jsdelivr.net/npm/prismjs/components/` ) } + return () => { + if (inline) { + return h('code', { + class: [className], + innerHTML: Prism.highlight(code, prismLanguage) + }) + } - if (inline) { return h( - 'code', - assign({}, ctx.data, { - class: [ctx.data.class, className], - domProps: assign({}, ctx.data.domProps, { + 'pre', + { + ...attrs, + class: [attrs.class, className] + }, + [ + h('code', { + ...attrs, + class: [attrs.class, className], innerHTML: Prism.highlight(code, prismLanguage) }) - }) + ] ) } - - return h( - 'pre', - assign({}, ctx.data, { - class: [ctx.data.class, className] - }), - [ - h('code', { - class: className, - domProps: { - innerHTML: Prism.highlight(code, prismLanguage) - } - }) - ] - ) } -} +}) diff --git a/src/utils.js b/src/utils.js deleted file mode 100644 index 6b42822..0000000 --- a/src/utils.js +++ /dev/null @@ -1,7 +0,0 @@ -export function assign(obj) { - for (let i = 1; i < arguments.length; i++) { - // eslint-disable-next-line guard-for-in, prefer-rest-params - for (const p in arguments[i]) obj[p] = arguments[i][p] - } - return obj -} diff --git a/yarn.lock b/yarn.lock index b66af9c..6fc7599 100644 --- a/yarn.lock +++ b/yarn.lock @@ -236,6 +236,11 @@ dependencies: "@babel/types" "^7.8.3" +"@babel/helper-validator-identifier@^7.12.11": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed" + integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw== + "@babel/helper-validator-identifier@^7.9.0", "@babel/helper-validator-identifier@^7.9.5": version "7.9.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80" @@ -269,6 +274,11 @@ chalk "^2.0.0" js-tokens "^4.0.0" +"@babel/parser@^7.12.0": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.11.tgz#9ce3595bcd74bc5c466905e86c535b8b25011e79" + integrity sha512-N3UxG+uuF4CMYoNj8AhnbAcJF0PiuJ9KHuy1lQmkYsxTer/MAH9UBNHsBoAX/4s6NvlDD047No8mYVGGzLL4hg== + "@babel/parser@^7.8.6", "@babel/parser@^7.9.0": version "7.9.4" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8" @@ -804,6 +814,15 @@ globals "^11.1.0" lodash "^4.17.13" +"@babel/types@^7.12.0": + version "7.12.11" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.11.tgz#a86e4d71e30a9b6ee102590446c98662589283ce" + integrity sha512-ukA9SQtKThINm++CX1CwmliMrE54J6nIYB5XTwL5f/CLFW9owfls+YSU8tVW15RQ2w+a3fSbPjC6HdQNtWZkiA== + dependencies: + "@babel/helper-validator-identifier" "^7.12.11" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@babel/types@^7.4.4", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5": version "7.9.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444" @@ -835,6 +854,54 @@ dependencies: "@types/node" "*" +"@vue/compiler-core@3.0.4": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.0.4.tgz#0122aca6eada4cb28b39ed930af917444755e330" + integrity sha512-snpMICsbWTZqBFnPB03qr4DtiSxVYfDF3DvbDSkN9Z9NTM8Chl8E/lYhKBSsvauq91DAWAh8PU3lr9vrLyQsug== + dependencies: + "@babel/parser" "^7.12.0" + "@babel/types" "^7.12.0" + "@vue/shared" "3.0.4" + estree-walker "^2.0.1" + source-map "^0.6.1" + +"@vue/compiler-dom@3.0.4": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.0.4.tgz#834fd4b15c5698cf9f4505c2bfbccca058a843eb" + integrity sha512-FOxbHBIkkGjYQeTz1DlXQjS1Ms8EPXQWsdTdTPeohoS0KzCz6RiOjiAG+jLtMi6Nr5GX2h0TlCvcnI8mcsicFQ== + dependencies: + "@vue/compiler-core" "3.0.4" + "@vue/shared" "3.0.4" + +"@vue/reactivity@3.0.4": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.0.4.tgz#b6599dd8271a745960a03f05744ccf7991ba5d8d" + integrity sha512-AFTABrLhUYZY2on3ea9FxeXal7w3f6qIp9gT+/oG93H7dFTL5LvVnxygCopv7tvkIl/GSGQb/yK1D1gmXx1Pww== + dependencies: + "@vue/shared" "3.0.4" + +"@vue/runtime-core@3.0.4": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.0.4.tgz#a5b9a001560b1fd8c01a43f68b764c555de7836c" + integrity sha512-qH9e4kqU7b3u1JewvLmGmoAGY+mnuBqz7aEKb2mhpEgwa1yFv496BRuUfMXXMCix3+TndUVMJ8jt41FSdNppwg== + dependencies: + "@vue/reactivity" "3.0.4" + "@vue/shared" "3.0.4" + +"@vue/runtime-dom@3.0.4": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.0.4.tgz#6f81aec545f24511d2c28a315aa3391420b69c68" + integrity sha512-BGIoiTSESzWUhN0Ofi2X/q+HN8f6IUFmUEyyBGKbmx7DTAJNZhFfjqsepfXQrM5IGeTfJLB1ZEVyroDQJNXq3g== + dependencies: + "@vue/runtime-core" "3.0.4" + "@vue/shared" "3.0.4" + csstype "^2.6.8" + +"@vue/shared@3.0.4": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.0.4.tgz#6dc50f593bdfdeaa6183d1dbc15e2d45e7c6b8b3" + integrity sha512-Swfbz31AaMX48CpFl+YmIrqOH9MgJMTrltG9e26A4ZxYx9LjGuMV+41WnxFzS3Bc9nbrc6sDPM37G6nIT8NJSg== + acorn-dynamic-import@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948" @@ -1182,9 +1249,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001038: - version "1.0.30001040" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001040.tgz#103fc8e6eb1d7397e95134cd0e996743353d58ea" - integrity sha512-Ep0tEPeI5wCvmJNrXjE3etgfI+lkl1fTDU6Y3ZH1mhrjkPlVI9W4pcKbMo+BQLpEWKVYYp2EmYaRsqpPC3k7lQ== + version "1.0.30001170" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001170.tgz" + integrity sha512-Dd4d/+0tsK0UNLrZs3CvNukqalnVTRrxb5mcQm8rHL49t7V5ZaTygwXkrq+FB+dVDf++4ri8eJnFEJAB8332PA== capture-stack-trace@^1.0.0: version "1.0.0" @@ -1596,6 +1663,11 @@ csso@^4.0.2: dependencies: css-tree "1.0.0-alpha.39" +csstype@^2.6.8: + version "2.6.14" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de" + integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A== + currently-unhandled@^0.4.1: version "0.4.1" resolved "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea" @@ -2094,6 +2166,11 @@ estree-walker@^0.6.0, estree-walker@^0.6.1: resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362" integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w== +estree-walker@^2.0.1: + version "2.0.2" + resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac" + integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w== + esutils@^2.0.2: version "2.0.2" resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz#0abf4f1caa5bcb1f7a9d8acc6dea4faaa04bac9b" @@ -3087,6 +3164,11 @@ lodash@^4.17.13: resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548" integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A== +lodash@^4.17.19: + version "4.17.20" + resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" + integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== + log-symbols@^1.0.2: version "1.0.2" resolved "https://registry.npmjs.org/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18" @@ -4946,6 +5028,15 @@ vlq@^0.2.2: resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26" integrity sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow== +vue@^3.0.4: + version "3.0.4" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.0.4.tgz#872c65c143f5717bd5387c61613d9f55f4cc0f43" + integrity sha512-2o+AiQF8sAupyhbyl3oxVCl3WCwC/n5NI7VMM+gVQ231qvSB8eI7sCBloloqDJK6yA367EEtmRSeSCf4sxCC+A== + dependencies: + "@vue/compiler-dom" "3.0.4" + "@vue/runtime-dom" "3.0.4" + "@vue/shared" "3.0.4" + wcwidth@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/wcwidth/-/wcwidth-1.0.1.tgz#f0b0dcf915bc5ff1528afadb2c0e17b532da2fe8"