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

Try: Preact #2734

Closed
wants to merge 5 commits into from
Closed

Try: Preact #2734

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9b4e07
Try preact
youknowriad Sep 7, 2017
f45e4ba
Avoid using element fragments in blocks
youknowriad Sep 8, 2017
b699cf5
Small element fixes
youknowriad Sep 8, 2017
3379e61
Fork react-click-outside into WithClickOutside
mcsf Sep 14, 2017
acf0b64
Replace usage of react-click-outside with WithClickOutside
mcsf Sep 14, 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
4 changes: 2 additions & 2 deletions blocks/editable/provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { pick, noop } from 'lodash';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { Component, Children } from '@wordpress/element';
Copy link
Member

Choose a reason for hiding this comment

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

Can we avoid the Children utility and instead leverage the fact that children is an array in Preact, i.e.

// Before:
Children.only( this.props.children );

// After:
this.props.children[ 0 ];

I think it would be good if we avoid Children altogether.

Copy link
Contributor

Choose a reason for hiding this comment

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

That's the exact same thing, the inner implementation is the same, but I can see that this enables to drop preact-compat at some moment.


/**
* The Editable Provider allows a rendering context to define global behaviors
Expand All @@ -23,7 +23,7 @@ class EditableProvider extends Component {
}

render() {
return this.props.children;
return Children.only( this.props.children );
}
}

Expand Down
24 changes: 12 additions & 12 deletions blocks/library/paragraph/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,19 +94,19 @@ registerBlockType( 'core/paragraph', {
const toggleDropCap = () => setAttributes( { dropCap: ! dropCap } );
const className = dropCap ? 'has-drop-cap' : null;

return [
focus && (
<BlockControls key="controls">
return <div>
Copy link
Member

Choose a reason for hiding this comment

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

For consistency, should this be parenthesis-wrapped?

{ focus && (
<BlockControls>
<AlignmentToolbar
value={ align }
onChange={ ( nextAlign ) => {
setAttributes( { align: nextAlign } );
} }
/>
</BlockControls>
),
focus && (
<InspectorControls key="inspector">
) }
{ focus && (
<InspectorControls>
<BlockDescription>
<p>{ __( 'Text. Great things start here.' ) }</p>
</BlockDescription>
Expand Down Expand Up @@ -142,8 +142,8 @@ registerBlockType( 'core/paragraph', {
onChange={ ( nextWidth ) => setAttributes( { width: nextWidth } ) }
/>
</InspectorControls>
),
<BlockAutocomplete key="editable" onReplace={ onReplace }>
) }
<BlockAutocomplete onReplace={ onReplace }>
<Editable
tagName="p"
className={ classnames( 'wp-block-paragraph', className, {
Expand All @@ -162,21 +162,21 @@ registerBlockType( 'core/paragraph', {
content: nextContent,
} );
} }
focus={ focus }
onFocus={ setFocus }
onSplit={ ( before, after, ...blocks ) => {
setAttributes( { content: before } );
insertBlocksAfter( [
...blocks,
createBlock( 'core/paragraph', { content: after } ),
] );
} }
focus={ focus }
onFocus={ setFocus }
onMerge={ mergeBlocks }
onReplace={ onReplace }
placeholder={ placeholder || __( 'New Paragraph' ) }
/>
</BlockAutocomplete>,
];
</BlockAutocomplete>
</div>;
},

save( { attributes } ) {
Expand Down
5 changes: 2 additions & 3 deletions components/drop-zone/provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { isEqual, without, some, filter, findIndex, noop } from 'lodash';
/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';
import { Component, Children } from '@wordpress/element';

class DropZoneProvider extends Component {
constructor() {
Expand Down Expand Up @@ -183,8 +183,7 @@ class DropZoneProvider extends Component {
}

render() {
const { children } = this.props;
return children;
return Children.only( this.props.children );
}
}

Expand Down
4 changes: 2 additions & 2 deletions components/higher-order/with-api-data/provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { mapValues, noop } from 'lodash';
/**
* WordPress dependencies
*/
import { Component } from 'element';
import { Component, Children } from 'element';

