From 00815d74c677b3497ce76ae9acd972be9c6b53cc Mon Sep 17 00:00:00 2001 From: Justineo Date: Fri, 19 Nov 2021 10:17:18 +0800 Subject: [PATCH] fix: prevent style tags from piling up and remove generated style after the component is destroyed --- package-lock.json | 165 ++++++++++++++++++++++++++++------------------ package.json | 2 +- src/Preview.vue | 13 +++- 3 files changed, 114 insertions(+), 66 deletions(-) diff --git a/package-lock.json b/package-lock.json index 01941ef..05a5588 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "vue-live", "version": "0.0.0-dev", "license": "MIT", "dependencies": { @@ -17,7 +18,7 @@ "hash-sum": "^2.0.0", "prismjs": "^1.21.0", "recast": "^0.19.1", - "vue-inbrowser-compiler": "^4.33.4", + "vue-inbrowser-compiler": "^4.42.0", "vue-prism-editor": "^1.2.2", "vue-template-compiler": "^2.6.12" }, @@ -3207,11 +3208,6 @@ "node": ">=0.4.0" } }, - "node_modules/acorn-dynamic-import": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz", - "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==" - }, "node_modules/acorn-globals": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.4.tgz", @@ -3235,9 +3231,12 @@ } }, "node_modules/acorn-jsx": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz", - "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==" + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "peerDependencies": { + "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" + } }, "node_modules/acorn-walk": { "version": "6.2.0", @@ -4993,18 +4992,17 @@ } }, "node_modules/buble": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.8.tgz", - "integrity": "sha512-IoGZzrUTY5fKXVkgGHw3QeXFMUNBFv+9l8a4QJKG1JhG3nCMHTdEX1DCOg8568E2Q9qvAQIiSokv6Jsgx8p2cA==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/buble/-/buble-0.20.0.tgz", + "integrity": "sha512-/1gnaMQE8xvd5qsNBl+iTuyjJ9XxeaVxAMF86dQ4EyxFJOZtsgOS8Ra+7WHgZTam5IFDtt4BguN0sH0tVTKrOw==", "dependencies": { - "acorn": "^6.1.1", + "acorn": "^6.4.1", "acorn-dynamic-import": "^4.0.0", - "acorn-jsx": "^5.0.1", + "acorn-jsx": "^5.2.0", "chalk": "^2.4.2", - "magic-string": "^0.25.3", - "minimist": "^1.2.0", - "os-homedir": "^2.0.0", - "regexpu-core": "^4.5.4" + "magic-string": "^0.25.7", + "minimist": "^1.2.5", + "regexpu-core": "4.5.4" }, "bin": { "buble": "bin/buble" @@ -5021,12 +5019,28 @@ "node": ">=0.4.0" } }, - "node_modules/buble/node_modules/os-homedir": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-2.0.0.tgz", - "integrity": "sha512-saRNz0DSC5C/I++gFIaJTXoFJMRwiP5zHar5vV3xQ2TkgEw6hDCcU5F272JjUylpiVgBrZNQHnfjkLabTfb92Q==", + "node_modules/buble/node_modules/acorn-dynamic-import": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz", + "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==", + "peerDependencies": { + "acorn": "^6.0.0" + } + }, + "node_modules/buble/node_modules/regexpu-core": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.5.4.tgz", + "integrity": "sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==", + "dependencies": { + "regenerate": "^1.4.0", + "regenerate-unicode-properties": "^8.0.2", + "regjsgen": "^0.5.0", + "regjsparser": "^0.6.0", + "unicode-match-property-ecmascript": "^1.0.4", + "unicode-match-property-value-ecmascript": "^1.1.0" + }, "engines": { - "node": ">=0.10.0" + "node": ">=4" } }, "node_modules/buffer": { @@ -7639,6 +7653,11 @@ "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", "dev": true }, + "node_modules/detect-browser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.2.1.tgz", + "integrity": "sha512-eAcRiEPTs7utXWPaAgu/OX1HRJpxW7xSHpw4LTDrGFaeWnJ37HRlqpUkKsDm0AoTbtrvHQhH+5U2Cd87EGhJTg==" + }, "node_modules/detect-newline": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz", @@ -16878,6 +16897,7 @@ "version": "4.7.1", "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz", "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==", + "dev": true, "dependencies": { "regenerate": "^1.4.0", "regenerate-unicode-properties": "^8.2.0", @@ -19659,22 +19679,23 @@ "dev": true }, "node_modules/vue-inbrowser-compiler": { - "version": "4.33.4", - "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.33.4.tgz", - "integrity": "sha512-7CmoZaXMLQlA8DH3849OOeuYIhHTC0jHYNsrCxN/nBp/1wD+4e6tAedE5yqcy0zw8qfXRmK5Sl/TZW4GZA8lzg==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.42.0.tgz", + "integrity": "sha512-YCTk7KaQLeTNPsakoLdi6sAnU3gTFw7FuUMOwxf0xFR8m9LWZ/yue+UCtkDGc5DeLespPfHZgfU0ydcu4dW87g==", "dependencies": { - "acorn": "^6.1.1", - "acorn-jsx": "^5.0.1", - "buble": "^0.19.7", + "acorn": "^6.4.2", + "acorn-jsx": "^5.3.1", + "buble": "^0.20.0", "camelcase": "^5.3.1", - "vue-inbrowser-compiler-utils": "^4.33.4", + "detect-browser": "^5.2.0", + "vue-inbrowser-compiler-utils": "^4.42.0", "walkes": "^0.2.1" } }, "node_modules/vue-inbrowser-compiler-utils": { - "version": "4.33.4", - "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.33.4.tgz", - "integrity": "sha512-8/YvqKy0s7UUUdR8eHLwbuAEb3qs5SfM4Og21E9scKxAwfFBw20YJCLnXB/uEbYsGGpuMg/oY0P7lehfBhm1Tw==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.42.0.tgz", + "integrity": "sha512-bIpT27x2PJQrqOi09+LMYr8Chll6N8LOLSo8yR3gwkPauuzoUHfi4U6Qdvu2MRvXwC3bzYwXRBjQT4ATyaWCeg==", "dependencies": { "camelcase": "^5.3.1" } @@ -23648,11 +23669,6 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz", "integrity": "sha512-+G7P8jJmCHr+S+cLfQxygbWhXy+8YTVGzAkpEbcLo2mLoL7tij/VG41QSHACSf5QgYRhMZYHuNc6drJaO0Da+w==" }, - "acorn-dynamic-import": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz", - "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==" - }, "acorn-globals": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-4.3.4.tgz", @@ -23672,9 +23688,10 @@ } }, "acorn-jsx": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz", - "integrity": "sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==" + "version": "5.3.2", + "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz", + "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==", + "requires": {} }, "acorn-walk": { "version": "6.2.0", @@ -25156,18 +25173,17 @@ } }, "buble": { - "version": "0.19.8", - "resolved": "https://registry.npmjs.org/buble/-/buble-0.19.8.tgz", - "integrity": "sha512-IoGZzrUTY5fKXVkgGHw3QeXFMUNBFv+9l8a4QJKG1JhG3nCMHTdEX1DCOg8568E2Q9qvAQIiSokv6Jsgx8p2cA==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/buble/-/buble-0.20.0.tgz", + "integrity": "sha512-/1gnaMQE8xvd5qsNBl+iTuyjJ9XxeaVxAMF86dQ4EyxFJOZtsgOS8Ra+7WHgZTam5IFDtt4BguN0sH0tVTKrOw==", "requires": { - "acorn": "^6.1.1", + "acorn": "^6.4.1", "acorn-dynamic-import": "^4.0.0", - "acorn-jsx": "^5.0.1", + "acorn-jsx": "^5.2.0", "chalk": "^2.4.2", - "magic-string": "^0.25.3", - "minimist": "^1.2.0", - "os-homedir": "^2.0.0", - "regexpu-core": "^4.5.4" + "magic-string": "^0.25.7", + "minimist": "^1.2.5", + "regexpu-core": "4.5.4" }, "dependencies": { "acorn": { @@ -25175,10 +25191,24 @@ "resolved": "https://registry.npmjs.org/acorn/-/acorn-6.4.2.tgz", "integrity": "sha512-XtGIhXwF8YM8bJhGxG5kXgjkEuNGLTkoYqVE+KMR+aspr4KGYmKYg7yUe3KghyQ9yheNwLnjmzh/7+gfDBmHCQ==" }, - "os-homedir": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-2.0.0.tgz", - "integrity": "sha512-saRNz0DSC5C/I++gFIaJTXoFJMRwiP5zHar5vV3xQ2TkgEw6hDCcU5F272JjUylpiVgBrZNQHnfjkLabTfb92Q==" + "acorn-dynamic-import": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz", + "integrity": "sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==", + "requires": {} + }, + "regexpu-core": { + "version": "4.5.4", + "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.5.4.tgz", + "integrity": "sha512-BtizvGtFQKGPUcTy56o3nk1bGRp4SZOTYrDtGNlqCQufptV5IkkLN6Emw+yunAJjzf+C9FQFtvq7IoA3+oMYHQ==", + "requires": { + "regenerate": "^1.4.0", + "regenerate-unicode-properties": "^8.0.2", + "regjsgen": "^0.5.0", + "regjsparser": "^0.6.0", + "unicode-match-property-ecmascript": "^1.0.4", + "unicode-match-property-value-ecmascript": "^1.1.0" + } } } }, @@ -27331,6 +27361,11 @@ "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=", "dev": true }, + "detect-browser": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/detect-browser/-/detect-browser-5.2.1.tgz", + "integrity": "sha512-eAcRiEPTs7utXWPaAgu/OX1HRJpxW7xSHpw4LTDrGFaeWnJ37HRlqpUkKsDm0AoTbtrvHQhH+5U2Cd87EGhJTg==" + }, "detect-newline": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-2.1.0.tgz", @@ -34973,6 +35008,7 @@ "version": "4.7.1", "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-4.7.1.tgz", "integrity": "sha512-ywH2VUraA44DZQuRKzARmw6S66mr48pQVva4LBeRhcOltJ6hExvWly5ZjFLYo67xbIxb6W1q4bAGtgfEl20zfQ==", + "dev": true, "requires": { "regenerate": "^1.4.0", "regenerate-unicode-properties": "^8.2.0", @@ -37321,15 +37357,16 @@ "dev": true }, "vue-inbrowser-compiler": { - "version": "4.33.4", - "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.33.4.tgz", - "integrity": "sha512-7CmoZaXMLQlA8DH3849OOeuYIhHTC0jHYNsrCxN/nBp/1wD+4e6tAedE5yqcy0zw8qfXRmK5Sl/TZW4GZA8lzg==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler/-/vue-inbrowser-compiler-4.42.0.tgz", + "integrity": "sha512-YCTk7KaQLeTNPsakoLdi6sAnU3gTFw7FuUMOwxf0xFR8m9LWZ/yue+UCtkDGc5DeLespPfHZgfU0ydcu4dW87g==", "requires": { - "acorn": "^6.1.1", - "acorn-jsx": "^5.0.1", - "buble": "^0.19.7", + "acorn": "^6.4.2", + "acorn-jsx": "^5.3.1", + "buble": "^0.20.0", "camelcase": "^5.3.1", - "vue-inbrowser-compiler-utils": "^4.33.4", + "detect-browser": "^5.2.0", + "vue-inbrowser-compiler-utils": "^4.42.0", "walkes": "^0.2.1" }, "dependencies": { @@ -37341,9 +37378,9 @@ } }, "vue-inbrowser-compiler-utils": { - "version": "4.33.4", - "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.33.4.tgz", - "integrity": "sha512-8/YvqKy0s7UUUdR8eHLwbuAEb3qs5SfM4Og21E9scKxAwfFBw20YJCLnXB/uEbYsGGpuMg/oY0P7lehfBhm1Tw==", + "version": "4.42.0", + "resolved": "https://registry.npmjs.org/vue-inbrowser-compiler-utils/-/vue-inbrowser-compiler-utils-4.42.0.tgz", + "integrity": "sha512-bIpT27x2PJQrqOi09+LMYr8Chll6N8LOLSo8yR3gwkPauuzoUHfi4U6Qdvu2MRvXwC3bzYwXRBjQT4ATyaWCeg==", "requires": { "camelcase": "^5.3.1" } diff --git a/package.json b/package.json index e6a5e11..57fea75 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "hash-sum": "^2.0.0", "prismjs": "^1.21.0", "recast": "^0.19.1", - "vue-inbrowser-compiler": "^4.33.4", + "vue-inbrowser-compiler": "^4.42.0", "vue-prism-editor": "^1.2.2", "vue-template-compiler": "^2.6.12" }, diff --git a/src/Preview.vue b/src/Preview.vue index 10936b0..3488a6c 100644 --- a/src/Preview.vue +++ b/src/Preview.vue @@ -86,6 +86,9 @@ export default { created() { this.renderComponent(this.code.trim()); }, + destroyed() { + this.removeScopedStyle(); + }, watch: { code(value) { this.renderComponent(value.trim()); @@ -118,6 +121,11 @@ export default { this.$emit("error", e); this.error = e.message; }, + removeStyle() { + if (this.removeScopedStyle) { + this.removeScopedStyle(); + } + }, renderComponent(code) { let options = {}; let style; @@ -182,11 +190,14 @@ export default { options.components = { ...options.components, ...this.components }; } } + + this.removeStyle(); + if (style) { // To add the scope id attribute to each item in the html // this way when we add the scoped style sheet it will be aplied options._scopeId = `data-${this.scope}`; - addScopedStyle(style, this.scope); + this.removeScopedStyle = addScopedStyle(style, this.scope); } if (options.template || options.render) {