Core: Add highlight.js to es6 transpiled modules

.circleci/config.yml

@@ -290,7 +290,7 @@ jobs:
           command: yarn cypress install
       - run:
           name: run e2e tests
-          command: yarn test:e2e-framework --use-yarn-2 sfcVue cra
+          command: yarn test:e2e-framework --use-yarn-2 --no-ie11 sfcVue cra
       - store_artifacts:
           path: /tmp/storybook/cypress
           destination: cypress

examples/official-storybook/main.ts

@@ -34,6 +34,7 @@ module.exports = {
     '@storybook/addon-queryparams',
   ],
   logLevel: 'debug',
+  options: { ie11: true },
   webpackFinal: async (config, { configType }) => ({
     ...config,
     module: {

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

@@ -3,7 +3,7 @@ import { plugins } from './babel';
 const es6Transpiler = () => {
   // TODO: generate regexp using are-you-es5
 
-  const include = /[\\/]node_modules[\\/](@storybook\/node-logger|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|json5|node-fetch|pkg-dir|resolve-from|semver)/;
+  const include = /[\\/]node_modules[\\/](@storybook\/node-logger|acorn-jsx|are-you-es5|better-opn|boxen|chalk|commander|find-cache-dir|find-up|fs-extra|highlight\.js|json5|node-fetch|pkg-dir|resolve-from|semver)/;
   return {
     test: /\.js$/,
     use: [

lib/core/src/server/config/defaults.js

@@ -7,3 +7,7 @@ export const typeScriptDefaults = {
     propFilter: (prop) => (prop.parent ? !/node_modules/.test(prop.parent.fileName) : true),
   },
 };
+
+export const mainOptionsDefaults = {
+  ie11: true,
+};

lib/core/src/server/manager/manager-webpack.config.js

@@ -18,6 +18,7 @@ import { loadEnv } from '../config/utils';
 import babelLoader from './babel-loader-manager';
 import { resolvePathInStorybookCache } from '../utils/resolve-path-in-sb-cache';
 import es6Transpiler from '../common/es6Transpiler';
+import { mainOptionsDefaults } from '../config/defaults';
 
 const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
 // TODO: improve node_modules detection
@@ -41,6 +42,7 @@ export default async ({
 }) => {
   const { raw, stringified } = loadEnv();
   const logLevel = await presets.apply('logLevel', undefined);
+  const mainOptions = await presets.apply(`options`, { ...mainOptionsDefaults }, {});
   const isProd = configType === 'PRODUCTION';
   const refsTemplate = fse.readFileSync(path.join(__dirname, 'virtualModuleRef.template.js'), {
     encoding: 'utf8',
@@ -106,7 +108,7 @@ export default async ({
     module: {
       rules: [
         babelLoader(),
-        es6Transpiler(),
+        mainOptions.ie11 && es6Transpiler(),
         {
           test: /\.css$/,
           use: [
@@ -134,7 +136,7 @@ export default async ({
             name: 'static/media/[name].[hash:8].[ext]',
           },
         },
-      ],
+      ].filter(Boolean),
     },
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.json', '.cjs', '.ts', '.tsx'],

lib/core/src/server/preview/iframe-webpack.config.js

@@ -21,6 +21,7 @@ import { nodeModulesPaths, loadEnv } from '../config/utils';
 import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template';
 import { toRequireContextString } from './to-require-context';
 import { useBaseTsSupport } from '../config/useBaseTsSupport';
+import { mainOptionsDefaults } from '../config/defaults';
 
 const reactPaths = {};
 
@@ -70,6 +71,7 @@ export default async ({
 }) => {
   const dlls = await presets.apply('webpackDlls', []);
   const logLevel = await presets.apply('logLevel', undefined);
+  const mainOptions = await presets.apply(`options`, { ...mainOptionsDefaults }, {});
   const frameworkOptions = await presets.apply(`${framework}Options`, {}, {});
   const { raw, stringified } = loadEnv({ production: true });
   const babelLoader = createBabelLoader(babelOptions, framework);
@@ -170,7 +172,7 @@ export default async ({
     module: {
       rules: [
         babelLoader,
-        es6Transpiler(),
+        mainOptions.ie11 && es6Transpiler(),
         {
           test: /\.md$/,
           use: [
@@ -179,7 +181,7 @@ export default async ({
             },
           ],
         },
-      ],
+      ].filter(Boolean),
     },
     resolve: {
       extensions: ['.mjs', '.js', '.jsx', '.ts', '.tsx', '.json', '.cjs'],

lib/core/types/index.ts

@@ -31,6 +31,10 @@ export interface StorybookConfig {
     config: Configuration,
     options: StorybookOptions
   ) => Configuration | Promise<Configuration>;
+  /**
+   * Pass runtime options to storybook
+   */
+  options?: Partial<Options>;
 }
 
 /**
@@ -40,6 +44,7 @@ export interface StorybookOptions {
   configType: 'DEVELOPMENT' | 'PRODUCTION';
   presetsList: Preset[];
   typescriptOptions: TypescriptOptions;
+  options: Options;
   [key: string]: any;
 }
 
@@ -71,3 +76,11 @@ export interface TypescriptOptions {
    */
   reactDocgenTypescriptOptions: PluginOptions;
 }
+
+export interface Options {
+  /** Sets extra transpilation to be IE 11 compatible
+   *
+   * @default `true`
+   */
+  ie11: boolean;
+}

scripts/run-e2e.ts

@@ -1,6 +1,6 @@
 /* eslint-disable no-irregular-whitespace */
 import path from 'path';
-import { remove, ensureDir, pathExists, writeFile, readJSON, writeJSON } from 'fs-extra';
+import { remove, ensureDir, pathExists, readFile, writeFile, readJSON, writeJSON } from 'fs-extra';
 import { prompt } from 'enquirer';
 import pLimit from 'p-limit';
 
@@ -34,6 +34,12 @@ export interface Parameters {
   additionalDeps?: string[];
   /** Add typescript dependency and creates a tsconfig.json file */
   typescript?: boolean;
+  /** Extra options added to main.js / main.ts */
+  mainOptions?: {
+    options: {
+      ie11: boolean;
+    };
+  };
 }
 
 export interface Options extends Parameters {
@@ -201,6 +207,24 @@ const addTypescript = async ({ cwd }: Options) => {
   }
 };
 
+const configureStorybook = async ({ cwd, mainOptions }: Options) => {
+  logger.info(`🧨 Adding extra configuration to Storybook`);
+  try {
+    const mainPath = path.resolve(cwd, '.storybook', 'main.js');
+    const mainFile = await readFile(mainPath, { encoding: 'utf8' });
+    const config = JSON.parse(mainFile.replace('module.exports = ', ''));
+    const stringified = `module.exports = ${JSON.stringify(
+      { ...config, ...mainOptions },
+      null,
+      2
+    )}`;
+    await writeFile(mainPath, stringified, { encoding: 'utf8' });
+  } catch (e) {
+    logger.error(`🚨 Creating tsconfig.json failed`);
+    throw e;
+  }
+};
+
 const buildStorybook = async ({ cwd, preBuildCommand }: Options) => {
   logger.info(`👷 Building Storybook`);
   try {
@@ -271,6 +295,9 @@ const runTests = async ({ name, version, ...rest }: Parameters) => {
     await initStorybook(options);
     logger.log();
 
+    await configureStorybook(options);
+    logger.log();
+
     await addRequiredDeps(options);
     logger.log();
 
@@ -338,14 +365,15 @@ const runE2E = async (parameters: Parameters) => {
 
 program.option('--clean', 'Clean up existing projects before running the tests', false);
 program.option('--use-yarn-2', 'Run tests using Yarn 2 instead of Yarn 1 + npx', false);
+program.option('--no-ie11', 'Add configuration to skip IE 11');
 program.option(
   '--use-local-sb-cli',
   'Run tests using local @storybook/cli package (⚠️ Be sure @storybook/cli is properly build as it will not be rebuild before running the tests)',
   false
 );
 program.parse(process.argv);
 
-const { useYarn2, useLocalSbCli, clean: startWithCleanSlate, args: frameworkArgs } = program;
+const { ie11, useYarn2, useLocalSbCli, clean: startWithCleanSlate, args: frameworkArgs } = program;
 
 const typedConfigs: { [key: string]: Parameters } = configs;
 let e2eConfigs: { [key: string]: Parameters } = {};
@@ -380,7 +408,9 @@ const perform = () => {
 
   logger.info(`📑 Will run E2E tests for:${list.map((c) => c.name).join(', ')}`);
 
-  return Promise.all(list.map((config) => limit(() => runE2E(config))));
+  return Promise.all(
+    list.map((config) => limit(() => runE2E({ ...config, mainOptions: { options: { ie11 } } })))
+  );
 };
 
 perform().then(() => {