fix: add web-components to cli init

lib/cli/generators/WEB-COMPONENTS/index.js

@@ -8,10 +8,14 @@ import {
   installDependencies,
 } from '../../lib/helpers';
 
-export default async npmOptions => {
+export default async (npmOptions, { storyFormat = 'csf' }) => {
   const storybookVersion = await getVersion(npmOptions, '@storybook/web-components');
   fse.copySync(path.resolve(__dirname, 'template/'), '.', { overwrite: true });
 
+  if (storyFormat === 'mdx') {
+    // TODO: handle adding of docs mode
+  }
+
   const packageJson = await retrievePackageJson();
 
   packageJson.dependencies = packageJson.dependencies || {};

lib/cli/generators/WEB-COMPONENTS/template/.storybook/preview.js

@@ -0,0 +1,30 @@
+/* global window */
+
+import {
+  configure,
+  addParameters,
+  // setCustomElements,
+} from '@storybook/web-components';
+
+// import customElements from '../custom-elements.json';
+
+// setCustomElements(customElements);
+
+addParameters({
+  docs: {
+    iframeHeight: '200px',
+  },
+});
+
+// configure(require.context('../stories', true, /\.stories\.(js|mdx)$/), module);
+
+// force full reload to not reregister web components
+const req = require.context('../stories', true, /\.stories\.(js|mdx)$/);
+configure(req, module);
+if (module.hot) {
+  module.hot.accept(req.id, () => {
+    const currentLocationHref = window.location.href;
+    window.history.pushState(null, null, currentLocationHref);
+    window.location.reload();
+  });
+}

lib/cli/lib/detect.js

@@ -83,6 +83,13 @@ function detectFramework(dependencies) {
     return types.POLYMER;
   }
 
+  if (
+    (dependencies.dependencies && dependencies.dependencies['lit-element']) ||
+    (dependencies.devDependencies && dependencies.devDependencies['lit-element'])
+  ) {
+    return types.WEB_COMPONENTS;
+  }
+
   if (
     (dependencies.dependencies && dependencies.dependencies.mithril) ||
     (dependencies.devDependencies && dependencies.devDependencies.mithril)

lib/cli/lib/initiate.js

@@ -25,6 +25,7 @@ import webpackReactGenerator from '../generators/WEBPACK_REACT';
 import mithrilGenerator from '../generators/MITHRIL';
 import markoGenerator from '../generators/MARKO';
 import htmlGenerator from '../generators/HTML';
+import webComponentsGenerator from '../generators/WEB-COMPONENTS';
 import riotGenerator from '../generators/RIOT';
 import preactGenerator from '../generators/PREACT';
 import svelteGenerator from '../generators/SVELTE';
@@ -172,6 +173,11 @@ const installStorybook = (projectType, options) => {
           .then(commandLog('Adding storybook support to your "HTML" app'))
           .then(end);
 
+      case types.WEB_COMPONENTS:
+        return webComponentsGenerator(npmOptions, generatorOptions)
+          .then(commandLog('Adding storybook support to your "web components" app'))
+          .then(end);
+
       case types.RIOT:
         return riotGenerator(npmOptions, generatorOptions)
           .then(commandLog('Adding storybook support to your "riot.js" app'))

lib/cli/lib/project_types.js

@@ -13,6 +13,7 @@ const projectTypes = {
   ALREADY_HAS_STORYBOOK: 'ALREADY_HAS_STORYBOOK',
   UPDATE_PACKAGE_ORGANIZATIONS: 'UPDATE_PACKAGE_ORGANIZATIONS',
   POLYMER: 'POLYMER',
+  WEB_COMPONENTS: 'WEB_COMPONENTS',
   MITHRIL: 'MITHRIL',
   MARKO: 'MARKO',
   HTML: 'HTML',

lib/cli/package.json

@@ -83,7 +83,8 @@
     "@storybook/riot": "5.3.0-beta.20",
     "@storybook/svelte": "5.3.0-beta.20",
     "@storybook/ui": "5.3.0-beta.20",
-    "@storybook/vue": "5.3.0-beta.20"
+    "@storybook/vue": "5.3.0-beta.20",
+    "@storybook/web-components": "5.3.0-beta.20"
   },
   "publishConfig": {
     "access": "public"