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

Allow to use a custom layout. #67

Closed
wants to merge 1 commit into from
Closed

Allow to use a custom layout. #67

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
2 changes: 1 addition & 1 deletion dist/client/ui/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ var _action_logger = require('./action_logger');

var _action_logger2 = _interopRequireDefault(_action_logger);

var _layout = require('./layout');
var _layout = require('layout');

var _layout2 = _interopRequireDefault(_layout);

Expand Down
14 changes: 13 additions & 1 deletion dist/server/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,13 @@ if (!_fs2.default.existsSync(storybookConfigPath)) {
}
_webpack4.default.entry.preview.push(storybookConfigPath);

var layoutPath = '../ui/layout';
var customLayoutPath = _path2.default.resolve(configDirPath, 'layout.js');
if (_fs2.default.existsSync(customLayoutPath)) {
logger.info('=> Using custom layout.');
layoutPath = customLayoutPath;
}

// load custom webpack configurations
var customConfigPath = _path2.default.resolve(configDirPath, 'webpack.config.js');
var finalConfig = _webpack4.default;
Expand All @@ -117,7 +124,12 @@ if (_fs2.default.existsSync(customConfigPath)) {
module: (0, _extends3.default)({}, _webpack4.default.module, {
// We need to use our and custom loaders.
loaders: [].concat((0, _toConsumableArray3.default)(_webpack4.default.module.loaders), (0, _toConsumableArray3.default)(customConfig.module.loaders || []))
})
}),
resolve: {
alias: {
layout: layoutPath
}
}
});
}

Expand Down
2 changes: 1 addition & 1 deletion src/client/ui/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
import stringify from 'json-stringify-safe';
import StorybookControls from './controls';
import ActionLogger from './action_logger';
import Layout from './layout';
import Layout from 'layout';
import { getSyncedStore } from '../';

const rootEl = document.getElementById('root');
Expand Down
12 changes: 12 additions & 0 deletions src/server/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,13 @@ if (!fs.existsSync(storybookConfigPath)) {
}
config.entry.preview.push(storybookConfigPath);

let layoutPath = '../ui/layout';
const customLayoutPath = path.resolve(configDirPath, 'layout.js');
if (fs.existsSync(customLayoutPath)) {
logger.info('=> Using custom layout.');
layoutPath = customLayoutPath
}

// load custom webpack configurations
const customConfigPath = path.resolve(configDirPath, 'webpack.config.js');
let finalConfig = config;
Expand All @@ -91,6 +98,11 @@ if (fs.existsSync(customConfigPath)) {
...customConfig.module.loaders || [],
],
},
resolve: {
Copy link
Member

Choose a reason for hiding this comment

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

Now we allow to configure the resolve API directly via custom webpack API.

In this case, we simply need to document this.
What do you think?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I did not realized this although there is ...customConfig in the final configuration :)

The only thing is that layout needs to be imported using an alias.

This makes me think that if in the codebase instead of importing modules using a relative path webpack was configured to make a namespace using an alias, it would be easy to override any file by overriding aliases. (I find this also handy to avoid relative paths hell in big projects)

import StorybookControls from 'react-storybook/ui/controls';
import ActionLogger from 'react-storybook/ui/action_logger';
import Layout from 'react-storybook/ui/layout';
import { getSyncedStore } from 'react-storybook';
import ActionLogger from 'react-storybook/action_logger';

This could solve the problem in a generic way... Thoughts ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Just realized the replacement could be achieved using NormalModuleReplacementPlugin.

alias: {
layout: layoutPath
}
}
};
}

Expand Down