Migrate @storybook/web-components to strict TS

code/renderers/web-components/package.json

@@ -58,6 +58,7 @@
     "@storybook/manager-api": "7.1.0-alpha.26",
     "@storybook/preview-api": "7.1.0-alpha.26",
     "@storybook/types": "7.1.0-alpha.26",
+    "tiny-invariant": "^1.3.1",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {

code/renderers/web-components/src/docs/config.ts

@@ -2,10 +2,11 @@ import type { Addon_DecoratorFunction, ArgTypesEnhancer } from '@storybook/types
 import { SourceType, enhanceArgTypes } from '@storybook/docs-tools';
 import { extractArgTypes, extractComponentDescription } from './custom-elements';
 import { sourceDecorator } from './sourceDecorator';
+import type { StoryFnHtmlReturnType } from '../types';
 
-export const decorators: Addon_DecoratorFunction<unknown>[] = [sourceDecorator];
+export const decorators: Addon_DecoratorFunction<StoryFnHtmlReturnType>[] = [sourceDecorator];
 
-export const parameters: {} = {
+export const parameters: object = {
   docs: {
     extractArgTypes,
     extractComponentDescription,

code/renderers/web-components/src/docs/custom-elements.test.ts

@@ -1,6 +1,5 @@
 /* eslint-disable no-underscore-dangle */
 import { global } from '@storybook/global';
-
 import { extractArgTypes } from './custom-elements';
 import customElementsManifest from './__testfixtures__/custom-elements.json';
 
@@ -17,19 +16,19 @@ describe('extractArgTypes', () => {
 
   describe('events', () => {
     it('should map to an action event handler', () => {
-      const { onSbHeaderCreateAccount } = extractArgTypes('sb-header');
+      const extractedArgType = extractArgTypes('sb-header');
 
-      expect(onSbHeaderCreateAccount).toEqual({
+      expect(extractedArgType?.onSbHeaderCreateAccount).toEqual({
         name: 'onSbHeaderCreateAccount',
         action: { name: 'sb-header:createAccount' },
         table: { disable: true },
       });
     });
 
     it('should map to a regular item', () => {
-      const { 'sb-header:createAccount': item } = extractArgTypes('sb-header');
+      const extractedArgType = extractArgTypes('sb-header');
 
-      expect(item).toEqual({
+      expect(extractedArgType?.['sb-header:createAccount']).toEqual({
         name: 'sb-header:createAccount',
         required: false,
         description: 'Event send when user clicks on create account button',

code/renderers/web-components/src/docs/custom-elements.ts

@@ -1,3 +1,4 @@
+import invariant from 'tiny-invariant';
 import type { InputType, ArgTypes } from '@storybook/types';
 import { logger } from '@storybook/client-logger';
 import { getCustomElements, isValidComponent, isValidMetaData } from '..';
@@ -80,6 +81,7 @@ function mapData(data: TagItem[], category: string) {
         switch (category) {
           case 'events':
             mapEvent(item).forEach((argType) => {
+              invariant(argType.name, `${argType} should have a name property.`);
               acc[argType.name] = argType;
             });
             break;
@@ -137,13 +139,13 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
   const metaData = getMetaData(tagName, customElements);
   return (
     metaData && {
-      ...mapData(metaData.attributes, 'attributes'),
-      ...mapData(metaData.members, 'properties'),
-      ...mapData(metaData.properties, 'properties'),
-      ...mapData(metaData.events, 'events'),
-      ...mapData(metaData.slots, 'slots'),
-      ...mapData(metaData.cssProperties, 'css custom properties'),
-      ...mapData(metaData.cssParts, 'css shadow parts'),
+      ...mapData(metaData.attributes ?? [], 'attributes'),
+      ...mapData(metaData.members ?? [], 'properties'),
+      ...mapData(metaData.properties ?? [], 'properties'),
+      ...mapData(metaData.events ?? [], 'events'),
+      ...mapData(metaData.slots ?? [], 'slots'),
+      ...mapData(metaData.cssProperties ?? [], 'css custom properties'),
+      ...mapData(metaData.cssParts ?? [], 'css shadow parts'),
     }
   );
 };

code/renderers/web-components/src/render.ts

@@ -44,7 +44,7 @@ export function renderToCanvas(
     if (forceRemount || !canvasElement.querySelector('[id="root-inner"]')) {
       canvasElement.innerHTML = '<div id="root-inner"></div>';
     }
-    const renderTo = canvasElement.querySelector<HTMLElement>('[id="root-inner"]');
+    const renderTo = canvasElement.querySelector<HTMLElement>('[id="root-inner"]') as HTMLElement;
 
     litRender(element, renderTo);
     simulatePageLoad(canvasElement);

code/renderers/web-components/tsconfig.json

@@ -2,7 +2,7 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "resolveJsonModule": true,
-    "strict": false
+    "strict": true
   },
   "include": ["src/**/*", "template/**/*"]
 }

code/yarn.lock

@@ -7876,6 +7876,7 @@ __metadata:
     "@types/node": ^16.0.0
     cross-spawn: ^7.0.3
     lit: 2.3.1
+    tiny-invariant: ^1.3.1
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
     web-component-analyzer: ^1.1.6