fix: improve types (#24)

* fix: improve types --------- Co-authored-by: DylanPiercey <DylanPiercey@users.noreply.github.com>
storybookjs · Mar 3, 2024 · 43f6b9e · 43f6b9e
1 parent bf76761
commit 43f6b9e
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 43 deletions.
diff --git a/.changeset/olive-shrimps-shave.md b/.changeset/olive-shrimps-shave.md
@@ -0,0 +1,5 @@
+---
+"@storybook/marko": patch
+---
+
+Improve types.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -5,27 +5,29 @@
   "parserOptions": {
     "ecmaVersion": "latest",
     "sourceType": "module",
-    "impliedStrict": true,
-    "warnOnUnsupportedTypeScriptVersion": false
+    "impliedStrict": true
   },
   "settings": {
     "import/resolver": {
+      "node": true,
       "typescript": true
     }
   },
   "env": {
     "node": true,
+    "mocha": true,
     "es2024": true,
     "browser": true
   },
   "rules": {
+    "import/namespace": "off",
     "import/order": [
       "error",
       {
         "groups": [
           ["builtin"],
           ["external"],
-          "internal",
+          ["internal"],
           "parent",
           "sibling",
           "index"
@@ -51,11 +53,13 @@
       ],
       "rules": {
         "@typescript-eslint/explicit-module-boundary-types": "off",
-        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-duplicate-enum-values": "off",
         "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/no-empty-interface": "off",
         "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-var-requires": "off",
-        "@typescript-eslint/no-namespace": "off"
+        "@typescript-eslint/no-namespace": "off",
+        "@typescript-eslint/no-non-null-assertion": "off",
+        "@typescript-eslint/no-var-requires": "off"
       }
     }
   ]

diff --git a/packages/renderers/marko/src/decorators.ts b/packages/renderers/marko/src/decorators.ts
@@ -9,17 +9,14 @@ export const decorateStory: DecoratorApplicator<MarkoRenderer, Args> = (
   decorators.reduce(
     (decorated, decorator) =>
       (context: StoryContext<MarkoRenderer>): MarkoStoryResult => {
-        let story: MarkoRenderer["storyResult"] | undefined;
-        const decoratedStory: MarkoRenderer["storyResult"] = decorator(
-          (update) => {
-            story = decorated({
-              ...context,
-              ...sanitizeStoryContextUpdate(update),
-            });
-            return story;
-          },
-          context,
-        );
+        let story: MarkoStoryResult | undefined;
+        const decoratedStory: MarkoStoryResult = decorator((update) => {
+          story = decorated({
+            ...context,
+            ...sanitizeStoryContextUpdate(update),
+          });
+          return story;
+        }, context);
 
         story ||= decorated(context);
         return decoratedStory === story

diff --git a/packages/renderers/marko/src/public-types.ts b/packages/renderers/marko/src/public-types.ts
@@ -52,15 +52,15 @@ export type Story<Input extends Args = Args> = StoryFn<Input> | StoryObj<Input>;
 
 export type { MarkoRenderer };
 export type Decorator<Input extends Args = Args> = DecoratorFunction<
-  MarkoRenderer<Input>,
+  MarkoRenderer,
   Input
 >;
 export type Loader<Input extends Args = Args> = LoaderFunction<
-  MarkoRenderer<Input>,
+  MarkoRenderer,
   Input
 >;
 export type StoryContext<Input extends Args = Args> = GenericStoryContext<
-  MarkoRenderer<Input>,
+  MarkoRenderer,
   Input
 >;
 export type Preview = ProjectAnnotations<MarkoRenderer>;
diff --git a/packages/renderers/marko/src/testing-api.ts b/packages/renderers/marko/src/testing-api.ts
@@ -7,12 +7,12 @@ import {
 import type {
   Args,
   ComposedStoryFn,
-  ProjectAnnotations,
   Store_CSFExports,
+  StoryAnnotationsOrFn,
 } from "@storybook/types";
 
 import { decorateStory } from "./decorators";
-import type { Meta, Story } from "./public-types";
+import type { Meta, Story, Preview } from "./public-types";
 import { render } from "./render";
 import type { MarkoRenderer } from "./types";
 
@@ -47,31 +47,23 @@ export type ComposedStory<Export> = ComposedStoryFn<
  *
  * @param projectAnnotations - e.g. (import projectAnnotations from '../.storybook/preview')
  */
-export function setProjectAnnotations(
-  projectAnnotations:
-    | ProjectAnnotations<MarkoRenderer>
-    | ProjectAnnotations<MarkoRenderer>[],
-) {
+export function setProjectAnnotations(projectAnnotations: Preview | Preview[]) {
   originalSetProjectAnnotations<MarkoRenderer>(projectAnnotations);
 }
 
 /** Preserved for users migrating from `@storybook/marko@7`.
  *
  * @deprecated Use setProjectAnnotations instead
  */
-export function setGlobalConfig(
-  projectAnnotations:
-    | ProjectAnnotations<MarkoRenderer>
-    | ProjectAnnotations<MarkoRenderer>[],
-) {
+export function setGlobalConfig(projectAnnotations: Preview | Preview[]) {
   deprecate(
     `setGlobalConfig is deprecated. Use setProjectAnnotations instead.`,
   );
   setProjectAnnotations(projectAnnotations);
 }
 
 // This will not be necessary once we have auto preset loading
-const defaultProjectAnnotations: ProjectAnnotations<MarkoRenderer<any>> = {
+const defaultProjectAnnotations: Preview = {
   render,
   applyDecorators: decorateStory,
 };
@@ -105,15 +97,18 @@ const defaultProjectAnnotations: ProjectAnnotations<MarkoRenderer<any>> = {
  */
 export function composeStory<
   Input extends Args = Args,
-  Export extends Story<Input> = Story<Input>,
+  Export extends StoryAnnotationsOrFn<
+    MarkoRenderer,
+    Input
+  > = StoryAnnotationsOrFn<MarkoRenderer, Input>,
 >(
   story: Export,
   componentAnnotations: Meta<Input>,
-  projectAnnotations?: ProjectAnnotations<MarkoRenderer<any>>,
+  projectAnnotations?: Preview,
   exportsName?: string,
 ): ComposedStory<Export> {
   return toRenderable(
-    originalComposeStory<MarkoRenderer<Input>, Input>(
+    originalComposeStory<MarkoRenderer, Input>(
       story as any,
       componentAnnotations,
       projectAnnotations,
@@ -151,7 +146,7 @@ export function composeStory<
  */
 export function composeStories<Exports>(
   csfExports: Exports,
-  projectAnnotations?: ProjectAnnotations<MarkoRenderer>,
+  projectAnnotations?: Preview,
 ): ComposedStories<Exports> {
   return (originalComposeStories as any)(
     csfExports,
@@ -167,7 +162,7 @@ export function composeStories<Exports>(
  * Properties that exist on the story context are also accessible through the proxy.
  */
 function toRenderable<Input extends Args = Args>(
-  composed: ComposedStoryFn<MarkoRenderer<Input>, Partial<Input>>,
+  composed: ComposedStoryFn<MarkoRenderer, Partial<Input>>,
   componentAnnotations: Meta<Input>,
 ) {
   return {
@@ -180,11 +175,11 @@ function toRenderable<Input extends Args = Args>(
       cb?: any,
     ) {
       const { component, input } = runStory(rawInput);
-      return component.render(input!, cb);
+      return component.render(input, cb);
     },
     renderSync(rawInput: Partial<Marko.TemplateInput<Input>> | undefined) {
       const { component, input } = runStory(rawInput);
-      return component.renderSync(input!);
+      return component.renderSync(input);
     },
     renderToString(
       rawInput: Partial<Marko.TemplateInput<Input>> | undefined,
@@ -195,12 +190,12 @@ function toRenderable<Input extends Args = Args>(
     },
     stream(rawInput: Partial<Marko.TemplateInput<Input>> | undefined) {
       const { component, input } = runStory(rawInput);
-      return component.stream(input!);
+      return component.stream(input);
     },
   } satisfies Marko.Template<Input>;
 
   function runStory(rawInput: Partial<Marko.TemplateInput<Input>> | undefined) {
-    const { component = componentAnnotations?.component, input } =
+    const { component = componentAnnotations?.component, input = {} } =
       composed(rawInput) || {};
     if (!component || !component.renderSync) {
       throw new Error(

diff --git a/packages/renderers/marko/src/types.ts b/packages/renderers/marko/src/types.ts
@@ -14,6 +14,6 @@ export interface MarkoRenderer<Input extends Args = Args> extends WebRenderer {
 }
 
 export interface MarkoStoryResult<Input extends Args = Args> {
-  component?: Marko.Template<Input, unknown>;
+  component?: Marko.Template<Input>;
   input?: Marko.TemplateInput<Input>;
 }