Migrate @storybook/preact to Typescript

app/preact/package.json

@@ -16,7 +16,7 @@
   },
   "license": "MIT",
   "main": "dist/client/index.js",
-  "jsnext:main": "src/client/index.js",
+  "types": "dist/client/index.d.ts",
   "bin": {
     "build-storybook": "./bin/build.js",
     "start-storybook": "./bin/index.js",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
     "@storybook/core": "5.2.0-beta.4",
+    "@storybook/addons": "5.2.0-beta.4",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
@@ -37,6 +38,7 @@
     "preact": "^8.4.2"
   },
   "peerDependencies": {
+    "@babel/core": "7.0.1",
     "babel-loader": "^7.0.0 || ^8.0.0",
     "preact": "^8.4.2"
   },

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

@@ -0,0 +1,29 @@
+import { start } from '@storybook/core/client';
+import { ClientApi } from './types';
+
+import './globals';
+import render from './render';
+
+const api = start(render);
+const { load: coreLoad, clientApi, configApi } = api;
+const framework = 'preact';
+
+export const storiesOf: ClientApi['storiesOf'] = (kind, m) => {
+  return (clientApi.storiesOf(kind, m) as ReturnType<ClientApi['storiesOf']>).addParameters({
+    framework,
+  });
+};
+export const load: ClientApi['load'] = (...args: any) => coreLoad(...args, framework);
+export const {
+  addDecorator,
+  addParameters,
+  clearDecorators,
+  setAddon,
+  getStorybook,
+  raw,
+}: Pick<
+  ClientApi,
+  'addDecorator' | 'addParameters' | 'clearDecorators' | 'setAddon' | 'getStorybook' | 'raw'
+> = clientApi;
+export const { configure }: Pick<ClientApi, 'configure'> = configApi;
+export const { forceReRender }: Pick<ClientApi, 'forceReRender'> = api;

app/preact/src/client/preview/render.js → app/preact/src/client/preview/render.tsx

@@ -1,8 +1,9 @@
 import { h, render } from 'preact';
 import { document } from 'global';
 import { stripIndents } from 'common-tags';
+import { RenderMainArgs } from './types';
 
-let renderedStory;
+let renderedStory: Element;
 const rootElement = document ? document.getElementById('root') : null;
 
 export default function renderMain({
@@ -11,8 +12,7 @@ export default function renderMain({
   selectedStory,
   showMain,
   showError,
-  // forceRender,
-}) {
+}: RenderMainArgs) {
   const element = storyFn();
 
   if (!element) {

app/preact/src/client/preview/types.ts

@@ -0,0 +1,37 @@
+import { StoryFn, ClientStoryApi } from '@storybook/addons';
+
+export type StoryFnPreactReturnType = string | Node;
+
+export interface ShowErrorArgs {
+  title: string;
+  description: string;
+}
+
+export interface RenderMainArgs {
+  storyFn: () => StoryFn<StoryFnPreactReturnType>;
+  selectedKind: string;
+  selectedStory: string;
+  showMain: () => void;
+  showError: (args: ShowErrorArgs) => void;
+  forceRender: boolean;
+}
+
+export interface IStorybookStory {
+  name: string;
+  render: () => any;
+}
+
+export interface IStorybookSection {
+  kind: string;
+  stories: IStorybookStory[];
+}
+
+export interface ClientApi extends ClientStoryApi<StoryFnPreactReturnType> {
+  setAddon(addon: any): void;
+  configure(loaders: () => void, module: NodeModule): void;
+  getStorybook(): IStorybookSection[];
+  clearDecorators(): void;
+  forceReRender(): void;
+  raw: () => any; // todo add type
+  load: (...args: any[]) => void;
+}

app/preact/src/server/framework-preset-preact.js → app/preact/src/server/framework-preset-preact.ts

@@ -1,4 +1,6 @@
-export function babelDefault(config) {
+import { TransformOptions } from '@babel/core';
+
+export function babelDefault(config: TransformOptions) {
   return {
     ...config,
     plugins: [

app/preact/src/server/options.js → app/preact/src/server/options.ts

@@ -1,4 +1,4 @@
-import packageJson from '../../package.json';
+const packageJson = require('../../package.json');
 
 export default {
   packageJson,

app/preact/src/typings.d.ts

@@ -0,0 +1,2 @@
+declare module '@storybook/core/*';
+declare module 'global';

app/preact/tsconfig.json

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