From 6d1d29043c7ff4c2fad62c38ab431d55996a671c Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Wed, 22 Mar 2023 16:30:31 +0800 Subject: [PATCH 01/44] feat(custom-element): Custom elements support child component style tags --- .../__tests__/compileScript.spec.ts | 3 +-- packages/runtime-core/src/component.ts | 13 ++++++++++ packages/runtime-core/src/renderer.ts | 15 ++++++++++++ packages/runtime-dom/src/apiCustomElement.ts | 24 ++++++++++++++++--- scripts/release.js | 10 ++++---- 5 files changed, 56 insertions(+), 9 deletions(-) diff --git a/packages/compiler-sfc/__tests__/compileScript.spec.ts b/packages/compiler-sfc/__tests__/compileScript.spec.ts index 3ea7632f68b..b091b8b5fcc 100644 --- a/packages/compiler-sfc/__tests__/compileScript.spec.ts +++ b/packages/compiler-sfc/__tests__/compileScript.spec.ts @@ -1136,7 +1136,7 @@ const emit = defineEmits(['a', 'b']) `) assertCode(content) }) - + // #7111 test('withDefaults (static) w/ production mode', () => { const { content } = compile( @@ -1277,7 +1277,6 @@ const emit = defineEmits(['a', 'b']) expect(content).toMatch(`emits: ["foo", "bar"]`) }) - test('defineEmits w/ type from normal script', () => { const { content } = compile(` \n` + + `` + ) + + expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([ + { + "id": { id: _ctx.msg3, 'other-attr': _ctx.msg }, + "src": _ctx.msg, + [_ctx.msg]: _ctx.msg, + "xlink:special": _ctx.msg, + }, +]))}`) + assertCode(content) + }) + + test('w/ normal \n` + + `` + ) + expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([ + { + "id": { id: _ctx.msg3, 'other-attr': _ctx.msg }, + "src": _ctx.msg, + [_ctx.msg]: _ctx.msg, + "xlink:special": _ctx.msg, + }, +]))}`) + expect(content).toMatch( + `import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'` + ) + assertCode(content) + }) + + test('w/ \n` + + `` + ) + // should handle: + // 1. local const bindings + // 2. local potential ref bindings + // 3. props bindings (analyzed) + expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([ + { + "id": { id: __props.msg3, 'other-attr': msg }, + "src": msg2.value, + [msg]: msg, + "xlink:special": __props.msg3, + }, +]))`) + expect(content).toMatch( + `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'` + ) + assertCode(content) + }) + + describe('codegen', () => { + test('\n` + + `` + ).content + ) + }) + + test('\n` + + `` + ) + + // id should only be injected once, even if it is twice in style + expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([ + { + "id": { id: _ctx.msg3, 'other-attr': msg }, + }, +]))`) + assertCode(content) + }) + + test('should work with w/ complex expression', () => { + const { content } = compileSFCScript( + `\n` + + `` + ) + expect(content).toMatch(`_useCssVars(_ctx => ({ + "${mockId}-foo": (_unref(foo)), + "${mockId}-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'), + "${mockId}-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'), + "${mockId}-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a))) +}))`) + assertCode(content) + }) + + test('should be able to parse incomplete expressions', () => { + const { + descriptor: { ceStyleAttrs } + } = parse( + ` + ` + ) + expect(ceStyleAttrs[0].length).toBe(2) + expect(ceStyleAttrs[0]).toMatchObject([ + { + name: 'bind', + exp: { + content: 'xxx', + isStatic: false, + constType: 0 + }, + arg: { + content: 'id', + isStatic: true, + constType: 3 + } + }, + { + name: 'bind', + exp: { + content: 'count.toString(', + isStatic: false, + constType: 0 + }, + arg: { + content: 'data-name', + isStatic: true, + constType: 3 + } + } + ]) + }) + + test('It should correctly parse the case where there is no space after the script tag', () => { + const { content } = compileSFCScript( + ` + ` + ) + expect(content).toMatch( + `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n]))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}` + ) + }) + + test('With cssvars', () => { + const { content } = compileSFCScript( + ` + ` + ) + expect(content).toMatch( + `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}` + ) + }) + + test('Multiple style tags', () => { + const { content } = compileSFCScript( + ` + + ` + ) + expect(content).toMatch( + `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n {\n \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}` + ) + }) + + describe('skip codegen in SSR', () => { + test('script setup, inline', () => { + const { content } = compileSFCScript( + `\n` + + ``, + { + inlineTemplate: true, + templateOptions: { + ssr: true + } + } + ) + expect(content).not.toMatch(`_useCssVars`) + }) + + // #6926 + test('script, non-inline', () => { + const { content } = compileSFCScript( + `\n` + + `\``, + { + inlineTemplate: false, + templateOptions: { + ssr: true + } + } + ) + expect(content).not.toMatch(`_useCssVars`) + }) + + test('normal script', () => { + const { content } = compileSFCScript( + `\n` + + `\``, + { + templateOptions: { + ssr: true + } + } + ) + expect(content).not.toMatch(`_useCssVars`) + }) + }) + }) +}) diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index 62aaf0fdb6d..06060840590 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -53,7 +53,7 @@ import { import { analyzeScriptBindings } from './script/analyzeScriptBindings' import { isImportUsed } from './script/importUsageCheck' import { processAwait } from './script/topLevelAwait' -import {CE_STYLE_ATTRS_HELPER, genCEStyleAttrs} from "./style/ceStyleAttrs"; +import { CE_STYLE_ATTRS_HELPER, genCEStyleAttrs } from './style/ceStyleAttrs' export interface SFCScriptCompileOptions { /** @@ -781,7 +781,6 @@ export function compileScript( ) } - if ( ctx.descriptor.ceStyleAttrs.length && // no need to do this when targeting SSR @@ -795,7 +794,6 @@ export function compileScript( ) } - // 9. finalize setup() argument signature let args = `__props` if (ctx.propsTypeDecl) { diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts index d44ae152003..308026f6f48 100644 --- a/packages/compiler-sfc/src/parse.ts +++ b/packages/compiler-sfc/src/parse.ts @@ -6,7 +6,8 @@ import { TextModes, BindingMetadata, AttributeNode, - DirectiveNode, SimpleExpressionNode + DirectiveNode, + SimpleExpressionNode } from '@vue/compiler-core' import * as CompilerDOM from '@vue/compiler-dom' import { RawSourceMap, SourceMapGenerator } from 'source-map-js' @@ -123,7 +124,7 @@ export function parse( script: null, scriptSetup: null, styles: [], - ceStyleAttrs:[], + ceStyleAttrs: [], customBlocks: [], cssVars: [], slotted: false, @@ -472,23 +473,25 @@ export function hmrShouldReload( return false } - function setPropsNodeForStyleAttrs( - descriptor: SFCDescriptor, - props: Array, - ){ - const propsArr = props.filter(prop => { - // skip scoped and lang - if(prop.type === 6 && (prop.name === 'scoped' || prop.name === 'lang')){ - return false - } - return !(prop.type === 7 && ( - ((prop as DirectiveNode).arg! as SimpleExpressionNode).content === 'scoped' || - ((prop as DirectiveNode).arg! as SimpleExpressionNode).content === 'lang')); - - }) - - if(propsArr.length > 0){ - descriptor.ceStyleAttrs.push(propsArr) - } +function setPropsNodeForStyleAttrs( + descriptor: SFCDescriptor, + props: Array +) { + const propsArr = props.filter(prop => { + // skip scoped and lang + if (prop.type === 6 && (prop.name === 'scoped' || prop.name === 'lang')) { + return false + } + return !( + prop.type === 7 && + (((prop as DirectiveNode).arg! as SimpleExpressionNode).content === + 'scoped' || + ((prop as DirectiveNode).arg! as SimpleExpressionNode).content === + 'lang') + ) + }) - } + if (propsArr.length > 0) { + descriptor.ceStyleAttrs.push(propsArr) + } +} diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts index 61d72b3122a..02ec9a860ba 100644 --- a/packages/compiler-sfc/src/script/normalScript.ts +++ b/packages/compiler-sfc/src/script/normalScript.ts @@ -5,7 +5,7 @@ import MagicString from 'magic-string' import { RawSourceMap } from 'source-map-js' import { rewriteDefaultAST } from '../rewriteDefault' import { CSS_VARS_HELPER, genCssVarsCode } from '../style/cssVars' -import { CE_STYLE_ATTRS_HELPER, genCEStyleAttrs } from "../style/ceStyleAttrs"; +import { CE_STYLE_ATTRS_HELPER, genCEStyleAttrs } from '../style/ceStyleAttrs' export const normalScriptDefaultVar = `__default__` @@ -51,7 +51,7 @@ export function processNormalScript( } } - if (cssVars.length || ceStyleAttrs.length ||genDefaultAs) { + if (cssVars.length || ceStyleAttrs.length || genDefaultAs) { const defaultVar = genDefaultAs || normalScriptDefaultVar const s = new MagicString(content) rewriteDefaultAST(scriptAst.body, s, defaultVar) @@ -59,24 +59,16 @@ export function processNormalScript( let injectCode = '' let injectImporter = [] if (cssVars.length && !ctx.options.templateOptions?.ssr) { - injectCode += genCssVarsCode( - cssVars, - bindings, - scopeId, - !!isProd, - ) + injectCode += genCssVarsCode(cssVars, bindings, scopeId, !!isProd) injectImporter.push(CSS_VARS_HELPER) } if (ceStyleAttrs.length && !ctx.options.templateOptions?.ssr) { - injectCode += '\n' + genCEStyleAttrs( - ceStyleAttrs, - bindings, - ) + injectCode += '\n' + genCEStyleAttrs(ceStyleAttrs, bindings) injectImporter.push(CE_STYLE_ATTRS_HELPER) } - if(injectCode){ + if (injectCode) { content += genInjectCode(injectCode, defaultVar, injectImporter) } @@ -100,7 +92,11 @@ export function processNormalScript( // \n` + - `` - ) - expect(content).toMatch(`_useCssVars(_ctx => ({ - "${mockId}-foo": (_unref(foo)), - "${mockId}-foo\\ \\+\\ \\'px\\'": (_unref(foo) + 'px'), - "${mockId}-\\(a\\ \\+\\ b\\)\\ \\/\\ 2\\ \\+\\ \\'px\\'": ((_unref(a) + _unref(b)) / 2 + 'px'), - "${mockId}-\\(\\(a\\ \\+\\ b\\)\\)\\ \\/\\ \\(2\\ \\*\\ a\\)": (((_unref(a) + _unref(b))) / (2 * _unref(a))) -}))`) - assertCode(content) - }) - test('should be able to parse incomplete expressions', () => { const { descriptor: { ceStyleAttrs } diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 67e9e99429f..e3d27b451ff 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -314,7 +314,7 @@ export interface ComponentInternalInstance { * @internal */ ceContext: { - addCEChildStyle: (styles: string[], uid: number) => void + addCEChildStyle: (styles: string[], uid: number, hasAttr: boolean) => void removeCEChildStyles: (uid: number) => void setStyleAttrs: ( uid: number | 'root', @@ -322,6 +322,11 @@ export interface ComponentInternalInstance { oAttrs?: Array> ) => void } | null + /** + * Whether the style tag has attribute tags + * @internal + */ + hasStyleAttrs: boolean /** * is custom element? * @internal @@ -574,6 +579,7 @@ export function createComponentInstance( ceContext: parent && (parent.isCE || parent.ceContext) ? parent.ceContext : null, + hasStyleAttrs: false, bc: null, c: null, diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index f9a7b5d3ca9..732d9f1ce15 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -1384,7 +1384,11 @@ function baseCreateRenderer( .styles) || null if (instance.ceContext && styles) { - instance.ceContext.addCEChildStyle(styles, instance.uid) + instance.ceContext.addCEChildStyle( + styles, + instance.uid, + instance.hasStyleAttrs + ) } } } diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 0d007ebfa64..942cda495b1 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -9,6 +9,7 @@ import { Ref, ref, renderSlot, + useCEStyleAttrs, VueElement } from '../src' import { expect } from 'vitest' @@ -829,6 +830,57 @@ describe('defineCustomElement', () => { expect(style2[1].textContent).toBe(`.my-red { color: red; }`) }) + test('Component with style attribute used multiple times', async () => { + const Child = { + styles: [`.my-green { color: green; }`], + setup() { + const id = 'foo' + useCEStyleAttrs(() => { + return [ + { + id: id + } + ] as Record[] + }) + }, + render() { + return h('p', { class: 'my-green' }, 'This should be green') + } + } + + const Foo = defineCustomElement({ + components: { Child }, + styles: [`.my-red { color: red; }`], + render() { + return [ + h('p', { class: 'my-red' }, 'This should be red'), + h(Child), + h(Child), + h(Child) + ] + } + }) + customElements.define('my-el-with-multiple-attr', Foo) + container.innerHTML = `` + await nextTick() + + const el1 = container.childNodes[0] as VueElement + const style = el1.shadowRoot?.querySelectorAll('style')! + expect(style.length).toBe(4) + expect(style[0].textContent).toBe(`.my-green { color: green; }`) + expect(style[1].textContent).toBe(`.my-green { color: green; }`) + expect(style[2].textContent).toBe(`.my-green { color: green; }`) + expect(style[3].textContent).toBe(`.my-red { color: red; }`) + + const el2 = container.childNodes[1] as VueElement + const style2 = el2.shadowRoot?.querySelectorAll('style')! + expect(style2.length).toBe(4) + expect(style2[0].textContent).toBe(`.my-green { color: green; }`) + expect(style2[1].textContent).toBe(`.my-green { color: green; }`) + expect(style2[2].textContent).toBe(`.my-green { color: green; }`) + expect(style2[3].textContent).toBe(`.my-red { color: red; }`) + }) + test('nested child components w/ fragments in shadow dom should have styles', async () => { const GrandChild = { styles: [`.my-green { color: green; }`], diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 83affc4d692..854af8ff368 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -441,11 +441,15 @@ export class VueElement extends BaseClass { // The method used by custom element child components // to add styles to the shadow dom - protected _addChildStyles(styles: string[] | undefined, uid: number) { + protected _addChildStyles( + styles: string[] | undefined, + uid: number, + hasAttr: boolean + ) { if (styles) { // record style const isRepeated = this.isHasChildStyle(styles) - if (isRepeated) return + if (isRepeated && !hasAttr) return styles.forEach((css, index) => { const s = document.createElement('style') @@ -525,4 +529,3 @@ export class VueElement extends BaseClass { } // TODO: teleport 会导致dom 不会在 shadowRoot 中（是否需要） -// TODO: 重複style？？？ （儅style 有屬性時，要再加一個style） diff --git a/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts b/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts index c818f52c296..5eaf58d8be2 100644 --- a/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts +++ b/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts @@ -15,6 +15,7 @@ export function useCEStyleAttrs( return } + instance.hasStyleAttrs = true let oAttrs: undefined | Array> = undefined const setAttrs = () => { const attrs = getter(instance.proxy) From 00cc2599f3175898e4f67eeec4c2922bd14f62b9 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Mon, 6 Nov 2023 15:55:08 +0800 Subject: [PATCH 39/44] Merge remote-tracking branch 'origin/main' into bwsy/feat/CEChildStyle # Conflicts: # pnpm-lock.yaml --- pnpm-lock.yaml | 268 +++++++++++++++++++++++++------------------------ 1 file changed, 135 insertions(+), 133 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 562332df1bd..1657edda572 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -88,7 +88,7 @@ importers: version: 3.0.3 marked: specifier: ^9.1.4 - version: 9.1.5 + version: 9.1.4 minimist: specifier: ^1.2.8 version: 1.2.8 @@ -438,6 +438,7 @@ packages: /@babel/code-frame@7.22.13: resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==} engines: {node: '>=6.9.0'} + requiresBuild: true dependencies: '@babel/highlight': 7.22.20 chalk: 2.4.2 @@ -554,6 +555,7 @@ packages: /@babel/helper-validator-identifier@7.22.20: resolution: {integrity: sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==} engines: {node: '>=6.9.0'} + requiresBuild: true /@babel/helper-validator-option@7.22.15: resolution: {integrity: sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA==} @@ -574,6 +576,7 @@ packages: /@babel/highlight@7.22.20: resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==} engines: {node: '>=6.9.0'} + requiresBuild: true dependencies: '@babel/helper-validator-identifier': 7.22.20 chalk: 2.4.2 @@ -1028,8 +1031,8 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@eslint-community/regexpp@4.10.0: - resolution: {integrity: sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==} + /@eslint-community/regexpp@4.9.1: + resolution: {integrity: sha512-Y27x+MBLjXa+0JWDhykM3+JE+il3kHKAEqabfEWq3SDhZjLYb6/BHL/JKFnH3fe207JaXkyDo685Oc2Glt6ifA==} engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0} dev: true @@ -1720,7 +1723,7 @@ packages: dev: true /add-stream@1.0.0: - resolution: {integrity: sha1-anmQQ3ynNtXhKI25K9MmbV9csqo=} + resolution: {integrity: sha512-qQLMr+8o0WC4FZGQTcJiKBVC59JylcPSrTtk6usvmIDFUOCKegapy1VHQwRbFMOFyb/inzUVqHs+eMYKDM1YeQ==} dev: true /agent-base@6.0.2: @@ -1839,7 +1842,7 @@ packages: dev: true /array-ify@1.0.0: - resolution: {integrity: sha1-nlKHYrSpBmrRY6aWKjZEGOlibs4=} + resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==} dev: true /array-union@2.1.0: @@ -1854,14 +1857,14 @@ packages: array-buffer-byte-length: 1.0.0 call-bind: 1.0.5 define-properties: 1.2.1 - es-abstract: 1.22.3 - get-intrinsic: 1.2.2 + es-abstract: 1.22.2 + get-intrinsic: 1.2.1 is-array-buffer: 3.0.2 is-shared-array-buffer: 1.0.2 dev: true /asap@2.0.6: - resolution: {integrity: sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=} + resolution: {integrity: sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA==} dev: true /assert-never@1.2.1: @@ -1880,7 +1883,7 @@ packages: dev: true /asynckit@0.4.0: - resolution: {integrity: sha1-x57Zf380y48robyXkLzDZkdLS3k=} + resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} dev: true /available-typed-arrays@1.0.5: @@ -1923,7 +1926,7 @@ packages: dependencies: ansi-align: 3.0.1 camelcase: 7.0.1 - chalk: 5.0.1 + chalk: 5.3.0 cli-boxes: 3.0.0 string-width: 5.1.2 type-fest: 2.19.0 @@ -1956,8 +1959,8 @@ packages: engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001554 - electron-to-chromium: 1.4.567 + caniuse-lite: 1.0.30001551 + electron-to-chromium: 1.4.561 node-releases: 2.0.13 update-browserslist-db: 1.0.13(browserslist@4.22.1) dev: true @@ -1983,7 +1986,7 @@ packages: dev: true /bytes@3.0.0: - resolution: {integrity: sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=} + resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==} engines: {node: '>= 0.8'} dev: true @@ -1996,7 +1999,7 @@ packages: resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==} dependencies: function-bind: 1.1.2 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 set-function-length: 1.1.1 dev: true @@ -2010,8 +2013,8 @@ packages: engines: {node: '>=14.16'} dev: true - /caniuse-lite@1.0.30001554: - resolution: {integrity: sha512-A2E3U//MBwbJVzebddm1YfNp7Nud5Ip+IPn4BozBmn4KqVX7AvluoIDFWjsv5OkGnKUXQVmMSoMKLa3ScCblcQ==} + /caniuse-lite@1.0.30001551: + resolution: {integrity: sha512-vtBAez47BoGMMzlbYhfXrMV1kvRF2WP/lqiMuDu1Sb4EE4LKEgjopFDSRtZfdVnslNRpOqV/woE+Xgrwj6VQlg==} dev: true /chai@4.3.10: @@ -2062,7 +2065,7 @@ packages: dev: true /character-parser@2.2.0: - resolution: {integrity: sha1-x84o821LzZdE5f/CxfzeHHMmH8A=} + resolution: {integrity: sha512-+UqJQjFEFaTAs3bNsF2j2kEN1baG/zghZbdqoYEDxGZtJo9LBzl1A+m0D4n3qKx8N2FNv8/Xp6yV9mQmBuptaw==} dependencies: is-regex: 1.1.4 dev: true @@ -2178,7 +2181,7 @@ packages: dev: true /commondir@1.0.1: - resolution: {integrity: sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=} + resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} dev: true /compare-func@2.0.0: @@ -2211,7 +2214,7 @@ packages: dev: true /concat-map@0.0.1: - resolution: {integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=} + resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true /constantinople@4.0.1: @@ -2222,7 +2225,7 @@ packages: dev: true /content-disposition@0.5.2: - resolution: {integrity: sha1-DPaLud318r55YcOoUXjLhdunjLQ=} + resolution: {integrity: sha512-kRGRZw3bLlFISDBgwTSA1TMBFN6J6GWDeubmDE3AF+3+yXL8hTWv8r5rkLbqYXY4RjPk/EzHnClI3zQf1cFmHA==} engines: {node: '>= 0.6'} dev: true @@ -2495,9 +2498,9 @@ packages: resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==} engines: {node: '>= 0.4'} dependencies: - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 gopd: 1.0.1 - has-property-descriptors: 1.0.1 + has-property-descriptors: 1.0.0 dev: true /define-properties@1.2.1: @@ -2505,7 +2508,7 @@ packages: engines: {node: '>= 0.4'} dependencies: define-data-property: 1.1.1 - has-property-descriptors: 1.0.1 + has-property-descriptors: 1.0.0 object-keys: 1.1.1 dev: true @@ -2519,7 +2522,7 @@ packages: dev: true /delayed-stream@1.0.0: - resolution: {integrity: sha1-3zrhmayt+31ECqrgsp4icrJOxhk=} + resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} dev: true @@ -2547,7 +2550,7 @@ packages: dev: true /doctypes@1.1.0: - resolution: {integrity: sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=} + resolution: {integrity: sha512-LLBi6pEqS6Do3EKQ3J0NqHWV5hhb78Pi8vvESYwyOy2c31ZEZVdtitdzsQsKb7878PEERhzUk0ftqGhG6Mz+pQ==} dev: true /domexception@4.0.0: @@ -2568,8 +2571,8 @@ packages: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} dev: true - /electron-to-chromium@1.4.567: - resolution: {integrity: sha512-8KR114CAYQ4/r5EIEsOmOMqQ9j0MRbJZR3aXD/KFA8RuKzyoUB4XrUCg+l8RUGqTVQgKNIgTpjaG8YHRPAbX2w==} + /electron-to-chromium@1.4.561: + resolution: {integrity: sha512-eS5t4ulWOBfVHdq9SW2dxEaFarj1lPjvJ8PaYMOjY0DecBaj/t4ARziL2IPpDr4atyWwjLFGQ2vo/VCgQFezVQ==} dev: true /emoji-regex@8.0.0: @@ -2605,26 +2608,26 @@ packages: is-arrayish: 0.2.1 dev: true - /es-abstract@1.22.3: - resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==} + /es-abstract@1.22.2: + resolution: {integrity: sha512-YoxfFcDmhjOgWPWsV13+2RNjq1F6UQnfs+8TftwNqtzlmFzEXvlUwdrNrYeaizfjQzRMxkZ6ElWMOJIFKdVqwA==} engines: {node: '>= 0.4'} dependencies: array-buffer-byte-length: 1.0.0 arraybuffer.prototype.slice: 1.0.2 available-typed-arrays: 1.0.5 call-bind: 1.0.5 - es-set-tostringtag: 2.0.2 + es-set-tostringtag: 2.0.1 es-to-primitive: 1.2.1 function.prototype.name: 1.1.6 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 get-symbol-description: 1.0.0 globalthis: 1.0.3 gopd: 1.0.1 - has-property-descriptors: 1.0.1 + has: 1.0.4 + has-property-descriptors: 1.0.0 has-proto: 1.0.1 has-symbols: 1.0.3 - hasown: 2.0.0 - internal-slot: 1.0.6 + internal-slot: 1.0.5 is-array-buffer: 3.0.2 is-callable: 1.2.7 is-negative-zero: 2.0.2 @@ -2654,13 +2657,13 @@ packages: resolution: {integrity: sha512-JUFAyicQV9mXc3YRxPnDlrfBKpqt6hUYzz9/boprUJHs4e4KVr3XwOF70doO6gwXUor6EWZJAyWAfKki84t20Q==} dev: true - /es-set-tostringtag@2.0.2: - resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==} + /es-set-tostringtag@2.0.1: + resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==} engines: {node: '>= 0.4'} dependencies: - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 + has: 1.0.4 has-tostringtag: 1.0.0 - hasown: 2.0.0 dev: true /es-to-primitive@1.2.1: @@ -2748,7 +2751,7 @@ packages: dev: true /escape-string-regexp@1.0.5: - resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=} + resolution: {integrity: sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg==} engines: {node: '>=0.8.0'} dev: true @@ -2816,7 +2819,7 @@ packages: hasBin: true dependencies: '@eslint-community/eslint-utils': 4.4.0(eslint@8.52.0) - '@eslint-community/regexpp': 4.10.0 + '@eslint-community/regexpp': 4.9.1 '@eslint/eslintrc': 2.1.2 '@eslint/js': 8.52.0 '@humanwhocodes/config-array': 0.11.13 @@ -2976,11 +2979,11 @@ packages: dev: true /fast-levenshtein@2.0.6: - resolution: {integrity: sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=} + resolution: {integrity: sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==} dev: true /fast-url-parser@1.1.3: - resolution: {integrity: sha1-9K8+qfNNiicc9YrSs3WfQx8LMY0=} + resolution: {integrity: sha512-5jOCVXADYNuRkKFzNJ0dCCewsZiYo0dz8QNYljkOpFC6r2U4OBmKtvm/Tsuh4w1YYdDqDb31a8TVhBJ2OJKdqQ==} dependencies: punycode: 1.4.1 dev: true @@ -3077,7 +3080,7 @@ packages: dev: true /fs.realpath@1.0.0: - resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=} + resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} dev: true /fsevents@2.3.3: @@ -3098,7 +3101,7 @@ packages: dependencies: call-bind: 1.0.5 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.22.2 functions-have-names: 1.2.3 dev: true @@ -3126,13 +3129,13 @@ packages: resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==} dev: true - /get-intrinsic@1.2.2: - resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==} + /get-intrinsic@1.2.1: + resolution: {integrity: sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==} dependencies: function-bind: 1.1.2 + has: 1.0.4 has-proto: 1.0.1 has-symbols: 1.0.3 - hasown: 2.0.0 dev: true /get-stream@5.2.0: @@ -3157,7 +3160,7 @@ packages: engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.5 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 dev: true /get-tsconfig@4.7.2: @@ -3279,7 +3282,7 @@ packages: /gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 dev: true /graceful-fs@4.2.11: @@ -3308,7 +3311,7 @@ packages: dev: true /has-flag@3.0.0: - resolution: {integrity: sha1-tdRU3CGZriJWmfNGfloH87lVuv0=} + resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==} engines: {node: '>=4'} dev: true @@ -3317,10 +3320,10 @@ packages: engines: {node: '>=8'} dev: true - /has-property-descriptors@1.0.1: - resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==} + /has-property-descriptors@1.0.0: + resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==} dependencies: - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 dev: true /has-proto@1.0.1: @@ -3340,15 +3343,13 @@ packages: has-symbols: 1.0.3 dev: true - /hash-sum@2.0.0: - resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==} + /has@1.0.4: + resolution: {integrity: sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==} + engines: {node: '>= 0.4.0'} dev: true - /hasown@2.0.0: - resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==} - engines: {node: '>= 0.4'} - dependencies: - function-bind: 1.1.2 + /hash-sum@2.0.0: + resolution: {integrity: sha512-WdZTbAByD+pHfl/g9QSsBIIwy8IT+EsPiKDs0KNX+zSHhdDLFKdZu0BQHljvO+0QI/BasbMSUa8wYNCZTvhslg==} dev: true /hosted-git-info@2.8.9: @@ -3432,7 +3433,7 @@ packages: dev: true /icss-replace-symbols@1.1.0: - resolution: {integrity: sha1-Bupvg2ead0njhs/h/oEq5dsiPe0=} + resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==} dev: true /icss-utils@5.1.0(postcss@8.4.31): @@ -3454,7 +3455,7 @@ packages: dev: true /immediate@3.0.6: - resolution: {integrity: sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=} + resolution: {integrity: sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==} dev: false /immutable@4.3.4: @@ -3474,12 +3475,12 @@ packages: dev: true /imurmurhash@0.1.4: - resolution: {integrity: sha1-khi5srkoojixPcT7a21XbyMUU+o=} + resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==} engines: {node: '>=0.8.19'} dev: true /inflight@1.0.6: - resolution: {integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=} + resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==} dependencies: once: 1.4.0 wrappy: 1.0.2 @@ -3492,12 +3493,12 @@ packages: resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==} dev: true - /internal-slot@1.0.6: - resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==} + /internal-slot@1.0.5: + resolution: {integrity: sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==} engines: {node: '>= 0.4'} dependencies: - get-intrinsic: 1.2.2 - hasown: 2.0.0 + get-intrinsic: 1.2.1 + has: 1.0.4 side-channel: 1.0.4 dev: true @@ -3513,12 +3514,12 @@ packages: resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==} dependencies: call-bind: 1.0.5 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 is-typed-array: 1.1.12 dev: true /is-arrayish@0.2.1: - resolution: {integrity: sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=} + resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==} dev: true /is-bigint@1.0.4: @@ -3554,10 +3555,10 @@ packages: engines: {node: '>= 0.4'} dev: true - /is-core-module@2.13.1: - resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} + /is-core-module@2.13.0: + resolution: {integrity: sha512-Z7dk6Qo8pOCp3l4tsX2C5ZVas4V+UxwQodwZhLopL91TX8UyyHEXafPcyoeeWuLrwzHcr3igO78wNLwHJHsMCQ==} dependencies: - hasown: 2.0.0 + has: 1.0.4 dev: true /is-date-object@1.0.5: @@ -3581,7 +3582,7 @@ packages: dev: true /is-extglob@2.1.1: - resolution: {integrity: sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=} + resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} dev: true @@ -3603,7 +3604,7 @@ packages: dev: true /is-module@1.0.0: - resolution: {integrity: sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=} + resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} dev: true /is-negative-zero@2.0.2: @@ -3718,7 +3719,7 @@ packages: dev: true /isarray@1.0.0: - resolution: {integrity: sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=} + resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==} dev: false /isarray@2.0.5: @@ -3726,7 +3727,7 @@ packages: dev: true /isexe@2.0.0: - resolution: {integrity: sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=} + resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} dev: true /istanbul-lib-coverage@3.2.0: @@ -3785,11 +3786,12 @@ packages: dev: true /js-stringify@1.0.2: - resolution: {integrity: sha1-Fzb939lyTyijaCrcYjCufk6Weds=} + resolution: {integrity: sha512-rtS5ATOo2Q5k1G+DADISilDA6lv79zIiwFd6CcjuIxGKLFm5C+RLImRscVap9k55i+MOZwgliw+NejvkLuGD5g==} dev: true /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==} + requiresBuild: true dev: true /js-yaml@4.1.0: @@ -3869,11 +3871,11 @@ packages: dev: true /json-stable-stringify-without-jsonify@1.0.1: - resolution: {integrity: sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=} + resolution: {integrity: sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==} dev: true /json-stringify-safe@5.0.1: - resolution: {integrity: sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=} + resolution: {integrity: sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==} dev: true /json5@2.2.3: @@ -3893,12 +3895,12 @@ packages: dev: true /jsonparse@1.3.1: - resolution: {integrity: sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=} + resolution: {integrity: sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==} engines: {'0': node >= 0.2.0} dev: true /jstransformer@1.0.0: - resolution: {integrity: sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=} + resolution: {integrity: sha512-C9YK3Rf8q6VAPDCCU9fnqo3mAfOH6vUGnMcP4AQAYIEpWtfGLpwOTmZ+igtdK5y+VvI2n3CyYSzy4Qh34eq24A==} dependencies: is-promise: 2.2.2 promise: 7.3.1 @@ -3979,7 +3981,7 @@ packages: dev: true /load-json-file@4.0.0: - resolution: {integrity: sha1-L19Fq5HjMhYjT9U62rZo607AmTs=} + resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==} engines: {node: '>=4'} dependencies: graceful-fs: 4.2.11 @@ -4013,7 +4015,7 @@ packages: dev: true /lodash.camelcase@4.3.0: - resolution: {integrity: sha1-soqmKIorn8ZRA1x3EfZathkDMaY=} + resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} dev: true /lodash.merge@4.6.2: @@ -4081,14 +4083,14 @@ packages: resolution: {integrity: sha512-Z1NL3Tb1M9wH4XESsCDEksWoKTdlUafKc4pt0GRwjUyXaCFZ+dc3g2erqB6zm3szA2IUSi7VnPI+o/9jnxh9hw==} dev: true - /marked@9.1.5: - resolution: {integrity: sha512-14QG3shv8Kg/xc0Yh6TNkMj90wXH9mmldi5941I2OevfJ/FQAFLEwtwU2/FfgSAOMlWHrEukWSGQf8MiVYNG2A==} + /marked@9.1.4: + resolution: {integrity: sha512-Mq83CCaClhXqhf8sLQ57c1unNelHEuFadK36ga+GeXR4FeT/5ssaC5PaCRVqMA74VYorzYRqdAaxxteIanh3Kw==} engines: {node: '>= 16'} hasBin: true dev: true /memorystream@0.3.1: - resolution: {integrity: sha1-htcJCzDORV1j+64S3aUaR93K+bI=} + resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==} engines: {node: '>= 0.10.0'} dev: true @@ -4205,7 +4207,7 @@ packages: dev: false /ms@2.0.0: - resolution: {integrity: sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=} + resolution: {integrity: sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==} dev: true /ms@2.1.2: @@ -4218,7 +4220,7 @@ packages: hasBin: true /natural-compare@1.4.0: - resolution: {integrity: sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=} + resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true /negotiator@0.6.3: @@ -4269,7 +4271,7 @@ packages: engines: {node: ^16.14.0 || >=18.0.0} dependencies: hosted-git-info: 7.0.1 - is-core-module: 2.13.1 + is-core-module: 2.13.0 semver: 7.5.4 validate-npm-package-license: 3.0.4 dev: true @@ -4314,7 +4316,7 @@ packages: dev: true /object-assign@4.1.1: - resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=} + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} engines: {node: '>=0.10.0'} dev: true @@ -4343,7 +4345,7 @@ packages: dev: true /once@1.4.0: - resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=} + resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==} dependencies: wrappy: 1.0.2 dev: true @@ -4439,7 +4441,7 @@ packages: dev: true /parse-json@4.0.0: - resolution: {integrity: sha1-vjX1Qlvh9/bHRxhPmKeIy5lHfuA=} + resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==} engines: {node: '>=4'} dependencies: error-ex: 1.3.2 @@ -4484,16 +4486,16 @@ packages: dev: true /path-is-absolute@1.0.1: - resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=} + resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==} engines: {node: '>=0.10.0'} dev: true /path-is-inside@1.0.2: - resolution: {integrity: sha1-NlQX3t5EQw0cEa9hAn+s8HS9/FM=} + resolution: {integrity: sha512-DUWJr3+ULp4zXmol/SZkFf3JGsS9/SIv+Y3Rt93/UjPpDpklB5f1er4O3POIbUuUJ3FXgqte2Q7SrU6zAqwk8w==} dev: true /path-key@2.0.1: - resolution: {integrity: sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=} + resolution: {integrity: sha512-fEHGKCSmUSDPv4uoj8AlD+joPlq3peND+HRYyxFz4KPw4z926S/b8rIuFs2FYJg3BwsxJf6A9/3eIdLaYC+9Dw==} engines: {node: '>=4'} dev: true @@ -4568,7 +4570,7 @@ packages: dev: true /pify@3.0.0: - resolution: {integrity: sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=} + resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==} engines: {node: '>=4'} dev: true @@ -4820,7 +4822,7 @@ packages: dev: true /punycode@1.4.1: - resolution: {integrity: sha1-wNWmOycYgArY4esPpSachN1BhF4=} + resolution: {integrity: sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==} dev: true /punycode@2.3.0: @@ -4880,7 +4882,7 @@ packages: dev: true /range-parser@1.2.0: - resolution: {integrity: sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=} + resolution: {integrity: sha512-kA5WQoNVo4t9lNx2kQNFCxKeBl5IbbSNBl1M/tLkw9WCn+hxNBAW5Qh8gdhs63CJnhjJ2zQWFoqPJP2sK1AV5A==} engines: {node: '>= 0.6'} dev: true @@ -4904,11 +4906,11 @@ packages: dependencies: find-up: 6.3.0 read-pkg: 8.1.0 - type-fest: 4.6.0 + type-fest: 4.5.0 dev: true /read-pkg@3.0.0: - resolution: {integrity: sha1-nLxoaXj+5l0WwA4rGcI3/Pbjg4k=} + resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==} engines: {node: '>=4'} dependencies: load-json-file: 4.0.0 @@ -4923,7 +4925,7 @@ packages: '@types/normalize-package-data': 2.4.3 normalize-package-data: 6.0.0 parse-json: 7.1.0 - type-fest: 4.6.0 + type-fest: 4.5.0 dev: true /readable-stream@2.3.8: @@ -4962,7 +4964,7 @@ packages: dev: true /registry-url@3.1.0: - resolution: {integrity: sha1-PU74cPc93h138M+aOBQyRE4XSUI=} + resolution: {integrity: sha512-ZbgR5aZEdf4UKZVBPYIgaglBmSF2Hi94s2PcIHhRGFjKYu+chjJdYfHn4rt3hB6eCKLJ8giVIIfgMa1ehDfZKA==} engines: {node: '>=0.10.0'} dependencies: rc: 1.2.8 @@ -4979,7 +4981,7 @@ packages: dev: true /requires-port@1.0.0: - resolution: {integrity: sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=} + resolution: {integrity: sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==} dev: true /resolve-from@4.0.0: @@ -4995,7 +4997,7 @@ packages: resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} hasBin: true dependencies: - is-core-module: 2.13.1 + is-core-module: 2.13.0 path-parse: 1.0.7 supports-preserve-symlinks-flag: 1.0.0 dev: true @@ -5115,7 +5117,7 @@ packages: engines: {node: '>=0.4'} dependencies: call-bind: 1.0.5 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 has-symbols: 1.0.3 isarray: 2.0.5 dev: true @@ -5131,7 +5133,7 @@ packages: resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==} dependencies: call-bind: 1.0.5 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 is-regex: 1.1.4 dev: true @@ -5218,9 +5220,9 @@ packages: engines: {node: '>= 0.4'} dependencies: define-data-property: 1.1.1 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 gopd: 1.0.1 - has-property-descriptors: 1.0.1 + has-property-descriptors: 1.0.0 dev: true /set-function-name@2.0.1: @@ -5229,15 +5231,15 @@ packages: dependencies: define-data-property: 1.1.1 functions-have-names: 1.2.3 - has-property-descriptors: 1.0.1 + has-property-descriptors: 1.0.0 dev: true /setimmediate@1.0.5: - resolution: {integrity: sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=} + resolution: {integrity: sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA==} dev: false /shebang-command@1.2.0: - resolution: {integrity: sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=} + resolution: {integrity: sha512-EV3L1+UQWGor21OmnvojK36mhg+TyIKDh3iFBKBohr5xeXIhNBcx8oWdgkTEEQ+BEFFYdLRuqMfd5L84N1V5Vg==} engines: {node: '>=0.10.0'} dependencies: shebang-regex: 1.0.0 @@ -5268,7 +5270,7 @@ packages: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: call-bind: 1.0.5 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 object-inspect: 1.13.1 dev: true @@ -5381,7 +5383,7 @@ packages: dev: true /stackback@0.0.2: - resolution: {integrity: sha1-Gsig2Ug4SNFpXkGLbQMaPDzmjjs=} + resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==} dev: true /std-env@3.4.3: @@ -5401,7 +5403,7 @@ packages: dev: true /string-hash@1.1.3: - resolution: {integrity: sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs=} + resolution: {integrity: sha512-kJUvRUFK49aub+a7T1nNE66EJbZBMnBgoC1UbCZ5n6bsZKBRga4KgBRTMn/pFkeCZSYtNeSyMxPDM0AXWELk2A==} dev: true /string-width@4.2.3: @@ -5428,7 +5430,7 @@ packages: dependencies: call-bind: 1.0.5 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.22.2 dev: true /string.prototype.trim@1.2.8: @@ -5437,7 +5439,7 @@ packages: dependencies: call-bind: 1.0.5 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.22.2 dev: true /string.prototype.trimend@1.0.7: @@ -5445,7 +5447,7 @@ packages: dependencies: call-bind: 1.0.5 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.22.2 dev: true /string.prototype.trimstart@1.0.7: @@ -5453,7 +5455,7 @@ packages: dependencies: call-bind: 1.0.5 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.22.2 dev: true /string_decoder@1.1.1: @@ -5477,7 +5479,7 @@ packages: dev: true /strip-bom@3.0.0: - resolution: {integrity: sha1-IzTBjpx1n3vdVv3vfprj1YjmjtM=} + resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==} engines: {node: '>=4'} dev: true @@ -5492,7 +5494,7 @@ packages: dev: true /strip-json-comments@2.0.1: - resolution: {integrity: sha1-PFMZQukIwml8DsNEhYwobHygpgo=} + resolution: {integrity: sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==} engines: {node: '>=0.10.0'} dev: true @@ -5584,11 +5586,11 @@ packages: dev: true /text-table@0.2.0: - resolution: {integrity: sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=} + resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==} dev: true /through@2.3.8: - resolution: {integrity: sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=} + resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} dev: true /tinybench@2.5.1: @@ -5606,7 +5608,7 @@ packages: dev: true /to-fast-properties@2.0.0: - resolution: {integrity: sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4=} + resolution: {integrity: sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==} engines: {node: '>=4'} /to-regex-range@5.0.1: @@ -5622,7 +5624,7 @@ packages: dev: true /token-stream@1.0.0: - resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=} + resolution: {integrity: sha512-VSsyNPPW74RpHwR8Fc21uubwHY7wMDeJLys2IX5zJNih+OnAnaifKHo+1LHT7DAdloQ7apeaaWg8l7qnf/TnEg==} dev: true /tough-cookie@4.1.3: @@ -5716,8 +5718,8 @@ packages: engines: {node: '>=14.16'} dev: true - /type-fest@4.6.0: - resolution: {integrity: sha512-rLjWJzQFOq4xw7MgJrCZ6T1jIOvvYElXT12r+y0CC6u67hegDHaxcPqb2fZHOGlqxugGQPNB1EnTezjBetkwkw==} + /type-fest@4.5.0: + resolution: {integrity: sha512-diLQivFzddJl4ylL3jxSkEc39Tpw7o1QeEHIPxVwryDK2lpB7Nqhzhuo6v5/Ls08Z0yPSAhsyAWlv1/H0ciNmw==} engines: {node: '>=16'} dev: true @@ -5726,7 +5728,7 @@ packages: engines: {node: '>= 0.4'} dependencies: call-bind: 1.0.5 - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.1 is-typed-array: 1.1.12 dev: true @@ -5842,7 +5844,7 @@ packages: dev: true /util-deprecate@1.0.2: - resolution: {integrity: sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=} + resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} /validate-npm-package-license@3.0.4: resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==} @@ -5852,7 +5854,7 @@ packages: dev: true /vary@1.1.2: - resolution: {integrity: sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=} + resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==} engines: {node: '>= 0.8'} dev: true @@ -5982,7 +5984,7 @@ packages: dev: true /void-elements@3.1.0: - resolution: {integrity: sha1-YU9/v42AHwu18GYfWy9XhXUOTwk=} + resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==} engines: {node: '>=0.10.0'} dev: true @@ -6092,7 +6094,7 @@ packages: dev: true /wordwrap@1.0.0: - resolution: {integrity: sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=} + resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==} dev: true /wrap-ansi@7.0.0: @@ -6114,7 +6116,7 @@ packages: dev: true /wrappy@1.0.2: - resolution: {integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=} + resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==} dev: true /ws@8.14.2: From 7a79b5e50ea4b5bc8eaadd21c2a927de8a2cfadc Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Mon, 27 Nov 2023 16:09:31 +0800 Subject: [PATCH 40/44] chore: Only hmr will uninstall styles --- packages/runtime-core/src/renderer.ts | 2 +- packages/runtime-dom/src/apiCustomElement.ts | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index e094128ee43..fa8d0e65b1f 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -2123,7 +2123,7 @@ function baseCreateRenderer( if (shapeFlag & ShapeFlags.COMPONENT) { // remove style tags when the component is a child // component of a custom element - if (vnode.component!.ceContext) { + if (vnode.component!.ceContext && isHmrUpdating) { vnode.component!.ceContext.removeCEChildStyles(vnode.component!.uid) } unmountComponent(vnode.component!, parentSuspense, doRemove) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index c849e0533b8..2488486b0e2 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -527,5 +527,3 @@ export class VueElement extends BaseClass { } } } - -// TODO: teleport 会导致dom 不会在 shadowRoot 中（是否需要） From 9877720965b1898ce8206e1e1b8844fe009c89a5 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Wed, 6 Dec 2023 15:06:29 +0800 Subject: [PATCH 41/44] test: updated unit test snap --- .../__snapshots__/ceStyleAttrs.spec.ts.snap | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap index 6eb24adb8a9..9b2fbfd573a 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap @@ -17,10 +17,10 @@ const __injectCSSVars__ = () => { _useCEStyleAttrs(_ctx => ([ { - \\"id\\": { id: _ctx.msg3, 'other-attr': _ctx.msg }, - \\"src\\": _ctx.msg, + "id": { id: _ctx.msg3, 'other-attr': _ctx.msg }, + "src": _ctx.msg, [_ctx.msg]: _ctx.msg, - \\"xlink:special\\": _ctx.msg, + "xlink:special": _ctx.msg, }, ]))} const __setup__ = __default__.setup @@ -53,7 +53,7 @@ export default { _useCEStyleAttrs(_ctx => ([ { - \\"id\\": { id: _ctx.msg3, 'other-attr': msg }, + "id": { id: _ctx.msg3, 'other-attr': msg }, }, ])) @@ -72,10 +72,10 @@ const __injectCSSVars__ = () => { _useCEStyleAttrs(_ctx => ([ { - \\"id\\": { id: _ctx.msg3, 'other-attr': _ctx.msg }, - \\"src\\": _ctx.msg, + "id": { id: _ctx.msg3, 'other-attr': _ctx.msg }, + "src": _ctx.msg, [_ctx.msg]: _ctx.msg, - \\"xlink:special\\": _ctx.msg, + "xlink:special": _ctx.msg, }, ]))} const __setup__ = __default__.setup @@ -100,10 +100,10 @@ export default { _useCEStyleAttrs(_ctx => ([ { - \\"id\\": { id: __props.msg3, 'other-attr': msg }, - \\"src\\": msg2.value, + "id": { id: __props.msg3, 'other-attr': msg }, + "src": msg2.value, [msg]: msg, - \\"xlink:special\\": __props.msg3, + "xlink:special": __props.msg3, }, ])) @@ -131,10 +131,10 @@ const __injectCSSVars__ = () => { _useCEStyleAttrs(_ctx => ([ { - \\"id\\": { id: _ctx.msg3, 'other-attr': _ctx.msg }, - \\"src\\": _ctx.msg, + "id": { id: _ctx.msg3, 'other-attr': _ctx.msg }, + "src": _ctx.msg, [_ctx.msg]: _ctx.msg, - \\"xlink:special\\": _ctx.msg, + "xlink:special": _ctx.msg, }, ]))} const __setup__ = __default__.setup From b805943eacf99879e6ba644a2b4a3da8144919ba Mon Sep 17 00:00:00 2001 From: "autofix-ci[bot]" <114827586+autofix-ci[bot]@users.noreply.github.com> Date: Wed, 3 Jan 2024 03:46:41 +0000 Subject: [PATCH 42/44] [autofix.ci] apply automated fixes --- .../__tests__/ceStyleAttrs.spec.ts | 78 ++++++------ packages/compiler-sfc/src/compileScript.ts | 6 +- packages/compiler-sfc/src/parse.ts | 10 +- .../compiler-sfc/src/script/normalScript.ts | 2 +- .../compiler-sfc/src/style/ceStyleAttrs.ts | 16 +-- packages/runtime-core/src/component.ts | 4 +- packages/runtime-core/src/renderer.ts | 4 +- .../__tests__/customElement.spec.ts | 62 ++++----- .../__tests__/helpers/useCEStyleAttrs.spec.ts | 120 +++++++++--------- packages/runtime-dom/src/apiCustomElement.ts | 6 +- .../src/helpers/useCEStyleAttrs.ts | 4 +- 11 files changed, 157 insertions(+), 155 deletions(-) diff --git a/packages/compiler-sfc/__tests__/ceStyleAttrs.spec.ts b/packages/compiler-sfc/__tests__/ceStyleAttrs.spec.ts index 427a00d6922..5875826375b 100644 --- a/packages/compiler-sfc/__tests__/ceStyleAttrs.spec.ts +++ b/packages/compiler-sfc/__tests__/ceStyleAttrs.spec.ts @@ -1,5 +1,5 @@ import { parse } from '../src' -import { compileSFCScript, assertCode } from './utils' +import { assertCode, compileSFCScript } from './utils' describe('CE style attrs injection', () => { test('generating correct code for nested paths', () => { @@ -13,7 +13,7 @@ v-bind:[msg]="msg" :[msg]="msg" :xlink:special="msg">div{ color: red; - }` + }`, ) expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([ @@ -48,7 +48,7 @@ v-bind:[msg]="msg" div { color: red; } - ` + `, ) expect(content).toMatch(`_useCEStyleAttrs(_ctx => ([ { @@ -59,7 +59,7 @@ v-bind:[msg]="msg" }, ]))}`) expect(content).toMatch( - `import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'` + `import { useCEStyleAttrs as _useCEStyleAttrs } from 'vue'`, ) assertCode(content) }) @@ -84,7 +84,7 @@ v-bind:[msg]="msg" div { color: red; } - ` + `, ) // should handle: // 1. local const bindings @@ -99,7 +99,7 @@ v-bind:[msg]="msg" }, ]))`) expect(content).toMatch( - `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'` + `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'`, ) assertCode(content) }) @@ -115,8 +115,8 @@ id="{ id: msg2, 'other-attr': msg }" v-bind:src="msg" v-bind:[msg]="msg" :[msg]="msg" -:xlink:special="msg">div{ color: red; }` - ).content +:xlink:special="msg">div{ color: red; }`, + ).content, ) }) @@ -130,8 +130,8 @@ id="{ id: msg2, 'other-attr': msg }" v-bind:src="msg" v-bind:[msg]="msg" :[msg]="msg" -:xlink:special="msg>div{ color: red }` - ).content +:xlink:special="msg>div{ color: red }`, + ).content, ) }) @@ -148,8 +148,8 @@ id="{ id: msg2, 'other-attr': msg }" v-bind:src="msg" v-bind:[msg]="msg" :[msg]="msg" -:xlink:special="msg>div{ color: red }` - ).content +:xlink:special="msg>div{ color: red }`, + ).content, ) }) @@ -163,8 +163,8 @@ id="{ id: msg2, 'other-attr': msg }" v-bind:src="msg" v-bind:[msg]="msg" :[msg]="msg" -:xlink:special="msg>div{ color: red }` - ).content +:xlink:special="msg>div{ color: red }`, + ).content, ) }) @@ -180,7 +180,7 @@ id="{ id: msg2, 'other-attr': msg }" p { color: red; } - ` + `, ) // id should only be injected once, even if it is twice in style @@ -194,14 +194,14 @@ id="{ id: msg2, 'other-attr': msg }" test('should be able to parse incomplete expressions', () => { const { - descriptor: { ceStyleAttrs } + descriptor: { ceStyleAttrs }, } = parse( ` ` + `, ) expect(ceStyleAttrs[0].length).toBe(2) expect(ceStyleAttrs[0]).toMatchObject([ @@ -210,27 +210,27 @@ id="{ id: msg2, 'other-attr': msg }" exp: { content: 'xxx', isStatic: false, - constType: 0 + constType: 0, }, arg: { content: 'id', isStatic: true, - constType: 3 - } + constType: 3, + }, }, { name: 'bind', exp: { content: 'count.toString(', isStatic: false, - constType: 0 + constType: 0, }, arg: { content: 'data-name', isStatic: true, - constType: 3 - } - } + constType: 3, + }, + }, ]) }) @@ -241,10 +241,10 @@ id="{ id: msg2, 'other-attr': msg }" ` + `, ) expect(content).toMatch( - `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n]))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}` + `import { useCEStyleAttrs as _useCEStyleAttrs, unref as _unref } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n]))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}`, ) }) @@ -257,10 +257,10 @@ id="{ id: msg2, 'other-attr': msg }" label { background: v-bind(background); } - ` + `, ) expect(content).toMatch( - `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}` + `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}`, ) }) @@ -278,10 +278,10 @@ id="{ id: msg2, 'other-attr': msg }" h1 { background: v-bind(background); } - ` + `, ) expect(content).toMatch( - `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n {\n \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}` + `import { useCssVars as _useCssVars, unref as _unref, useCEStyleAttrs as _useCEStyleAttrs } from 'vue'\nimport { ref as _ref } from 'vue';\n \nexport default {\n setup(__props, { expose: __expose }) {\n __expose();\n\n_useCEStyleAttrs(_ctx => ([\n {\n \"id\": _unref(background),\n },\n {\n \"id\": _unref(background),\n },\n]))\n\n_useCssVars(_ctx => ({\n \"xxxxxxxx-background\": (_unref(background))\n}))\nlet background = _ref('red')\n \nreturn { get background() { return background }, set background(v) { background = v }, _ref }\n}\n\n}`, ) }) @@ -299,9 +299,9 @@ id="{ id: msg2, 'other-attr': msg }" { inlineTemplate: true, templateOptions: { - ssr: true - } - } + ssr: true, + }, + }, ) expect(content).not.toMatch(`_useCssVars`) }) @@ -320,9 +320,9 @@ id="{ id: msg2, 'other-attr': msg }" { inlineTemplate: false, templateOptions: { - ssr: true - } - } + ssr: true, + }, + }, ) expect(content).not.toMatch(`_useCssVars`) }) @@ -345,9 +345,9 @@ id="{ id: msg2, 'other-attr': msg }" \``, { templateOptions: { - ssr: true - } - } + ssr: true, + }, + }, ) expect(content).not.toMatch(`_useCssVars`) }) diff --git a/packages/compiler-sfc/src/compileScript.ts b/packages/compiler-sfc/src/compileScript.ts index d8922b32a2f..ee31fc061e1 100644 --- a/packages/compiler-sfc/src/compileScript.ts +++ b/packages/compiler-sfc/src/compileScript.ts @@ -740,7 +740,6 @@ export function compileScript( ) } - if ( ctx.descriptor.ceStyleAttrs.length && // no need to do this when targeting SSR @@ -750,7 +749,10 @@ export function compileScript( ctx.helperImports.add('unref') ctx.s.prependLeft( startOffset, - `\n${genCEStyleAttrs(ctx.descriptor.ceStyleAttrs, ctx.bindingMetadata)}\n` + `\n${genCEStyleAttrs( + ctx.descriptor.ceStyleAttrs, + ctx.bindingMetadata, + )}\n`, ) } diff --git a/packages/compiler-sfc/src/parse.ts b/packages/compiler-sfc/src/parse.ts index e5d8a1854c5..ba1fbe31a82 100644 --- a/packages/compiler-sfc/src/parse.ts +++ b/packages/compiler-sfc/src/parse.ts @@ -1,16 +1,16 @@ import { + type AttributeNode, type BindingMetadata, type CompilerError, + type DirectiveNode, type ElementNode, NodeTypes, type ParserOptions, type RootNode, + type SimpleExpressionNode, type SourceLocation, - createRoot, TextModes, - AttributeNode, - DirectiveNode, - SimpleExpressionNode + createRoot, } from '@vue/compiler-core' import * as CompilerDOM from '@vue/compiler-dom' import { type RawSourceMap, SourceMapGenerator } from 'source-map-js' @@ -476,7 +476,7 @@ export function hmrShouldReload( } function setPropsNodeForStyleAttrs( descriptor: SFCDescriptor, - props: Array + props: Array, ) { const propsArr = props.filter(prop => { // skip scoped and lang diff --git a/packages/compiler-sfc/src/script/normalScript.ts b/packages/compiler-sfc/src/script/normalScript.ts index a87032fc966..59997c9198a 100644 --- a/packages/compiler-sfc/src/script/normalScript.ts +++ b/packages/compiler-sfc/src/script/normalScript.ts @@ -68,7 +68,7 @@ export function processNormalScript( function genInjectCode( content: string, defaultVar: string, - importer: string[] + importer: string[], ) { const importerContent = importer.map(v => ` ${v} as _${v} `).join(',') return ( diff --git a/packages/compiler-sfc/src/style/ceStyleAttrs.ts b/packages/compiler-sfc/src/style/ceStyleAttrs.ts index 1f250ffa7c5..c4b8d8360a4 100644 --- a/packages/compiler-sfc/src/style/ceStyleAttrs.ts +++ b/packages/compiler-sfc/src/style/ceStyleAttrs.ts @@ -1,20 +1,20 @@ import { - AttributeNode, - BindingMetadata, + type AttributeNode, + type BindingMetadata, + type DirectiveNode, + NodeTypes, + type SimpleExpressionNode, createRoot, createSimpleExpression, createTransformContext, - DirectiveNode, - NodeTypes, processExpression, - SimpleExpressionNode } from '@vue/compiler-core' export const CE_STYLE_ATTRS_HELPER = `useCEStyleAttrs` export function genCEStyleAttrs( ceStyleAttrs: Array[], - bindings: BindingMetadata + bindings: BindingMetadata, ) { let code = '' for (let i = 0; i < ceStyleAttrs.length; i++) { @@ -26,14 +26,14 @@ export function genCEStyleAttrs( function doGenStyleAttrsCode( attrs: Array, - bindings: BindingMetadata + bindings: BindingMetadata, ) { const attrsExp = genAttrsFromList(attrs) const exp = createSimpleExpression(attrsExp, false) const context = createTransformContext(createRoot([]), { prefixIdentifiers: true, inline: true, - bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings + bindingMetadata: bindings.__isScriptSetup === false ? undefined : bindings, }) const transformed = processExpression(exp, context) diff --git a/packages/runtime-core/src/component.ts b/packages/runtime-core/src/component.ts index 7f2a2496ab1..48cd99d04cf 100644 --- a/packages/runtime-core/src/component.ts +++ b/packages/runtime-core/src/component.ts @@ -363,7 +363,7 @@ export interface ComponentInternalInstance { setStyleAttrs: ( uid: number | 'root', nAttrs: Array>, - oAttrs?: Array> + oAttrs?: Array>, ) => void } | null /** @@ -382,7 +382,7 @@ export interface ComponentInternalInstance { */ ceReload?: ( newStyles?: string[], - attrs?: Array> + attrs?: Array>, ) => void // the rest are only for stateful components --------------------------------- diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts index f92457974ec..e97b28df6a6 100644 --- a/packages/runtime-core/src/renderer.ts +++ b/packages/runtime-core/src/renderer.ts @@ -16,8 +16,8 @@ import { import { type ComponentInternalInstance, type ComponentOptions, + type ConcreteComponent, type Data, - ConcreteComponent, createComponentInstance, setupComponent, } from './component' @@ -1393,7 +1393,7 @@ function baseCreateRenderer( instance.ceContext.addCEChildStyle( styles, instance.uid, - instance.hasStyleAttrs + instance.hasStyleAttrs, ) } } diff --git a/packages/runtime-dom/__tests__/customElement.spec.ts b/packages/runtime-dom/__tests__/customElement.spec.ts index 1b07755f082..e13a7f3917b 100644 --- a/packages/runtime-dom/__tests__/customElement.spec.ts +++ b/packages/runtime-dom/__tests__/customElement.spec.ts @@ -1,7 +1,7 @@ import { + type ComponentOptions, type Ref, type VueElement, - ComponentOptions, defineAsyncComponent, defineComponent, defineCustomElement, @@ -555,14 +555,14 @@ describe('defineCustomElement', () => { styles: [`.Child { color: blue; }`], render() { return h('div', { class: 'Child' }, 'hello') - } + }, } const Foo = defineCustomElement({ components: { Child }, styles: [`div { color: red; }`], render() { return h('div', {}, ['hello', h(Child)]) - } + }, }) customElements.define('my-el-with-child-styles', Foo) container.innerHTML = `` @@ -606,10 +606,10 @@ describe('defineCustomElement', () => { // should inject styles expect(e1.shadowRoot!.innerHTML).toBe( - `
hello
` + `
hello
`, ) expect(e2.shadowRoot!.innerHTML).toBe( - `
world
` + `
world
`, ) // attr @@ -617,7 +617,7 @@ describe('defineCustomElement', () => { await nextTick() expect((e1 as any).msg).toBe('attr') expect(e1.shadowRoot!.innerHTML).toBe( - `
attr
` + `
attr
`, ) // props @@ -625,7 +625,7 @@ describe('defineCustomElement', () => { ;(e1 as any).msg = 'prop' expect(e1.getAttribute('msg')).toBe('prop') expect(e1.shadowRoot!.innerHTML).toBe( - `
prop
` + `
prop
`, ) }) @@ -634,7 +634,7 @@ describe('defineCustomElement', () => { styles: [`.Child { color: blue; }`], render() { return h('div', { class: 'Child' }, 'hello') - } + }, } const Foo = defineCustomElement( defineAsyncComponent(() => { @@ -643,9 +643,9 @@ describe('defineCustomElement', () => { styles: [`div { color: red; }`], render() { return h('div', {}, ['hello', h(Child)]) - } + }, }) - }) + }), ) customElements.define('my-el-with-child-styles-async', Foo) @@ -665,7 +665,7 @@ describe('defineCustomElement', () => { styles: [`.Child2 { color: pink; }`], render() { return h('div', { class: 'Child2' }, 'pink') - } + }, } as ComponentOptions) }) @@ -675,7 +675,7 @@ describe('defineCustomElement', () => { styles: [`.Child { color: blue; }`], render() { return h('div', { class: 'Child' }, ['hello', h(Child2)]) - } + }, } as ComponentOptions) }) const Parent = { @@ -683,7 +683,7 @@ describe('defineCustomElement', () => { styles: [`div { color: red; }`], render() { return h('div', {}, ['hello', h(Child)]) - } + }, } const Foo = defineCustomElement(Parent) @@ -798,7 +798,7 @@ describe('defineCustomElement', () => { styles: [`.my-green { color: green; }`], render() { return h('p', { class: 'my-green' }, 'This should be green') - } + }, } const Foo = defineCustomElement({ @@ -809,9 +809,9 @@ describe('defineCustomElement', () => { h('p', { class: 'my-red' }, 'This should be red'), h(Child), h(Child), - h(Child) + h(Child), ] - } + }, }) customElements.define('my-el-with-multiple-child', Foo) container.innerHTML = `` @@ -838,14 +838,14 @@ describe('defineCustomElement', () => { useCEStyleAttrs(() => { return [ { - id: id - } + id: id, + }, ] as Record[] }) }, render() { return h('p', { class: 'my-green' }, 'This should be green') - } + }, } const Foo = defineCustomElement({ @@ -856,9 +856,9 @@ describe('defineCustomElement', () => { h('p', { class: 'my-red' }, 'This should be red'), h(Child), h(Child), - h(Child) + h(Child), ] - } + }, }) customElements.define('my-el-with-multiple-attr', Foo) container.innerHTML = `` @@ -886,7 +886,7 @@ describe('defineCustomElement', () => { styles: [`.my-green { color: green; }`], render() { return h('p', { class: 'my-green' }, 'This should be green') - } + }, } const Child = { components: { GrandChild }, @@ -894,16 +894,16 @@ describe('defineCustomElement', () => { render() { return h('div', {}, [ h('p', { class: 'my-blue' }, 'This should be blue'), - h('div', {}, h(GrandChild)) + h('div', {}, h(GrandChild)), ]) - } + }, } const Foo = defineCustomElement({ components: { Child }, styles: [`.my-red { color: red; }`], render() { return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)] - } + }, }) customElements.define('my-el-with-grandchild-styles', Foo) container.innerHTML = `` @@ -922,7 +922,7 @@ describe('defineCustomElement', () => { styles: [`.my-grey { color: grey; }`], render() { return h('p', { class: 'my-grey' }, 'This should be grey') - } + }, } const GrandChild = { components: { GreatGrandChild }, @@ -930,9 +930,9 @@ describe('defineCustomElement', () => { render() { return [ h('p', { class: 'my-green' }, 'This should be green'), - h('span', {}, h(GreatGrandChild)) + h('span', {}, h(GreatGrandChild)), ] - } + }, } const Child = { components: { GrandChild }, @@ -940,16 +940,16 @@ describe('defineCustomElement', () => { render() { return h('div', {}, [ h('p', { class: 'my-blue' }, 'This should be blue'), - h('div', {}, h(GrandChild)) + h('div', {}, h(GrandChild)), ]) - } + }, } const Foo = defineCustomElement({ components: { Child }, styles: [`.my-red { color: red; }`], render() { return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)] - } + }, }) customElements.define('my-el-with-greatgrandchild-styles', Foo) container.innerHTML = `` diff --git a/packages/runtime-dom/__tests__/helpers/useCEStyleAttrs.spec.ts b/packages/runtime-dom/__tests__/helpers/useCEStyleAttrs.spec.ts index a8d8c6c997f..e305d551345 100644 --- a/packages/runtime-dom/__tests__/helpers/useCEStyleAttrs.spec.ts +++ b/packages/runtime-dom/__tests__/helpers/useCEStyleAttrs.spec.ts @@ -1,11 +1,11 @@ import { + Suspense, + type VueElement, + defineCustomElement, h, nextTick, - defineCustomElement, - VueElement, ref, useCEStyleAttrs, - Suspense } from '@vue/runtime-dom' import { expect } from 'vitest' @@ -28,14 +28,14 @@ describe('useCEStyleAttrs', () => { id: attr.value, src: attr.value, [attr.value]: attr.value, - 'xlink:special': attr.value - } + 'xlink:special': attr.value, + }, ] as Record[] }) }, render() { return [h('p', { class: 'my-red' }, 'This should be red')] - } + }, }) customElements.define('ce-style-attr', Foo) container.innerHTML = `` @@ -47,8 +47,8 @@ describe('useCEStyleAttrs', () => { expect(style[0].textContent).toBe(`.my-red { color: red; }`) expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo" src="foo" foo="foo" xlink:special="foo"' - ) + 'id="foo" src="foo" foo="foo" xlink:special="foo"', + ), ).toBeTruthy() }) @@ -63,14 +63,14 @@ describe('useCEStyleAttrs', () => { id: attr.value, src: attr.value, [attr.value]: attr.value, - 'xlink:special': attr.value - } + 'xlink:special': attr.value, + }, ] as Record[] }) }, render() { return h('p', { class: 'my-green' }, 'This should be green') - } + }, } const Foo = defineCustomElement({ @@ -84,14 +84,14 @@ describe('useCEStyleAttrs', () => { id: attr.value, src: attr.value, [attr.value]: attr.value, - 'xlink:special': attr.value - } + 'xlink:special': attr.value, + }, ] as Record[] }) }, render() { return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)] - } + }, }) customElements.define('ce-style-attr-child', Foo) container.innerHTML = `` @@ -104,13 +104,13 @@ describe('useCEStyleAttrs', () => { expect(style[1].textContent).toBe(`.my-red { color: red; }`) expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo" src="foo" foo="foo" xlink:special="foo"' - ) + 'id="foo" src="foo" foo="foo" xlink:special="foo"', + ), ).toBeTruthy() expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"' - ) + 'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"', + ), ).toBeTruthy() }) @@ -123,17 +123,17 @@ describe('useCEStyleAttrs', () => { useCEStyleAttrs(() => { return [ { - id: attr.value + id: attr.value, }, { - id: attr2.value - } + id: attr2.value, + }, ] as Record[] }) }, render() { return [h('p', { class: 'my-red' }, 'This should be red')] - } + }, }) customElements.define('ce-style-attr-child-order', Foo) container.innerHTML = `` @@ -164,14 +164,14 @@ describe('useCEStyleAttrs', () => { id: attr2.value, src: attr2.value, [attr2.value]: attr2.value, - 'xlink:special': attr2.value - } + 'xlink:special': attr2.value, + }, ] as Record[] }) }, render() { return h('p', { class: 'my-green' }, 'This should be green') - } + }, } const Foo = defineCustomElement({ @@ -184,14 +184,14 @@ describe('useCEStyleAttrs', () => { id: attr.value, src: attr.value, [attr.value]: attr.value, - 'xlink:special': attr.value - } + 'xlink:special': attr.value, + }, ] as Record[] }) }, render() { return [h('p', { class: 'my-red' }, 'This should be red'), h(Child)] - } + }, }) customElements.define('ce-style-attr-child-update', Foo) container.innerHTML = `` @@ -204,13 +204,13 @@ describe('useCEStyleAttrs', () => { expect(style[1].textContent).toBe(`.my-red { color: red; }`) expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo" src="foo" foo="foo" xlink:special="foo"' - ) + 'id="foo" src="foo" foo="foo" xlink:special="foo"', + ), ).toBeTruthy() expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"' - ) + 'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"', + ), ).toBeTruthy() attr.value = 'foo-change' @@ -219,13 +219,13 @@ describe('useCEStyleAttrs', () => { expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo-change" src="foo-change" xlink:special="foo-change" foo-change="foo-change"' - ) + 'id="foo-change" src="foo-change" xlink:special="foo-change" foo-change="foo-change"', + ), ).toBeTruthy() expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo2-change" src="foo2-change" xlink:special="foo2-change" foo2-change="foo2-change"' - ) + 'id="foo2-change" src="foo2-change" xlink:special="foo2-change" foo2-change="foo2-change"', + ), ).toBeTruthy() }) @@ -240,17 +240,17 @@ describe('useCEStyleAttrs', () => { id: attr.value, src: attr.value, [attr.value]: attr.value, - 'xlink:special': attr.value - } + 'xlink:special': attr.value, + }, ] as Record[] }) }, render() { return [ h('p', { class: 'my-red' }, 'This should be red'), - h('p', { class: 'my-red' }, 'This should be red') + h('p', { class: 'my-red' }, 'This should be red'), ] - } + }, }) customElements.define('ce-style-attr-fragment', Foo) container.innerHTML = `` @@ -262,8 +262,8 @@ describe('useCEStyleAttrs', () => { expect(style[0].textContent).toBe(`.my-red { color: red; }`) expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo" src="foo" foo="foo" xlink:special="foo"' - ) + 'id="foo" src="foo" foo="foo" xlink:special="foo"', + ), ).toBeTruthy() }) @@ -283,8 +283,8 @@ describe('useCEStyleAttrs', () => { id: attr2.value, src: attr2.value, [attr2.value]: attr2.value, - 'xlink:special': attr2.value - } + 'xlink:special': attr2.value, + }, ] as Record[] }) asyncPromise = new Promise(r => { @@ -293,7 +293,7 @@ describe('useCEStyleAttrs', () => { } }) return asyncPromise - } + }, } const App = { @@ -305,21 +305,21 @@ describe('useCEStyleAttrs', () => { id: attr.value, src: attr.value, [attr.value]: attr.value, - 'xlink:special': attr.value - } + 'xlink:special': attr.value, + }, ] as Record[] }) return () => h(Suspense, null, { default: h(AsyncComp), - fallback: h('div', 'fallback') + fallback: h('div', 'fallback'), }) - } + }, } customElements.define( 'ce-style-attr-child-suspense', - defineCustomElement(App) + defineCustomElement(App), ) container.innerHTML = `` await nextTick() @@ -330,8 +330,8 @@ describe('useCEStyleAttrs', () => { expect(style[0].textContent).toBe(`.my-red { color: red; }`) expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo" src="foo" foo="foo" xlink:special="foo"' - ) + 'id="foo" src="foo" foo="foo" xlink:special="foo"', + ), ).toBeTruthy() resolveAsync() @@ -345,13 +345,13 @@ describe('useCEStyleAttrs', () => { expect(style[1].textContent).toBe(`.my-red { color: red; }`) expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo" src="foo" foo="foo" xlink:special="foo"' - ) + 'id="foo" src="foo" foo="foo" xlink:special="foo"', + ), ).toBeTruthy() expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"' - ) + 'id="foo2" src="foo2" foo2="foo2" xlink:special="foo2"', + ), ).toBeTruthy() attr.value = 'foo-change' @@ -360,13 +360,13 @@ describe('useCEStyleAttrs', () => { expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo-change" src="foo-change" xlink:special="foo-change" foo-change="foo-change"' - ) + 'id="foo-change" src="foo-change" xlink:special="foo-change" foo-change="foo-change"', + ), ).toBeTruthy() expect( el1.shadowRoot?.innerHTML.includes( - 'id="foo2-change" src="foo2-change" xlink:special="foo2-change" foo2-change="foo2-change"' - ) + 'id="foo2-change" src="foo2-change" xlink:special="foo2-change" foo2-change="foo2-change"', + ), ).toBeTruthy() }) }) diff --git a/packages/runtime-dom/src/apiCustomElement.ts b/packages/runtime-dom/src/apiCustomElement.ts index 5bd7f2517fd..f068e7446a8 100644 --- a/packages/runtime-dom/src/apiCustomElement.ts +++ b/packages/runtime-dom/src/apiCustomElement.ts @@ -371,7 +371,7 @@ export class VueElement extends BaseClass { instance.ceContext = { addCEChildStyle: this._addChildStyles.bind(this), removeCEChildStyles: this._removeChildStyles.bind(this), - setStyleAttrs: this._setStyleAttrs.bind(this) + setStyleAttrs: this._setStyleAttrs.bind(this), } // HMR if (__DEV__) { @@ -444,7 +444,7 @@ export class VueElement extends BaseClass { protected _addChildStyles( styles: string[] | undefined, uid: number, - hasAttr: boolean + hasAttr: boolean, ) { if (styles) { // record style @@ -477,7 +477,7 @@ export class VueElement extends BaseClass { protected _setStyleAttrs( uid: number | 'root', nAttrs: Array>, - oAttrs?: Array> + oAttrs?: Array>, ) { const styleEls = this.shadowRoot!.querySelectorAll(`[data-v-ce-${uid}]`) styleEls.forEach((s, index) => { diff --git a/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts b/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts index 5eaf58d8be2..1077e59bfaf 100644 --- a/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts +++ b/packages/runtime-dom/src/helpers/useCEStyleAttrs.ts @@ -1,7 +1,7 @@ import { getCurrentInstance, warn, watchPostEffect } from '@vue/runtime-core' export function useCEStyleAttrs( - getter: (ctx: any) => Array> + getter: (ctx: any) => Array>, ) { if (!__BROWSER__ && !__TEST__) return @@ -10,7 +10,7 @@ export function useCEStyleAttrs( if (!instance) { __DEV__ && warn( - `useCEStyleAttrs is called without current active component instance.` + `useCEStyleAttrs is called without current active component instance.`, ) return } From 9ff30fd49d08557affb997d0943458f837701b57 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Wed, 3 Jan 2024 15:47:32 +0800 Subject: [PATCH 43/44] chore: updated unit test snap --- .../__snapshots__/ceStyleAttrs.spec.ts.snap | 116 ++---------------- .../__tests__/ceStyleAttrs.spec.ts | 10 +- packages/compiler-sfc/src/parse.ts | 1 - 3 files changed, 12 insertions(+), 115 deletions(-) diff --git a/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap b/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap index 9b2fbfd573a..45a5a5edcdb 100644 --- a/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap +++ b/packages/compiler-sfc/__tests__/__snapshots__/ceStyleAttrs.spec.ts.snap @@ -1,52 +1,8 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`CE style attrs injection > codegen > \n` + @@ -163,12 +163,12 @@ id="{ id: msg2, 'other-attr': msg }" v-bind:src="msg" v-bind:[msg]="msg" :[msg]="msg" -:xlink:special="msg>div{ color: red }`, +:xlink:special="msg">p { color: red }`, ).content, ) }) - test('w/