Try: Preact #2734

mtias · 2017-09-15T07:52:05Z

(Converting to pull request for better visibility.)

This explores using preact as the primitive powering the rendering mechanism of Gutenberg.

Known issues:

Avoid using element fragments in blocks (related to consistent block edit declarations).
Fix react-click-outside dependency.
Block focus issues.
Popover ref allocation with slot/fill.
componentDidCatch alternative. Support for componentDidCatch preactjs/preact#799

The two differences are: - Uses el.getDOMNode instead of ReactDOM.findDOMNode. - Doesn't inline the `ref` function within `render`, but binds a proper method to the instance.

adamsilverstein · 2017-09-15T12:43:43Z

@mtias Nice to see this PR, I've been playing around with React on some projects and impressed with its lightweight, performant approach and overall philosophy.

I gave the PR a test and it looks like some issues have been worked out, but I had trouble getting past issues with the popover - any hints on how to work on fixing that? I didn't understand your reference to "Popover ref allocation with slot/fill.".

In regard to componentDidCatch, this is something Preact itself will hopefully add: preactjs/preact#799

mcsf · 2017-09-15T17:35:41Z

I gave the PR a test and it looks like some issues have been worked out, but I had trouble getting past issues with the popover - any hints on how to work on fixing that? I didn't understand your reference to "Popover ref allocation with slot/fill.".

@adamsilverstein, I had a go at this yesterday. Haven't fixed it yet, but the gist seems to be that slight differences in the render lifecycle between React and Preact mean that the refs for the elements within the Fill wrapper aren't ready when Popover's componentDidUpdate gets called. Hence, this.nodes a value for 'anchor' but not for 'popover' or 'content'. Deferring certain calls yields some improvements, but they're inconsistent and feel fragile.

mtias · 2017-09-15T17:49:01Z

In regard to componentDidCatch, this is something Preact itself will hopefully add.

Yes, forgot to reference the PR over there. :)

adamsilverstein · 2017-09-15T18:07:12Z

but the gist seems to be that slight differences in the render lifecycle between React and Preact mean that the refs for the elements within the Fill wrapper aren't ready when Popover's componentDidUpdate gets called

Fun! Thats a good lead, I'll see if I can figure out why that is happening - that also explains why the popup sort of works the second time you try it.

aduth · 2017-09-17T17:01:55Z

blocks/library/freeform/old-editor.js

+					id={ id + '-toolbar' }
+					ref={ ref => this.ref = ref }
+					className="freeform-toolbar"
+				/>,


Comma here will be output as a string.

aduth · 2017-09-17T17:04:23Z

blocks/library/audio/index.js

-			return [
-				controls,
-				<div key="audio">
+			return (


While it means we can't treat edit as a component proper (i.e. assigned as class extends Component, which we don't support well for save anyways), I think we could still potentially support array returns by wrapping the return value from the function from the block rendering handler. That or if we identify common characteristics of a block "container", we could create a wrapper component like <Block> for the block implementer to use.

aduth · 2017-09-17T21:41:24Z

blocks/editable/provider.js

@@ -6,7 +6,7 @@ import { pick, noop } from 'lodash';
 /**
 * WordPress dependencies
 */
-import { Component } from '@wordpress/element';
+import { Component, Children } from '@wordpress/element';


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.

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.

aduth · 2017-09-17T21:45:53Z

blocks/library/paragraph/index.js

-		return [
-			focus && (
-				<BlockControls key="controls">
+		return <div>


For consistency, should this be parenthesis-wrapped?

aduth · 2017-09-17T21:47:53Z

components/popover/provider.js

@@ -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 {


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 />.

aduth · 2017-09-17T21:50:19Z

webpack.config.js

+			react: 'preact-compat',
+			'react-dom': 'preact-compat',
+			// Not necessary unless you consume a module using `createClass`
+			'create-react-class': 'preact-compat/lib/create-react-class',


Is this needed for the components we're using?

it might be needed for the react libraries we're using but yeah we could try to remove it and see

aduth · 2017-09-17T21:51:27Z

element/index.js

@@ -2,7 +2,7 @@
 * External dependencies
 */
 import { createElement, Component, cloneElement, Children } from 'react';
-import { render, findDOMNode, unstable_createPortal } from 'react-dom'; // eslint-disable-line camelcase
+import { render, findDOMNode } from 'react-dom'; // eslint-disable-line camelcase
 import { renderToStaticMarkup } from 'react-dom/server';


We should replace this with preact-render-to-string

https://github.com/developit/preact-render-to-string

gziolo · 2018-01-31T15:42:59Z

This turned out to be very useful when exploring if we can replace React with Preact. It is no longer up to date so I'm closing it.

youknowriad and others added 5 commits September 8, 2017 12:30

Try preact

a9b4e07

Avoid using element fragments in blocks

f45e4ba

Small element fixes

b699cf5

Fork react-click-outside into WithClickOutside

3379e61

The two differences are: - Uses el.getDOMNode instead of ReactDOM.findDOMNode. - Doesn't inline the `ref` function within `render`, but binds a proper method to the instance.

Replace usage of react-click-outside with WithClickOutside

acf0b64

mtias added the Framework Issues related to broader framework topics, especially as it relates to javascript label Sep 15, 2017

aaronjorbin mentioned this pull request Sep 15, 2017

Choosing the JavaScript Framework for Gutenberg (~WordPress) #2733

Closed

adamsilverstein mentioned this pull request Sep 15, 2017

Consider using Preact for Gutenberg rendering #2732

Closed

aduth reviewed Sep 17, 2017

View reviewed changes

aduth mentioned this pull request Oct 10, 2017

Components: Introduce portal-based slot / fill alternative, render Popover as slot / fill #2966

Merged

gziolo closed this Jan 31, 2018

gziolo deleted the try/preact branch January 31, 2018 15:43

npneeraj mentioned this pull request Jan 14, 2023

[Snyk] Upgrade react-native-webview from 11.6.2 to 11.26.0 npneeraj/gutenberg#3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Try: Preact #2734

Try: Preact #2734

mtias commented Sep 15, 2017 •

edited

Loading

adamsilverstein commented Sep 15, 2017

mcsf commented Sep 15, 2017

mtias commented Sep 15, 2017

adamsilverstein commented Sep 15, 2017

aduth Sep 17, 2017

aduth Sep 17, 2017

aduth Sep 17, 2017

youknowriad Sep 17, 2017

aduth Sep 17, 2017

aduth Sep 17, 2017

aduth Sep 17, 2017

youknowriad Sep 17, 2017 •

edited

Loading

aduth Sep 17, 2017

gziolo commented Jan 31, 2018

Try: Preact #2734

Try: Preact #2734

Conversation

mtias commented Sep 15, 2017 • edited Loading

adamsilverstein commented Sep 15, 2017

mcsf commented Sep 15, 2017

mtias commented Sep 15, 2017

adamsilverstein commented Sep 15, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad Sep 17, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gziolo commented Jan 31, 2018

mtias commented Sep 15, 2017 •

edited

Loading

youknowriad Sep 17, 2017 •

edited

Loading