Rename Framework to Renderer

.github/workflows/test.yml

@@ -6,24 +6,17 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v1
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
-          node-version: 14.x
-
-      - name: Install dependencies
-        uses: bahmutov/npm-install@v1
-
+          node-version: 16
+      - uses: bahmutov/npm-install@v1
       - name: Check typescript
         run: |
           yarn run check
-
       - name: Check linter
         run: |
           yarn lint
-
       - name: Run tests
         run: |
           yarn test

package.json

@@ -23,21 +23,42 @@
     "*.js",
     "*.d.ts"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "build": "tsup ./src/index.ts --format esm,cjs --dts",
     "check": "tsc",
     "lint": "eslint src --ext .ts",
-    "test": "jest",
+    "test": "NODE_NO_WARNINGS=1 NODE_OPTIONS=--experimental-vm-modules jest",
     "release": "yarn build && auto shipit"
   },
   "eslintConfig": {
     "extends": [
       "@storybook/eslint-config-storybook"
     ],
+    "parserOptions": {
+      "project": [
+        "./tsconfig.json"
+      ]
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {
+          "project": [
+            "./tsconfig.json"
+          ]
+        }
+      }
+    },
     "rules": {
+      "import/no-unresolved": "error",
       "jest/expect-expect": [
         "warn",
         {
@@ -51,7 +72,21 @@
   },
   "prettier": "@storybook/linter-config/prettier.config",
   "jest": {
-    "preset": "ts-jest",
+    "preset": "ts-jest/presets/default-esm",
+    "extensionsToTreatAsEsm": [
+      ".ts"
+    ],
+    "moduleNameMapper": {
+      "^(\\.{1,2}/.*)\\.js$": "$1"
+    },
+    "transform": {
+      "^.+\\.tsx?$": [
+        "ts-jest",
+        {
+          "useESM": true
+        }
+      ]
+    },
     "testEnvironment": "node",
     "roots": [
       "<rootDir>/src"
@@ -63,19 +98,23 @@
     "type-fest": "^2.19.0"
   },
   "devDependencies": {
-    "@auto-it/released": "^10.37.1",
-    "@storybook/eslint-config-storybook": "^2.1.0",
+    "@auto-it/released": "^10.37.6",
+    "@storybook/eslint-config-storybook": "^3.1.2",
     "@types/jest": "^29.2.0",
     "@types/lodash": "^4.14.149",
     "@types/node": "^18.11.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "auto": "^10.31.0",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
+    "auto": "^10.37.6",
     "common-tags": "^1.8.0",
-    "eslint": "^6.7.1",
-    "jest": "^29.2.0",
+    "eslint": "^8.27.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-jest": "^27.1.4",
+    "jest": "^29.3.1",
     "prettier": "^2.7.1",
     "ts-jest": "^29.0.3",
-    "tsup": "^6.3.0",
+    "tsup": "^6.4.0",
     "typescript": "^4.8.4"
   },
   "auto": {

src/SBType.ts

@@ -40,3 +40,7 @@ export type SBType =
   | SBIntersectionType
   | SBUnionType
   | SBOtherType;
+
+// Needed for ts-jest as we export * from './SBType.js' in the other file
+// Might be a bug
+export {};

src/includeConditionalArg.test.ts

@@ -1,6 +1,5 @@
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
-import { includeConditionalArg, testValue } from './includeConditionalArg';
-import type { Conditional } from './story';
+import { includeConditionalArg, testValue } from './includeConditionalArg.js';
+import type { Conditional } from './story.js';
 
 describe('testValue', () => {
   describe('truthy', () => {
@@ -15,7 +14,6 @@ describe('testValue', () => {
       ['falsey truthy', { truthy: false }, 1, false],
       ['falsey falsey', { truthy: false }, 0, true],
     ])('%s', (_name, cond, value, expected) => {
-      // @ts-ignore
       expect(testValue(cond, value)).toBe(expected);
     });
   });
@@ -26,7 +24,6 @@ describe('testValue', () => {
       ['nexist', { exists: false }, undefined, true],
       ['nexist false', { exists: false }, 1, false],
     ])('%s', (_name, cond, value, expected) => {
-      // @ts-ignore
       expect(testValue(cond, value)).toBe(expected);
     });
   });
@@ -39,7 +36,6 @@ describe('testValue', () => {
       ['object true', { eq: { x: 1 } }, { x: 1 }, true],
       ['object true', { eq: { x: 1 } }, { x: 2 }, false],
     ])('%s', (_name, cond, value, expected) => {
-      // @ts-ignore
       expect(testValue(cond, value)).toBe(expected);
     });
   });
@@ -52,7 +48,6 @@ describe('testValue', () => {
       ['object true', { neq: { x: 1 } }, { x: 2 }, true],
       ['object false', { neq: { x: 1 } }, { x: 1 }, false],
     ])('%s', (_name, cond, value, expected) => {
-      // @ts-ignore
       expect(testValue(cond, value)).toBe(expected);
     });
   });
