From d6dbac504077f9771983fef6051533264dc8751d Mon Sep 17 00:00:00 2001 From: Aleksandr Kanunnikov Date: Tue, 20 Jul 2021 15:15:02 +0300 Subject: [PATCH 1/2] vue 3 support [not implemented] --- package.json | 12 +- src/utils/hydration-blocker.js | 6 +- test/integration/entry-integration.js | 19 +- test/integration/render.js | 22 +- test/integration/template.html | 2 +- test/performance/render.js | 2 +- test/performance/template-hydrate-never.html | 2 +- test/performance/template-reference.html | 2 +- yarn.lock | 315 +++++++++++++++---- 9 files changed, 286 insertions(+), 96 deletions(-) diff --git a/package.json b/package.json index 220a41f..036844b 100644 --- a/package.json +++ b/package.json @@ -54,10 +54,7 @@ "rollup": "^2.33.3", "rollup-plugin-babel": "^4.4.0", "serve": "^11.3.2", - "uglify-es": "^3.3.9", - "vue": "^2.6.12", - "vue-server-renderer": "^2.6.12", - "vue-template-compiler": "^2.6.12" + "uglify-es": "^3.3.9" }, "main": "dist/LazyHydrate.js", "module": "dist/LazyHydrate.esm.js", @@ -72,5 +69,10 @@ "> 0.5%", "not ie <= 10", "not op_mini all" - ] + ], + "dependencies": { + "vue": "^3.1.5", + "@vue/server-renderer": "^3.1.5", + "@vue/compiler-sfc": "^3.1.5" + } } diff --git a/src/utils/hydration-blocker.js b/src/utils/hydration-blocker.js index e1ff3c9..0bbd56f 100644 --- a/src/utils/hydration-blocker.js +++ b/src/utils/hydration-blocker.js @@ -1,9 +1,13 @@ +import { h, ref } from 'vue'; import { makeHydrationObserver } from './hydration-observer'; import { makeHydrationPromise } from './hydration-promise'; import { makeNonce } from './nonce'; export function makeHydrationBlocker(component, options) { return Object.assign({ + get $el() { + return ref(); + }, mixins: [{ beforeCreate() { this.cleanupHandlers = []; @@ -81,7 +85,7 @@ export function makeHydrationBlocker(component, options) { this.cleanupHandlers.forEach(handler => handler()); }, }, - render(h) { + render() { return h(this.Nonce, { attrs: this.$attrs, on: this.$listeners, diff --git a/test/integration/entry-integration.js b/test/integration/entry-integration.js index d97640b..81cd451 100644 --- a/test/integration/entry-integration.js +++ b/test/integration/entry-integration.js @@ -1,12 +1,17 @@ -import Vue from 'vue'; +import { createSSRApp, createApp } from 'vue'; import IntegrationAsync from './components/IntegrationAsync.vue'; import IntegrationSync from './components/IntegrationSync.vue'; -export const AppAsync = new Vue({ - render: h => h(IntegrationAsync), -}).$mount(`#app-async`); +const isBrowser = typeof document !== `undefined`; +const newApp = isBrowser ? createSSRApp : createApp; -export const AppSync = new Vue({ - render: h => h(IntegrationSync), -}).$mount(`#app-sync`); + +export const AppAsync = newApp(IntegrationAsync); + +export const AppSync = newApp(IntegrationSync); + +if (isBrowser) { + AppAsync.mount(`#app-async`); + AppSync.mount(`#app-sync`); +} diff --git a/test/integration/render.js b/test/integration/render.js index 548da64..460e10e 100644 --- a/test/integration/render.js +++ b/test/integration/render.js @@ -1,10 +1,12 @@ const fs = require(`fs`); -const vueServerRenderer = require(`vue-server-renderer`); +const { renderToString } = require(`@vue/server-renderer`); const entryIntegration = require(`./dist/entry-integration.common.js`); function saveFile(name, contents) { - fs.writeFile(`${__dirname}/dist/${name}.html`, contents, (error) => { + const entry = fs.readFileSync(`${__dirname}/template.html`, `utf-8`); + + fs.writeFile(`${__dirname}/dist/${name}.html`, entry.replace(``, contents), (error) => { if (error) throw error; // eslint-disable-next-line no-console @@ -12,18 +14,10 @@ function saveFile(name, contents) { }); } -const integrationRenderer = vueServerRenderer.createRenderer({ - template: fs.readFileSync(`${__dirname}/template.html`, `utf-8`), +renderToString(entryIntegration.AppAsync).then((result) => { + saveFile(`integration-async`, result); }); -integrationRenderer.renderToString(entryIntegration.AppAsync, (error, html) => { - if (error) throw error; - - saveFile(`integration-async`, html); -}); - -integrationRenderer.renderToString(entryIntegration.AppSync, (error, html) => { - if (error) throw error; - - saveFile(`integration-sync`, html); +renderToString(entryIntegration.AppSync).then((result) => { + saveFile(`integration-sync`, result); }); diff --git a/test/integration/template.html b/test/integration/template.html index 0f3fc5d..d4b08cc 100644 --- a/test/integration/template.html +++ b/test/integration/template.html @@ -4,7 +4,7 @@ integration test - + diff --git a/test/performance/render.js b/test/performance/render.js index 2fc7b26..0d99223 100644 --- a/test/performance/render.js +++ b/test/performance/render.js @@ -1,4 +1,4 @@ -const vueServerRenderer = require(`vue-server-renderer`); +const vueServerRenderer = require(`@vue/server-renderer`); const fs = require(`fs`); const entryReference = require(`./dist/entry-reference.common.js`); diff --git a/test/performance/template-hydrate-never.html b/test/performance/template-hydrate-never.html index 473f94f..55463e4 100644 --- a/test/performance/template-hydrate-never.html +++ b/test/performance/template-hydrate-never.html @@ -4,7 +4,7 @@ performance test - + diff --git a/test/performance/template-reference.html b/test/performance/template-reference.html index 580b949..66bc15f 100644 --- a/test/performance/template-reference.html +++ b/test/performance/template-reference.html @@ -4,7 +4,7 @@ performance test - + diff --git a/yarn.lock b/yarn.lock index 212c5be..f19ab60 100644 --- a/yarn.lock +++ b/yarn.lock @@ -229,6 +229,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz#a78c7a7251e01f616512d31b10adcf52ada5e0d2" integrity sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw== +"@babel/helper-validator-identifier@^7.14.5": + version "7.14.5" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.5.tgz#d0f0e277c512e0c938277faa85a3968c9a44c0e8" + integrity sha512-5lsetuxCLilmVGyiLEfoHBRX8UCFD+1m2x3Rj97WrW3V7H3u4RWRXA4evMjImCsin2J2YT0QaVDGf+z8ondbAg== + "@babel/helper-validator-option@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.12.1.tgz#175567380c3e77d60ff98a54bb015fe78f2178d9" @@ -267,6 +272,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.5.tgz#b4af32ddd473c0bfa643bd7ff0728b8e71b81ea0" integrity sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ== +"@babel/parser@^7.12.0", "@babel/parser@^7.13.9": + version "7.14.7" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.14.7.tgz#6099720c8839ca865a2637e6c85852ead0bdb595" + integrity sha512-X67Z5y+VBJuHB/RjwECp8kSl5uYi0BvRbNeWqkaJCVh+LiTPl19WBUfG627psSgp9rSf6ojuXghQM3ha6qHHdA== + "@babel/plugin-proposal-async-generator-functions@^7.12.1": version "7.12.1" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.12.1.tgz#dc6c1170e27d8aca99ff65f4925bd06b1c90550e" @@ -845,6 +855,14 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@^7.12.0", "@babel/types@^7.13.0": + version "7.14.5" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff" + integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg== + dependencies: + "@babel/helper-validator-identifier" "^7.14.5" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" @@ -1216,6 +1234,11 @@ dependencies: "@types/node" "*" +"@types/estree@^0.0.48": + version "0.0.48" + resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.48.tgz#18dc8091b285df90db2f25aa7d906cfc394b7f74" + integrity sha512-LfZwXoGUDo0C3me81HXgkBg5CTQYb6xzEl+fNmbO4JdRiSKQ8A0GD1OBBvKAIsbCUgoyAty7m99GqqMQe784ew== + "@types/express-serve-static-core@*": version "4.17.13" resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.13.tgz#d9af025e925fc8b089be37423b8d1eac781be084" @@ -1519,6 +1542,56 @@ semver "^6.1.0" strip-ansi "^6.0.0" +"@vue/compiler-core@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.1.5.tgz#298f905b6065d6d81ff63756f98c60876b393c87" + integrity sha512-TXBhFinoBaXKDykJzY26UEuQU1K07FOp/0Ie+OXySqqk0bS0ZO7Xvl7UmiTUPYcLrWbxWBR7Bs/y55AI0MNc2Q== + dependencies: + "@babel/parser" "^7.12.0" + "@babel/types" "^7.12.0" + "@vue/shared" "3.1.5" + estree-walker "^2.0.1" + source-map "^0.6.1" + +"@vue/compiler-dom@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.1.5.tgz#cbb97020c62a5faa3fbc2a97916bd98041ac9856" + integrity sha512-ZsL3jqJ52OjGU/YiT/9XiuZAmWClKInZM2aFJh9gnsAPqOrj2JIELMbkIFpVKR/CrVO/f2VxfPiiQdQTr65jcQ== + dependencies: + "@vue/compiler-core" "3.1.5" + "@vue/shared" "3.1.5" + +"@vue/compiler-sfc@^3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.1.5.tgz#e61e54f3a963b0f4a8e523fbb8632390dc52b0d6" + integrity sha512-mtMY6xMvZeSRx9MTa1+NgJWndrkzVTdJ1pQAmAKQuxyb5LsHVvrgP7kcQFvxPHVpLVTORbTJWHaiqoKrJvi1iA== + dependencies: + "@babel/parser" "^7.13.9" + "@babel/types" "^7.13.0" + "@types/estree" "^0.0.48" + "@vue/compiler-core" "3.1.5" + "@vue/compiler-dom" "3.1.5" + "@vue/compiler-ssr" "3.1.5" + "@vue/shared" "3.1.5" + consolidate "^0.16.0" + estree-walker "^2.0.1" + hash-sum "^2.0.0" + lru-cache "^5.1.1" + magic-string "^0.25.7" + merge-source-map "^1.1.0" + postcss "^8.1.10" + postcss-modules "^4.0.0" + postcss-selector-parser "^6.0.4" + source-map "^0.6.1" + +"@vue/compiler-ssr@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.1.5.tgz#f068652774293256a1e53084bed48a67682df9d2" + integrity sha512-CU5N7Di/a4lyJ18LGJxJYZS2a8PlLdWpWHX9p/XcsjT2TngMpj3QvHVRkuik2u8QrIDZ8OpYmTyj1WDNsOV+Dg== + dependencies: + "@vue/compiler-dom" "3.1.5" + "@vue/shared" "3.1.5" + "@vue/component-compiler-utils@^3.1.0", "@vue/component-compiler-utils@^3.1.2": version "3.2.0" resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d" @@ -1540,6 +1613,43 @@ resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab" integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ== +"@vue/reactivity@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/reactivity/-/reactivity-3.1.5.tgz#dbec4d9557f7c8f25c2635db1e23a78a729eb991" + integrity sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg== + dependencies: + "@vue/shared" "3.1.5" + +"@vue/runtime-core@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/runtime-core/-/runtime-core-3.1.5.tgz#a545b7f146092929cb5e833e85439150f17ac87b" + integrity sha512-YQbG5cBktN1RowQDKA22itmvQ+b40f0WgQ6CXK4VYoYICAiAfu6Cc14777ve8zp1rJRGtk5oIeS149TOculrTg== + dependencies: + "@vue/reactivity" "3.1.5" + "@vue/shared" "3.1.5" + +"@vue/runtime-dom@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/runtime-dom/-/runtime-dom-3.1.5.tgz#4fa28947d408aa368fa17ea0edc1beb9af1472a1" + integrity sha512-tNcf3JhVR0RfW0kw1p8xZgv30nvX8Y9rsz7eiQ0dHe273sfoCngAG0y4GvMaY4Xd8FsjUwFedd4suQ8Lu8meXg== + dependencies: + "@vue/runtime-core" "3.1.5" + "@vue/shared" "3.1.5" + csstype "^2.6.8" + +"@vue/server-renderer@^3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/server-renderer/-/server-renderer-3.1.5.tgz#905454eccbb97bb8daafc5db6eec83c452062648" + integrity sha512-b0LLsxwsVIFGNgAHXVT/1iHbPf+uNMdFOz7xUT2tKKIkHN4ps8fAaj1GTSYLhxaPi9ALjxRmWRdvMC69fAW1/A== + dependencies: + "@vue/compiler-ssr" "3.1.5" + "@vue/shared" "3.1.5" + +"@vue/shared@3.1.5": + version "3.1.5" + resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03" + integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA== + "@vue/web-component-wrapper@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@vue/web-component-wrapper/-/web-component-wrapper-1.2.0.tgz#bb0e46f1585a7e289b4ee6067dcc5a6ae62f1dd1" @@ -2248,7 +2358,7 @@ bl@^4.0.3: inherits "^2.0.4" readable-stream "^3.4.0" -bluebird@^3.1.1, bluebird@^3.5.5: +bluebird@^3.1.1, bluebird@^3.5.5, bluebird@^3.7.2: version "3.7.2" resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f" integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg== @@ -3075,6 +3185,11 @@ colorette@^1.2.1: resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b" integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw== +colorette@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" + integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w== + colors@^1.1.2: version "1.4.0" resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78" @@ -3224,6 +3339,13 @@ consolidate@^0.15.1: dependencies: bluebird "^3.1.1" +consolidate@^0.16.0: + version "0.16.0" + resolved "https://registry.yarnpkg.com/consolidate/-/consolidate-0.16.0.tgz#a11864768930f2f19431660a65906668f5fbdc16" + integrity sha512-Nhl1wzCslqXYTJVDyJCu3ODohy9OfBMB5uD2BiBTzd7w+QY0lBzafkR8y8755yMYHAaMD4NuzbAw03/xzfw+eQ== + dependencies: + bluebird "^3.7.2" + constants-browserify@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75" @@ -3615,6 +3737,11 @@ cssstyle@^2.2.0: dependencies: cssom "~0.3.6" +csstype@^2.6.8: + version "2.6.17" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e" + integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A== + cwd@^0.10.0: version "0.10.0" resolved "https://registry.yarnpkg.com/cwd/-/cwd-0.10.0.tgz#172400694057c22a13b0cf16162c7e4b7a7fe567" @@ -3649,11 +3776,6 @@ date-fns@^2.0.1: resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.16.1.tgz#05775792c3f3331da812af253e1a935851d3834b" integrity sha512-sAJVKx/FqrLYHAQeN7VpJrPhagZc9R4ImZIWYRFZaaohR3KzmuK88touwsSwSVT8Qcbd4zoDsnGfX4GFB4imyQ== -de-indent@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d" - integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0= - debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.8, debug@^2.6.9: version "2.6.9" resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f" @@ -4405,6 +4527,11 @@ 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.3" resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64" @@ -5012,6 +5139,13 @@ functional-red-black-tree@^1.0.1: resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327" integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc= +generic-names@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/generic-names/-/generic-names-2.0.1.tgz#f8a378ead2ccaa7a34f0317b05554832ae41b872" + integrity sha512-kPCHWa1m9wGG/OwQpeweTwM/PYiQLrUIxXbt/P4Nic3LbGjCP0YwrALHW1uNLKZ0LIMg+RF+XRlj2ekT9ZlZAQ== + dependencies: + loader-utils "^1.1.0" + gensync@^1.0.0-beta.1: version "1.0.0-beta.2" resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0" @@ -5318,7 +5452,7 @@ hash.js@^1.0.0, hash.js@^1.0.3: inherits "^2.0.3" minimalistic-assert "^1.0.1" -he@1.2.x, he@^1.1.0: +he@1.2.x: version "1.2.0" resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f" integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw== @@ -5544,6 +5678,11 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24: dependencies: safer-buffer ">= 2.1.2 < 3" +icss-replace-symbols@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" + integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0= + icss-utils@^4.0.0, icss-utils@^4.1.1: version "4.1.1" resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467" @@ -5551,6 +5690,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1: dependencies: postcss "^7.0.14" +icss-utils@^5.0.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae" + integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA== + ieee754@^1.1.13, ieee754@^1.1.4: version "1.2.1" resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352" @@ -7010,10 +7154,10 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" -lodash._reinterpolate@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" - integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0= +lodash.camelcase@^4.3.0: + version "4.3.0" + resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6" + integrity sha1-soqmKIorn8ZRA1x3EfZathkDMaY= lodash.defaultsdeep@^4.6.1: version "4.6.1" @@ -7050,21 +7194,6 @@ lodash.sortby@^4.7.0: resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438" integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= -lodash.template@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab" - integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A== - dependencies: - lodash._reinterpolate "^3.0.0" - lodash.templatesettings "^4.0.0" - -lodash.templatesettings@^4.0.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33" - integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ== - dependencies: - lodash._reinterpolate "^3.0.0" - lodash.transform@^4.6.0: version "4.6.0" resolved "https://registry.yarnpkg.com/lodash.transform/-/lodash.transform-4.6.0.tgz#12306422f63324aed8483d3f38332b5f670547a0" @@ -7127,6 +7256,13 @@ lru-cache@^5.1.1: dependencies: yallist "^3.0.2" +magic-string@^0.25.7: + version "0.25.7" + resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051" + integrity sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA== + dependencies: + sourcemap-codec "^1.4.4" + make-dir@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5" @@ -7525,6 +7661,11 @@ nan@^2.12.1: resolved "https://registry.yarnpkg.com/nan/-/nan-2.14.2.tgz#f5376400695168f4cc694ac9393d0c9585eeea19" integrity sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ== +nanoid@^3.1.23: + version "3.1.23" + resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.23.tgz#f744086ce7c2bc47ee0a8472574d5c78e4183a81" + integrity sha512-FiB0kzdP0FFVGDKlRLEQ1BgDzU87dy5NnzjeW9YZNt+/c3+q82EQDUwniSAUxp/F0gFNI1ZhKU1FqYsMuqZVnw== + nanomatch@^1.2.9: version "1.2.13" resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119" @@ -8453,6 +8594,11 @@ postcss-modules-extract-imports@^2.0.0: dependencies: postcss "^7.0.5" +postcss-modules-extract-imports@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d" + integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw== + postcss-modules-local-by-default@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz#bb14e0cc78279d504dbdcbfd7e0ca28993ffbbb0" @@ -8463,6 +8609,15 @@ postcss-modules-local-by-default@^3.0.2: postcss-selector-parser "^6.0.2" postcss-value-parser "^4.1.0" +postcss-modules-local-by-default@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c" + integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ== + dependencies: + icss-utils "^5.0.0" + postcss-selector-parser "^6.0.2" + postcss-value-parser "^4.1.0" + postcss-modules-scope@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz#385cae013cc7743f5a7d7602d1073a89eaae62ee" @@ -8471,6 +8626,13 @@ postcss-modules-scope@^2.2.0: postcss "^7.0.6" postcss-selector-parser "^6.0.0" +postcss-modules-scope@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06" + integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg== + dependencies: + postcss-selector-parser "^6.0.4" + postcss-modules-values@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz#5b5000d6ebae29b4255301b4a3a54574423e7f10" @@ -8479,6 +8641,27 @@ postcss-modules-values@^3.0.0: icss-utils "^4.0.0" postcss "^7.0.6" +postcss-modules-values@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c" + integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ== + dependencies: + icss-utils "^5.0.0" + +postcss-modules@^4.0.0: + version "4.1.3" + resolved "https://registry.yarnpkg.com/postcss-modules/-/postcss-modules-4.1.3.tgz#c4c4c41d98d97d24c70e88dacfc97af5a4b3e21d" + integrity sha512-dBT39hrXe4OAVYJe/2ZuIZ9BzYhOe7t+IhedYeQ2OxKwDpAGlkEN/fR0fGnrbx4BvgbMReRX4hCubYK9cE/pJQ== + dependencies: + generic-names "^2.0.1" + icss-replace-symbols "^1.1.0" + lodash.camelcase "^4.3.0" + postcss-modules-extract-imports "^3.0.0" + postcss-modules-local-by-default "^4.0.0" + postcss-modules-scope "^3.0.0" + postcss-modules-values "^4.0.0" + string-hash "^1.1.1" + postcss-normalize-charset@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz#8b35add3aee83a136b0471e0d59be58a50285dd4" @@ -8608,6 +8791,14 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2: uniq "^1.0.1" util-deprecate "^1.0.2" +postcss-selector-parser@^6.0.4: + version "6.0.6" + resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea" + integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg== + dependencies: + cssesc "^3.0.0" + util-deprecate "^1.0.2" + postcss-svgo@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258" @@ -8646,6 +8837,15 @@ postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.3 source-map "^0.6.1" supports-color "^6.1.0" +postcss@^8.1.10: + version "8.3.5" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709" + integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA== + dependencies: + colorette "^1.2.2" + nanoid "^3.1.23" + source-map-js "^0.6.2" + prelude-ls@^1.2.1: version "1.2.1" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396" @@ -9271,7 +9471,7 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.2.0, resolve@^1.3.2: +resolve@^1.10.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.17.0, resolve@^1.18.1, resolve@^1.3.2: version "1.19.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.19.0.tgz#1af5bf630409734a067cae29318aac7fa29a267c" integrity sha512-rArEXAgsBG4UgRGcynxWIWKFvh/XZCcS8UJdHhwy91zwAvCZIbcs+vAbflgBnNjYMs/i/i+/Ux6IZhML1yPvxg== @@ -9532,13 +9732,6 @@ send@0.17.1: range-parser "~1.2.1" statuses "~1.5.0" -serialize-javascript@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-3.1.0.tgz#8bf3a9170712664ef2561b44b691eafe399214ea" - integrity sha512-JIJT1DGiWmIKhzRsG91aS6Ze4sFUrYbltlkg2onR5OrnNM02Kl/hnY/T4FN2omvyeBbQmMJv+K4cPOpGzOTFBg== - dependencies: - randombytes "^2.1.0" - serialize-javascript@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/serialize-javascript/-/serialize-javascript-4.0.0.tgz#b525e1238489a5ecfc42afacc3fe99e666f4b1aa" @@ -9784,6 +9977,11 @@ source-list-map@^2.0.0: resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34" integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw== +source-map-js@^0.6.2: + version "0.6.2" + resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-0.6.2.tgz#0bb5de631b41cfbda6cfba8bd05a80efdfd2385e" + integrity sha512-/3GptzWzu0+0MBQFrDKzw/DvvMTUORvgY6k6jd/VS6iCR4RDTKWH6v6WPwQoUO8667uQEf9Oe38DxAYWY5F/Ug== + source-map-resolve@^0.5.0: version "0.5.3" resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.3.tgz#190866bece7553e1f8f267a2ee82c606b5509a1a" @@ -9808,11 +10006,6 @@ source-map-url@^0.4.0: resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3" integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM= -source-map@0.5.6: - version "0.5.6" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412" - integrity sha1-dc449SvwczxafwwRjYEzSiu19BI= - source-map@^0.5.0, source-map@^0.5.6: version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" @@ -9828,6 +10021,11 @@ source-map@^0.7.3: resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383" integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ== +sourcemap-codec@^1.4.4: + version "1.4.8" + resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4" + integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA== + spawn-command@^0.0.2-1: version "0.0.2-1" resolved "https://registry.yarnpkg.com/spawn-command/-/spawn-command-0.0.2-1.tgz#62f5e9466981c1b796dc5929937e11c9c6921bd0" @@ -10025,6 +10223,11 @@ strict-uri-encode@^1.0.0: resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz#279b225df1d582b1f54e65addd4352e18faa0713" integrity sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM= +string-hash@^1.1.1: + version "1.1.3" + resolved "https://registry.yarnpkg.com/string-hash/-/string-hash-1.1.3.tgz#e8aafc0ac1855b4666929ed7dd1275df5d6c811b" + integrity sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs= + string-length@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/string-length/-/string-length-4.0.1.tgz#4a973bf31ef77c4edbceadd6af2611996985f8a1" @@ -11034,20 +11237,6 @@ vue-loader@^15.9.2: vue-hot-reload-api "^2.3.0" vue-style-loader "^4.1.0" -vue-server-renderer@^2.6.12: - version "2.6.12" - resolved "https://registry.yarnpkg.com/vue-server-renderer/-/vue-server-renderer-2.6.12.tgz#a8cb9c49439ef205293cb41c35d0d2b0541653a5" - integrity sha512-3LODaOsnQx7iMFTBLjki8xSyOxhCtbZ+nQie0wWY4iOVeEtTg1a3YQAjd82WvKxrWHHTshjvLb7OXMc2/dYuxw== - dependencies: - chalk "^1.1.3" - hash-sum "^1.0.2" - he "^1.1.0" - lodash.template "^4.5.0" - lodash.uniq "^4.5.0" - resolve "^1.2.0" - serialize-javascript "^3.1.0" - source-map "0.5.6" - vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: version "4.1.2" resolved "https://registry.yarnpkg.com/vue-style-loader/-/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8" @@ -11056,23 +11245,19 @@ vue-style-loader@^4.1.0, vue-style-loader@^4.1.2: hash-sum "^1.0.2" loader-utils "^1.0.2" -vue-template-compiler@^2.6.12: - version "2.6.12" - resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e" - integrity sha512-OzzZ52zS41YUbkCBfdXShQTe69j1gQDZ9HIX8miuC9C3rBCk9wIRjLiZZLrmX9V+Ftq/YEyv1JaVr5Y/hNtByg== - dependencies: - de-indent "^1.0.2" - he "^1.1.0" - vue-template-es2015-compiler@^1.9.0: version "1.9.1" resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825" integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw== -vue@^2.6.12: - version "2.6.12" - resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123" - integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg== +vue@^3.1.5: + version "3.1.5" + resolved "https://registry.yarnpkg.com/vue/-/vue-3.1.5.tgz#12879b11d0685ee4478c8869551799630a52f9fe" + integrity sha512-Ho7HNb1nfDoO+HVb6qYZgeaobt1XbY6KXFe4HGs1b9X6RhkWG/113n4/SrtM1LUclM6OrP/Se5aPHHvAPG1iVQ== + dependencies: + "@vue/compiler-dom" "3.1.5" + "@vue/runtime-dom" "3.1.5" + "@vue/shared" "3.1.5" w3c-hr-time@^1.0.2: version "1.0.2" From 1df92332c95381179b70f9e5496565148bff6bca Mon Sep 17 00:00:00 2001 From: Aleksandr Kanunnikov Date: Mon, 26 Jul 2021 16:59:32 +0300 Subject: [PATCH 2/2] make it working for vue3 --- src/LazyHydrate.js | 2 +- src/utils/hydration-blocker.js | 49 +++++++++++-------- src/utils/nonce.js | 9 +++- .../components/IntegrationAsync.vue | 8 +-- .../components/IntegrationSync.vue | 8 +-- test/performance/render.js | 2 +- 6 files changed, 46 insertions(+), 32 deletions(-) diff --git a/src/LazyHydrate.js b/src/LazyHydrate.js index a3ca4f9..547953b 100644 --- a/src/LazyHydrate.js +++ b/src/LazyHydrate.js @@ -37,7 +37,7 @@ export function hydrateOnInteraction(componentOrFactory, { event = `focus` } = { const Placeholder = { render() { - return this.$slots.default; + return this.$slots.default(); }, }; diff --git a/src/utils/hydration-blocker.js b/src/utils/hydration-blocker.js index 0bbd56f..9bb417c 100644 --- a/src/utils/hydration-blocker.js +++ b/src/utils/hydration-blocker.js @@ -5,22 +5,31 @@ import { makeNonce } from './nonce'; export function makeHydrationBlocker(component, options) { return Object.assign({ - get $el() { - return ref(); + render() { + console.log('renderFn'); + return h(this.Nonce, { + // attrs: this.$attrs, + // on: this.$listeners, + // scopedSlots: this.$scopedSlots, + }, this.$slots.default); }, mixins: [{ beforeCreate() { + console.log('beforeCreate'); this.cleanupHandlers = []; const { hydrate, hydrationPromise } = makeHydrationPromise(); this.Nonce = makeNonce({ component, hydrationPromise }); this.hydrate = hydrate; this.hydrationPromise = hydrationPromise; }, - beforeDestroy() { + beforeUnmount() { this.cleanup(); }, mounted() { - if (this.$el.nodeType === Node.COMMENT_NODE) { + const targetNode = this.$el.nextSibling; + console.log('mounted', this.$el.nextSibling, this); + if (this.$el.nodeType === Node.COMMENT_NODE && !targetNode) { + console.log('no-ssr link found', this.$el); // No SSR rendered content, hydrate immediately. this.hydrate(); return; @@ -28,7 +37,7 @@ export function makeHydrationBlocker(component, options) { if (this.never) return; - if (this.whenVisible) { + if (targetNode && this.whenVisible) { const observerOptions = this.whenVisible !== true ? this.whenVisible : undefined; const observer = makeHydrationObserver(observerOptions); @@ -38,15 +47,15 @@ export function makeHydrationBlocker(component, options) { return; } - this.$el.hydrate = this.hydrate; - const cleanup = () => observer.unobserve(this.$el); + targetNode.hydrate = this.hydrate; + const cleanup = () => observer.unobserve(targetNode); this.cleanupHandlers.push(cleanup); this.hydrationPromise.then(cleanup); - observer.observe(this.$el); + observer.observe(targetNode); return; } - if (this.whenIdle) { + if (targetNode && this.whenIdle) { // If `requestIdleCallback()` or `requestAnimationFrame()` // is not supported, hydrate immediately. if (!(`requestIdleCallback` in window) || !(`requestAnimationFrame` in window)) { @@ -64,17 +73,22 @@ export function makeHydrationBlocker(component, options) { this.hydrationPromise.then(cleanup); } - if (this.interactionEvents && this.interactionEvents.length) { + console.log('interactionEvents', this.interactionEvents); + + + const interactionEvents = ['click'] //this.interactionEvents; + if (interactionEvents && interactionEvents.length) { + console.log('interactionEvents', interactionEvents); const eventListenerOptions = { capture: true, once: true, passive: true, }; - this.interactionEvents.forEach((eventName) => { - this.$el.addEventListener(eventName, this.hydrate, eventListenerOptions); + interactionEvents.forEach((eventName) => { + targetNode.addEventListener(eventName, this.hydrate, eventListenerOptions); const cleanup = () => { - this.$el.removeEventListener(eventName, this.hydrate, eventListenerOptions); + targetNode.removeEventListener(eventName, this.hydrate, eventListenerOptions); }; this.cleanupHandlers.push(cleanup); }); @@ -84,14 +98,7 @@ export function makeHydrationBlocker(component, options) { cleanup() { this.cleanupHandlers.forEach(handler => handler()); }, - }, - render() { - return h(this.Nonce, { - attrs: this.$attrs, - on: this.$listeners, - scopedSlots: this.$scopedSlots, - }, this.$slots.default); - }, + } }], }, options); } diff --git a/src/utils/nonce.js b/src/utils/nonce.js index d873b16..3d7ae53 100644 --- a/src/utils/nonce.js +++ b/src/utils/nonce.js @@ -1,6 +1,9 @@ +import { defineAsyncComponent, h } from 'vue'; + const isServer = typeof window === `undefined`; function isAsyncComponentFactory(componentOrFactory) { + console.log({componentOrFactory}); return typeof componentOrFactory === `function`; } @@ -13,6 +16,10 @@ function resolveComponent(componentOrFactory) { export function makeNonce({ component, hydrationPromise }) { if (isServer) return component; + - return () => hydrationPromise.then(() => resolveComponent(component)); + return defineAsyncComponent(async function() { + await hydrationPromise; + return await resolveComponent(component); + }) } diff --git a/test/integration/components/IntegrationAsync.vue b/test/integration/components/IntegrationAsync.vue index 2743fee..c064914 100644 --- a/test/integration/components/IntegrationAsync.vue +++ b/test/integration/components/IntegrationAsync.vue @@ -12,8 +12,8 @@ class="show-when-event" /> -
@@ -28,8 +28,8 @@ class="show-when-event" />
-
diff --git a/test/integration/components/IntegrationSync.vue b/test/integration/components/IntegrationSync.vue index 27d5982..974e0c3 100644 --- a/test/integration/components/IntegrationSync.vue +++ b/test/integration/components/IntegrationSync.vue @@ -12,8 +12,8 @@ class="show-when-event" />
-
@@ -28,8 +28,8 @@ class="show-when-event" />
-
diff --git a/test/performance/render.js b/test/performance/render.js index 0d99223..e6e3686 100644 --- a/test/performance/render.js +++ b/test/performance/render.js @@ -1,4 +1,4 @@ -const vueServerRenderer = require(`@vue/server-renderer`); +const { renderToString } = require(`@vue/server-renderer`); const fs = require(`fs`); const entryReference = require(`./dist/entry-reference.common.js`);