Server: Upgrade to CSF3

app/server/README.md

@@ -62,7 +62,7 @@ module.exports = {
 
 Notice that the JSON does not specify a rendering function -- `@storybook/server` will instead call your `parameters.server.url` with the story's server id appended.
 
-For example the JSON story above is requivalent to the CSF definition:
+For example the JSON story above is requivalent to the CSF3 definition:
 
 ```javascript
 export default {
@@ -74,11 +74,12 @@ export default {
   },
 };
 
-export const Default = (args) => {};
-Default.storyName = 'Default';
-Default.parameters = {
-  server: {
-    id: 'path/of/your/story"',
+export const Default = {
+  name: 'Default',
+  parameters: {
+    server: {
+      id: 'path/of/your/story"',
+    },
   },
 };
 ```

app/server/src/client/preview/index.ts

@@ -1,5 +1,5 @@
 import { start } from '@storybook/core/client';
-import { ClientStoryApi, Loadable } from '@storybook/addons';
+import { ClientStoryApi, Loadable, StoryFn, Args } from '@storybook/addons';
 
 import './globals';
 import { renderMain as render } from './render';
@@ -16,7 +16,10 @@ interface ClientApi extends ClientStoryApi<StoryFnServerReturnType> {
   raw: () => any; // todo add type
 }
 
+const globalRender: StoryFn = (args: Args) => {};
+
 const api = start(render);
+api.clientApi.globalRender = globalRender;
 
 export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
   return (api.clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({

app/server/src/lib/compiler/__testfixtures__/a11y.snapshot

@@ -11,11 +11,12 @@ export default {
   }
 };
 
-export const Label = (args) => {};
-Label.storyName = 'Label';
-Label.parameters = {
-  server: {
-    id: \\"addons/a11y/label\\"
+export const Label = {
+  name: \\"Label\\",
+  parameters: {
+    server: {
+      id: \\"addons/a11y/label\\"
+    }
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/actions.snapshot

@@ -11,18 +11,19 @@ export default {
   }
 };
 
-export const Multiple_actions_config = (args) => {};
-Multiple_actions_config.storyName = 'Multiple actions + config';
-Multiple_actions_config.parameters = {
-  actions: [
-    \\"click\\",
-    \\"contextmenu\\",
-    {
-      clearOnStoryChange: false
+export const Multiple_actions_config = {
+  name: \\"Multiple actions + config\\",
+  parameters: {
+    actions: [
+      \\"click\\",
+      \\"contextmenu\\",
+      {
+        clearOnStoryChange: false
+      }
+    ],
+    server: {
+      id: \\"addons/actions/story3\\"
     }
-  ],
-  server: {
-    id: \\"addons/actions/story3\\"
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot

@@ -19,11 +19,12 @@ export default {
   }
 };
 
-export const Story_1 = (args) => {};
-Story_1.storyName = 'Story 1';
-Story_1.parameters = {
-  server: {
-    id: \\"addons/backgrounds/story1\\"
+export const Story_1 = {
+  name: \\"Story 1\\",
+  parameters: {
+    server: {
+      id: \\"addons/backgrounds/story1\\"
+    }
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/controls.snapshot

@@ -11,48 +11,49 @@ export default {
   }
 };
 
-export const Simple = (args) => {};
-Simple.storyName = 'Simple';
-Simple.parameters = {
-  server: {
-    id: \\"addons/controls/simple\\"
-  }
-};
-Simple.args = {
-  name: \\"John Doe\\",
-  birthday: \\"1960-12-25T00:42:03.600Z\\",
-  favorite_color: \\"red\\",
-  active: true,
-  pets: 2,
-  sports: [
-    \\"football\\",
-    \\"baseball\\"
-  ],
-  favorite_food: \\"Ice Cream\\",
-  other_things: {
-    hair: \\"Brown\\",
-    eyes: \\"Blue\\"
-  }
-};
-Simple.argTypes = {
-  birthday: {
-    control: {
-      type: \\"date\\"
+export const Simple = {
+  name: \\"Simple\\",
+  parameters: {
+    server: {
+      id: \\"addons/controls/simple\\"
     }
   },
-  favorite_color: {
-    control: {
-      type: \\"color\\"
+  args: {
+    name: \\"John Doe\\",
+    birthday: \\"1960-12-25T00:42:03.600Z\\",
+    favorite_color: \\"red\\",
+    active: true,
+    pets: 2,
+    sports: [
+      \\"football\\",
+      \\"baseball\\"
+    ],
+    favorite_food: \\"Ice Cream\\",
+    other_things: {
+      hair: \\"Brown\\",
+      eyes: \\"Blue\\"
     }
   },
-  favorite_food: {
-    control: {
-      type: \\"select\\",
-      options: {
-        hot_dog: \\"Hot Dog\\",
-        pizza: \\"Pizza\\",
-        burgers: \\"Burgers\\",
-        ice_cream: \\"Ice Cream\\"
+  argTypes: {
+    birthday: {
+      control: {
+        type: \\"date\\"
+      }
+    },
+    favorite_color: {
+      control: {
+        type: \\"color\\"
+      }
+    },
+    favorite_food: {
+      control: {
+        type: \\"select\\",
+        options: {
+          hot_dog: \\"Hot Dog\\",
+          pizza: \\"Pizza\\",
+          burgers: \\"Burgers\\",
+          ice_cream: \\"Ice Cream\\"
+        }
       }
     }
   }

app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot

@@ -27,33 +27,35 @@ export default {
   }
 };
 
-export const Heading = (args) => {};
-Heading.storyName = 'Heading';
-Heading.parameters = {
-  actions: [
-    \\"click\\",
-    \\"contextmenu\\",
-    {
-      clearOnStoryChange: false
-    }
-  ],
-  server: {
-    id: \\"demo/heading\\",
-    params: {
-      color: \\"orange\\"
+export const Heading = {
+  name: \\"Heading\\",
+  parameters: {
+    actions: [
+      \\"click\\",
+      \\"contextmenu\\",
+      {
+        clearOnStoryChange: false
+      }
+    ],
+    server: {
+      id: \\"demo/heading\\",
+      params: {
+        color: \\"orange\\"
+      }
     }
+  },
+  args: {
+    name: \\"John Doe\\",
+    age: 44
   }
 };
-Heading.args = {
-  name: \\"John Doe\\",
-  age: 44
-};
 
-export const Button = (args) => {};
-Button.storyName = 'Button';
-Button.parameters = {
-  server: {
-    id: \\"demo/button\\"
+export const Button = {
+  name: \\"Button\\",
+  parameters: {
+    server: {
+      id: \\"demo/button\\"
+    }
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/links.snapshot

@@ -6,11 +6,12 @@ export default {
   title: \\"Welcome\\",
 };
 
-export const Welcome = (args) => {};
-Welcome.storyName = 'Welcome';
-Welcome.parameters = {
-  server: {
-    id: \\"welcome/welcome\\"
+export const Welcome = {
+  name: \\"Welcome\\",
+  parameters: {
+    server: {
+      id: \\"welcome/welcome\\"
+    }
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot

@@ -6,27 +6,30 @@ export default {
   title: \\"Demo\\",
 };
 
-export const Heading = (args) => {};
-Heading.storyName = 'Heading';
-Heading.parameters = {
-  server: {
-    id: \\"demo/heading\\"
+export const Heading = {
+  name: \\"Heading\\",
+  parameters: {
+    server: {
+      id: \\"demo/heading\\"
+    }
   }
 };
 
-export const Headings = (args) => {};
-Headings.storyName = 'Headings';
-Headings.parameters = {
-  server: {
-    id: \\"demo/headings\\"
+export const Headings = {
+  name: \\"Headings\\",
+  parameters: {
+    server: {
+      id: \\"demo/headings\\"
+    }
   }
 };
 
-export const Button = (args) => {};
-Button.storyName = 'Button';
-Button.parameters = {
-  server: {
-    id: \\"demo/button\\"
+export const Button = {
+  name: \\"Button\\",
+  parameters: {
+    server: {
+      id: \\"demo/button\\"
+    }
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/params.snapshot

@@ -13,13 +13,14 @@ export default {
   }
 };
 
-export const Story = (args) => {};
-Story.storyName = 'Story';
-Story.parameters = {
-  server: {
-    id: \\"params/story\\",
-    params: {
-      message: \\"Hello World\\"
+export const Story = {
+  name: \\"Story\\",
+  parameters: {
+    server: {
+      id: \\"params/story\\",
+      params: {
+        message: \\"Hello World\\"
+      }
     }
   }
 };

app/server/src/lib/compiler/__testfixtures__/params_override.snapshot

@@ -13,14 +13,15 @@ export default {
   }
 };
 
-export const Override = (args) => {};
-Override.storyName = 'Override';
-Override.parameters = {
-  server: {
-    id: \\"params/override\\",
-    params: {
-      message: \\"Hello World\\",
-      color: \\"green\\"
+export const Override = {
+  name: \\"Override\\",
+  parameters: {
+    server: {
+      id: \\"params/override\\",
+      params: {
+        message: \\"Hello World\\",
+        color: \\"green\\"
+      }
     }
   }
 };