Skip to content

Modularize compat src and tests#2124

Merged
JoviDeCroock merged 14 commits into
masterfrom
compat-modules-3
Nov 15, 2019
Merged

Modularize compat src and tests#2124
JoviDeCroock merged 14 commits into
masterfrom
compat-modules-3

Conversation

@andrewiggins

Copy link
Copy Markdown
Member

compat/src/index.js started to get pretty big which I think was hindering good contributions to it. While trying to understand it, I discovered lots of disparate repetitions while working on this PR (those are captured in #2116).

My goal with this PR is to make knowing where a change should go in compat a little easier by breaking up index.js into separate modules, hopefully reducing future duplication and making it easier to change compat.

I also did the same exercise with the compat tests, cuz I found a good amount of duplication there too (and in one case that one copy of a test had been updated but not the other lol).

Total change:
compat.js.gz: -12 B

@coveralls

coveralls commented Nov 13, 2019

Copy link
Copy Markdown

Coverage Status

Coverage increased (+1.9%) to 100.0% when pulling 1bda565 on compat-modules-3 into a369d25 on master.

Comment thread compat/src/render.js
// ...but only on the first render, see #1828
if (parent._children == null) {
while (parent.firstChild) {
parent.removeChild(parent.firstChild);

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Most of the byte savings come from removing the call to preact/src/util.removeNode here and just calling removeChild directly since we are looping through the parent element anyway: b1443c5

Comment thread compat/src/index.js
import { assign, removeNode } from '../../src/util';
import { SuspenseList } from './suspense-list';
import { createPortal } from './portals';
import { render, REACT_ELEMENT_TYPE } from './render';

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

Fiddling with the order of the array imports led to some byte savings gains here

@andrewiggins

Copy link
Copy Markdown
Member Author

Forgot to mention that I'm exploring ways to make "preact/compat" more tree-shakeable and so another motivation for this change is to better isolate which parts of the code require which options hooks

Comment thread compat/src/forwardRef.js
import { assign } from './util';

let oldVNodeHook = options.vnode;
options.vnode = vnode => {

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

wondering if we should maybe keep these "side-effects" in a central place, maybe entrypoint so they don't bite us at some point

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

In my next PR I was actually playing with ways to only install options when a consumer needs them, to try and make preact/compat more tree-shakeable. This works well if each module contains its own option hook so it's easy to know what code is needed for that feature to work.

Though it does have a downside of potentially leading to duplication of options, but I think if we can come up with a pattern that enables tree-shaking, it might be worth it.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Hmm, maybe putting them in the same files should be in that PR then, if you can figure out a way to do it 🤷‍♀️

@marvinhagemeister marvinhagemeister left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

I love this! It's much easier to navigate the source now. Fantastic work Andre 🙌 💯

@cristianbote cristianbote left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Awesome job @andrewiggins! 🎉

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

6 participants