export default class APIProvider extends Component {
getChildContext() {
Expand All @@ -18,7 +18,7 @@ export default class APIProvider extends Component {
}

render() {
return this.props.children;
return Children.only( this.props.children );
}
}

Expand Down
22 changes: 10 additions & 12 deletions components/popover/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
* External dependencies
*/
import classnames from 'classnames';
import { isEqual, noop } from 'lodash';
import { isEqual } from 'lodash';
import { Fill } from 'react-slot-fill';

/**
* WordPress dependencies
*/
import { createPortal, Component } from '@wordpress/element';
import { Component } from '@wordpress/element';

/**
* Internal dependencies
Expand Down Expand Up @@ -92,7 +93,7 @@ export class Popover extends Component {
setOffset() {
const { anchor, popover } = this.nodes;
const { parentNode } = anchor;
if ( ! parentNode ) {
if ( ! parentNode || ! popover ) {
return;
}

Expand Down Expand Up @@ -123,6 +124,9 @@ export class Popover extends Component {
}

setForcedPositions() {
if ( ! this.nodes.content ) {
return;
}
const rect = this.nodes.content.getBoundingClientRect();

// Check exceeding top or bottom of viewport
Expand Down Expand Up @@ -167,7 +171,6 @@ export class Popover extends Component {
return null;
}

const { popoverTarget = document.body } = this.context;
const classes = classnames(
'components-popover',
className,
Expand All @@ -177,7 +180,7 @@ export class Popover extends Component {

return (
<span ref={ this.bindNode( 'anchor' ) }>
{ createPortal(
<Fill name="Popover">
<PopoverDetectOutside onClickOutside={ onClose }>
<div
ref={ this.bindNode( 'popover' ) }
Expand All @@ -192,16 +195,11 @@ export class Popover extends Component {
{ children }
</div>
</div>
</PopoverDetectOutside>,
popoverTarget
) }
</PopoverDetectOutside>
</Fill>
</span>
);
}
}

Popover.contextTypes = {
popoverTarget: noop,
};

export default Popover;
19 changes: 7 additions & 12 deletions components/popover/provider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,22 @@
/**
* External dependencies
*/
import { noop } from 'lodash';
import { Slot } from 'react-slot-fill';

/**
* WordPress dependencies
*/
import { Component } from '@wordpress/element';

class PopoverProvider extends Component {
Copy link
Member

Choose a reason for hiding this comment

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

Without context, this doesn't need to be a component class. I also don't think it needs to be a provider in the sense of having children, but rather a slot rendered directly in the layout component. Something like: <PopoverSlot />.

getChildContext() {
return {
popoverTarget: this.props.target,
};
}

render() {
return this.props.children;
return (
<div>
<div><Slot name="Popover" /></div>
<div>{ this.props.children }</div>
</div>
);
}
}

PopoverProvider.childContextTypes = {
popoverTarget: noop,
};

export default PopoverProvider;
14 changes: 0 additions & 14 deletions components/popover/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,19 +252,5 @@ describe( 'Popover', () => {

expect( wrapper.find( '.components-popover' ).prop( 'role' ) ).toBe( 'tooltip' );
} );

it( 'should render into provider context', () => {
const element = require( '@wordpress/element' );
jest.spyOn( element, 'createPortal' );
const target = document.createElement( 'div' );

mount(
<PopoverProvider target={ target }>
<Popover isOpen>Hello</Popover>
</PopoverProvider>
);

expect( element.createPortal.mock.calls[ 0 ][ 1 ] ).toBe( target );
} );
} );
} );
2 changes: 1 addition & 1 deletion editor/autosave-monitor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';

/**
* WordPress dependencies
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
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';
import { first, last } from 'lodash';

/**
Expand Down
2 changes: 1 addition & 1 deletion editor/block-settings-menu/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';

/**
* WordPress dependencies
Expand Down
2 changes: 1 addition & 1 deletion editor/block-switcher/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';
import { uniq, get, reduce, find } from 'lodash';
import clickOutside from 'react-click-outside';

Expand Down
2 changes: 1 addition & 1 deletion editor/document-title/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';
import { Component } from 'react';

/**
Expand Down
2 changes: 1 addition & 1 deletion editor/header/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';

/**
* WordPress 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
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';

/**
* WordPress 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
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';
import classnames from 'classnames';

/**
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
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';

/**
* WordPress 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
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';

/**
* WordPress 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
@@ -1,7 +1,7 @@
/**
* External dependencies
*/
import { connect } from 'react-redux';
import { connect } from 'preact-redux';
import classnames from 'classnames';
import { flowRight } from 'lodash';

Expand Down
26 changes: 12 additions & 14 deletions editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* External dependencies
*/
import { bindActionCreators } from 'redux';
import { Provider as ReduxProvider } from 'react-redux';
import { Provider as ReduxProvider } from 'preact-redux';
import { Provider as SlotFillProvider } from 'react-slot-fill';
import { flow, pick } from 'lodash';
import moment from 'moment-timezone';
Expand Down Expand Up @@ -78,12 +78,10 @@ export function createEditorInstance( id, post, settings ) {
store.dispatch( setInitialPost( post ) );

const providers = [
// Redux provider:
//
// - context.store

// Popover provider:
[
ReduxProvider,
{ store },
PopoverProvider,
],

// Slot / Fill provider:
Expand Down Expand Up @@ -112,14 +110,6 @@ export function createEditorInstance( id, post, settings ) {
{ settings },
],

// Popover provider:
//
// - context.popoverTarget
[
PopoverProvider,
{ target },
],

// APIProvider
//
// - context.getAPISchema
Expand All @@ -140,6 +130,14 @@ export function createEditorInstance( id, post, settings ) {
[
DropZoneProvider,
],

// Redux provider:
//
// - context.store
[
ReduxProvider,
{ store },
],
];

const createEditorElement = flow(
Expand Down
Loading