fix: ts errors

storybookjs · May 15, 2023 · 86d56b4 · 86d56b4
1 parent 528c780
commit 86d56b4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 15 deletions.
diff --git a/code/renderers/web-components/src/docs/config.ts b/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,

diff --git a/code/renderers/web-components/src/docs/custom-elements.test.ts b/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',

diff --git a/code/renderers/web-components/src/docs/custom-elements.ts b/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'),
     }
   );
 };

diff --git a/code/renderers/web-components/src/render.ts b/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);