Merge pull request #2666 from storybooks/fix-config-dir-detection

Fix config dir detection
storybookjs · Jan 6, 2018 · 7e3b29c · 7e3b29c
2 parents bab8e24 + aff8b65
commit 7e3b29c
Show file tree

Hide file tree

Showing 20 changed files with 57 additions and 58 deletions.
diff --git a/app/angular/src/server/build.js b/app/angular/src/server/build.js
@@ -56,7 +56,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 // NOTE changes to env should be done before calling `getBaseConfig`
-const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
+const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
 config.output.path = path.resolve(outputDir);
 
 // copy all static files

diff --git a/app/angular/src/server/config/utils.js b/app/angular/src/server/config/utils.js
@@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
     'process.env': env,
   };
 }
-
-export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';
diff --git a/app/angular/src/server/config/webpack.config.js b/app/angular/src/server/config/webpack.config.js
@@ -4,19 +4,12 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
 
-import {
-  getConfigDir,
-  includePaths,
-  excludePaths,
-  nodeModulesPaths,
-  loadEnv,
-  nodePaths,
-} from './utils';
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
 import babelLoaderConfig from './babel';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const config = {
     devtool: 'cheap-module-source-map',
     entry: {
@@ -37,7 +30,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -46,7 +39,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

diff --git a/app/angular/src/server/config/webpack.config.prod.js b/app/angular/src/server/config/webpack.config.prod.js
@@ -4,11 +4,11 @@ import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import babelLoaderConfig from './babel.prod';
-import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const entries = {
     preview: [require.resolve('./polyfills'), require.resolve('./globals')],
     manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
@@ -32,7 +32,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -41,7 +41,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

diff --git a/app/angular/src/server/middleware.js b/app/angular/src/server/middleware.js
@@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, reject) => {
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
-  const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
+  const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'

diff --git a/app/react/src/server/build.js b/app/react/src/server/build.js
@@ -54,7 +54,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 // NOTE changes to env should be done before calling `getBaseConfig`
-const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
+const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
 config.output.path = path.resolve(outputDir);
 
 // copy all static files

diff --git a/app/react/src/server/config/utils.js b/app/react/src/server/config/utils.js
@@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
     'process.env': env,
   };
 }
-
-export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';
diff --git a/app/react/src/server/config/webpack.config.js b/app/react/src/server/config/webpack.config.js
@@ -5,19 +5,12 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
 
-import {
-  getConfigDir,
-  includePaths,
-  excludePaths,
-  nodeModulesPaths,
-  loadEnv,
-  nodePaths,
-} from './utils';
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
 import babelLoaderConfig from './babel';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const config = {
     devtool: 'cheap-module-source-map',
     entry: {
@@ -38,7 +31,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -47,7 +40,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

diff --git a/app/react/src/server/config/webpack.config.prod.js b/app/react/src/server/config/webpack.config.prod.js
@@ -4,11 +4,11 @@ import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import babelLoaderConfig from './babel.prod';
-import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const entries = {
     preview: [require.resolve('./polyfills'), require.resolve('./globals')],
     manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
@@ -32,7 +32,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -41,7 +41,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

diff --git a/app/react/src/server/middleware.js b/app/react/src/server/middleware.js
@@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, reject) => {
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
-  const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
+  const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'

diff --git a/app/vue/src/server/build.js b/app/vue/src/server/build.js
@@ -56,7 +56,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 // NOTE changes to env should be done before calling `getBaseConfig`
-const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
+const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
 config.output.path = path.resolve(outputDir);
 
 // copy all static files

diff --git a/app/vue/src/server/config/utils.js b/app/vue/src/server/config/utils.js
@@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
     'process.env': env,
   };
 }
-
-export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';
diff --git a/app/vue/src/server/config/webpack.config.js b/app/vue/src/server/config/webpack.config.js
@@ -4,19 +4,12 @@ import Dotenv from 'dotenv-webpack';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
-import {
-  getConfigDir,
-  includePaths,
-  excludePaths,
-  nodeModulesPaths,
-  loadEnv,
-  nodePaths,
-} from './utils';
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import babelLoaderConfig from './babel';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const config = {
     devtool: 'cheap-module-source-map',
     entry: {
@@ -37,7 +30,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -46,7 +39,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

diff --git a/app/vue/src/server/config/webpack.config.prod.js b/app/vue/src/server/config/webpack.config.prod.js
@@ -4,11 +4,11 @@ import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import babelLoaderConfig from './babel.prod';
-import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const entries = {
     preview: [require.resolve('./polyfills'), require.resolve('./globals')],
     manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
@@ -32,7 +32,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -41,7 +41,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

diff --git a/app/vue/src/server/middleware.js b/app/vue/src/server/middleware.js
@@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, reject) => {
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
-  const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
+  const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'

diff --git a/examples/official-storybook/addons.js b/examples/official-storybook/addons.js
@@ -1,5 +1,4 @@
 /* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-events/register';
@@ -9,3 +8,7 @@ import '@storybook/addon-knobs/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
 import '@storybook/addon-jest/register';
+
+import addHeadWarning from './head-warning';
+
+addHeadWarning('Manager');
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
@@ -2,6 +2,9 @@
 import { configure } from '@storybook/react';
 import { setOptions } from '@storybook/addon-options';
 import 'react-chromatic/storybook-addon';
+import addHeadWarning from './head-warning';
+
+addHeadWarning('Preview');
 
 setOptions({
   hierarchySeparator: /\/|\./,

diff --git a/examples/official-storybook/head-warning.js b/examples/official-storybook/head-warning.js
@@ -0,0 +1,10 @@
+import { document } from 'global';
+
+export default function addHeadWarning(bundle) {
+  const warning = document.createElement('h1');
+  warning.textContent = `${bundle} head not loaded`;
+  warning.className = `${bundle.toLowerCase()}-head-not-loaded`;
+  warning.style.color = 'red';
+
+  document.body.insertBefore(warning, document.body.firstChild);
+}
diff --git a/examples/official-storybook/manager-head.html b/examples/official-storybook/manager-head.html
@@ -0,0 +1,5 @@
+<style>
+    .manager-head-not-loaded {
+        display: none;
+    }
+</style>
diff --git a/examples/official-storybook/preview-head.html b/examples/official-storybook/preview-head.html
@@ -0,0 +1,5 @@
+<style>
+    .preview-head-not-loaded {
+        display: none;
+    }
+</style>
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,5 +33,3 @@ export function loadEnv(options = {}) { @@
         'process.env': env,
       };
     }
-    export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';