Skip to content

De-duplicate Webpack build, especially components/ #929

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

Merged
nylen merged 10 commits into from
May 30, 2017
Merged

De-duplicate Webpack build, especially components/ #929

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
228442a
Build `components/` directory separately
nylen May 29, 2017
d151f3e
Fix the build
nylen May 29, 2017
ebb69e5
Enqueue wp.components script
nylen May 30, 2017
463a2be
Consolidate entry points into one variable
nylen May 30, 2017
63b2db4
Register all `wp.` libraries as Webpack externals
nylen May 30, 2017
e768d79
Restructure imports to top-level entry points only
nylen May 30, 2017
a47cf55
Fix duplicate imports
nylen May 30, 2017
3ba82c4
Fix naming of `withFocusReturn` HoC
nylen May 30, 2017
8cac43e
Fix the tests
nylen May 30, 2017
81a4bf4
Fix `wp-components` stylesheet and dependencies on editor page
nylen May 30, 2017
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 blocks/block-controls/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { Fill } from 'react-slot-fill';
/**
* WordPress dependencies
*/
import Toolbar from 'components/toolbar';
import { Toolbar } from 'components';

export default function BlockControls( { controls } ) {
return (
Expand Down
3 changes: 1 addition & 2 deletions blocks/editable/format-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/**
* WordPress dependencies
*/
import IconButton from 'components/icon-button';
import Toolbar from 'components/toolbar';
import { IconButton, Toolbar } from 'components';

const FORMATTING_CONTROLS = [
{
Expand Down
2 changes: 1 addition & 1 deletion blocks/editable/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import 'element-closest';
/**
* WordPress dependencies
*/
import Toolbar from 'components/toolbar';
import { Toolbar } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion blocks/library/button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import IconButton from 'components/icon-button';
import { IconButton } from 'components';

/**
* Internal dependencies
Expand Down
3 changes: 1 addition & 2 deletions blocks/library/embed/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/**
* WordPress dependencies
*/
import Button from 'components/button';
import Placeholder from 'components/placeholder';
import { Button, Placeholder } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion blocks/library/image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* WordPress dependencies
*/
import Placeholder from 'components/placeholder';
import { Placeholder } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion blocks/media-upload-button/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { Component } from 'element';
import { __ } from 'i18n';
import Button from 'components/button';
import { Button } from 'components';

class MediaUploadButton extends Component {
constructor( { multiple = false, type } ) {
Expand Down
2 changes: 1 addition & 1 deletion components/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Within Gutenberg, these components can be accessed by importing from the `compon
/**
* WordPress dependencies
*/
import Button from 'components/button';
import { Button } from 'components';

export default function MyButton() {
return <Button>Click Me!</Button>;
Expand Down
10 changes: 10 additions & 0 deletions components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
export { default as Button } from './button';
export { default as Dashicon } from './dashicon';
export { default as FormToggle } from './form-toggle';
export { default as IconButton } from './icon-button';
export { default as Panel } from './panel';
export { default as Placeholder } from './placeholder';
export { default as Spinner } from './spinner';
export { default as Toolbar } from './toolbar';

export { default as withFocusReturn } from './higher-order/with-focus-return';
Copy link
Contributor

@youknowriad youknowriad May 30, 2017

Choose a reason for hiding this comment

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

I don't think we should export this in the root module. I'm thinking we should create a index.js in the ./higher-order/ folder to be able to import those as import { withFocusReturn } from 'components/higher-order';

Copy link
Contributor

@youknowriad youknowriad May 30, 2017

Choose a reason for hiding this comment

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

Oh I just saw your comment #929 (comment)

I still think we should make a distinction between importing components and HoC.

Copy link
Member Author

@nylen nylen May 30, 2017

Choose a reason for hiding this comment

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

How do we make this work like wp.components.something behind the scenes?

I think this could be solved separately, in any case.

2 changes: 1 addition & 1 deletion components/panel/body.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { Component } from 'element';
import IconButton from 'components/icon-button';
import { IconButton } from 'components';

class PanelBody extends Component {
constructor( props ) {
Expand Down
2 changes: 1 addition & 1 deletion components/placeholder/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import classnames from 'classnames';
* Internal dependencies
*/
import './style.scss';
import Dashicon from 'components/dashicon';
import { Dashicon } from 'components';

function Placeholder( { icon, children, label, instructions, className, ...additionalProps } ) {
const classes = classnames( 'components-placeholder', className );
Expand Down
2 changes: 1 addition & 1 deletion editor/block-mover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { connect } from 'react-redux';
/**
* WordPress dependencies
*/
import IconButton from 'components/icon-button';
import { IconButton } from 'components';

/**
* Internal dependencies
Expand Down
3 changes: 1 addition & 2 deletions editor/block-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import clickOutside from 'react-click-outside';
/**
* WordPress dependencies
*/
import IconButton from 'components/icon-button';
import Dashicon from 'components/dashicon';
import { Dashicon, IconButton } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/header/mode-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { connect } from 'react-redux';
/**
* WordPress dependencies
*/
import Dashicon from 'components/dashicon';
import { Dashicon } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/header/saved-state/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import classNames from 'classnames';
/**
* WordPress dependencies
*/
import Dashicon from 'components/dashicon';
import { Dashicon } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/header/tools/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { connect } from 'react-redux';
* WordPress dependencies
*/
import { __ } from 'i18n';
import IconButton from 'components/icon-button';
import { IconButton } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/header/tools/preview-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { connect } from 'react-redux';
/**
* WordPress dependencies
*/
import IconButton from 'components/icon-button';
import { IconButton } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/header/tools/publish-button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { connect } from 'react-redux';
/**
* WordPress dependencies
*/
import Button from 'components/button';
import { Button } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/inserter/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { connect } from 'react-redux';
/**
* WordPress dependencies
*/
import IconButton from 'components/icon-button';
import { IconButton } from 'components';

/**
* Internal dependencies
Expand Down
3 changes: 1 addition & 2 deletions editor/inserter/menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { connect } from 'react-redux';
/**
* WordPress dependencies
*/
import Dashicon from 'components/dashicon';
import withFocusReturn from 'components/higher-order/with-focus-return';
import { Dashicon, withFocusReturn } from 'components';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/modes/visual-editor/block.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
* WordPress dependencies
*/
import { Children } from 'element';
import Toolbar from 'components/toolbar';
import { Toolbar } from 'components';

/**
* Internal dependencies
Expand Down
4 changes: 1 addition & 3 deletions editor/sidebar/block-inspector/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@ import { connect } from 'react-redux';
/**
* WordPress dependencies
*/
import Panel from 'components/panel';
import PanelHeader from 'components/panel/header';
import PanelBody from 'components/panel/body';
import { Panel, PanelHeader, PanelBody } from 'components';

/**
* Internal Dependencies
Expand Down
3 changes: 1 addition & 2 deletions editor/sidebar/discussion-panel/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { connect } from 'react-redux';
*/
import { __ } from 'i18n';
import { Component } from 'element';
import PanelBody from 'components/panel/body';
import FormToggle from 'components/form-toggle';
import { PanelBody, FormToggle } from 'components';

/**
* Internal Dependencies
Expand Down
6 changes: 2 additions & 4 deletions editor/sidebar/featured-image/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,8 @@ import { connect } from 'react-redux';
*/
import { Component } from 'element';
import { __ } from 'i18n';
import Button from 'components/button';
import PanelBody from 'components/panel/body';
import MediaUploadButton from 'blocks/media-upload-button';
import Spinner from 'components/spinner';
import { Button, PanelBody, Spinner } from 'components';
import { MediaUploadButton } from 'blocks';

/**
* Internal dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { connect } from 'react-redux';
/**
* WordPress Dependencies
*/
import withFocusReturn from 'components/higher-order/with-focus-return';
import { withFocusReturn } from 'components';

/**
* Internal Dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/sidebar/post-excerpt/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { connect } from 'react-redux';
* WordPress dependencies
*/
import { __ } from 'i18n';
import PanelBody from 'components/panel/body';
import { PanelBody } from 'components';

/**
* Internal Dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/sidebar/post-schedule/clock.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* WordPress dependencies
*/
import { __ } from 'i18n';
import Button from 'components/button';
import { Button } from 'components';

function PostScheduleClock( { is12Hour, selected, onChange } ) {
const minutes = selected.format( 'mm' );
Expand Down
4 changes: 1 addition & 3 deletions editor/sidebar/post-settings/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,7 @@ import { connect } from 'react-redux';
* WordPress dependencies
*/
import { __ } from 'i18n';
import Panel from 'components/panel';
import PanelHeader from 'components/panel/header';
import IconButton from 'components/icon-button';
import { Panel, PanelHeader, IconButton } from 'components';

/**
* Internal Dependencies
Expand Down
3 changes: 1 addition & 2 deletions editor/sidebar/post-status/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { connect } from 'react-redux';
*/
import { __ } from 'i18n';
import { Component } from 'element';
import PanelBody from 'components/panel/body';
import FormToggle from 'components/form-toggle';
import { PanelBody, FormToggle } from 'components';

/**
* Internal Dependencies
Expand Down
3 changes: 1 addition & 2 deletions editor/sidebar/post-trash/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import { connect } from 'react-redux';
* WordPress dependencies
*/
import { __ } from 'i18n';
import Button from 'components/button';
import Dashicon from 'components/dashicon';
import { Button, Dashicon } from 'components';

/**
* Internal dependencies
Expand Down
22 changes: 17 additions & 5 deletions index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,8 +178,6 @@ function gutenberg_register_scripts() {
'https://unpkg.com/[email protected]/' . $moment_script,
array( 'react' )
);

// Editor Scripts.
gutenberg_register_vendor_script(
'tinymce-nightly',
'https://fiddle.azurewebsites.net/tinymce/nightly/tinymce' . $suffix . '.js'
Expand All @@ -189,6 +187,8 @@ function gutenberg_register_scripts() {
'https://fiddle.azurewebsites.net/tinymce/nightly/plugins/lists/plugin' . $suffix . '.js',
array( 'tinymce-nightly' )
);

// Editor Scripts.
wp_register_script(
'wp-date',
plugins_url( 'date/build/index.js', __FILE__ ),
Expand Down Expand Up @@ -233,14 +233,26 @@ function gutenberg_register_scripts() {
array( 'react', 'react-dom', 'react-dom-server' ),
filemtime( plugin_dir_path( __FILE__ ) . 'element/build/index.js' )
);
wp_register_script(
'wp-components',
plugins_url( 'components/build/index.js', __FILE__ ),
array( 'wp-element' ),
filemtime( plugin_dir_path( __FILE__ ) . 'components/build/index.js' )
);
wp_register_script(
'wp-blocks',
plugins_url( 'blocks/build/index.js', __FILE__ ),
array( 'wp-element', 'tinymce-nightly', 'tinymce-nightly-lists' ),
array( 'wp-element', 'wp-components', 'tinymce-nightly', 'tinymce-nightly-lists' ),
filemtime( plugin_dir_path( __FILE__ ) . 'blocks/build/index.js' )
);

// Editor Styles.
wp_register_style(
'wp-components',
plugins_url( 'components/build/style.css', __FILE__ ),
array(),
filemtime( plugin_dir_path( __FILE__ ) . 'components/build/style.css' )
);
wp_register_style(
'wp-blocks',
plugins_url( 'blocks/build/style.css', __FILE__ ),
Expand Down Expand Up @@ -473,7 +485,7 @@ function gutenberg_scripts_and_styles( $hook ) {
wp_enqueue_script(
'wp-editor',
plugins_url( 'editor/build/index.js', __FILE__ ),
array( 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element' ),
array( 'wp-api', 'wp-date', 'wp-i18n', 'wp-blocks', 'wp-element', 'wp-components' ),
filemtime( plugin_dir_path( __FILE__ ) . 'editor/build/index.js' ),
true // enqueue in the footer.
);
Expand Down Expand Up @@ -530,7 +542,7 @@ function gutenberg_scripts_and_styles( $hook ) {
wp_enqueue_style(
'wp-editor',
plugins_url( 'editor/build/style.css', __FILE__ ),
array( 'wp-blocks' ),
array( 'wp-components', 'wp-blocks' ),
filemtime( plugin_dir_path( __FILE__ ) . 'editor/build/style.css' )
);
}
Expand Down
Loading