Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Search for a .babelrc in the storybook config directory first, then the project root #149

Merged
merged 1 commit into from
Apr 26, 2016
+50 −22
Merged

Search for a .babelrc in the storybook config directory first, then the project root #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 22 additions & 11 deletions dist/server/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,17 +15,11 @@ var _extends3 = _interopRequireDefault(_extends2);
exports.default = function (baseConfig, configDir) {
var config = baseConfig;

// if user has a .babelrc file in current directory
// use that to extend webpack configurations
if (_fs2.default.existsSync('./.babelrc')) {
var content = _fs2.default.readFileSync('./.babelrc', 'utf-8');
try {
var babelrc = _cjson2.default.parse(content);
config.module.loaders[0].query = babelrc;
} catch (e) {
logger.error('=> Error parsing .babelrc file: ' + e.message);
throw e;
}
// search for a .babelrc in the config directory, then the module root directory
// if found, use that to extend webpack configurations
var babelConfig = loadBabelConfig(_path2.default.resolve(configDir, '.babelrc')) || loadBabelConfig('.babelrc');
if (babelConfig) {
config.module.loaders[0].query = babelConfig;
}

// Check whether a config.js file exists inside the storybook
Expand Down Expand Up @@ -73,6 +67,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
// avoid ESLint errors
var logger = console;

// Tries to load a .babelrc and returns the parsed object if successful
function loadBabelConfig(babelConfigPath) {
var config = void 0;
if (_fs2.default.existsSync(babelConfigPath)) {
var content = _fs2.default.readFileSync(babelConfigPath, 'utf-8');
try {
config = _cjson2.default.parse(content);
config.babelrc = false;
logger.info('=> Loading custom .babelrc');
} catch (e) {
logger.error('=> Error parsing .babelrc file: ' + e.message);
throw e;
}
}
return config;
}

// `baseConfig` is a webpack configuration bundled with storybook.
// React Storybook will look in the `configDir` directory
// (inside working directory) if a config path is not provided.
4 changes: 4 additions & 0 deletions docs/configure_storybook.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,6 +193,10 @@ module.exports = {

We allow you to use almost all [Webpack configurations](https://webpack.github.io/docs/configuration.html). So, you can customize as you wish.

## Custom Babel Config

Storybook will first search for a `.babelrc` inside the storybook config directory, and then at your project's root. If it doesn't find either of these files, it will use its default configuration instead.

## Load Custom HTML Head Content

Sometimes, we need to load custom DOM nodes inside the HTML `<head>` tag. For an example, this is how we can load TypeKit fonts with React Storybook.
Expand Down
35 changes: 24 additions & 11 deletions src/server/config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,36 @@ import cjson from 'cjson';
// avoid ESLint errors
const logger = console;

// Tries to load a .babelrc and returns the parsed object if successful
function loadBabelConfig(babelConfigPath) {
let config;
if (fs.existsSync(babelConfigPath)) {
const content = fs.readFileSync(babelConfigPath, 'utf-8');
try {
config = cjson.parse(content);
config.babelrc = false;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's the meaning of this?
Can't we use this for everything since we load and pass the babelrc manually anyway.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you don't specifically set this option (babelrc=false), the babel-loader
will look for a .babelrc at the module root and try to use it anyways,
ignoring options you pass to the loader.

On Tue, Apr 26, 2016 at 2:48 AM, Arunoda Susiripala <
[email protected]> wrote:

In src/server/config.js
#149 (comment)
:

@@ -5,23 +5,36 @@ import cjson from 'cjson';
// avoid ESLint errors
const logger = console;

+// Tries to load a .babelrc and returns the parsed object if successful
+function loadBabelConfig(babelConfigPath) {

  • let config;
  • if (fs.existsSync(babelConfigPath)) {
  • const content = fs.readFileSync(babelConfigPath, 'utf-8');
  • try {
  •  config = cjson.parse(content);

  •  config.babelrc = false;

What's the meaning of this?
Can't we use this for everything since we load and pass the babelrc
manually anyway.

—
You are receiving this because you authored the thread.
Reply to this email directly or view it on GitHub
https://github.com/kadirahq/react-storybook/pull/149/files/c1d198a96de6c64b3443b5b51e9fa50234cbe4bd#r61057793

Seth Kinast
http://sethkinast.com/

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay.

logger.info('=> Loading custom .babelrc');
} catch (e) {
logger.error(`=> Error parsing .babelrc file: ${e.message}`);
throw e;
}
}
return config;
}

// `baseConfig` is a webpack configuration bundled with storybook.
// React Storybook will look in the `configDir` directory
// (inside working directory) if a config path is not provided.
export default function (baseConfig, configDir) {
const config = baseConfig;

// if user has a .babelrc file in current directory
// use that to extend webpack configurations
if (fs.existsSync('./.babelrc')) {
const content = fs.readFileSync('./.babelrc', 'utf-8');
try {
const babelrc = cjson.parse(content);
config.module.loaders[0].query = babelrc;
} catch (e) {
logger.error(`=> Error parsing .babelrc file: ${e.message}`);
throw e;
}
// search for a .babelrc in the config directory, then the module root directory
// if found, use that to extend webpack configurations
const babelConfig =
loadBabelConfig(path.resolve(configDir, '.babelrc')) ||
loadBabelConfig('.babelrc');
if (babelConfig) {
config.module.loaders[0].query = babelConfig;
}

// Check whether a config.js file exists inside the storybook
Expand Down