Fix generated ESM, revamp build system

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['@storybook/eslint-config-storybook'],
+  extends: ['plugin:storybook/recommended'],
   rules: {
     '@typescript-eslint/dot-notation': 'off',
     '@typescript-eslint/no-implied-eval': 'off',

.gitignore

@@ -4,4 +4,5 @@ storybook-static/
 build-storybook.log
 package-lock.json
 .DS_Store
-.env
+.env
+*.log

.storybook/main.ts

@@ -0,0 +1,14 @@
+import type { StorybookConfig } from '@storybook/svelte-vite';
+
+const config: StorybookConfig = {
+  framework: '@storybook/svelte-vite',
+  stories: [
+    '../stories/**/*.stories.svelte',
+  ],
+  addons: [
+    '../dist/preset/index.js',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+  ],
+};
+export default config;

package.json

@@ -11,9 +11,21 @@
     "url": "https://github.com/storybookjs/addon-svelte-csf"
   },
   "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "browser": "dist/cjs/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "svelte": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "types": "./dist/preset/index.d.ts",
+      "default": "./dist/preset/index.js"
+    },
+    "./manager": {
+      "types": "./dist/preset/manager.d.ts",
+      "default": "./dist/preset/manager.js"
+    }
+  },
   "files": [
     "dist/**/*",
     "README.md",
@@ -22,68 +34,65 @@
   ],
   "scripts": {
     "clean": "rimraf ./dist",
-    "build": "concurrently \"yarn build:cjs\" \"yarn build:esm\"",
-    "build:cjs": "babel ./src -d ./dist/cjs --extensions \".js,.ts\" --copy-files",
-    "build:esm": "babel ./src -d ./dist/esm --env-name esm --extensions \".js,.ts\" --copy-files",
+    "build": "svelte-package -i ./src -t",
     "prepublish": "yarn clean && yarn build",
-    "test": "jest",
+    "test": "vitest run",
+    "chromatic": "chromatic --exit-zero-on-changes",
+    "coverage": "vitest run --coverage",
     "lint": "eslint --cache --cache-location=.cache/eslint --ext .js,.jsx,.json,.html,.ts,.tsx,.mjs --report-unused-disable-directives",
     "storybook": "sb dev -p 6006",
-    "start": "concurrently \"yarn storybook --quiet\" \"yarn build -- --watch\"",
+    "start": "concurrently \"yarn storybook --quiet\" \"yarn build --watch\"",
     "build-storybook": "sb build",
     "release": "yarn build && auto shipit"
   },
   "dependencies": {
-    "@babel/runtime": "^7.21.0",
+    "@babel/runtime": "^7.22.6",
     "fs-extra": "^11.1.1",
-    "magic-string": "^0.30.0",
-    "ts-dedent": "^2.0.0"
+    "magic-string": "^0.30.1",
+    "dedent": "^1.2.0"
   },
   "devDependencies": {
     "@auto-it/released": "^10.32.6",
-    "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.21.4",
-    "@babel/plugin-transform-runtime": "^7.21.4",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
-    "@storybook/addon-essentials": "^7.0.27",
-    "@storybook/addon-interactions": "^7.0.27",
-    "@storybook/addon-storyshots": "^7.0.27",
-    "@storybook/core-client": "^7.0.27",
-    "@storybook/core-server": "^7.0.27",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-interactions": "^7.1.0",
+    "@storybook/client-api": "^7.1.0",
+    "@storybook/core-client": "^7.1.0",
+    "@storybook/core-server": "^7.1.0",
     "@storybook/eslint-config-storybook": "^3.1.2",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/svelte": "^7.0.27",
-    "@storybook/svelte-webpack5": "^7.0.27",
-    "@storybook/testing-library": "^0.0.13",
-    "@storybook/types": "^7.0.27",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/svelte": "^7.1.0",
+    "@storybook/svelte-vite": "^7.1.0",
+    "@storybook/test-runner": "^0.11.0",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/types": "^7.1.0",
+    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/vite-plugin-svelte": "^2.4.2",
+    "@tsconfig/svelte": "^5.0.0",
     "auto": "^10.43.0",
-    "babel-jest": "^29.5.0",
-    "babel-loader": "^8.1.0",
-    "chromatic": "^6.17.2",
-    "concurrently": "^6.2.0",
+    "chromatic": "^6.19.9",
+    "concurrently": "^8.2.0",
     "eslint": "^7.17.0",
-    "jest": "^29.5.0",
-    "jest-environment-jsdom": "^29.5.0",
-    "prettier": "^2.8.7",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "eslint-plugin-storybook": "^0.6.12",
+    "jsdom": "^22.1.0",
+    "prettier": "^3.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
-    "sb": "^7.0.27",
-    "svelte": "^4.0.0",
+    "sb": "^7.1.0",
+    "svelte": "^3.58.0 || ^4.0.0",
     "svelte-jester": "^2.3.2",
     "svelte-loader": "^3.1.7",
-    "typescript": "^5.0.0",
-    "vite": "^3.1.4"
+    "typescript": "^5.1.6",
+    "vite": "^4.4.3",
+    "vitest": "^0.33.0"
   },
   "peerDependencies": {
-    "@storybook/svelte": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@storybook/theming": "^7.0.0-beta.0 || ^7.0.0-rc.0 || ^7.0.0",
-    "@sveltejs/vite-plugin-svelte": "^1.0.0 || ^2.0.0",
+    "@storybook/svelte": "^7.0.0",
+    "@storybook/theming": "^7.0.0",
+    "@sveltejs/vite-plugin-svelte": "^2.0.0",
     "svelte": "^3.50.0 || ^4.0.0",
     "svelte-loader": "^3.1.2",
-    "vite": "^3.0.0 || ^4.0.0"
+    "vite": "^4.0.0"
   },
   "peerDependenciesMeta": {
     "@sveltejs/vite-plugin-svelte": {

src/components/__tests__/TestStories.svelte

@@ -14,8 +14,8 @@
     <div>tpl2</div>
 </Template>
 
-<Story name="Story1" template="tpl1" args={{tpl1:true}}/>
-<Story name="Story2" template="tpl2" source args={{tpl1:true}}/>
+<Story name="Story1" template="tpl1" args={{ tpl1:true }}/>
+<Story name="Story2" template="tpl2" source args={{ tpl1:true }}/>
 <Story name="Story3" source="xyz">
     <div>story3</div>
 </Story>

src/components/context.ts

@@ -1,5 +1,7 @@
 import { getContext, hasContext, setContext } from 'svelte';
-import { writable, Writable } from 'svelte/store';
+
+import type { Writable } from 'svelte/store';
+import { writable } from 'svelte/store';
 
 const CONTEXT_KEY = 'storybook-registration-context';
 const CONTEXT_KEY_COMPONENT = 'storybook-registration-context-component';

src/config-loader.js → src/config-loader.ts

@@ -1,11 +1,12 @@
 // This file is a rewrite of `@sveltejs/vite-plugin-svelte` without the `Vite`
 // parts: https://github.com/sveltejs/vite-plugin-svelte/blob/e8e52deef93948da735c4ab69c54aced914926cf/packages/vite-plugin-svelte/src/utils/load-svelte-config.ts
-import { logger } from '@storybook/client-logger';
+import { fileURLToPath, pathToFileURL } from 'url';
+
 import { createRequire } from 'module';
-import path from 'path';
 import fs from 'fs';
-import { pathExists } from "fs-extra";
-import { pathToFileURL, fileURLToPath } from 'url';
+import { logger } from '@storybook/client-logger';
+import path from 'path';
+import { pathExists } from 'fs-extra';
 
 /**
  * Try find svelte config and then load it.

src/index.js

@@ -2,9 +2,6 @@ export { default as Meta } from './components/Meta.svelte';
 export { default as Story } from './components/Story.svelte';
 export { default as Template } from './components/Template.svelte';
 
-if (module && module.hot && module.hot.decline) {
+if (module?.hot?.decline) {
   module.hot.decline();
 }
-
-// make it work with --isolatedModules
-export default {};

src/parser/collect-stories.test.js → src/parser/collect-stories.test.ts

@@ -1,17 +1,20 @@
-import collectStories from './collect-stories';
+import { describe, expect, test } from 'vitest';
+
 import TestStories from '../components/__tests__/TestStories.svelte';
+import collectStories from './collect-stories.js';
 
 describe('parse-stories', () => {
   test('Extract Stories', () => {
     const data = collectStories(TestStories, { stories: { 'tpl:tpl2': 'tpl2src' } });
     const { stories, meta } = data;
+
     expect(meta).toMatchInlineSnapshot(`
-      Object {
+      {
         "title": "Test",
       }
     `);
     expect(stories).toMatchInlineSnapshot(`
-      Object {
+      {
         "Story1": [Function],
         "Story2": [Function],
         "Story3": [Function],
@@ -24,9 +27,9 @@ describe('parse-stories', () => {
     expect(stories.Story2.parameters).toMatchInlineSnapshot(`undefined`);
     expect(stories.Story3.storyName).toBe('Story3');
     expect(stories.Story3.parameters).toMatchInlineSnapshot(`
-      Object {
-        "docs": Object {
-          "source": Object {
+      {
+        "docs": {
+          "source": {
             "code": "xyz",
           },
         },

src/parser/collect-stories.js → src/parser/collect-stories.ts

@@ -1,10 +1,10 @@
 /* eslint-env browser */
-import { logger } from '@storybook/client-logger';
-import { combineParameters } from '@storybook/client-api';
-import { extractId } from './extract-id';
 
 import RegisterContext from '../components/RegisterContext.svelte';
 import RenderContext from '../components/RenderContext.svelte';
+import { combineParameters } from '@storybook/client-api';
+import { extractId } from './extract-id.js';
+import { logger } from '@storybook/client-logger';
 
 /* Called from a webpack loader and a jest transformation.
  *
@@ -21,7 +21,7 @@ const createFragment = document.createDocumentFragment
   ? () => document.createDocumentFragment()
   : () => document.createElement('div');
 
-export default (StoriesComponent, { stories = {}, allocatedIds }) => {
+export default (StoriesComponent, { stories = {}, allocatedIds = [] }) => {
   const repositories = {
     meta: null,
     stories: [],
@@ -30,7 +30,7 @@ export default (StoriesComponent, { stories = {}, allocatedIds }) => {
   // extract all stories
   try {
     const context = new RegisterContext({
-      target: createFragment(),
+      target: createFragment() as Document | Element,
       props: {
         Stories: StoriesComponent,
         repositories,

src/parser/extract-id.test.js → src/parser/extract-id.test.ts

@@ -1,4 +1,6 @@
-import { extractId } from './extract-id';
+import { describe, expect, test } from 'vitest';
+
+import { extractId } from './extract-id.js';
 
 describe('extract-id', () => {
   test('name with spaces', () => {

src/parser/extract-id.ts

@@ -25,7 +25,7 @@ export function extractId(
   }
 
   if (!name) {
-    throw new Error("Id or Name should be specified");
+    throw new Error('Id or Name should be specified');
   }
 
   let generated = name.replace(/\W+(.|$)/g, (_, chr) => chr.toUpperCase());
@@ -35,5 +35,3 @@ export function extractId(
   }
   return generated;
 }
-
-