SolidJS framework feedback

code/frameworks/solid-vite/README.md

@@ -0,0 +1 @@
+# Storybook for SolidJS

code/frameworks/solid-vite/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@storybook/solid-vite",
+  "version": "7.0.0-beta.26",
+  "description": "Storybook for SolidJS and Vite: Develop SolidJS in isolation with Hot Reloading.",
+  "keywords": [
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/solid-vite",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "frameworks/solid-vite"
+  },
+  "funding": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/storybook"
+  },
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "node": "./dist/index.js",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "template/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "scripts": {
+    "check": "tsc --noEmit",
+    "prep": "../../../scripts/prepare/bundle.ts"
+  },
+  "dependencies": {
+    "@storybook/addons": "7.0.0-beta.26",
+    "@storybook/builder-vite": "7.0.0-beta.26",
+    "@storybook/channel-postmessage": "7.0.0-beta.26",
+    "@storybook/channel-websocket": "7.0.0-beta.26",
+    "@storybook/client-api": "7.0.0-beta.26",
+    "@storybook/core-server": "7.0.0-beta.26",
+    "@storybook/node-logger": "7.0.0-beta.26",
+    "@storybook/preview-web": "7.0.0-beta.26",
+    "@storybook/solid": "7.0.0-beta.26",
+    "magic-string": "^0.26.1",
+    "vite-plugin-solid": "^2.5.0"
+  },
+  "devDependencies": {
+    "@types/node": "^16.0.0",
+    "typescript": "~4.9.3"
+  },
+  "engines": {
+    "node": "^14.18 || >=16"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts"
+    ],
+    "platform": "node"
+  },
+  "gitHead": "6559b419625c2dcf76bad1a12fcf75e3dd7c4187"
+}

code/frameworks/solid-vite/preset.js

@@ -0,0 +1 @@
+module.exports = require('./dist/preset');

code/frameworks/solid-vite/src/index.ts

@@ -0,0 +1 @@
+export type { StorybookConfig } from '@storybook/builder-vite';

code/frameworks/solid-vite/src/preset.ts

@@ -0,0 +1,18 @@
+import { hasVitePlugins, StorybookConfig } from '@storybook/builder-vite';
+
+export const core: StorybookConfig['core'] = {
+  builder: '@storybook/builder-vite',
+  renderer: '@storybook/solid',
+};
+
+export const viteFinal: StorybookConfig['viteFinal'] = async (config, { presets }) => {
+  const { plugins = [] } = config;
+
+  // Add solid plugin if not present
+  if (!(await hasVitePlugins(plugins, ['vite-plugin-solid']))) {
+    const { default: solidPlugin } = await import('vite-plugin-solid');
+    plugins.push(solidPlugin());
+  }
+
+  return config;
+};

