Merge pull request #19512 from storybookjs/future/CSF3-svelte

Svelte: Improve CSF3 types

code/jest.config.js

@@ -47,6 +47,8 @@ module.exports = {
     '/examples/*/src/*.*',
     '/examples/*/src/*/*.*',
     '/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',
   ],
   collectCoverage: false,
   collectCoverageFrom: [

code/lib/core-common/src/index.ts

@@ -29,6 +29,7 @@ export * from './utils/symlinks';
 export * from './utils/template';
 export * from './utils/validate-config';
 export * from './utils/validate-configuration-files';
+export * from './utils/satisfies';
 
 export * from './types';
 

code/package.json

@@ -337,7 +337,7 @@
     "ts-jest": "^26.4.4",
     "ts-node": "^10.4.0",
     "tsup": "^6.2.2",
-    "typescript": "4.7.4",
+    "typescript": "~4.6.3",
     "util": "^0.12.4",
     "vite": "^3.1.7",
     "wait-on": "^5.2.1",

code/renderers/react/src/public-types.test.tsx

@@ -1,13 +1,13 @@
-import React, { KeyboardEventHandler, ReactNode } from 'react';
-import { expectTypeOf } from 'expect-type';
 import { describe, test } from '@jest/globals';
+import { satisfies } from '@storybook/core-common';
 import { StoryAnnotations } from '@storybook/csf';
+import { expectTypeOf } from 'expect-type';
+import React, { KeyboardEventHandler, ReactNode } from 'react';
 import { SetOptional } from 'type-fest';
 
-import { Meta, StoryObj } from '../public-types';
-import { DecoratorFn } from '../public-api';
-import { satisfies } from './utils';
-import { ReactFramework } from '../types';
+import { DecoratorFn } from './public-api';
+import { Meta, StoryObj } from './public-types';
+import { ReactFramework } from './types';
 
 type ReactStory<Args, RequiredArgs> = StoryAnnotations<ReactFramework, Args, RequiredArgs>;
 
@@ -75,6 +75,11 @@ describe('Args can be provided in multiple ways', () => {
       expectTypeOf(Basic).toEqualTypeOf<Expected>();
     }
   });
