From d0899eaad4330abc4db6a542ecf3ee11aab42981 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Thu, 20 Oct 2022 13:15:12 +0200 Subject: [PATCH 1/4] implement sound CSF3 types for Vue3 --- code/package.json | 3 + code/renderers/vue3/package.json | 8 +- code/renderers/vue3/src/__tests__/Button.vue | 19 ++ .../vue3/src/__tests__/Decorator.vue | 9 + .../vue3/src/__tests__/Decorator2.vue | 9 + code/renderers/vue3/src/decorateStory.ts | 2 +- code/renderers/vue3/src/public-types.test.ts | 192 +++++++++++++++ code/renderers/vue3/src/public-types.ts | 35 ++- code/renderers/vue3/src/render.ts | 9 +- code/renderers/vue3/src/types.ts | 10 +- code/renderers/vue3/tsconfig.json | 5 +- code/yarn.lock | 220 +++++++++++++++++- 12 files changed, 500 insertions(+), 21 deletions(-) create mode 100644 code/renderers/vue3/src/__tests__/Button.vue create mode 100644 code/renderers/vue3/src/__tests__/Decorator.vue create mode 100644 code/renderers/vue3/src/__tests__/Decorator2.vue create mode 100644 code/renderers/vue3/src/public-types.test.ts diff --git a/code/package.json b/code/package.json index bfb1237ba9c1..b111af66a7b7 100644 --- a/code/package.json +++ b/code/package.json @@ -347,6 +347,9 @@ "window-size": "^1.1.1", "zx": "^7.0.3" }, + "devDependencies": { + "expect-type": "^0.14.2" + }, "dependenciesMeta": { "@compodoc/compodoc": { "built": false diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index fa167c84b333..38c5dfba0e41 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -46,7 +46,7 @@ "*.d.ts" ], "scripts": { - "check": "../../../scripts/node_modules/.bin/tsc --noEmit", + "check": "vue-tsc --noEmit", "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { @@ -58,12 +58,14 @@ "global": "^4.4.0", "react": "16.14.0", "react-dom": "16.14.0", - "ts-dedent": "^2.0.0" + "ts-dedent": "^2.0.0", + "type-fest": "2.19.0" }, "devDependencies": { "@digitak/esrun": "^3.2.2", "typescript": "~4.6.3", - "vue": "^3.0.0" + "vue": "^3.2.41", + "vue-tsc": "^1.0.8" }, "peerDependencies": { "@babel/core": "*", diff --git a/code/renderers/vue3/src/__tests__/Button.vue b/code/renderers/vue3/src/__tests__/Button.vue new file mode 100644 index 000000000000..231309b3ad46 --- /dev/null +++ b/code/renderers/vue3/src/__tests__/Button.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/code/renderers/vue3/src/__tests__/Decorator.vue b/code/renderers/vue3/src/__tests__/Decorator.vue new file mode 100644 index 000000000000..2d4b323d08fb --- /dev/null +++ b/code/renderers/vue3/src/__tests__/Decorator.vue @@ -0,0 +1,9 @@ + + + + diff --git a/code/renderers/vue3/src/__tests__/Decorator2.vue b/code/renderers/vue3/src/__tests__/Decorator2.vue new file mode 100644 index 000000000000..bd3a8196e356 --- /dev/null +++ b/code/renderers/vue3/src/__tests__/Decorator2.vue @@ -0,0 +1,9 @@ + + + + diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts index 7cbbe47b7b90..edaa0652d8a5 100644 --- a/code/renderers/vue3/src/decorateStory.ts +++ b/code/renderers/vue3/src/decorateStory.ts @@ -46,7 +46,7 @@ export function decorateStory( ): LegacyStoryFn { return decorators.reduce( (decorated: LegacyStoryFn, decorator) => (context: StoryContext) => { - let story: VueFramework['storyResult']; + let story: VueFramework['storyResult'] | undefined; const decoratedStory: VueFramework['storyResult'] = decorator((update) => { story = decorated({ ...context, ...sanitizeStoryContextUpdate(update) }); diff --git a/code/renderers/vue3/src/public-types.test.ts b/code/renderers/vue3/src/public-types.test.ts new file mode 100644 index 000000000000..293c2db48e4a --- /dev/null +++ b/code/renderers/vue3/src/public-types.test.ts @@ -0,0 +1,192 @@ +import { satisfies } from '@storybook/core-common'; +import { ComponentAnnotations, StoryAnnotations } from '@storybook/csf'; +import { expectTypeOf } from 'expect-type'; +import { SetOptional } from 'type-fest'; +import { ComponentOptions, FunctionalComponent, h } from 'vue'; +import Button from './__tests__/Button.vue'; +import Decorator2TsVue from './__tests__/Decorator2.vue'; +import DecoratorTsVue from './__tests__/Decorator.vue'; +import { DecoratorFn, Meta, StoryObj } from './public-types'; +import { VueFramework } from './types'; + +describe('Meta', () => { + test('Generic parameter of Meta can be a component', () => { + const meta: Meta = { + component: Button, + args: { label: 'good', disabled: false }, + }; + + expectTypeOf(meta).toEqualTypeOf< + ComponentAnnotations< + VueFramework, + { + readonly disabled: boolean; + readonly label: string; + onMyChangeEvent?: (id: number) => any; + onMyClickEvent?: (id: number) => any; + } + > + >(); + }); + + test('Generic parameter of Meta can be the props of the component', () => { + const meta: Meta<{ disabled: boolean; label: string }> = { + component: Button, + args: { label: 'good', disabled: false }, + }; + + expectTypeOf(meta).toEqualTypeOf< + ComponentAnnotations + >(); + }); + + test('Events are inferred from component', () => { + const meta: Meta = { + component: Button, + args: { + label: 'good', + disabled: false, + onMyChangeEvent: (value) => { + expectTypeOf(value).toEqualTypeOf(); + }, + }, + render: (args) => { + return h(Button, { + ...args, + onMyChangeEvent: (value) => { + expectTypeOf(value).toEqualTypeOf(); + }, + }); + }, + }; + }); +}); + +describe('StoryObj', () => { + type ButtonProps = { + readonly disabled: boolean; + readonly label: string; + onMyChangeEvent?: ((id: number) => any) | undefined; + onMyClickEvent?: ((id: number) => any) | undefined; + }; + + test('✅ Required args may be provided partial in meta and the story', () => { + const meta = satisfies>()({ + component: Button, + args: { label: 'good' }, + }); + + type Actual = StoryObj; + type Expected = StoryAnnotations>; + expectTypeOf().toEqualTypeOf(); + }); + + test('❌ The combined shape of meta args and story args must match the required args.', () => { + { + const meta = satisfies>()({ component: Button }); + + type Expected = StoryAnnotations; + expectTypeOf>().toEqualTypeOf(); + } + { + const meta = satisfies>()({ + component: Button, + args: { label: 'good' }, + }); + // @ts-expect-error disabled not provided ❌ + const Basic: StoryObj = {}; + + type Expected = StoryAnnotations< + VueFramework, + ButtonProps, + SetOptional + >; + expectTypeOf(Basic).toEqualTypeOf(); + } + { + const meta = satisfies>()({ component: Button }); + const Basic: StoryObj = { + // @ts-expect-error disabled not provided ❌ + args: { label: 'good' }, + }; + + type Expected = StoryAnnotations; + expectTypeOf(Basic).toEqualTypeOf(); + } + }); + + test('Component can be used as generic parameter for StoryObj', () => { + expectTypeOf>().toEqualTypeOf< + StoryAnnotations + >(); + }); +}); + +type ThemeData = 'light' | 'dark'; + +type ComponentProps = Component extends ComponentOptions + ? P + : Component extends FunctionalComponent + ? P + : never; + +describe('Story args can be inferred', () => { + test('Correct args are inferred when type is widened for render function', () => { + type Props = ComponentProps & { theme: ThemeData }; + + const meta = satisfies>()({ + component: Button, + args: { disabled: false }, + render: (args) => { + return h('div', [h('div', `Use the theme ${args.theme}`), h(Button, args)]); + }, + }); + + const Basic: StoryObj = { args: { theme: 'light', label: 'good' } }; + + type Expected = StoryAnnotations>; + expectTypeOf(Basic).toEqualTypeOf(); + }); + + const withDecorator: DecoratorFn<{ decoratorArg: string }> = ( + storyFn, + { args: { decoratorArg } } + ) => h(DecoratorTsVue, { decoratorArg }, h(storyFn())); + + test('Correct args are inferred when type is widened for decorators', () => { + type Props = ComponentProps & { decoratorArg: string }; + + const meta = satisfies>()({ + component: Button, + args: { disabled: false }, + decorators: [withDecorator], + }); + + const Basic: StoryObj = { args: { decoratorArg: 'title', label: 'good' } }; + + type Expected = StoryAnnotations>; + expectTypeOf(Basic).toEqualTypeOf(); + }); + + test('Correct args are inferred when type is widened for multiple decorators', () => { + type Props = ComponentProps & { decoratorArg: string; decoratorArg2: string }; + + const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = ( + storyFn, + { args: { decoratorArg2 } } + ) => h(Decorator2TsVue, { decoratorArg2 }, h(storyFn())); + + const meta = satisfies>()({ + component: Button, + args: { disabled: false }, + decorators: [withDecorator, secondDecorator], + }); + + const Basic: StoryObj = { + args: { decoratorArg: '', decoratorArg2: '', label: 'good' }, + }; + + type Expected = StoryAnnotations>; + expectTypeOf(Basic).toEqualTypeOf(); + }); +}); diff --git a/code/renderers/vue3/src/public-types.ts b/code/renderers/vue3/src/public-types.ts index 7d1185e6ca6f..2d9aaf9e3834 100644 --- a/code/renderers/vue3/src/public-types.ts +++ b/code/renderers/vue3/src/public-types.ts @@ -3,7 +3,12 @@ import type { ComponentAnnotations, StoryAnnotations, AnnotatedStoryFn, + ArgsStoryFn, + ArgsFromMeta, + DecoratorFunction, } from '@storybook/csf'; +import { SetOptional, Simplify } from 'type-fest'; +import { ComponentOptions, ConcreteComponent, FunctionalComponent } from 'vue'; import { VueFramework } from './types'; export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; @@ -13,7 +18,9 @@ export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; * * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export) */ -export type Meta = ComponentAnnotations; +export type Meta = CmpOrArgs extends ComponentOptions + ? ComponentAnnotations + : ComponentAnnotations; /** * Story function that represents a CSFv2 component example. @@ -27,11 +34,35 @@ export type StoryFn = AnnotatedStoryFn; * * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ -export type StoryObj = StoryAnnotations; +export type StoryObj = MetaOrCmpOrArgs extends { + render?: ArgsStoryFn; + component?: infer Component; + args?: infer DefaultArgs; +} + ? Simplify< + ComponentProps & ArgsFromMeta + > extends infer TArgs + ? StoryAnnotations< + VueFramework, + TArgs, + SetOptional> + > + : never + : MetaOrCmpOrArgs extends ConcreteComponent + ? StoryAnnotations> + : StoryAnnotations; +type ComponentProps = Component extends ComponentOptions + ? P + : Component extends FunctionalComponent + ? P + : unknown; /** + * @deprecated Use `StoryObj` instead. * Story function that represents a CSFv3 component example. * * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) */ export type Story = StoryObj; + +export type DecoratorFn = DecoratorFunction; diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index f6e08da07c64..c5edf8d7a207 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -13,8 +13,7 @@ export const render: ArgsStoryFn = (props, context) => { ); } - // TODO remove this hack - return h(Component as Parameters[0], props); + return h(Component, props); }; let setupFunction = (app: any) => {}; @@ -40,7 +39,7 @@ export function renderToDOM( return h(element); }, }); - storybookApp.config.errorHandler = showException; + storybookApp.config.errorHandler = (e: unknown) => showException(e as Error); element = storyFn(); if (!element) { @@ -56,9 +55,7 @@ export function renderToDOM( showMain(); - if (map.has(domElement)) { - map.get(domElement).unmount(); - } + map.get(domElement)?.unmount(); storybookApp.mount(domElement); } diff --git a/code/renderers/vue3/src/types.ts b/code/renderers/vue3/src/types.ts index 1a7f5ee9500c..6042c0b002d3 100644 --- a/code/renderers/vue3/src/types.ts +++ b/code/renderers/vue3/src/types.ts @@ -1,4 +1,4 @@ -import type { StoryContext as StoryContextBase } from '@storybook/csf'; +import type { AnyFramework, StoryContext as StoryContextBase } from '@storybook/csf'; import type { ConcreteComponent } from 'vue'; export type { RenderContext } from '@storybook/core-client'; @@ -12,7 +12,9 @@ export type StoryFnVueReturnType = ConcreteComponent; export type StoryContext = StoryContextBase; -export type VueFramework = { - component: ConcreteComponent; +export interface VueFramework extends AnyFramework { + // We are omitting props, as we don't use it internally, and more importantly, it completely changes the assignability of meta.component. + // Try not omitting, and check the type errros in the test file, if you want to learn more. + component: Omit, 'props'>; storyResult: StoryFnVueReturnType; -}; +} diff --git a/code/renderers/vue3/tsconfig.json b/code/renderers/vue3/tsconfig.json index a9b035c99817..e64d6d3146b4 100644 --- a/code/renderers/vue3/tsconfig.json +++ b/code/renderers/vue3/tsconfig.json @@ -1,9 +1,10 @@ { "extends": "../../tsconfig.json", "compilerOptions": { + "strict": true, "resolveJsonModule": true, "skipLibCheck": true }, - "include": ["src/**/*"], - "exclude": ["src/**/*.test.*"] + "include": ["src/**/*", "src/**/*.vue"], + "exclude": [] } diff --git a/code/yarn.lock b/code/yarn.lock index 2e6ec827ea6e..98952cec8155 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -8400,6 +8400,7 @@ __metadata: eslint-plugin-storybook: ^0.6.4 esm: ^3.2.25 execa: ^5.0.0 + expect-type: ^0.14.2 express: ^4.17.1 fs-extra: ^9.0.1 github-release-from-changelog: ^2.1.1 @@ -8904,8 +8905,10 @@ __metadata: react: 16.14.0 react-dom: 16.14.0 ts-dedent: ^2.0.0 + type-fest: 2.19.0 typescript: ~4.6.3 - vue: ^3.0.0 + vue: ^3.2.41 + vue-tsc: ^1.0.8 peerDependencies: "@babel/core": "*" babel-loader: ^7.0.0 || ^8.0.0 @@ -10663,6 +10666,61 @@ __metadata: languageName: node linkType: hard +"@volar/language-core@npm:1.0.8": + version: 1.0.8 + resolution: "@volar/language-core@npm:1.0.8" + dependencies: + "@volar/source-map": 1.0.8 + "@vue/reactivity": ^3.2.40 + muggle-string: ^0.1.0 + checksum: e190b36e427075ac26f1b93064dc5982f6cd45c5fde2b32604db329c4ec4352f87a45b88a37fff3b2663d3f4ecb6ba63155d69f45374622492e6b99073c6f2a7 + languageName: node + linkType: hard + +"@volar/source-map@npm:1.0.8": + version: 1.0.8 + resolution: "@volar/source-map@npm:1.0.8" + dependencies: + muggle-string: ^0.1.0 + checksum: 65c8566c3de6a5e23a80c2df2f63b1c06d2eb1f5af2a6f20cd1c81029626f230c49e514acb7e8907c22e488b788c2da56ff8f44aa7c0b02be01bae5fa1c85ecb + languageName: node + linkType: hard + +"@volar/typescript@npm:1.0.8": + version: 1.0.8 + resolution: "@volar/typescript@npm:1.0.8" + dependencies: + "@volar/language-core": 1.0.8 + checksum: e955d741116a8cac06cff8dd50bac576f8d65df54734cb62dcc422c4de910e3efd189783423c5005d2b609cc5ae519fa816d6b4cf51b9947e3b6cb87522f9a56 + languageName: node + linkType: hard + +"@volar/vue-language-core@npm:1.0.8": + version: 1.0.8 + resolution: "@volar/vue-language-core@npm:1.0.8" + dependencies: + "@volar/language-core": 1.0.8 + "@volar/source-map": 1.0.8 + "@vue/compiler-dom": ^3.2.40 + "@vue/compiler-sfc": ^3.2.40 + "@vue/reactivity": ^3.2.40 + "@vue/shared": ^3.2.40 + minimatch: ^5.1.0 + vue-template-compiler: ^2.7.10 + checksum: 9d927267ea3de0f96513c4ff4b09e8dfacca676c3e628fac4fe4327ac497a14850a8a1dcab709ea443eb998269faecf18d38c25124d6c2e70fb5d54574959092 + languageName: node + linkType: hard + +"@volar/vue-typescript@npm:1.0.8": + version: 1.0.8 + resolution: "@volar/vue-typescript@npm:1.0.8" + dependencies: + "@volar/typescript": 1.0.8 + "@volar/vue-language-core": 1.0.8 + checksum: 7d51290ef6e3e9d3adfc9584296e7264921fda6e7ade4a3964f8679a3d4a4038e8ae05a8532d2640a09ff78a8f4158f6cf6a759a28b716fe58adb20a4ef7a548 + languageName: node + linkType: hard + "@vue/compiler-core@npm:3.0.0": version: 3.0.0 resolution: "@vue/compiler-core@npm:3.0.0" @@ -10688,6 +10746,18 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-core@npm:3.2.41": + version: 3.2.41 + resolution: "@vue/compiler-core@npm:3.2.41" + dependencies: + "@babel/parser": ^7.16.4 + "@vue/shared": 3.2.41 + estree-walker: ^2.0.2 + source-map: ^0.6.1 + checksum: 9f1023c2f0e8834a8056f5d0a4ac5d751b351d901e8cd03163aca10e317b08c599d326ef5de70a3d2ba1c7ee333e7a2289fc72ce4f6ac0496e750b044689f803 + languageName: node + linkType: hard + "@vue/compiler-dom@npm:3.0.0": version: 3.0.0 resolution: "@vue/compiler-dom@npm:3.0.0" @@ -10708,6 +10778,16 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-dom@npm:3.2.41, @vue/compiler-dom@npm:^3.2.40": + version: 3.2.41 + resolution: "@vue/compiler-dom@npm:3.2.41" + dependencies: + "@vue/compiler-core": 3.2.41 + "@vue/shared": 3.2.41 + checksum: 5dbbd925d4603668f5edcb134c8e8718e22738b7890e1cd6f2e8621aabf42a96df2f851f722f1176ca1744345fc74000c941b7cf4dc323dbbcd70da87ccdf378 + languageName: node + linkType: hard + "@vue/compiler-sfc@npm:2.7.10": version: 2.7.10 resolution: "@vue/compiler-sfc@npm:2.7.10" @@ -10763,6 +10843,24 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-sfc@npm:3.2.41, @vue/compiler-sfc@npm:^3.2.40": + version: 3.2.41 + resolution: "@vue/compiler-sfc@npm:3.2.41" + dependencies: + "@babel/parser": ^7.16.4 + "@vue/compiler-core": 3.2.41 + "@vue/compiler-dom": 3.2.41 + "@vue/compiler-ssr": 3.2.41 + "@vue/reactivity-transform": 3.2.41 + "@vue/shared": 3.2.41 + estree-walker: ^2.0.2 + magic-string: ^0.25.7 + postcss: ^8.1.10 + source-map: ^0.6.1 + checksum: 327fb7acff404ac007c8eabefe485efb4d070e347bffca2c170232f502021fac01fabeda5f4f91a7b0b175b48cef184e053da9a2ef46b7ab188b8383bef188cb + languageName: node + linkType: hard + "@vue/compiler-ssr@npm:3.0.0": version: 3.0.0 resolution: "@vue/compiler-ssr@npm:3.0.0" @@ -10783,6 +10881,16 @@ __metadata: languageName: node linkType: hard +"@vue/compiler-ssr@npm:3.2.41": + version: 3.2.41 + resolution: "@vue/compiler-ssr@npm:3.2.41" + dependencies: + "@vue/compiler-dom": 3.2.41 + "@vue/shared": 3.2.41 + checksum: 508361b2799097d86abd740548eabf7a20f9a6e1af29cda23dad07ed0b7d72569371492619f80ba2283c3e87c66016985a531cf2110742dabafe5566ca22e6eb + languageName: node + linkType: hard + "@vue/component-compiler-utils@npm:^3.1.0": version: 3.3.0 resolution: "@vue/component-compiler-utils@npm:3.3.0" @@ -10816,6 +10924,19 @@ __metadata: languageName: node linkType: hard +"@vue/reactivity-transform@npm:3.2.41": + version: 3.2.41 + resolution: "@vue/reactivity-transform@npm:3.2.41" + dependencies: + "@babel/parser": ^7.16.4 + "@vue/compiler-core": 3.2.41 + "@vue/shared": 3.2.41 + estree-walker: ^2.0.2 + magic-string: ^0.25.7 + checksum: 8f4350efa220ed3ba8f0c4721a54ae4a2c043a8cff2d8d7227525df59f09145bb76a842f30fd3b0684c083b3e776653b464d737c7c53e43ce0739ac3d958a24a + languageName: node + linkType: hard + "@vue/reactivity@npm:3.0.0": version: 3.0.0 resolution: "@vue/reactivity@npm:3.0.0" @@ -10834,6 +10955,15 @@ __metadata: languageName: node linkType: hard +"@vue/reactivity@npm:3.2.41, @vue/reactivity@npm:^3.2.40": + version: 3.2.41 + resolution: "@vue/reactivity@npm:3.2.41" + dependencies: + "@vue/shared": 3.2.41 + checksum: f76b7e3f12c441ff018ea1cb8c080365d135d87ddc075a10c87ea440a2c95e5d5ac04bb83dda0ce1f498fb390afff5d3d0c06d0a0fb46ca535df70c66dc3be90 + languageName: node + linkType: hard + "@vue/runtime-core@npm:3.0.0": version: 3.0.0 resolution: "@vue/runtime-core@npm:3.0.0" @@ -10854,6 +10984,16 @@ __metadata: languageName: node linkType: hard +"@vue/runtime-core@npm:3.2.41": + version: 3.2.41 + resolution: "@vue/runtime-core@npm:3.2.41" + dependencies: + "@vue/reactivity": 3.2.41 + "@vue/shared": 3.2.41 + checksum: 9c21632c5a3330283649a9175ae03cebe27776a7615d10b9e8f2a98e4002951a9913be7b2810623c06d6481cb56b62e2f5e6f9a5d29d79f75d66ec10b528cdc2 + languageName: node + linkType: hard + "@vue/runtime-dom@npm:3.0.0": version: 3.0.0 resolution: "@vue/runtime-dom@npm:3.0.0" @@ -10876,6 +11016,17 @@ __metadata: languageName: node linkType: hard +"@vue/runtime-dom@npm:3.2.41": + version: 3.2.41 + resolution: "@vue/runtime-dom@npm:3.2.41" + dependencies: + "@vue/runtime-core": 3.2.41 + "@vue/shared": 3.2.41 + csstype: ^2.6.8 + checksum: 744d50eb98b5a00b31ef6c318a04b9d9786f35d9f255689aba7c15e7be927c14f4d4379b704cde97f0ba467b3f36c46efcc7d0b119c9bde3419a966a21081f78 + languageName: node + linkType: hard + "@vue/server-renderer@npm:3.2.40": version: 3.2.40 resolution: "@vue/server-renderer@npm:3.2.40" @@ -10888,6 +11039,18 @@ __metadata: languageName: node linkType: hard +"@vue/server-renderer@npm:3.2.41": + version: 3.2.41 + resolution: "@vue/server-renderer@npm:3.2.41" + dependencies: + "@vue/compiler-ssr": 3.2.41 + "@vue/shared": 3.2.41 + peerDependencies: + vue: 3.2.41 + checksum: 3aa31b70e46e0171e2c07562aa09bc1e75ccc6c876c146c3d25b4674d9394de46ba9ff338105ae81d7ff679763c9ecfe48e6d7382d52de163319481132cfc55a + languageName: node + linkType: hard + "@vue/shared@npm:3.0.0": version: 3.0.0 resolution: "@vue/shared@npm:3.0.0" @@ -10902,6 +11065,13 @@ __metadata: languageName: node linkType: hard +"@vue/shared@npm:3.2.41, @vue/shared@npm:^3.2.40": + version: 3.2.41 + resolution: "@vue/shared@npm:3.2.41" + checksum: bc46bf36e856a10646639561b346a76594e8a1afa992e3394056a6e0b534c6c71b1330e13960ba9788bb36265a5e761ac4c562daad0d168265d496fc3e7d6575 + languageName: node + linkType: hard + "@webassemblyjs/ast@npm:1.11.1": version: 1.11.1 resolution: "@webassemblyjs/ast@npm:1.11.1" @@ -29226,7 +29396,7 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:^5.0.1": +"minimatch@npm:^5.0.1, minimatch@npm:^5.1.0": version: 5.1.0 resolution: "minimatch@npm:5.1.0" dependencies: @@ -29633,6 +29803,13 @@ __metadata: languageName: node linkType: hard +"muggle-string@npm:^0.1.0": + version: 0.1.0 + resolution: "muggle-string@npm:0.1.0" + checksum: b0f3ae892ada01af94c2d75bb70e4489f060e395cf561d35ce380c6e206a1104d31861a4e98a7cee76977708b1ab3efe0df869c6bdd98bbada93aff5d120ef76 + languageName: node + linkType: hard + "multicast-dns-service-types@npm:^1.1.0": version: 1.1.0 resolution: "multicast-dns-service-types@npm:1.1.0" @@ -40475,6 +40652,16 @@ __metadata: languageName: node linkType: hard +"vue-template-compiler@npm:^2.7.10": + version: 2.7.13 + resolution: "vue-template-compiler@npm:2.7.13" + dependencies: + de-indent: ^1.0.2 + he: ^1.2.0 + checksum: 6f1b54e74cc5b2a97ccda5335123fc2e9d1b63b934efe67552fbe7a4041ac55fc24b802e5715e7509696c6bcf5d1c6e0c69e4cd0ba85b3e32384df66b452ae82 + languageName: node + linkType: hard + "vue-template-es2015-compiler@npm:^1.9.0": version: 1.9.1 resolution: "vue-template-es2015-compiler@npm:1.9.1" @@ -40482,6 +40669,20 @@ __metadata: languageName: node linkType: hard +"vue-tsc@npm:^1.0.8": + version: 1.0.8 + resolution: "vue-tsc@npm:1.0.8" + dependencies: + "@volar/vue-language-core": 1.0.8 + "@volar/vue-typescript": 1.0.8 + peerDependencies: + typescript: "*" + bin: + vue-tsc: bin/vue-tsc.js + checksum: e9ea48ef84249f842e910c8d1dab7e6b681af77714f2c4b5c7cc0810e22bb40d02bcd0701c3e30d8e52d5bd71d2a547204efa53f5caa793c96647a3b6bcf7f90 + languageName: node + linkType: hard + "vue@npm:3.0.0": version: 3.0.0 resolution: "vue@npm:3.0.0" @@ -40503,7 +40704,7 @@ __metadata: languageName: node linkType: hard -"vue@npm:^3.0.0, vue@npm:^3.2.33": +"vue@npm:^3.2.33": version: 3.2.40 resolution: "vue@npm:3.2.40" dependencies: @@ -40516,6 +40717,19 @@ __metadata: languageName: node linkType: hard +"vue@npm:^3.2.41": + version: 3.2.41 + resolution: "vue@npm:3.2.41" + dependencies: + "@vue/compiler-dom": 3.2.41 + "@vue/compiler-sfc": 3.2.41 + "@vue/runtime-dom": 3.2.41 + "@vue/server-renderer": 3.2.41 + "@vue/shared": 3.2.41 + checksum: fac4f47b5ecec8b7b7366eccb6b35866712e11887a12df0f04f989134578de27b69364c1ea1377384b38d048a0c4f604fd096500647f30c0b45cc68cff421d8d + languageName: node + linkType: hard + "w3c-hr-time@npm:^1.0.1, w3c-hr-time@npm:^1.0.2": version: 1.0.2 resolution: "w3c-hr-time@npm:1.0.2" From 3cae4183476fba727856b4cc5719c1350f3304e6 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Mon, 24 Oct 2022 16:51:54 +0200 Subject: [PATCH 2/4] fix jest tests --- code/jest.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/code/jest.config.js b/code/jest.config.js index 0e444db10997..3c8ad1dffc43 100644 --- a/code/jest.config.js +++ b/code/jest.config.js @@ -49,6 +49,7 @@ module.exports = { '/examples/*/src/*/*/*.*', // TODO: Can not get svelte-jester to work, but also not necessary for this test, as it is run by tsc/svelte-check. '/renderers/svelte/src/public-types.test.ts', + '/renderers/vue3/src/public-types.test.ts', ], collectCoverage: false, collectCoverageFrom: [ From dbbf7e4db960fde73d7ec202202b405bbe68855b Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 25 Oct 2022 10:43:35 +0200 Subject: [PATCH 3/4] update yarn.lock --- code/yarn.lock | 50 -------------------------------------------------- 1 file changed, 50 deletions(-) diff --git a/code/yarn.lock b/code/yarn.lock index 5444f4e5e608..d0d28fc48016 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -26033,56 +26033,6 @@ __metadata: languageName: node linkType: hard -"msgpackr-extract@npm:^2.1.2": - version: 2.1.2 - resolution: "msgpackr-extract@npm:2.1.2" - dependencies: - "@msgpackr-extract/msgpackr-extract-darwin-arm64": 2.1.2 - "@msgpackr-extract/msgpackr-extract-darwin-x64": 2.1.2 - "@msgpackr-extract/msgpackr-extract-linux-arm": 2.1.2 - "@msgpackr-extract/msgpackr-extract-linux-arm64": 2.1.2 - "@msgpackr-extract/msgpackr-extract-linux-x64": 2.1.2 - "@msgpackr-extract/msgpackr-extract-win32-x64": 2.1.2 - node-gyp: latest - node-gyp-build-optional-packages: 5.0.3 - dependenciesMeta: - "@msgpackr-extract/msgpackr-extract-darwin-arm64": - optional: true - "@msgpackr-extract/msgpackr-extract-darwin-x64": - optional: true - "@msgpackr-extract/msgpackr-extract-linux-arm": - optional: true - "@msgpackr-extract/msgpackr-extract-linux-arm64": - optional: true - "@msgpackr-extract/msgpackr-extract-linux-x64": - optional: true - "@msgpackr-extract/msgpackr-extract-win32-x64": - optional: true - bin: - download-msgpackr-prebuilds: bin/download-prebuilds.js - checksum: 1fc1e951d66030cb064fac25cd356a5322eb19d82ad892d180fcc05d07a05e04f470f7ff8dbf27c33c7298aa6b30408683c9e99bb32fa65e1d840c2dc4830a78 - languageName: node - linkType: hard - -"msgpackr@npm:^1.5.4": - version: 1.7.2 - resolution: "msgpackr@npm:1.7.2" - dependencies: - msgpackr-extract: ^2.1.2 - dependenciesMeta: - msgpackr-extract: - optional: true - checksum: c3b6fe0eebd8ebf997e610cf4291b6c7ccece1dba7aa87fc3584f0cef8e35b02ddcc6d31aabaeaa702afbe5e2c3b2dad666c3d769a4acc1ded27cca5c908dae6 - languageName: node - linkType: hard - -"muggle-string@npm:^0.1.0": - version: 0.1.0 - resolution: "muggle-string@npm:0.1.0" - checksum: b0f3ae892ada01af94c2d75bb70e4489f060e395cf561d35ce380c6e206a1104d31861a4e98a7cee76977708b1ab3efe0df869c6bdd98bbada93aff5d120ef76 - languageName: node - linkType: hard - "multicast-dns-service-types@npm:^1.1.0": version: 1.1.0 resolution: "multicast-dns-service-types@npm:1.1.0" From c9aa816b23df14cb13dce71830e03b2b91532149 Mon Sep 17 00:00:00 2001 From: Kasper Peulen Date: Tue, 25 Oct 2022 14:10:56 +0200 Subject: [PATCH 4/4] use prettier on vue files --- code/renderers/vue3/src/__tests__/Button.vue | 15 ++++++--------- code/renderers/vue3/src/__tests__/Decorator.vue | 5 ++--- code/renderers/vue3/src/__tests__/Decorator2.vue | 5 ++--- 3 files changed, 10 insertions(+), 15 deletions(-) diff --git a/code/renderers/vue3/src/__tests__/Button.vue b/code/renderers/vue3/src/__tests__/Button.vue index 231309b3ad46..322ac2c73921 100644 --- a/code/renderers/vue3/src/__tests__/Button.vue +++ b/code/renderers/vue3/src/__tests__/Button.vue @@ -2,18 +2,15 @@ defineProps<{ disabled: boolean; label: string }>(); const emit = defineEmits<{ - (e: 'myChangeEvent', id: number): void; - (e: 'myClickEvent', id: number): void; + (e: 'myChangeEvent', id: number): void; + (e: 'myClickEvent', id: number): void; }>(); - - + diff --git a/code/renderers/vue3/src/__tests__/Decorator.vue b/code/renderers/vue3/src/__tests__/Decorator.vue index 2d4b323d08fb..953c1db7dbe1 100644 --- a/code/renderers/vue3/src/__tests__/Decorator.vue +++ b/code/renderers/vue3/src/__tests__/Decorator.vue @@ -3,7 +3,6 @@ defineProps<{ decoratorArg: string }>(); - diff --git a/code/renderers/vue3/src/__tests__/Decorator2.vue b/code/renderers/vue3/src/__tests__/Decorator2.vue index bd3a8196e356..19a016aa50ac 100644 --- a/code/renderers/vue3/src/__tests__/Decorator2.vue +++ b/code/renderers/vue3/src/__tests__/Decorator2.vue @@ -3,7 +3,6 @@ defineProps<{ decoratorArg2: string }>(); -