code/frameworks/solid-vite/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["node"],
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*", "src/**/__testfixtures__/**"]
+}

code/lib/cli/src/automigrate/fixes/new-frameworks.ts

@@ -47,6 +47,9 @@ const packagesMap: Record<string, { webpack5?: string; vite?: string }> = {
     webpack5: '@storybook/html-webpack5',
     vite: '@storybook/html-vite',
   },
+  '@storybook/solid': {   
+    vite: '@storybook/solid',
+  },
 };
 
 interface NewFrameworkRunOptions {

code/lib/cli/src/generators/SOLID/index.ts

@@ -0,0 +1,8 @@
+import { baseGenerator } from '../baseGenerator';
+import type { Generator } from '../types';
+
+const generator: Generator = async (packageManager, npmOptions, options) => {
+  await baseGenerator(packageManager, npmOptions, options, 'solid');
+};
+
+export default generator;

code/lib/cli/src/initiate.ts

@@ -29,6 +29,7 @@ import svelteGenerator from './generators/SVELTE';
 import svelteKitGenerator from './generators/SVELTEKIT';
 import raxGenerator from './generators/RAX';
 import serverGenerator from './generators/SERVER';
+import solidGenerator from './generators/SOLID';
 import type { JsPackageManager } from './js-package-manager';
 import { JsPackageManagerFactory, useNpmWarning } from './js-package-manager';
 import type { NpmOptions } from './NpmOptions';
@@ -204,6 +205,11 @@ const installStorybook = (
           commandLog('Adding Storybook support to your "Server" app\n')
         );
 
+      case ProjectType.SOLID:
+        return solidGenerator(packageManager, npmOptions, generatorOptions).then(
+          commandLog('Adding Storybook support to your "SolidJS" app\n')
+        );
+
       case ProjectType.UNSUPPORTED:
         paddedLog(`We detected a project type that we don't support yet.`);
         paddedLog(

code/lib/cli/src/project_types.ts

@@ -36,7 +36,8 @@ export type SupportedRenderers =
   | 'aurelia'
   | 'html'
   | 'web-components'
-  | 'server';
+  | 'server'
+  | 'solid';
 
 export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'react',
@@ -53,6 +54,7 @@ export const SUPPORTED_RENDERERS: SupportedRenderers[] = [
   'svelte',
   'rax',
   'aurelia',
+  'solid'
 ];
 
 export enum ProjectType {
@@ -82,6 +84,7 @@ export enum ProjectType {
   RAX = 'RAX',
   AURELIA = 'AURELIA',
   SERVER = 'SERVER',
+  SOLID = 'SOLID',
 }
 
 export enum CoreBuilder {
@@ -284,6 +287,13 @@ export const supportedTemplates: TemplateConfiguration[] = [
       return dependencies.every(Boolean);
     },
   },
+  {
+    preset: ProjectType.SOLID,
+    dependencies: ['solid-js'],
+    matcherFunction: ({ dependencies }) => {
+      return dependencies.every(Boolean);
+    },
+  },
 ];
 
 // A TemplateConfiguration that matches unsupported frameworks

code/lib/cli/src/repro-templates.ts

@@ -145,6 +145,17 @@ const baseTemplates = {
       builder: '@storybook/builder-webpack5',
     },
   },
+  'solid-vite/default-ts': {
+    name: 'SolidJS Vite (TS)',
+    script: 'npx degit solidjs/templates/ts .',
+    expected: {
+      framework: '@storybook/solid-vite',
+      renderer: '@storybook/solid',
+      builder: '@storybook/builder-vite',
+    },
+    // TODO: remove this once solid-vite framework is released
+    inDevelopment: true,
+  },
   'vue3-vite/default-js': {
     name: 'Vue3 Vite (JS)',
     script: 'yarn create vite . --template vue',
@@ -412,6 +423,7 @@ export const pr: TemplateKey[] = [
   'vue3-vite/default-ts',
   'vue-cli/vue2-default-js',
   'lit-vite/default-ts',
+  'solid-vite/default-ts',
   'svelte-vite/default-ts',
   'svelte-kit/skeleton-ts',
   'nextjs/default-ts',

code/lib/cli/src/versions.ts

@@ -67,6 +67,8 @@ export default {
   '@storybook/router': '7.0.0-beta.26',
   '@storybook/server': '7.0.0-beta.26',
   '@storybook/server-webpack5': '7.0.0-beta.26',
+  '@storybook/solid-vite': '7.0.0-beta.26',
+  '@storybook/solid': '7.0.0-beta.26',
   '@storybook/source-loader': '7.0.0-beta.26',
   '@storybook/store': '7.0.0-beta.26',
   '@storybook/svelte': '7.0.0-beta.26',

code/lib/core-common/src/utils/get-storybook-info.ts

@@ -19,6 +19,7 @@ const rendererPackages: Record<string, string> = {
   '@storybook/preact': 'preact',
   '@storybook/rax': 'rax',
   '@storybook/server': 'server',
+  '@storybook/solid': 'solid',
 };
 
 const logger = console;

code/lib/preview-api/src/modules/preview-web/render/StoryRender.ts

@@ -154,8 +154,17 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
     if (!this.story) throw new Error('cannot render when not prepared');
     if (!canvasElement) throw new Error('cannot render when canvasElement is unset');
 
-    const { id, componentId, title, name, tags, applyLoaders, unboundStoryFn, playFunction } =
-      this.story;
+    const {
+      id,
+      componentId,
+      title,
+      name,
+      tags,
+      applyLoaders,
+      unboundStoryFn,
+      playFunction,
+      prepareContext: prepareStoryContext,
+    } = this.story;
 
     if (forceRemount && !initial) {
       // NOTE: we don't check the cancel actually worked here, so the previous
@@ -181,15 +190,15 @@ export class StoryRender<TRenderer extends Renderer> implements Render<TRenderer
         return;
       }
 
-      const renderStoryContext: StoryContext<TRenderer> = {
+      const renderStoryContext: StoryContext<TRenderer> = prepareStoryContext({
         ...loadedContext!,
         // By this stage, it is possible that new args/globals have been received for this story
         // and we need to ensure we render it with the new values
         ...this.storyContext(),
         abortSignal,
         // We should consider parameterizing the story types with TRenderer['canvasElement'] in the future
         canvasElement: canvasElement as any,
-      };
+      });
       const renderContext: RenderContext<TRenderer> = {
         componentId,
         title,

code/lib/preview-api/src/modules/store/csf/prepareStory.ts

@@ -71,23 +71,10 @@ export function prepareStory<TRenderer extends Renderer>(
   };
 
   const undecoratedStoryFn: LegacyStoryFn<TRenderer> = (context: StoryContext<TRenderer>) => {
-    const mappedArgs = Object.entries(context.args).reduce((acc, [key, val]) => {
-      const mapping = context.argTypes[key]?.mapping;
-      acc[key] = mapping && val in mapping ? mapping[val] : val;
-      return acc;
-    }, {} as Args);
-
-    const includedArgs = Object.entries(mappedArgs).reduce((acc, [key, val]) => {
-      const argType = context.argTypes[key] || {};
-      if (includeConditionalArg(argType, mappedArgs, context.globals)) acc[key] = val;
-      return acc;
-    }, {} as Args);
-
-    const includedContext = { ...context, args: includedArgs };
     const { passArgsFirst: renderTimePassArgsFirst = true } = context.parameters;
     return renderTimePassArgsFirst
-      ? (render as ArgsStoryFn<TRenderer>)(includedContext.args, includedContext)
-      : (render as LegacyStoryFn<TRenderer>)(includedContext);
+      ? (render as ArgsStoryFn<TRenderer>)(context.args, context)
+      : (render as LegacyStoryFn<TRenderer>)(context);
   };
 
   // Currently it is only possible to set these globally
@@ -109,8 +96,13 @@ export function prepareStory<TRenderer extends Renderer>(
   if (!render) throw new Error(`No render function available for storyId '${id}'`);
 
   const decoratedStoryFn = applyHooks<TRenderer>(applyDecorators)(undecoratedStoryFn, decorators);
-  const unboundStoryFn = (context: StoryContext<TRenderer>) => {
+  const unboundStoryFn = (context: StoryContext<TRenderer>) => decoratedStoryFn(context);
+
+  // This function is invoked at StoryRender.ts, with this
+  // the context is prepared before invoking the render function.
+  const prepareContext = (context: StoryContext<TRenderer>) => {
     let finalContext: StoryContext<TRenderer> = context;
+
     if (global.FEATURES?.argTypeTargetsV7) {
       const argsByTarget = groupArgsByTarget(context);
       finalContext = {
@@ -121,7 +113,19 @@ export function prepareStory<TRenderer extends Renderer>(
       };
     }
 
-    return decoratedStoryFn(finalContext);
+    const mappedArgs = Object.entries(finalContext.args).reduce((acc, [key, val]) => {
+      const mapping = finalContext.argTypes[key]?.mapping;
+      acc[key] = mapping && val in mapping ? mapping[val] : val;
+      return acc;
+    }, {} as Args);
+
+    const includedArgs = Object.entries(mappedArgs).reduce((acc, [key, val]) => {
+      const argType = finalContext.argTypes[key] || {};
+      if (includeConditionalArg(argType, mappedArgs, finalContext.globals)) acc[key] = val;
+      return acc;
+    }, {} as Args);
+
+    return { ...finalContext, args: includedArgs };
   };
 
   const play = storyAnnotations?.play || componentAnnotations.play;
@@ -150,6 +154,7 @@ export function prepareStory<TRenderer extends Renderer>(
     unboundStoryFn,
     applyLoaders,
     playFunction,
+    prepareContext,
   };
 }
 

code/lib/types/src/modules/story.ts

@@ -84,6 +84,7 @@ export type PreparedStory<TRenderer extends Renderer = Renderer> =
       context: StoryContextForLoaders<TRenderer>
     ) => Promise<StoryContextForLoaders<TRenderer> & { loaded: StoryContext<TRenderer>['loaded'] }>;
     playFunction?: (context: StoryContext<TRenderer>) => Promise<void> | void;
+    prepareContext: (context: StoryContext<TRenderer>) => StoryContext<TRenderer>;
   };
 
 export type PreparedMeta<TRenderer extends Renderer = Renderer> = Omit<

code/renderers/solid/.eslintrc.json

@@ -0,0 +1,7 @@
+{
+  "rules": {
+    "import/extensions": "off",
+    "react/react-in-jsx-scope": "off",
+    "import/no-extraneous-dependencies": "off"
+  }
+}

code/renderers/solid/README.md

@@ -0,0 +1 @@
+# Storybook SolidJS Renderer

code/renderers/solid/jest.config.js

@@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};