Merge pull request #10998 from storybookjs/mrmckeb/issue10943

Add warning for TypeScript set up issues and fix Babel config

lib/cli/package.json

@@ -51,6 +51,7 @@
     "find-up": "^4.1.0",
     "fs-extra": "^9.0.0",
     "get-port": "^5.1.1",
+    "globby": "^11.0.0",
     "inquirer": "^7.0.0",
     "jscodeshift": "^0.6.3",
     "json5": "^2.1.1",

lib/cli/src/initiate.ts

@@ -35,6 +35,7 @@ import riotGenerator from './generators/RIOT';
 import preactGenerator from './generators/PREACT';
 import svelteGenerator from './generators/SVELTE';
 import raxGenerator from './generators/RAX';
+import { warn } from './warn';
 
 const logger = console;
 
@@ -58,10 +59,11 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
     skipInstall: options.skipInstall,
   };
 
-  const defaultStoryFormat =
-    detectLanguage() === SupportedLanguage.TYPESCRIPT
-      ? StoryFormat.CSF_TYPESCRIPT
-      : StoryFormat.CSF;
+  const hasTSDependency = detectLanguage() === SupportedLanguage.TYPESCRIPT;
+
+  warn({ hasTSDependency });
+
+  const defaultStoryFormat = hasTSDependency ? StoryFormat.CSF_TYPESCRIPT : StoryFormat.CSF;
 
   const generatorOptions = {
     storyFormat: options.storyFormat || defaultStoryFormat,

lib/cli/src/warn.test.ts

@@ -0,0 +1,39 @@
+import globby from 'globby';
+import { logger } from '@storybook/node-logger';
+import { warn } from './warn';
+
+jest.mock('@storybook/node-logger');
+jest.mock('globby');
+
+describe('warn', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when TypeScript is installed as a dependency', () => {
+    it('should not warn', () => {
+      warn({
+        hasTSDependency: true,
+      });
+      expect(logger.warn).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('when TypeScript is not installed as a dependency', () => {
+    it('should not warn if `.tsx?` files are not found', () => {
+      (globby.sync as jest.Mock).mockReturnValueOnce([]);
+      warn({
+        hasTSDependency: false,
+      });
+      expect(logger.warn).toHaveBeenCalledTimes(0);
+    });
+
+    it('should warn if `.tsx?` files are found', () => {
+      (globby.sync as jest.Mock).mockReturnValueOnce(['a.ts']);
+      warn({
+        hasTSDependency: false,
+      });
+      expect(logger.warn).toHaveBeenCalledTimes(2);
+    });
+  });
+});

lib/cli/src/warn.ts

@@ -0,0 +1,22 @@
+import globby from 'globby';
+import { logger } from '@storybook/node-logger';
+
+interface Options {
+  hasTSDependency: boolean;
+}
+
+export const warn = ({ hasTSDependency }: Options) => {
+  if (!hasTSDependency) {
+    const hasTSFiles = !!globby.sync(['**/*.@(ts|tsx)', '!**/node_modules', '!**/*.d.ts']).length;
+    if (hasTSFiles) {
+      logger.warn(
+        'We have detected TypeScript files in your project directory, however TypeScript is not listed as a project dependency.'
+      );
+      logger.warn('Storybook will continue as though this is a JavaScript project.');
+      logger.line();
+      logger.info(
+        'For more information, see: https://storybook.js.org/docs/configurations/typescript-config/'
+      );
+    }
+  }
+};

lib/core/package.json

@@ -32,7 +32,9 @@
   "dependencies": {
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-export-default-from": "^7.8.3",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.10.1",
     "@babel/plugin-proposal-object-rest-spread": "^7.9.6",
+    "@babel/plugin-proposal-optional-chaining": "^7.10.1",
     "@babel/plugin-proposal-private-methods": "^7.8.3",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-transform-arrow-functions": "^7.8.3",

lib/core/src/server/common/babel.js

@@ -16,6 +16,14 @@ export const plugins = [
   require.resolve('@babel/plugin-transform-spread'),
   require.resolve('@babel/plugin-transform-for-of'),
   require.resolve('babel-plugin-macros'),
+  /*
+   * Optional chaining and nullish coalescing are supported in
+   * @babel/preset-env, but not yet supported in Webpack due to support
+   * missing from acorn. These can be removed once Webpack has support.
+   * See https://github.com/facebook/create-react-app/issues/8445#issuecomment-588512250
+   */
+  require.resolve('@babel/plugin-proposal-optional-chaining'),
+  require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
 ];
 
 export const presets = [

yarn.lock

@@ -727,6 +727,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
   integrity sha512-j+fq49Xds2smCUNYmEHF9kGNkhbet6yVIBp4e6oeQpH1RUs/Ir06xUKzDjDkGcaaokPiTNs2JBWHjaE4csUkZQ==
 
+"@babel/helper-plugin-utils@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.1.tgz#ec5a5cf0eec925b66c60580328b122c01230a127"
+  integrity sha512-fvoGeXt0bJc7VMWZGCAEBEMo/HAjW2mP8apF5eXK0wSqwLAVHAISCWRoLMBMUs2kqeaG77jltVqu4Hn8Egl3nA==
+
 "@babel/helper-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-regex/-/helper-regex-7.8.3.tgz#139772607d51b93f23effe72105b319d2a4c6965"
@@ -908,6 +913,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.1.tgz#02dca21673842ff2fe763ac253777f235e9bbf78"
+  integrity sha512-56cI/uHYgL2C8HVuHOuvVowihhX0sxb3nnfVRzUeVHTWmRHTZrKuAh/OBIMggGU/S1g/1D2CRCXqP+3u7vX7iA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+
 "@babel/plugin-proposal-numeric-separator@7.8.3", "@babel/plugin-proposal-numeric-separator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz#5d6769409699ec9b3b68684cd8116cedff93bad8"
@@ -941,6 +954,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
+"@babel/plugin-proposal-optional-chaining@^7.10.1":
+  version "7.10.1"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.10.1.tgz#15f5d6d22708629451a91be28f8facc55b0e818c"
+  integrity sha512-dqQj475q8+/avvok72CF3AOSV/SGEcH29zT5hhohqqvvZ2+boQoOr7iGldBG5YXTO2qgCgc2B3WvVLUdbeMlGA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.10.1"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
 "@babel/plugin-proposal-private-methods@^7.3.3", "@babel/plugin-proposal-private-methods@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-private-methods/-/plugin-proposal-private-methods-7.8.3.tgz#01248c6c8dc292116b3b4ebd746150f4f0728bab"