+
+  test('Component can be used as generic parameter for StoryObj', () => {
+    type Expected = ReactStory<ButtonProps, ButtonProps>;
+    expectTypeOf<StoryObj<typeof Button>>().toEqualTypeOf<Expected>();
+  });
 });
 
 test('✅ All void functions are optional', () => {

code/renderers/react/src/public-types.ts

@@ -1,16 +1,15 @@
 import type {
   AnnotatedStoryFn,
   Args,
+  ArgsFromMeta,
   ArgsStoryFn,
   ComponentAnnotations,
-  LoaderFunction,
   StoryAnnotations,
 } from '@storybook/csf';
-import { SetOptional, Simplify, UnionToIntersection } from 'type-fest';
 import { ComponentProps, ComponentType, JSXElementConstructor } from 'react';
+import { SetOptional, Simplify } from 'type-fest';
 
 import { ReactFramework } from './types';
-import { DecoratorFn } from './public-api';
 
 type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
 
@@ -36,29 +35,28 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ReactFramework, TArgs>;
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
 
-export type StoryObj<MetaOrArgs = Args> = MetaOrArgs extends {
-  render?: ArgsStoryFn<ReactFramework, infer RArgs>;
-  component?: ComponentType<infer CmpArgs>;
-  loaders?: (infer Loaders)[];
+export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+  render?: ArgsStoryFn<ReactFramework, any>;
+  component?: infer Component;
   args?: infer DefaultArgs;
-  decorators?: (infer Decorators)[];
 }
-  ? Simplify<CmpArgs & RArgs & DecoratorsArgs<Decorators> & LoaderArgs<Loaders>> extends infer TArgs
+  ? Simplify<
+      (Component extends ComponentType<any> ? ComponentProps<Component> : unknown) &
+        ArgsFromMeta<ReactFramework, MetaOrCmpOrArgs>
+    > extends infer TArgs
     ? StoryAnnotations<
         ReactFramework,
         TArgs,
         SetOptional<TArgs, Extract<keyof TArgs, keyof (DefaultArgs & ActionArgs<TArgs>)>>
       >
     : never
-  : StoryAnnotations<ReactFramework, MetaOrArgs>;
-
-type DecoratorsArgs<Decorators> = UnionToIntersection<
-  Decorators extends DecoratorFn<infer Args> ? Args : unknown
->;
-
-type LoaderArgs<Loaders> = UnionToIntersection<
-  Loaders extends LoaderFunction<ReactFramework, infer Args> ? Args : unknown
->;
+  : MetaOrCmpOrArgs extends ComponentType<any>
+  ? StoryAnnotations<
+      ReactFramework,
+      ComponentProps<MetaOrCmpOrArgs>,
+      ComponentProps<MetaOrCmpOrArgs>
+    >
+  : StoryAnnotations<ReactFramework, MetaOrCmpOrArgs>;
 
 type ActionArgs<Args> = {
   [P in keyof Args as ((...args: any[]) => void) extends Args[P] ? P : never]: Args[P];

code/renderers/svelte/package.json

@@ -50,7 +50,7 @@
     "*.d.ts"
   ],
   "scripts": {
-    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
+    "check": "svelte-check --tsconfig ./tsconfig.json",
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
@@ -63,10 +63,13 @@
     "global": "^4.4.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
-    "sveltedoc-parser": "^4.2.1"
+    "sveltedoc-parser": "^4.2.1",
+    "type-fest": "2.19.0"
   },
   "devDependencies": {
+    "expect-type": "^0.14.2",
     "svelte": "^3.31.2",
+    "svelte-check": "^2.9.2",
     "typescript": "~4.6.3"
   },
   "peerDependencies": {

code/renderers/svelte/src/__test__/Button.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let disabled: boolean;
+  export let label: string;
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<button on:click={(e) => dispatch('clicked', e)} on:dblclick on:mousemove {disabled}>
+  {label}
+</button>

code/renderers/svelte/src/__test__/Decorator.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let decoratorArg: string;
+</script>
+
+<div>
+  Decorator: {decoratorArg}
+  <slot />
+</div>

code/renderers/svelte/src/__test__/Decorator2.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  export let decoratorArg2: string;
+</script>
+
+<div>
+  Decorator: {decoratorArg2}
+  <slot />
+</div>

code/renderers/svelte/src/docs/extractArgTypes.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect } from '@jest/globals';
 import svelteDoc from 'sveltedoc-parser';
 import * as fs from 'fs';
 import { createArgTypes } from './extractArgTypes';

code/renderers/svelte/src/docs/extractArgTypes.ts

@@ -89,7 +89,7 @@ export const createArgTypes = (docgen: SvelteComponentDoc) => {
 
 /**
  * Function to convert the type from sveltedoc-parser to a storybook type
- * @param typeName
+ * @param type
  * @returns string
  */
 const parseTypeToControl = (type: JSDocType | undefined): any => {

code/renderers/svelte/src/docs/extractComponentDescription.test.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from '@jest/globals';
 import { extractComponentDescription } from './extractComponentDescription';
 
 describe('extractComponentDescription', () => {

code/renderers/svelte/src/docs/sourceDecorator.test.ts

@@ -1,12 +1,13 @@
+import { describe, expect, test } from '@jest/globals';
 import type { Args } from '@storybook/api';
 import { generateSvelteSource } from './sourceDecorator';
 
 expect.addSnapshotSerializer({
   print: (val: any) => val,
-  test: (val) => typeof val === 'string',
+  test: (val: unknown) => typeof val === 'string',
 });
 
-function generateForArgs(args: Args, slotProperty: string = null) {
+function generateForArgs(args: Args, slotProperty: string | null = null) {
   return generateSvelteSource({ name: 'Component' }, args, {}, slotProperty);
 }
 
@@ -42,6 +43,6 @@ describe('generateSvelteSource', () => {
     `);
   });
   test('component is not set', () => {
-    expect(generateSvelteSource(null, null, null, null)).toBeNull();
+    expect(generateSvelteSource(null, {}, {}, null)).toBeNull();
   });
 });

code/renderers/svelte/src/docs/sourceDecorator.ts

@@ -89,7 +89,7 @@ export function generateSvelteSource(
   component: any,
   args: Args,
   argTypes: ArgTypes,
-  slotProperty?: string
+  slotProperty?: string | null
 ): string | null {
   const name = getComponentName(component);
 

code/renderers/svelte/src/globals.ts

@@ -1,4 +1,3 @@
-// @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
 
 const { window: globalWindow } = global;

code/renderers/svelte/src/public-types.test.ts

@@ -0,0 +1,230 @@
+import { describe, test } from '@jest/globals';
+import { satisfies } from '@storybook/core-common';
+import { ComponentAnnotations, StoryAnnotations } from '@storybook/csf';
+import { expectTypeOf } from 'expect-type';
+import { ComponentProps, SvelteComponentTyped } from 'svelte';
+import Button from './__test__/Button.svelte';
+import Decorator from './__test__/Decorator.svelte';
+import Decorator2 from './__test__/Decorator2.svelte';
+
+import { DecoratorFn, Meta, StoryObj } from './public-types';
+import { SvelteFramework } from './types';
+
+type SvelteStory<Component extends SvelteComponentTyped, Args, RequiredArgs> = StoryAnnotations<
+  SvelteFramework<Component>,
+  Args,
+  RequiredArgs
+>;
+
+describe('Meta', () => {
+  test('Generic parameter of Meta can be a component', () => {
+    const meta: Meta<Button> = {
+      component: Button,
+      args: {
+        label: 'good',
+        disabled: false,
+      },
+    };
+
+    expectTypeOf(meta).toEqualTypeOf<
+      ComponentAnnotations<SvelteFramework<Button>, { disabled: boolean; label: string }>
+    >();
+  });
+
+  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<SvelteFramework, { disabled: boolean; label: string }>
+    >();
+  });
+
+  test('Events are inferred from component', () => {
+    const meta: Meta<Button> = {
+      component: Button,
+      args: {
+        label: 'good',
+        disabled: false,
+      },
+      render: (args) => ({
+        Component: Button,
+        props: args,
+        on: {
+          mousemove: (event) => {
+            expectTypeOf(event).toEqualTypeOf<MouseEvent>();
+          },
+        },
+      }),
+    };
+  });
+
+  test('Events fallback to custom events when no component is specified', () => {
+    const meta: Meta<{ disabled: boolean; label: string }> = {
+      component: Button,
+      args: { label: 'good', disabled: false },
+      render: (args) => ({
+        Component: Button,
+        props: args,
+        on: {
+          mousemove: (event) => {
+            expectTypeOf(event).toEqualTypeOf<CustomEvent>();
+          },
+        },
+      }),
+    };
+  });
+});
+
+describe('StoryObj', () => {
+  test('✅ Required args may be provided partial in meta and the story', () => {
+    const meta = satisfies<Meta<Button>>()({
+      component: Button,
+      args: { label: 'good' },
+    });
+
+    type Actual = StoryObj<typeof meta>;
+    type Expected = SvelteStory<
+      Button,
+      { disabled: boolean; label: string },
+      { disabled: boolean; label?: string }
+    >;
+    expectTypeOf<Actual>().toEqualTypeOf<Expected>();
+  });
+
+  test('❌ The combined shape of meta args and story args must match the required args.', () => {
+    {
+      const meta = satisfies<Meta<Button>>()({ component: Button });
+
+      type Expected = SvelteStory<
+        Button,
+        { disabled: boolean; label: string },
+        { disabled: boolean; label: string }
+      >;
+      expectTypeOf<StoryObj<typeof meta>>().toEqualTypeOf<Expected>();
+    }
+    {
+      const meta = satisfies<Meta<Button>>()({
+        component: Button,
+        args: { label: 'good' },
+      });
+      // @ts-expect-error disabled not provided ❌
+      const Basic: StoryObj<typeof meta> = {};
+
+      type Expected = SvelteStory<
+        Button,
+        { disabled: boolean; label: string },
+        { disabled: boolean; label?: string }
+      >;
+      expectTypeOf(Basic).toEqualTypeOf<Expected>();
+    }
+    {
+      const meta = satisfies<Meta<{ label: string; disabled: boolean }>>()({ component: Button });
+      const Basic: StoryObj<typeof meta> = {
+        // @ts-expect-error disabled not provided ❌
+        args: { label: 'good' },
+      };
+
+      type Expected = SvelteStory<
+        Button,
+        { disabled: boolean; label: string },
+        { disabled: boolean; label: string }
+      >;
+      expectTypeOf(Basic).toEqualTypeOf<Expected>();
+    }
+  });
+
+  test('Component can be used as generic parameter for StoryObj', () => {
+    expectTypeOf<StoryObj<Button>>().toEqualTypeOf<
+      SvelteStory<
+        Button,
+        { disabled: boolean; label: string },
+        { disabled: boolean; label: string }
+      >
+    >();
+  });
+});
+
+type ThemeData = 'light' | 'dark';
+
+describe('Story args can be inferred', () => {
+  test('Correct args are inferred when type is widened for render function', () => {
+    const meta = satisfies<Meta<ComponentProps<Button> & { theme: ThemeData }>>()({
+      component: Button,
+      args: { disabled: false },
+      render: (args, { component }) => {
+        return {
+          Component: component,
+          props: args,
+        };
+      },
+    });
+
+    const Basic: StoryObj<typeof meta> = { args: { theme: 'light', label: 'good' } };
+
+    type Expected = SvelteStory<
+      Button,
+      { theme: ThemeData; disabled: boolean; label: string },
+      { theme: ThemeData; disabled?: boolean; label: string }
+    >;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+
+  const withDecorator: DecoratorFn<{ decoratorArg: string }> = (
+    storyFn,
+    { args: { decoratorArg } }
+  ) => ({
+    Component: Decorator,
+    props: { decoratorArg },
+  });
+
+  test('Correct args are inferred when type is widened for decorators', () => {
+    type Props = ComponentProps<Button> & { decoratorArg: string };
+
+    const meta = satisfies<Meta<Props>>()({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator],
+    });
+
+    const Basic: StoryObj<typeof meta> = { args: { decoratorArg: 'title', label: 'good' } };
+
+    type Expected = SvelteStory<
+      Button,
+      Props,
+      { decoratorArg: string; disabled?: boolean; label: string }
+    >;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+
+  test('Correct args are inferred when type is widened for multiple decorators', () => {
+    type Props = ComponentProps<Button> & { decoratorArg: string; decoratorArg2: string };
+
+    const secondDecorator: DecoratorFn<{ decoratorArg2: string }> = (
+      storyFn,
+      { args: { decoratorArg2 } }
+    ) => ({
+      Component: Decorator2,
+      props: { decoratorArg2 },
+    });
+
+    const meta = satisfies<Meta<Props>>()({
+      component: Button,
+      args: { disabled: false },
+      decorators: [withDecorator, secondDecorator],
+    });
+
+    const Basic: StoryObj<typeof meta> = {
+      args: { decoratorArg: '', decoratorArg2: '', label: 'good' },
+    };
+
+    type Expected = SvelteStory<
+      Button,
+      Props,
+      { decoratorArg: string; decoratorArg2: string; disabled?: boolean; label: string }
+    >;
+    expectTypeOf(Basic).toEqualTypeOf<Expected>();
+  });
+});

code/renderers/svelte/src/public-types.ts

@@ -1,9 +1,14 @@
 import type {
-  Args,
-  ComponentAnnotations,
-  StoryAnnotations,
   AnnotatedStoryFn,
+  Args,
+  ArgsFromMeta,
+  ArgsStoryFn,
+  ComponentAnnotations,
+  DecoratorFunction,
+  StoryAnnotations,
 } from '@storybook/csf';
+import { ComponentProps, ComponentType, SvelteComponentTyped } from 'svelte';
+import { SetOptional, Simplify } from 'type-fest';
 import { SvelteFramework } from './types';
 
 export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf';
@@ -13,8 +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<TArgs = Args> = ComponentAnnotations<SvelteFramework, TArgs>;
-
+export type Meta<CmpOrArgs = Args> = CmpOrArgs extends SvelteComponentTyped<infer Props>
+  ? ComponentAnnotations<SvelteFramework<CmpOrArgs>, Props>
+  : ComponentAnnotations<SvelteFramework, CmpOrArgs>;
 /**
  * Story function that represents a CSFv2 component example.
  *
@@ -27,11 +33,26 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<SvelteFramework, TArgs>;
  *
  * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
  */
-export type StoryObj<TArgs = Args> = StoryAnnotations<SvelteFramework, TArgs>;
+export type StoryObj<MetaOrCmpOrArgs = Args> = MetaOrCmpOrArgs extends {
+  render?: ArgsStoryFn<SvelteFramework, any>;
+  component?: ComponentType<infer Component>;
+  args?: infer DefaultArgs;
+}
+  ? Simplify<
+      ComponentProps<Component> & ArgsFromMeta<SvelteFramework, MetaOrCmpOrArgs>
+    > extends infer TArgs
+    ? StoryAnnotations<
+        SvelteFramework<Component>,
+        TArgs,
+        SetOptional<TArgs, Extract<keyof TArgs, keyof DefaultArgs>>
+      >
+    : never
+  : MetaOrCmpOrArgs extends SvelteComponentTyped
+  ? StoryAnnotations<
+      SvelteFramework<MetaOrCmpOrArgs>,
+      ComponentProps<MetaOrCmpOrArgs>,
+      ComponentProps<MetaOrCmpOrArgs>
+    >
+  : StoryAnnotations<SvelteFramework, MetaOrCmpOrArgs>;
 
-/**
- * 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<TArgs = Args> = StoryObj<TArgs>;
+export type DecoratorFn<TArgs = Args> = DecoratorFunction<SvelteFramework, TArgs>;

code/renderers/svelte/src/render.ts

@@ -1,15 +1,14 @@
-// @ts-expect-error (Converted from ts-ignore)
 import global from 'global';
-
 import type { ArgsStoryFn } from '@storybook/csf';
 import type { RenderContext } from '@storybook/store';
-// eslint-disable-next-line import/no-extraneous-dependencies
-import PreviewRender from '@storybook/svelte/templates/PreviewRender.svelte';
+import { SvelteComponentTyped } from 'svelte';
+import PreviewRender from '../templates/PreviewRender.svelte';
+
 import { SvelteFramework } from './types';
 
 const { document } = global;
 
-let previousComponent: SvelteFramework['component'] = null;
+let previousComponent: SvelteComponentTyped | null = null;
 
 function cleanUpPreviousStory() {
   if (!previousComponent) {

code/renderers/svelte/src/types.ts

@@ -1,4 +1,6 @@
-import type { StoryContext as StoryContextBase } from '@storybook/csf';
+import type { AnyFramework, StoryContext as StoryContextBase } from '@storybook/csf';
+import { ComponentConstructorOptions, ComponentEvents } from 'svelte';
+import type { SvelteComponentTyped } from 'svelte';
 
 export type { RenderContext } from '@storybook/core-client';
 
@@ -23,12 +25,30 @@ interface MountProps {
   text: string;
 }
 
-interface WrapperData {
-  innerStyle: string;
-  style: string;
+type ComponentType<
+  Props extends Record<string, any> = any,
+  Events extends Record<string, any> = any
+> = new (options: ComponentConstructorOptions<Props>) => {
+  [P in keyof SvelteComponentTyped<Props> as P extends `$$${string}`
+    ? never
+    : P]: SvelteComponentTyped<Props, Events>[P];
+};
+
+export interface SvelteFramework<C extends SvelteComponentTyped = SvelteComponentTyped>
+  extends AnyFramework {
+  component: ComponentType<this['T'] extends Record<string, any> ? this['T'] : any>;
+  storyResult: this['T'] extends Record<string, any>
+    ? SvelteStoryResult<this['T'], ComponentEvents<C>>
+    : SvelteStoryResult;
 }
 
-export type SvelteFramework = {
-  component: any;
-  storyResult: any;
-};
+export interface SvelteStoryResult<
+  Props extends Record<string, any> = any,
+  Events extends Record<string, any> = any
+> {
+  Component?: ComponentType<Props>;
+  on?: Record<string, any> extends Events
+    ? Record<string, (event: CustomEvent) => void>
+    : { [K in keyof Events as string extends K ? never : K]?: (event: Events[K]) => void };
+  props?: Props;
+}

code/renderers/svelte/src/typings.d.ts

@@ -1,3 +1 @@
-declare module '@storybook/svelte/templates/SlotDecorator.svelte';
-declare module '@storybook/svelte/templates/PreviewRender.svelte';
-declare module '@storybook/svelte/templates/HOC.svelte';
+declare module 'global';

code/renderers/svelte/templates/PreviewRender.svelte

@@ -17,12 +17,12 @@
     on,
     Wrapper,
     WrapperData = {},
-  } = storyFn(); 
+  } = storyFn();
 
    const eventsFromArgTypes = Object.fromEntries(Object.entries(storyContext.argTypes)
       .filter(([k, v]) => v.action && props[k] != null)
       .map(([k, v]) => [v.action, props[k]]));
-    
+
   const events = {...eventsFromArgTypes, ...on};
 
   if (!Component) {

code/renderers/svelte/tsconfig.json

@@ -1,9 +1,11 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
+    "module": "ESNext",
+    "skipLibCheck": true,
     "strict": true,
     "resolveJsonModule": true
   },
   "include": ["src/**/*"],
-  "exclude": ["src/**/*.test.*"]
+  "exclude": []
 }

code/yarn.lock

@@ -8453,7 +8453,7 @@ __metadata:
     ts-loader: ^9.2.8
     ts-node: ^10.4.0
     tsup: ^6.2.2
-    typescript: 4.7.4
+    typescript: ~4.6.3
     util: ^0.12.4
     verdaccio: ^4.10.0
     verdaccio-auth-memory: ^9.7.2
@@ -8670,11 +8670,14 @@ __metadata:
     "@storybook/csf": next
     "@storybook/docs-tools": 7.0.0-alpha.41
     "@storybook/store": 7.0.0-alpha.41
+    expect-type: ^0.14.2
     global: ^4.4.0
     react: 16.14.0
     react-dom: 16.14.0
     svelte: ^3.31.2
+    svelte-check: ^2.9.2
     sveltedoc-parser: ^4.2.1
+    type-fest: 2.19.0
     typescript: ~4.6.3
   peerDependencies:
     "@babel/core": "*"
@@ -9942,6 +9945,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/pug@npm:^2.0.4":
+  version: 2.0.6
+  resolution: "@types/pug@npm:2.0.6"
+  checksum: 8e7a3b6c1158d3a87b643c91f6cf2552ae781bc2a8f8b17a61e7b1ddd9ce480fd3483459a9b6e0f205ebe158ed67c11fd9a3206262057a14f655138c2322b0c9
+  languageName: node
+  linkType: hard
+
 "@types/puppeteer-core@npm:^2.1.0":
   version: 2.1.0
   resolution: "@types/puppeteer-core@npm:2.1.0"
@@ -10060,6 +10070,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/sass@npm:^1.16.0":
+  version: 1.43.1
+  resolution: "@types/sass@npm:1.43.1"
+  dependencies:
+    "@types/node": "*"
+  checksum: cb55602b2f7a356d784e8ad1f432246daf4cb1fe75ef27ede997d41bdee0b08814435966471909762043d5169e009fab4a3b14db98e782103081b2da64497304
+  languageName: node
+  linkType: hard
+
 "@types/scheduler@npm:*":
   version: 0.16.2
   resolution: "@types/scheduler@npm:0.16.2"
@@ -13821,7 +13840,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"buffer-crc32@npm:~0.2.3":
+"buffer-crc32@npm:^0.2.5, buffer-crc32@npm:~0.2.3":
   version: 0.2.13
   resolution: "buffer-crc32@npm:0.2.13"
   checksum: cb0a8ddf5cf4f766466db63279e47761eb825693eeba6a5a95ee4ec8cb8f81ede70aa7f9d8aeec083e781d47154290eb5d4d26b3f7a465ec57fb9e7d59c47150
@@ -14512,7 +14531,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.4.0, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3":
+"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.0.0, chokidar@npm:^3.4.0, chokidar@npm:^3.4.1, chokidar@npm:^3.5.1, chokidar@npm:^3.5.2, chokidar@npm:^3.5.3":
   version: 3.5.3
   resolution: "chokidar@npm:3.5.3"
   dependencies:
@@ -18266,6 +18285,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es6-promise@npm:^3.1.2":
+  version: 3.3.1
+  resolution: "es6-promise@npm:3.3.1"
+  checksum: b4fc87cb8509c001f62f860f97b05d1fd3f87220c8b832578e6a483c719ca272b73a77f2231cb26395fa865e1cab2fd4298ab67786b69e97b8d757b938f4fc1f
+  languageName: node
+  linkType: hard
+
 "es6-promise@npm:^4.0.3":
   version: 4.2.8
   resolution: "es6-promise@npm:4.2.8"
@@ -35327,7 +35353,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rimraf@npm:^2.2.8, rimraf@npm:^2.3.4, rimraf@npm:^2.4.1, rimraf@npm:^2.4.3, rimraf@npm:^2.5.3, rimraf@npm:^2.5.4, rimraf@npm:^2.6.1, rimraf@npm:^2.6.2, rimraf@npm:^2.6.3":
+"rimraf@npm:^2.2.8, rimraf@npm:^2.3.4, rimraf@npm:^2.4.1, rimraf@npm:^2.4.3, rimraf@npm:^2.5.2, rimraf@npm:^2.5.3, rimraf@npm:^2.5.4, rimraf@npm:^2.6.1, rimraf@npm:^2.6.2, rimraf@npm:^2.6.3":
   version: 2.7.1
   resolution: "rimraf@npm:2.7.1"
   dependencies:
@@ -35473,7 +35499,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sade@npm:^1.7.3":
+"sade@npm:^1.7.3, sade@npm:^1.7.4":
   version: 1.8.1
   resolution: "sade@npm:1.8.1"
   dependencies:
@@ -35551,6 +35577,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sander@npm:^0.5.0":
+  version: 0.5.1
+  resolution: "sander@npm:0.5.1"
+  dependencies:
+    es6-promise: ^3.1.2
+    graceful-fs: ^4.1.3
+    mkdirp: ^0.5.1
+    rimraf: ^2.5.2
+  checksum: ce1e423fe5b4e57926df7cc6bd24b70271adfbe7b8ff995784f98101878e037327ac31c7a4e317ac3e1579f410e41a477fef40c2376f0dfa4499c8864a26f499
+  languageName: node
+  linkType: hard
+
 "sane@npm:^4.0.0, sane@npm:^4.0.3, sane@npm:^4.1.0":
   version: 4.1.0
   resolution: "sane@npm:4.1.0"
@@ -36393,6 +36431,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"sorcery@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "sorcery@npm:0.10.0"
+  dependencies:
+    buffer-crc32: ^0.2.5
+    minimist: ^1.2.0
+    sander: ^0.5.0
+    sourcemap-codec: ^1.3.0
+  bin:
+    sorcery: bin/index.js
+  checksum: 4b939487c4c157d27b9477c0948def0d10aab3891dc33f2d140a1710a10ef50fa7cf4e22e2c4564226942ec719ce0eb83c8b9096708533c888de34a673ee5934
+  languageName: node
+  linkType: hard
+
 "sort-keys-length@npm:^1.0.0":
   version: 1.0.1
   resolution: "sort-keys-length@npm:1.0.1"
@@ -36589,7 +36641,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sourcemap-codec@npm:^1.4.1, sourcemap-codec@npm:^1.4.4, sourcemap-codec@npm:^1.4.8":
+"sourcemap-codec@npm:^1.3.0, sourcemap-codec@npm:^1.4.1, sourcemap-codec@npm:^1.4.4, sourcemap-codec@npm:^1.4.8":
   version: 1.4.8
   resolution: "sourcemap-codec@npm:1.4.8"
   checksum: f099279fdaae070ff156df7414bbe39aad69cdd615454947ed3e19136bfdfcb4544952685ee73f56e17038f4578091e12b17b283ed8ac013882916594d95b9e6
@@ -37600,6 +37652,26 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte-check@npm:^2.9.2":
+  version: 2.9.2
+  resolution: "svelte-check@npm:2.9.2"
+  dependencies:
+    "@jridgewell/trace-mapping": ^0.3.9
+    chokidar: ^3.4.1
+    fast-glob: ^3.2.7
+    import-fresh: ^3.2.1
+    picocolors: ^1.0.0
+    sade: ^1.7.4
+    svelte-preprocess: ^4.0.0
+    typescript: "*"
+  peerDependencies:
+    svelte: ^3.24.0
+  bin:
+    svelte-check: bin/svelte-check
+  checksum: 74466baae06839cdac247db88af3ebd4bdaa5e2b9332f8420e501cb4731541722aa69baecf8f269e96cbf6a79027fc59b742449f4ca04b2d6981df3c6842a4cd
+  languageName: node
+  linkType: hard
+
 "svelte-dev-helper@npm:^1.1.9":
   version: 1.1.9
   resolution: "svelte-dev-helper@npm:1.1.9"
@@ -37638,6 +37710,55 @@ __metadata:
   languageName: node
   linkType: hard
 
+"svelte-preprocess@npm:^4.0.0":
+  version: 4.10.7
+  resolution: "svelte-preprocess@npm:4.10.7"
+  dependencies:
+    "@types/pug": ^2.0.4
+    "@types/sass": ^1.16.0
+    detect-indent: ^6.0.0
+    magic-string: ^0.25.7
+    sorcery: ^0.10.0
+    strip-indent: ^3.0.0
+  peerDependencies:
+    "@babel/core": ^7.10.2
+    coffeescript: ^2.5.1
+    less: ^3.11.3 || ^4.0.0
+    postcss: ^7 || ^8
+    postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0
+    pug: ^3.0.0
+    sass: ^1.26.8
+    stylus: ^0.55.0
+    sugarss: ^2.0.0
+    svelte: ^3.23.0
+    typescript: ^3.9.5 || ^4.0.0
+  peerDependenciesMeta:
+    "@babel/core":
+      optional: true
+    coffeescript:
+      optional: true
+    less:
+      optional: true
+    node-sass:
+      optional: true
+    postcss:
+      optional: true
+    postcss-load-config:
+      optional: true
+    pug:
+      optional: true
+    sass:
+      optional: true
+    stylus:
+      optional: true
+    sugarss:
+      optional: true
+    typescript:
+      optional: true
+  checksum: aa90206063270bc3a33b0228315c1cae1609897c785a05cfaacd361bf1b55b9e1ff2f3a52cd22a21a587b9fe0305d2e6bee1ce17940c8d09fe4c5beb2eaef68b
+  languageName: node
+  linkType: hard
+
 "svelte@npm:^3.0.0, svelte@npm:^3.31.2, svelte@npm:^3.48.0":
   version: 3.51.0
   resolution: "svelte@npm:3.51.0"
@@ -38907,6 +39028,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"type-fest@npm:2.19.0, type-fest@npm:^2.17.0, type-fest@npm:^2.19.0":
+  version: 2.19.0
+  resolution: "type-fest@npm:2.19.0"
+  checksum: a5a7ecf2e654251613218c215c7493574594951c08e52ab9881c9df6a6da0aeca7528c213c622bc374b4e0cb5c443aa3ab758da4e3c959783ce884c3194e12cb
+  languageName: node
+  linkType: hard
+
 "type-fest@npm:^0.11.0":
   version: 0.11.0
   resolution: "type-fest@npm:0.11.0"
@@ -38963,13 +39091,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"type-fest@npm:^2.17.0, type-fest@npm:^2.19.0":
-  version: 2.19.0
-  resolution: "type-fest@npm:2.19.0"
-  checksum: a5a7ecf2e654251613218c215c7493574594951c08e52ab9881c9df6a6da0aeca7528c213c622bc374b4e0cb5c443aa3ab758da4e3c959783ce884c3194e12cb
-  languageName: node
-  linkType: hard
-
 "type-is@npm:~1.6.17, type-is@npm:~1.6.18":
   version: 1.6.18
   resolution: "type-is@npm:1.6.18"

package.json

@@ -4,7 +4,8 @@
     "task": "echo 'Installing Script Dependencies...'; cd scripts; yarn install >/dev/null; yarn task",
     "get-template": "cd scripts; yarn get-template",
     "test": "cd code; yarn test",
-    "lint": "cd code; yarn lint"
+    "lint": "cd code; yarn lint",
+    "nx": "cd code; yarn nx"
   },
   "packageManager": "yarn@3.2.4"
 }

scripts/tasks/check.ts

@@ -1,7 +1,8 @@
-import { exec } from '../utils/exec';
 import type { Task } from '../task';
+import { exec } from '../utils/exec';
+import { maxConcurrentTasks } from '../utils/maxConcurrentTasks';
 
-const command = `nx run-many --target="check" --all --parallel --exclude=@storybook/addon-storyshots,@storybook/addon-storyshots-puppeteer`;
+const command = `nx run-many --target="check" --all --parallel=${maxConcurrentTasks} --exclude=@storybook/addon-storyshots,@storybook/addon-storyshots-puppeteer`;
 
 export const check: Task = {
   description: 'Typecheck the source code of the monorepo',

scripts/utils/options.test.ts

@@ -1,8 +1,8 @@
+import { describe, expect, it } from '@jest/globals';
 import { createCommand } from 'commander';
-import { describe, it, expect } from '@jest/globals';
 
-import { createOptions, getOptions, areOptionsSatisfied, getCommand } from './options';
-import type { OptionValues, MaybeOptionValues } from './options';
+import type { MaybeOptionValues, OptionValues } from './options';
+import { areOptionsSatisfied, createOptions, getCommand, getOptions } from './options';
 
 const allOptions = createOptions({
   first: {