@@ -92,7 +87,6 @@ describe('includeConditionalArg', () => {
         ['truthy true', { if: { arg: 'a', truthy: true } }, { a: 0 }, {}, false],
         ['truthy false', { if: { arg: 'a', truthy: false } }, {}, {}, true],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });
@@ -101,7 +95,6 @@ describe('includeConditionalArg', () => {
         ['exist', { if: { arg: 'a', exists: true } }, { a: 1 }, {}, true],
         ['exist false', { if: { arg: 'a', exists: true } }, {}, {}, false],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });
@@ -110,7 +103,6 @@ describe('includeConditionalArg', () => {
         ['scalar true', { if: { arg: 'a', eq: 1 } }, { a: 1 }, {}, true],
         ['scalar false', { if: { arg: 'a', eq: 1 } }, { a: 2 }, { a: 1 }, false],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });
@@ -119,7 +111,6 @@ describe('includeConditionalArg', () => {
         ['scalar true', { if: { arg: 'a', neq: 1 } }, { a: 2 }, {}, true],
         ['scalar false', { if: { arg: 'a', neq: 1 } }, { a: 1 }, { a: 2 }, false],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });
@@ -132,7 +123,6 @@ describe('includeConditionalArg', () => {
         ['truthy true', { if: { global: 'a', truthy: true } }, {}, { a: 0 }, false],
         ['truthy false', { if: { global: 'a', truthy: false } }, {}, { a: 0 }, true],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });
@@ -141,7 +131,6 @@ describe('includeConditionalArg', () => {
         ['implicit exist true', { if: { global: 'a', exists: true } }, {}, { a: 1 }, true],
         ['implicit exist false', { if: { global: 'a', exists: true } }, { a: 1 }, {}, false],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });
@@ -150,7 +139,6 @@ describe('includeConditionalArg', () => {
         ['scalar true', { if: { global: 'a', eq: 1 } }, {}, { a: 1 }, true],
         ['scalar false', { if: { arg: 'a', eq: 1 } }, { a: 2 }, { a: 1 }, false],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });
@@ -159,7 +147,6 @@ describe('includeConditionalArg', () => {
         ['scalar true', { if: { global: 'a', neq: 1 } }, {}, { a: 2 }, true],
         ['scalar false', { if: { global: 'a', neq: 1 } }, { a: 2 }, { a: 1 }, false],
       ])('%s', (_name, argType, args, globals, expected) => {
-        // @ts-ignore
         expect(includeConditionalArg(argType, args, globals)).toBe(expected);
       });
     });

src/includeConditionalArg.ts

@@ -1,5 +1,5 @@
 import isEqual from 'lodash/isEqual';
-import { Args, Globals, InputType, Conditional } from './story';
+import { Args, Globals, InputType, Conditional } from './story.js';
 
 const count = (vals: any[]) => vals.map((v) => typeof v !== 'undefined').filter(Boolean).length;
 

src/index.test.ts

