HTML: Add docs preset to framework

app/html/package.json

@@ -46,10 +46,10 @@
   },
   "dependencies": {
     "@storybook/addons": "6.5.0-alpha.47",
-    "@storybook/client-api": "6.5.0-alpha.47",
     "@storybook/core": "6.5.0-alpha.47",
     "@storybook/core-common": "6.5.0-alpha.47",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/docs-tools": "6.5.0-alpha.47",
     "@storybook/preview-web": "6.5.0-alpha.47",
     "@storybook/store": "6.5.0-alpha.47",
     "@types/node": "^14.14.20 || ^16.0.0",
@@ -61,7 +61,8 @@
     "react-dom": "16.14.0",
     "read-pkg-up": "^7.0.1",
     "regenerator-runtime": "^0.13.7",
-    "ts-dedent": "^2.0.0"
+    "ts-dedent": "^2.0.0",
+    "webpack": "4"
   },
   "peerDependencies": {
     "@babel/core": "*"

app/html/src/client/docs/config.ts

@@ -1,6 +1,6 @@
+import { SourceType } from '@storybook/docs-tools';
 import { sourceDecorator } from './sourceDecorator';
 import { prepareForInline } from './prepareForInline';
-import { SourceType } from '../../shared';
 
 export const decorators = [sourceDecorator];
 

app/html/src/client/docs/sourceDecorator.test.ts

@@ -1,7 +1,6 @@
-import { addons, useEffect } from '@storybook/addons';
-import type { StoryContext } from '@storybook/addons';
+import { SNIPPET_RENDERED } from '@storybook/docs-tools';
+import { addons, StoryContext, useEffect } from '@storybook/addons';
 import { sourceDecorator } from './sourceDecorator';
-import { SNIPPET_RENDERED } from '../../shared';
 
 jest.mock('@storybook/addons');
 const mockedAddons = addons as jest.Mocked<typeof addons>;

app/html/src/client/docs/sourceDecorator.ts

@@ -1,10 +1,9 @@
 /* global window */
+import { SNIPPET_RENDERED, SourceType } from '@storybook/docs-tools';
 import { addons, useEffect } from '@storybook/addons';
 import type { ArgsStoryFn, PartialStoryFn, StoryContext } from '@storybook/csf';
 import dedent from 'ts-dedent';
-import type { HtmlFramework } from '@storybook/html';
-
-import { SNIPPET_RENDERED, SourceType } from '../../shared';
+import type { HtmlFramework } from '..';
 
 function skipSourceRender(context: StoryContext<HtmlFramework>) {
   const sourceParams = context?.parameters.docs?.source;

app/html/src/server/framework-preset-html-docs.ts

@@ -0,0 +1,5 @@
+import { findDistEsm, StorybookConfig } from '@storybook/core-common';
+
+export const config: StorybookConfig['config'] = (entry = []) => {
+  return [...entry, findDistEsm(__dirname, 'client/docs/config')];
+};

app/html/src/server/options.ts

@@ -4,5 +4,8 @@ import type { LoadOptions } from '@storybook/core-common';
 export default {
   packageJson: sync({ cwd: __dirname }).packageJson,
   framework: 'html',
-  frameworkPresets: [require.resolve('./framework-preset-html')],
+  frameworkPresets: [
+    require.resolve('./framework-preset-html'),
+    require.resolve('./framework-preset-html-docs'),
+  ],
 } as LoadOptions;

app/html/tsconfig.json

@@ -2,15 +2,8 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "rootDir": "./src",
-    "types": [
-      "webpack-env",
-      "node"
-    ]
+    "types": ["webpack-env", "node"]
   },
-  "include": [
-    "src/**/*"
-  ],
-  "exclude": [
-    "src/__tests__/**/*"
-  ]
-}
+  "include": ["src/**/*"],
+  "exclude": ["src/**/*.test.*", "src/__tests__/**/*"]
+}