@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/ban-ts-ignore */
-import { toId, storyNameFromExport, isExportStory } from '.';
+import { toId, storyNameFromExport, isExportStory } from './index.js';
 
 describe('toId', () => {
   const testCases: [string, string, string | undefined, string][] = [
@@ -16,6 +15,7 @@ describe('toId', () => {
   ];
 
   testCases.forEach(([name, kind, story, output]) => {
+    // eslint-disable-next-line jest/valid-title
     it(name, () => {
       expect(toId(kind, story)).toBe(output);
     });

src/story.test.ts

@@ -1,7 +1,7 @@
 /* global HTMLElement */
 import { expectTypeOf } from 'expect-type';
 import {
-  Framework,
+  Renderer,
   Args,
   ArgsFromMeta,
   ArgsStoryFn,
@@ -10,17 +10,17 @@ import {
   LoaderFunction,
   ProjectAnnotations,
   StoryAnnotationsOrFn,
-} from './story';
+} from './story.js';
 
-// NOTE Example of internal type definition for @storybook/<X> (where X is a framework)
-interface XFramework extends Framework {
+// NOTE Example of internal type definition for @storybook/<X> (where X is a renderer)
+interface XRenderer extends Renderer {
   component: (args: this['T']) => string;
   storyResult: string;
   canvasElement: HTMLElement;
 }
 
-type XMeta<TArgs = Args> = ComponentAnnotations<XFramework, TArgs>;
-type XStory<TArgs = Args> = StoryAnnotationsOrFn<XFramework, TArgs>;
+type XMeta<TArgs = Args> = ComponentAnnotations<XRenderer, TArgs>;
+type XStory<TArgs = Args> = StoryAnnotationsOrFn<XRenderer, TArgs>;
 
 // NOTE Examples of using types from @storybook/<X> in real project
 
@@ -61,7 +61,7 @@ const CSF1Story: XStory = () => 'Named Story';
 CSF1Story.story = {
   name: 'Another name for story',
   tags: ['foo', 'bar'],
-  decorators: [storyFn => `Wrapped(${storyFn()}`],
+  decorators: [(storyFn) => `Wrapped(${storyFn()}`],
   parameters: { a: [1, '2', {}], b: undefined, c: Button },
   loaders: [() => Promise.resolve({ d: '3' })],
   args: { a: 1 },
@@ -70,26 +70,26 @@ CSF1Story.story = {
 const CSF2Story: XStory = () => 'Named Story';
 CSF2Story.storyName = 'Another name for story';
 CSF2Story.tags = ['foo', 'bar'];
-CSF2Story.decorators = [storyFn => `Wrapped(${storyFn()}`];
+CSF2Story.decorators = [(storyFn) => `Wrapped(${storyFn()}`];
 CSF2Story.parameters = { a: [1, '2', {}], b: undefined, c: Button };
 CSF2Story.loaders = [() => Promise.resolve({ d: '3' })];
 CSF2Story.args = { a: 1 };
 
 const CSF3Story: XStory = {
-  render: args => 'Named Story',
+  render: (args) => 'Named Story',
   name: 'Another name for story',
   tags: ['foo', 'bar'],
-  decorators: [storyFn => `Wrapped(${storyFn()}`],
+  decorators: [(storyFn) => `Wrapped(${storyFn()}`],
   parameters: { a: [1, '2', {}], b: undefined, c: Button },
   loaders: [() => Promise.resolve({ d: '3' })],
   args: { a: 1 },
 };
 
 const CSF3StoryStrict: XStory<ButtonArgs> = {
-  render: args => 'Named Story',
+  render: (args) => 'Named Story',
   name: 'Another name for story',
   tags: ['foo', 'bar'],
-  decorators: [storyFn => `Wrapped(${storyFn()}`],
+  decorators: [(storyFn) => `Wrapped(${storyFn()}`],
   parameters: { a: [1, '2', {}], b: undefined, c: Button },
   loaders: [() => Promise.resolve({ d: '3' })],
   args: { x: '1' },
@@ -100,28 +100,28 @@ const CSF3StoryStrict: XStory<ButtonArgs> = {
   },
 };
 
-const project: ProjectAnnotations<XFramework> = {
+const project: ProjectAnnotations<XRenderer> = {
   async runStep(label, play, context) {
     return play(context);
   },
 };
 
 test('ArgsFromMeta will infer correct args from render/loader/decorators', () => {
-  const decorator1: DecoratorFunction<XFramework, { decoratorArg: string }> = (Story, { args }) =>
+  const decorator1: DecoratorFunction<XRenderer, { decoratorArg: string }> = (Story, { args }) =>
     `${args.decoratorArg}`;
 
-  const decorator2: DecoratorFunction<XFramework, { decoratorArg2: string }> = (Story, { args }) =>
+  const decorator2: DecoratorFunction<XRenderer, { decoratorArg2: string }> = (Story, { args }) =>
     `${args.decoratorArg2}`;
 
-  const loader: LoaderFunction<XFramework, { loaderArg: number }> = async ({ args }) => ({
+  const loader: LoaderFunction<XRenderer, { loaderArg: number }> = async ({ args }) => ({
     loader: `${args.loaderArg}`,
   });
 
-  const loader2: LoaderFunction<XFramework, { loaderArg2: number }> = async ({ args }) => ({
+  const loader2: LoaderFunction<XRenderer, { loaderArg2: number }> = async ({ args }) => ({
     loader2: `${args.loaderArg2}`,
   });
 
-  const renderer: ArgsStoryFn<XFramework, { theme: string }> = args => `${args.theme}`;
+  const renderer: ArgsStoryFn<XRenderer, { theme: string }> = (args) => `${args.theme}`;
 
   const meta = {
     component: Button,
@@ -130,7 +130,7 @@ test('ArgsFromMeta will infer correct args from render/loader/decorators', () =>
     decorators: [decorator1, decorator2],
     loaders: [loader, loader2],
   };
-  expectTypeOf<ArgsFromMeta<XFramework, typeof meta>>().toEqualTypeOf<{
+  expectTypeOf<ArgsFromMeta<XRenderer, typeof meta>>().toEqualTypeOf<{
     theme: string;
     decoratorArg: string;
     decoratorArg2: string;