profile
viewpoint
Sebastian Markbåge sebmarkbage Facebook San Francisco http://blog.calyptus.eu/

reactjs/rfcs 2832

RFCs for changes to React

sebmarkbage/art 915

Retained mode vector drawing API designed for multiple output modes. There's also a built-in SVG parser.

sebmarkbage/ecmascript-generator-expression 92

Proposal for do Generator Expressions in ECMAScript. Work in progress. Edit Add topics

sebmarkbage/ecmascript-undefined-propagation 79

ECMAScript proposal to relax the rules to return `undefined` for property access on `null` or `undefined` instead of throwing.

sebmarkbage/ecmascript-shallow-equal 47

A proposal for ECMAScript for Object.shallowEqual.

sebmarkbage/art-illustrator 16

This project provides Adobe Illustrator ExtendScripts to export graphics to ART Script files.

sebmarkbage/blink-devtools 11

This is an unofficial mirror of the Blink Developer Tools.

sebmarkbage/art-svg 9

SVG Parser for ART

pull request commentfacebook/react

Improve error boundary handling for unmounted subtrees

I acknowledge your desire and will attempt to look at this, this afternoon. If I don’t feel free to message me directly at an uncomfortable time of the day.

bvaughn

comment created time in 2 days

pull request commentfacebook/react

Nesting Fixture

It might be good to try this with a build of React that renames all the internal fields and symbols to make sure it actually works with a different implementation.

gaearon

comment created time in 6 days

pull request commentfacebook/react

Nesting Fixture

Does Redux count as Flux? :-)

Yes. A wolf in sheep's clothing is still a wolf.

gaearon

comment created time in 6 days

Pull request review commentfacebook/react

Nesting Fixture

+import React from 'react';+import ReactDOM from 'react-dom';+import ThemeContext from './shared/ThemeContext';+import {__RouterContext} from 'react-router';++/* eslint-disable react/jsx-pascal-case */++function Bridge({children, context}) {+  return (+    <ThemeContext.Provider value={context.theme}>+      <__RouterContext.Provider value={context.router}>

I'm confused about some of the comments about react-router.

Do you expect it to be duplicated or not? I.e. installed separately in /modern and separately in /legacy. Which might be two different versions of react-router.

If it's separately installed and duplicated then there's no problem here since it's two different context objects there are not two different renderers accessing it.

If it's not separately installed and instead uses the same instance of react-router then one of them has the wrong version of React when they created the context. So one of them will break. For example this call.

gaearon

comment created time in 6 days

pull request commentfacebook/react

Nesting Fixture

Maybe we should add a Flux store to demonstrate that? Seems non-obvious since it seems like you could put it in shared but that won't work.

gaearon

comment created time in 6 days

Pull request review commentfacebook/react

Nesting Fixture

+import React from 'react';+import {useContext} from 'react';+import {findDOMNode} from 'react-dom';++import ThemeContext from './shared/ThemeContext';+import lazyLegacyRoot from './lazyLegacyRoot';++// Lazy-load a component from the bundle using legacy React.+const Greeting = lazyLegacyRoot(() => import('../legacy/Greeting'));++export default function AboutPage() {+  findDOMNode();

What's this about? Doesn't this warn in all versions of React if called in render?

gaearon

comment created time in 6 days

pull request commentfacebook/react

Nesting Fixture

Where do I put a Flux store that is used by both legacy and modern? It's only ok if it doesn't any have dependencies on React.

gaearon

comment created time in 6 days

pull request commentfacebook/react

Improve error boundary handling for unmounted subtrees

I think it’s at least a strong indicator that we must do something since it is a potentially really bad bug.

We could log only. However we know that there is a lot of variability in if logs are logged correctly, how seriously people follow up on logs or even if logging is done at all.

Also if we don’t show anything to the user, there is something that indicates to the user that they should be careful. Like maybe they shouldn’t be so confident in future uses of the page or maybe they should reload.

I think that’s together is a pretty strong argument that the UI should change in some way. Now it could maybe change in other ways. Maybe there’s a way to isolate it or make it consistent. But seems like UI needs to change one way or another just to indicate that something on the page is not fully ok.

bvaughn

comment created time in 6 days

pull request commentfacebook/react

Improve error boundary handling for unmounted subtrees

An error that happens in renders are more ok to ignore because they’re not expected to have effects. In that case we can safely say that it’s better not to show the UI.

Errors that happen in effects are different though. They are expected to leave things in an inconsistent state.

There’s nothing to say that it’s actually isolated to that subtree. The unmount can affect other trees. Imaging refs or the similar thing in user space where the parent now has a reference to the deleted child.

React can’t really safely clean up even for mount or update effects by scoping it to the error boundary neither.

bvaughn

comment created time in 6 days

Pull request review commentfacebook/react

Double Invoke Effects in __DEV__

+/**+ * Copyright (c) Facebook, Inc. and its affiliates.+ *+ * This source code is licensed under the MIT license found in the+ * LICENSE file in the root directory of this source tree.+ *+ * @emails react-core+ */++'use strict';++let React;+let ReactFeatureFlags;+let ReactNoop;+let Scheduler;++describe('ReactDoubleInvokeEvents', () => {+  beforeEach(() => {+    jest.resetModules();+    React = require('react');+    ReactFeatureFlags = require('shared/ReactFeatureFlags');+    ReactNoop = require('react-noop-renderer');+    Scheduler = require('scheduler');+    ReactFeatureFlags.enableDoubleInvokingEffects = true;+  });++  it('double invoking for effects works properly', () => {+    function App({text}) {+      React.useEffect(() => {+        Scheduler.unstable_yieldValue('useEffect mount');+        return () => Scheduler.unstable_yieldValue('useEffect unmount');+      });++      React.useLayoutEffect(() => {+        Scheduler.unstable_yieldValue('useLayoutEffect mount');+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');+      });++      return text;+    }+    ReactNoop.act(() => {+      ReactNoop.render(<App text={'mount'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect mount',+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useEffect mount',+        'useEffect unmount',+        'useEffect mount',+      ]);+    } else {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect mount',+        'useEffect mount',+      ]);+    }++    ReactNoop.act(() => {+      ReactNoop.render(<App text={'update'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useEffect unmount',+        'useEffect mount',+        'useEffect unmount',+        'useEffect mount',+      ]);+    } else {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useEffect unmount',+        'useEffect mount',+      ]);+    }+  });+  it('first useEffect double invokes before second useEffect is called', () => {+    function App({text}) {+      React.useEffect(() => {+        Scheduler.unstable_yieldValue('useEffect One mount');+        return () => Scheduler.unstable_yieldValue('useEffect One unmount');+      });++      React.useEffect(() => {+        Scheduler.unstable_yieldValue('useEffect Two mount');+        return () => Scheduler.unstable_yieldValue('useEffect Two unmount');+      });++      return text;+    }++    ReactNoop.act(() => {+      ReactNoop.render(<App text={'mount'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useEffect One mount',+        'useEffect One unmount',+        'useEffect One mount',+        'useEffect Two mount',+        'useEffect Two unmount',+        'useEffect Two mount',+      ]);+    } else {+      expect(Scheduler).toHaveYielded([+        'useEffect One mount',+        'useEffect Two mount',+      ]);+    }++    ReactNoop.act(() => {+      ReactNoop.render(<App text={'update'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useEffect One unmount',+        'useEffect Two unmount',+        'useEffect One mount',+        'useEffect One unmount',+        'useEffect One mount',+        'useEffect Two mount',+        'useEffect Two unmount',+        'useEffect Two mount',

The thing we're simulating is effects three commits: 1) initial commit 2) commit to hide 3) commit to show.

So you basically have to replicate everything in commitRoot (but not exactly).

lunaruan

comment created time in 7 days

Pull request review commentfacebook/react

Double Invoke Effects in __DEV__

+/**+ * Copyright (c) Facebook, Inc. and its affiliates.+ *+ * This source code is licensed under the MIT license found in the+ * LICENSE file in the root directory of this source tree.+ *+ * @emails react-core+ */++'use strict';++let React;+let ReactFeatureFlags;+let ReactNoop;+let Scheduler;++describe('ReactDoubleInvokeEvents', () => {+  beforeEach(() => {+    jest.resetModules();+    React = require('react');+    ReactFeatureFlags = require('shared/ReactFeatureFlags');+    ReactNoop = require('react-noop-renderer');+    Scheduler = require('scheduler');+    ReactFeatureFlags.enableDoubleInvokingEffects = true;+  });++  it('double invoking for effects works properly', () => {+    function App({text}) {+      React.useEffect(() => {+        Scheduler.unstable_yieldValue('useEffect mount');+        return () => Scheduler.unstable_yieldValue('useEffect unmount');+      });++      React.useLayoutEffect(() => {+        Scheduler.unstable_yieldValue('useLayoutEffect mount');+        return () => Scheduler.unstable_yieldValue('useLayoutEffect unmount');+      });++      return text;+    }+    ReactNoop.act(() => {+      ReactNoop.render(<App text={'mount'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect mount',+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useEffect mount',+        'useEffect unmount',+        'useEffect mount',+      ]);+    } else {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect mount',+        'useEffect mount',+      ]);+    }++    ReactNoop.act(() => {+      ReactNoop.render(<App text={'update'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useEffect unmount',+        'useEffect mount',+        'useEffect unmount',+        'useEffect mount',+      ]);+    } else {+      expect(Scheduler).toHaveYielded([+        'useLayoutEffect unmount',+        'useLayoutEffect mount',+        'useEffect unmount',+        'useEffect mount',+      ]);+    }+  });+  it('first useEffect double invokes before second useEffect is called', () => {+    function App({text}) {+      React.useEffect(() => {+        Scheduler.unstable_yieldValue('useEffect One mount');+        return () => Scheduler.unstable_yieldValue('useEffect One unmount');+      });++      React.useEffect(() => {+        Scheduler.unstable_yieldValue('useEffect Two mount');+        return () => Scheduler.unstable_yieldValue('useEffect Two unmount');+      });++      return text;+    }++    ReactNoop.act(() => {+      ReactNoop.render(<App text={'mount'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useEffect One mount',+        'useEffect One unmount',+        'useEffect One mount',+        'useEffect Two mount',+        'useEffect Two unmount',+        'useEffect Two mount',+      ]);+    } else {+      expect(Scheduler).toHaveYielded([+        'useEffect One mount',+        'useEffect Two mount',+      ]);+    }++    ReactNoop.act(() => {+      ReactNoop.render(<App text={'update'} />);+    });++    if (__DEV__) {+      expect(Scheduler).toHaveYielded([+        'useEffect One unmount',+        'useEffect Two unmount',+        'useEffect One mount',+        'useEffect One unmount',+        'useEffect One mount',+        'useEffect Two mount',+        'useEffect Two unmount',+        'useEffect Two mount',

Yea the interleaving thing is important, but also consider passive effects.

It should be:

  1. all mutation effects
  2. all layout effects (including didmount)
  3. all passive effects
  4. all layout effect destroys (including willunmount)
  5. all passive effect destroys
  6. all layout effects (including didmount) again
  7. all passive effects again

I think you'll need to take the approach of running the whole traversals of the tree over and over again.

lunaruan

comment created time in 7 days

pull request commentfacebook/react

Don't emulate bubbling of the scroll event

What does onScrollCapture do?

gaearon

comment created time in 16 days

push eventfacebook/react

Sebastian Markbåge

commit sha d93c8faadac0a1cea4ba2a3c1333e78314a6e61a

Move Persistent Mode Optimization away from firstEffect (#19381) Persistent mode needs to clone a parent and add its children if a child has changed. We have an optimization in persistent mode where we don't do that if no child could've changed. If there are no effects scheduled for any child then there couldn't have been changes. Instead of checking for this on firstEffect, we now check this on the children's effectTag and subtreeTags. This is quite unfortunate because if we could just do this check a little bit later we would've already gotten it transferred to the completed work's subtreeTag. Now we have to loop over all the children and if any of them changed, we have to loop over them again. Doing at least two loops per parent.

view details

push time in 19 days

PR merged facebook/react

Reviewers
Remove firstEffect from Persistent Mode Optimization CLA Signed React Core Team

Builds on top of #19322 with one commit e829f133da79294ae766c905d1884e4f419b6992

Persistent mode needs to clone a parent and add its children if a child has changed.

We have an optimization in persistent mode where we don't do that if no child could've changed. If there are no effects scheduled for any child then there couldn't have been changes.

Instead of checking for this on firstEffect, we now check this on the children's effectTag and subtreeTags.

This is quite unfortunate because if we could just do this check a little bit later we would've already gotten it transferred to the completed work's subtreeTag. Now we have to loop over all the children and if any of them changed, we have to loop over them again. Doing at least two loops per parent.

One possible fix to this would be to move the resetChildLanes to be an explicit call within each completeWork branch before they return. That way we could call it before returning in this case.

+28 -7

11 comments

1 changed file

sebmarkbage

pr closed time in 19 days

push eventsebmarkbage/react

Sebastian Silbermann

commit sha e2d73e91cce37d66f7b5ef7512b3c735dcef2256

chore: Build react-dom/test-utils in codesandbox deploy (#19321)

view details

Dan Abramov

commit sha 26472c88979bb60746a47a660415df80775d25f9

Bubble onSubmit/onReset behind a feature flag (#19333)

view details

Bianca Del Carretto

commit sha 84479046f789be7ae19b410df4c6041e25a31a55

reference not add to dependencies if only its type is used as typeof arg (#19316) * reference not add to dependencies if only its type is used as typeof arg * Add a few more tests

view details

Dan Abramov

commit sha fe19b4247b97c20b4c6af92c022fcfccb45e3148

eslint-plugin-react-hooks@4.0.8

view details

Andrew Clark

commit sha d1f2143aa6f2bba622b244e296ccb89e1c6a7495

Use RetryLanes instead of event time (follow up) (#19335) Same logic as #19307. Uses RetryLanes instead of event time to determine if a render includes new updates.

view details

Brian Vaughn

commit sha fbc63863692d291b50e55400673845f7c81aff61

Fix DevTools handling of empty Suspense tag for legacy renderer versions (#19337)

view details

Bogdan Ponomarenko

commit sha 9ea0f6752da28a91bdb56382367e2a07390cb733

fix mistake in React devtools (#19336) Co-authored-by: Пономаренко Богдан <b.ponomarenko@tinkoff.ru>

view details

Brian Vaughn

commit sha 6d7555b014513125b0c229b9c6e45c903d974ff7

Scheduling profiler updates (#19334) * Make enableSchedulingProfiler static for profiling+experimental builds * Copied debug tracing and scheduler profiling to .new fork * Updated test @gate conditions

view details

Dominic Gannaway

commit sha 147179ae82039f38fa1a9a72402f578af8fb3ea3

Fix createEventHandle bug with comment containers (#19348)

view details

Dominic Gannaway

commit sha 566f613763d180a9bed110513c9fc453f2eca252

Revert "Fix createEventHandle bug with comment containers (#19348)" (#19354) This reverts commit 147179ae82039f38fa1a9a72402f578af8fb3ea3.

view details

Dominic Gannaway

commit sha c604b69973c40410384fe2ca70b34325c67cd22d

Revert "Revert "Fix createEventHandle bug with comment containers (#19348)" (#19354)" (#19365) This reverts commit 566f613763d180a9bed110513c9fc453f2eca252.

view details

Dominic Gannaway

commit sha 392277f0abc2251ea93b7debad4ae86cd0f1bdff

Revert "Scheduling profiler updates (#19334)" (#19366) This reverts commit 6d7555b014513125b0c229b9c6e45c903d974ff7.

view details

Dominic Gannaway

commit sha 45eef8b6b5df27c661b3e33e579abc11b563c65b

Devtools: improve getID guard (#19364)

view details

Brian Vaughn

commit sha a9ba5283d9ad1b1a1fa7ae1eaa217ea8cf0c1c4c

Disable DevTools minification (#19369) DevTools isn't being downloaded like typical JavaScript, so bundle size concerns don't apply. Parsing is still a consideration (so I'm open for discussion here) but I think this change would provide a couple of benefits: * People are more likely to *actually read* non-minified source code when e.g. a breakpoint is hit (as with the recent debugger statement) * Component stacks will be easier to parse on bug reports

view details

Dan Abramov

commit sha 4961833dbf3ac885668020e329236ea6b2b09f9a

Don't build shallow renderer UMD bundles

view details

Brian Vaughn

commit sha a89854bc936668d325cac9a22e2ebfa128c7addf

Fix Suspense-wrapping heuristic (and bump version numbers) (#19373) * Fixed suspense wrapping heuristic * Bump package numbers 16.13.1 -> 17.0.0-alpha.0 to fix DevTools Suspense heuristic

view details

Brian Vaughn

commit sha fed4ae0247883050aab6d77d9a83f9b6399d9a45

DevTools 4.8.1 -> 4.8.2 (and CHANGELOG)

view details

Brian Vaughn

commit sha a226b9b44591e2af85388fa88ddf76b3f3a9de6c

Effects list refactor continued: did-bailout flag (#19322) * Effects list rewrite * Improved deletions approach Process deletions as we traverse the tree during commit, before we process other effects. This has the result of better mimicking the previous sequencing. * Made deletions field nullable * Revert (no longer necessary) change to ReactNative test * Eagerly set Deletions effect on Fiber when adding child to deletions array * Initialize deletions array to null * Null out deletions array instead of splicing 🤡 * Removed TODO comment * Initial exploration on a did-bailout flag * fixed the rest of the bugs * Rolled temporary didBailout attribute into subtreeTag * addressed comments * Removed DidBailout subtree tag * Removed stale comment * use while loop instead of recursion for siblings * move bailout flag from while loop * Removed some unnecessary Deletion effectTags from children * Move Deletion effect assignment to deletions array initialization Co-authored-by: Luna <lunaris.ruan@gmail.com>

view details

Dominic Gannaway

commit sha e387c98ffabdf3808d34910b4493093dd975ec69

Fix bug with enableLegacyFBSupport click handlers (#19378)

view details

Ricky

commit sha bc4cd92cd542c56b82c72a2f9e8ef2a8e5cb14a6

Use jest-environment-jsdom-sixteen (#19288) * Use jest-environment-jsdom-sixteen * Update yarn.lock * Dedupe new jest packages in yarn.lock * Pull upstream changes

view details

push time in 19 days

pull request commentfacebook/react

Remove firstEffect from Persistent Mode Optimization

What is the suspense list issue you all are referring to?

@lunaruan SuspenseList with revealOrder="backwards" caused the effects of siblings to fire backwards. I.e. mount effects in a list of A, B, C would fire mount for C first, then B, then A. That's fine because we don't really guarantee it but that was the only case that happened.

sebmarkbage

comment created time in 21 days

push eventfacebook/react

Sebastian Markbåge

commit sha ab1f51700056667e5a2b97d5df7f118fea9868ac

isFBBundle should be true if it's FB for www or FB for RN (#19420) This ensures that the .fb.js override files kick in for RN. Otherwise we won't have FB specific exports in the isomorphic modules.

view details

push time in 23 days

PR merged facebook/react

isFBBundle should be true if it's FB for www or FB for RN CLA Signed React Core Team

This ensures that the .fb.js override files kick in for RN. Otherwise we won't have FB specific exports in the isomorphic modules.

+11 -6

3 comments

1 changed file

sebmarkbage

pr closed time in 23 days

push eventsebmarkbage/react

Sebastian Markbage

commit sha 3960bc64d985c79ff497092dce5d86718ad6c027

isFBBundle should be true if it's FB for www or FB for RN This ensures that the .fb.js override files kick in for RN. Otherwise we won't have FB specific exports in the isomorphic modules.

view details

push time in 23 days

Pull request review commentfacebook/react

isFBBundle should be true if it's FB for www or FB for RN

 function getPlugins(     bundleType === RN_FB_DEV ||     bundleType === RN_FB_PROD ||     bundleType === RN_FB_PROFILING;-  const shouldStayReadable = isFBBundle || isRNBundle || forcePrettyOutput;+  const shouldStayReadable = isFBWWWBundle || isRNBundle || forcePrettyOutput;

Arguably shouldStayReadable should be false for non-FB since we don't trust the minifier.

sebmarkbage

comment created time in 23 days

PR opened facebook/react

Reviewers
isFBBundle should be true if it's FB for www or FB for RN

This ensures that the .fb.js override files kick in for RN. Otherwise we won't have FB specific exports in the isomorphic modules.

+11 -6

0 comment

1 changed file

pr created time in 23 days

create barnchsebmarkbage/react

branch : rnfileoverride

created branch time in 23 days

pull request commentfacebook/react

Remove firstEffect from Persistent Mode Optimization

Accumulating the effectTag as we go is effectively what the effect list did. However that has some downsides too. It makes rendering something only to throw it out difficult. It also makes things order dependent.

Interestingly I think the new refactor will “fix” the suspense list issue by making effects fire in first-to-last child order instead of the reveal order as was before.

appendAllChildren is another one of those that would be nice to move to happen inside the children and append to the parent but it suffers from the same problem.

Moving it to the complete phase as a second pass should work though. It also allows passes to ignore it if it knows it doesn’t have to like if something is Offscreen. However it also requires us to remember to call it.

sebmarkbage

comment created time in a month

PR opened facebook/react

Reviewers
Remove firstEffect from Persistent Mode Optimization

Builds on top of #19322

Persistent mode needs to clone a parent and add its children if a child has changed.

We have an optimization in persistent mode where we don't do that if no child could've changed. If there are no effects scheduled for any child then there couldn't have been changes.

Instead of checking for this on firstEffect, we now check this on the children's effectTag and subtreeTags.

This is quite unfortunate because if we could just do this check a little bit later we would've already gotten it transferred to the completed work's subtreeTag. Now we have to loop over all the children and if any of them changed, we have to loop over them again. Doing at least two loops per parent.

One possible fix to this would be to move the resetChildLanes to be an explicit call within each completeWork branch before they return. That way we could call it before returning in this case.

+444 -238

0 comment

11 changed files

pr created time in a month

create barnchsebmarkbage/react

branch : persistentfix

created branch time in a month

Pull request review commentfacebook/react

Effects list refactor continued: did-bailout flag

 function resetChildLanes(completedWork: Fiber) {         newChildLanes,         mergeLanes(child.lanes, child.childLanes),       );++      if (!didBailout) {

Nit: It might be better to fork this loop into two and check the boolean before entering each loop instead of checking it for each iteration.

In fact, we probably could just copy the childLanes field from "current" since it must be the same then.

bvaughn

comment created time in a month

Pull request review commentfacebook/react

Effects list refactor continued: did-bailout flag

 function resetChildLanes(completedWork: Fiber) {     let actualDuration = completedWork.actualDuration;     let treeBaseDuration = ((completedWork.selfBaseDuration: any): number); -    // When a fiber is cloned, its actualDuration is reset to 0. This value will-    // only be updated if work is done on the fiber (i.e. it doesn't bailout).-    // When work is done, it should bubble to the parent's actualDuration. If-    // the fiber has not been cloned though, (meaning no work was done), then-    // this value will reflect the amount of time spent working on a previous-    // render. In that case it should not bubble. We determine whether it was-    // cloned by comparing the child pointer.-    const shouldBubbleActualDurations =-      completedWork.alternate === null ||-      completedWork.child !== completedWork.alternate.child;-     let child = completedWork.child;     while (child !== null) {       newChildLanes = mergeLanes(         newChildLanes,         mergeLanes(child.lanes, child.childLanes),       );-      if (shouldBubbleActualDurations) {++      if (!didBailout) {

Nit: It might be better to fork this loop into two and check the boolean before entering each loop instead of checking it for each iteration.

bvaughn

comment created time in a month

Pull request review commentfacebook/react

Effects list refactor continued: did-bailout flag

 function commitRootImpl(root, renderPriorityLevel) { }  function commitBeforeMutationEffects(fiber: Fiber) {

As a convention, I've used firstChild as the name of the parameter when it's conceptually passed a linked list of children rather than a specific fiber.

https://github.com/facebook/react/blob/master/packages/react-reconciler/src/ReactFiberBeginWork.new.js#L2453

bvaughn

comment created time in a month

Pull request review commentfacebook/react

Effects list refactor

 function commitRootImpl(root, renderPriorityLevel) {   return null; } -function commitBeforeMutationEffects() {-  while (nextEffect !== null) {-    const current = nextEffect.alternate;+function commitBeforeMutationEffects(fiber: Fiber) {+  if (fiber.deletions !== null) {+    commitBeforeMutationEffectsDeletions(fiber.deletions);+  } -    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {-      if ((nextEffect.effectTag & Deletion) !== NoEffect) {-        if (doesFiberContain(nextEffect, focusedInstanceHandle)) {-          shouldFireAfterActiveInstanceBlur = true;-          beforeActiveInstanceBlur();-        }-      } else {-        // TODO: Move this out of the hot path using a dedicated effect tag.-        if (-          nextEffect.tag === SuspenseComponent &&-          isSuspenseBoundaryBeingHidden(current, nextEffect) &&-          doesFiberContain(nextEffect, focusedInstanceHandle)-        ) {-          shouldFireAfterActiveInstanceBlur = true;-          beforeActiveInstanceBlur();-        }-      }+  if (fiber.child !== null) {+    const primarySubtreeTag =+      fiber.subtreeTag & (Deletion | Snapshot | Passive | Placement);+    if (primarySubtreeTag !== NoEffect) {+      commitBeforeMutationEffects(fiber.child);     }+  } -    const effectTag = nextEffect.effectTag;-    if ((effectTag & Snapshot) !== NoEffect) {-      setCurrentDebugFiberInDEV(nextEffect);+  if (__DEV__) {+    setCurrentDebugFiberInDEV(fiber);+    invokeGuardedCallback(null, commitBeforeMutationEffectsImpl, null, fiber);+    if (hasCaughtError()) {+      const error = clearCaughtError();+      captureCommitPhaseError(fiber, error);+    }+    resetCurrentDebugFiberInDEV();+  } else {+    try {+      commitBeforeMutationEffectsImpl(fiber);+    } catch (error) {+      captureCommitPhaseError(fiber, error);+    }+  } -      commitBeforeMutationEffectOnFiber(current, nextEffect);+  if (fiber.sibling !== null) {+    commitBeforeMutationEffects(fiber.sibling);

It's unusually to have very deep trees but it's not that unusual to have a few hundred of items in a list. This could cause a stack overflow in that case. We should probably keep the while loop for siblings but not for the recursive effects.

bvaughn

comment created time in a month

Pull request review commentfacebook/react

Effects list refactor

 function FiberNode(    // Effects   this.effectTag = NoEffect;+  this.subtreeTag = NoEffect;+  this.deletions = [];

Can we make this nullable instead of allocating an array?

bvaughn

comment created time in a month

Pull request review commentfacebook/react

Effects list refactor

 function resetChildLanes(completedWork: Fiber) {     let actualDuration = completedWork.actualDuration;     let treeBaseDuration = ((completedWork.selfBaseDuration: any): number); -    // When a fiber is cloned, its actualDuration is reset to 0. This value will-    // only be updated if work is done on the fiber (i.e. it doesn't bailout).-    // When work is done, it should bubble to the parent's actualDuration. If-    // the fiber has not been cloned though, (meaning no work was done), then-    // this value will reflect the amount of time spent working on a previous-    // render. In that case it should not bubble. We determine whether it was-    // cloned by comparing the child pointer.-    const shouldBubbleActualDurations =-      completedWork.alternate === null ||-      completedWork.child !== completedWork.alternate.child;-     let child = completedWork.child;     while (child !== null) {       newChildLanes = mergeLanes(         newChildLanes,         mergeLanes(child.lanes, child.childLanes),       );-      if (shouldBubbleActualDurations) {++      subtreeTag |= child.subtreeTag;+      subtreeTag |= child.effectTag & HostEffectMask;+      if (child.deletions.length > 0) {+        subtreeTag |= Deletion;

Can we add this tag where we do child.deletions.push(...) so we only do this work when we hit a deletion in reconciliation instead of checking this for every Fiber in a render?

bvaughn

comment created time in a month

Pull request review commentfacebook/react

[DO NOT MERGE] Effects list refactor

 function commitRootImpl(root, renderPriorityLevel) {   return null; } -function commitBeforeMutationEffects() {-  while (nextEffect !== null) {-    const current = nextEffect.alternate;+function commitBeforeMutationEffects(fiber: Fiber) {+  if (fiber.child !== null) {+    const primarySubtreeTag =+      fiber.subtreeTag & (Deletion | Snapshot | Passive | Placement);+    if (primarySubtreeTag !== NoEffect) {+      commitBeforeMutationEffects(fiber.child);+    }+  } -    if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {-      if ((nextEffect.effectTag & Deletion) !== NoEffect) {-        if (doesFiberContain(nextEffect, focusedInstanceHandle)) {-          shouldFireAfterActiveInstanceBlur = true;-          beforeActiveInstanceBlur();-        }-      } else {-        // TODO: Move this out of the hot path using a dedicated effect tag.-        if (-          nextEffect.tag === SuspenseComponent &&-          isSuspenseBoundaryBeingHidden(current, nextEffect) &&-          doesFiberContain(nextEffect, focusedInstanceHandle)-        ) {-          shouldFireAfterActiveInstanceBlur = true;-          beforeActiveInstanceBlur();-        }-      }+  if (__DEV__) {+    setCurrentDebugFiberInDEV(fiber);+    invokeGuardedCallback(null, commitBeforeMutationEffectsImpl, null, fiber);+    if (hasCaughtError()) {+      const error = clearCaughtError();+      captureCommitPhaseError(fiber, error);+    }+    resetCurrentDebugFiberInDEV();+  } else {+    try {+      commitBeforeMutationEffectsImpl(fiber);+    } catch (error) {+      captureCommitPhaseError(fiber, error);     }+  } -    const effectTag = nextEffect.effectTag;-    if ((effectTag & Snapshot) !== NoEffect) {-      setCurrentDebugFiberInDEV(nextEffect);+  if (fiber.sibling !== null) {+    commitBeforeMutationEffects(fiber.sibling);+  }+} -      commitBeforeMutationEffectOnFiber(current, nextEffect);+function commitBeforeMutationEffectsImpl(fiber: Fiber) {+  const current = fiber.alternate;+  const effectTag = fiber.effectTag; -      resetCurrentDebugFiberInDEV();+  if (!shouldFireAfterActiveInstanceBlur && focusedInstanceHandle !== null) {+    // The "deletions" array on a Fiber holds previous children that were marked for deletion.+    // However the overall commit sequence relies on child deletions being processed before parent's effects,+    // so to satisfy that we also process the parent's "deletions" array (the deletion of siblings).+    commitBeforeMutationEffectsDeletions(fiber.deletions);+    const parent = fiber.return;+    if (parent) {+      commitBeforeMutationEffectsDeletions(parent.deletions);     }-    if ((effectTag & Passive) !== NoEffect) {-      // If there are passive effects, schedule a callback to flush at-      // the earliest opportunity.-      if (!rootDoesHavePassiveEffects) {-        rootDoesHavePassiveEffects = true;-        scheduleCallback(NormalSchedulerPriority, () => {-          flushPassiveEffects();-          return null;-        });-      }++    // Check to see if the focused element was inside of a hidden (Suspense) subtree.+    // TODO: Move this out of the hot path using a dedicated effect tag.+    if (+      fiber.tag === SuspenseComponent &&+      isSuspenseBoundaryBeingHidden(current, fiber) &&+      doesFiberContain(fiber, focusedInstanceHandle)+    ) {+      shouldFireAfterActiveInstanceBlur = true;+      beforeActiveInstanceBlur();+    }+  }++  if ((effectTag & Snapshot) !== NoEffect) {+    setCurrentDebugFiberInDEV(fiber);+    commitBeforeMutationEffectOnFiber(current, fiber);+    resetCurrentDebugFiberInDEV();+  }++  if ((effectTag & Passive) !== NoEffect) {+    // If there are passive effects, schedule a callback to flush at+    // the earliest opportunity.+    if (!rootDoesHavePassiveEffects) {+      rootDoesHavePassiveEffects = true;+      scheduleCallback(NormalSchedulerPriority, () => {+        flushPassiveEffects();+        return null;+      });     }-    nextEffect = nextEffect.nextEffect;   } } -function commitMutationEffects(root: FiberRoot, renderPriorityLevel) {-  // TODO: Should probably move the bulk of this function to commitWork.-  while (nextEffect !== null) {-    setCurrentDebugFiberInDEV(nextEffect);+function commitBeforeMutationEffectsDeletions(deletions: Array<Fiber>) {+  for (let i = 0; i < deletions.length; i++) {+    const fiber = deletions[i]; -    const effectTag = nextEffect.effectTag;+    // TODO (effects) It would be nice to avoid calling doesFiberContain()+    // Maybe we can repurpose one of the subtreeTag positions for this instead?+    // Use it to store which part of the tree the focused instance is in?+    // This assumes we can safely determine that instance during the "render" phase. -    if (effectTag & ContentReset) {-      commitResetTextContent(nextEffect);+    if (doesFiberContain(fiber, ((focusedInstanceHandle: any): Fiber))) {+      shouldFireAfterActiveInstanceBlur = true;+      beforeActiveInstanceBlur();     }+  }+} -    if (effectTag & Ref) {-      const current = nextEffect.alternate;-      if (current !== null) {-        commitDetachRef(current);-      }+function commitMutationEffects(+  fiber: Fiber,+  root: FiberRoot,+  renderPriorityLevel,+) {

What if we called commitMutationEffectsDeletions(fiber.deletions, ...) here instead of in commitMutationEffectsImpl?

bvaughn

comment created time in a month

pull request commentfacebook/react

Adds React.unstable_useSnapshotBeforeCommit

I don’t think we’ll ship this particular implementation in a stable. There are other considerations for a full RFC.

trueadm

comment created time in a month

issue commentfacebook/jsx

Can we move JSX to be an extension of ES Spec that evolves forward like EcmaScript + TC39 ?

I'm all for JSX being an extension of ECMAScript like E4X was. Probably as a separate spec and technical group. Same as ECMA-402. It likely would be considered optional and not part of the browser. We would be supportive of anyone within TC39 to drive a concrete proposal for that. It might be somewhat controversial to lift it up even to that level because people like to pretend that it's fringe and hope that it will go away as E4X.

I think the main thing to keep in mind is that a lot of the proposals that are the most interesting ones are breaking changes. One decision that will have to be made is whether this new organization will allow for versioning breaking changes which ECMA-262 and ECMA-402 does not, and doesn't have a process for dealing with breaking changes.

I was originally hoping that we'd be able to make a bulk of breaking changes such as JSX 2.0 before standardizing so that the next one could be more stable after that. There wasn't a clear winning set of changes and enough want to warrant it.

We'd probably be against any standardization of runtime semantics since that is something that is very use case specific and has changed a number of times already. I think it would be difficult to get consensus on that but maybe there's some clever extension mechanism that could allow for some subset to be specified.

nojvek

comment created time in 2 months

pull request commentfacebook/react

Initial currentLanePriority implementation

For perspective the way I look at setState is that in an optimal reactive system it's essentially this:

setState = (reducer) => {
  inst.nextState = reducer(inst.nextState);
  if (!inst.isDirty) {
    inst.isDirty = true;
    dirtyInstances.push(inst);
  }
}

The goal is to get close to this but we're very far away from this for a simple state change atm. I think we might need to do something more radical.

rickhanlonii

comment created time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 7f28234f8468d23dac7980be55e1a20f86a7b915

Enable component stacks everywhere except RN (#19120) This would still affect test renderer and isomorphic in RN.

view details

push time in 2 months

PR merged facebook/react

Enable component stacks everywhere except RN CLA Signed React Core Team

This leaves out RN but would still affect test renderer and isomorphic in RN. I'll work on syncing RN.

+11 -8

3 comments

7 changed files

sebmarkbage

pr closed time in 2 months

push eventsebmarkbage/react

Sebastian Markbage

commit sha 5fbc2293586ff13278a54a1267eaa9e9ea3a4992

Enable component stacks everywhere except RN This would still affect test renderer and isomorphic in RN.

view details

push time in 2 months

PR opened facebook/react

Enable component stacks everywhere except RN

This leaves out RN but would still affect test renderer and isomorphic in RN. I'll work on syncing RN.

+5 -6

0 comment

6 changed files

pr created time in 2 months

create barnchsebmarkbage/react

branch : enablecomponentstacks

created branch time in 2 months

Pull request review commentfacebook/react

Remove synamic modern event system flag for FB

 const importSideEffects = Object.freeze({   'react-dom/server': HAS_NO_SIDE_EFFECTS_ON_IMPORT,   'react/jsx-dev-runtime': HAS_NO_SIDE_EFFECTS_ON_IMPORT,   'react-fetch/node': HAS_NO_SIDE_EFFECTS_ON_IMPORT,+  'react-dom': HAS_NO_SIDE_EFFECTS_ON_IMPORT,

Why is this new?

trueadm

comment created time in 2 months

pull request commentreactjs/react-codemod

add update-react-import codemod

❤️

lunaruan

comment created time in 2 months

PR opened facebook/react

[DO NOT LAND] New infra on old RN

This is just so I can sync an old version for the JSX upgrade.

+130 -11

0 comment

5 changed files

pr created time in 2 months

create barnchsebmarkbage/react

branch : rnsync2

created branch time in 2 months

push eventsebmarkbage/react

Sebastian Markbåge

commit sha d65a2006609ac3e7f5f708611a50ec65846acd81

Build FB specific Isomorphic Bundles (#19049) We need this so we can version them separately and use different feature flags than we use for OSS RN. I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

view details

push time in 2 months

push eventsebmarkbage/react

Sebastian Markbåge

commit sha 71da0b24c25f982c228827b43faa8dfb35df215a

Build FB specific Isomorphic Bundles (#19049) We need this so we can version them separately and use different feature flags than we use for OSS RN. I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

view details

push time in 2 months

PR opened facebook/react

[DO NOT LAND] New infra on old RN

This is just so I can sync an old version.

+118 -1

0 comment

4 changed files

pr created time in 2 months

push eventsebmarkbage/react

push time in 2 months

create barnchsebmarkbage/react

branch : rnsync

created branch time in 2 months

PR opened facebook/react

Reviewers
Don't build FB RN bundles in experimental

We don't have a "modern" build for RN yet.

We don't have experimental OSS builds neither but I think those renderers should probably go on npm so that you could use them as experimental.

+66 -45

0 comment

1 changed file

pr created time in 2 months

push eventsebmarkbage/react

Sebastian Markbåge

commit sha cb141681750c8221ac799074df09df2bb448c7a4

Remove unnecessary throw catch (#19044) This was originally added so you could use "break on caught exceptions" but that feature is pretty useless these days since it's used for feature detection and Suspense. The better pattern is to use the stack trace, jump to source and set a break point here. Since DevTools injects its own console.error, we could inject a "debugger" statement in there. Conditionally. E.g. React DevTools could have a flag to toggle "break on warnings".

view details

Sebastian Markbåge

commit sha 89edb0eae34be30954bcbdbca69467c5b0fbcb20

Enable component stack locations in www (#19047)

view details

Brian Vaughn

commit sha 2efe63d99cdeb338077bf148babffd7bb599d182

DevTools: Add break-on-warn feature (#19048) This commit adds a new tab to the Settings modal: Debugging This new tab has the append component stacks feature and a new one: break on warn This new feature adds a debugger statement into the console override

view details

Sebastian Markbåge

commit sha 1d85bb3ce13401644a5e345f8bc84522c59a951c

Build FB specific Isomorphic Bundles (#19049) We need this so we can version them separately and use different feature flags than we use for OSS RN. I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

view details

Sebastian Markbage

commit sha f51f0ac51657d53050f612bbf17e695dd088809e

Don't build FB RN bundles in experimental We don't have a "modern" build for RN yet. We don't have experimental OSS builds neither but I think those renderers should probably go on npm so that you could use them as experimental.

view details

push time in 2 months

push eventsebmarkbage/react

Sebastian Markbage

commit sha 8377d769153f7daf51bb594378c1141ac47dee0c

Don't build FB RN bundles in experimental We don't have a "modern" build for RN yet. We don't have experimental OSS builds neither but I think those renderers should probably go on npm so that you could use them as experimental.

view details

push time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 1d85bb3ce13401644a5e345f8bc84522c59a951c

Build FB specific Isomorphic Bundles (#19049) We need this so we can version them separately and use different feature flags than we use for OSS RN. I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

view details

push time in 2 months

PR merged facebook/react

Reviewers
Build FB specific Isomorphic Bundles CLA Signed React Core Team

We need this so we can version them separately and use different feature flags than we use for OSS RN.

I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

+31 -1

4 comments

3 changed files

sebmarkbage

pr closed time in 2 months

push eventsebmarkbage/react

Sebastian Markbage

commit sha 8ad12ec314600a6640263dd2f9ca6798039bd98c

Build FB specific Isomorphic Bundles We need this so we can version them separately and use different feature flags than we use for OSS RN. I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

view details

push time in 2 months

push eventsebmarkbage/react

Sebastian Markbage

commit sha 435d8d902c8cb17477fcf91be39aa1a5a8c78de5

Build FB specific Isomorphic Bundles We need this so we can version them separately and use different feature flags than we use for OSS RN. I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

view details

push time in 2 months

push eventsebmarkbage/react

Sebastian Markbage

commit sha 13785b925cfa77604981855ee033a4a452835906

Build FB specific Isomorphic Bundles We need this so we can version them separately and use different feature flags than we use for OSS RN. I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

view details

push time in 2 months

pull request commentfacebook/react

Build FB specific Isomorphic Bundles

hm. I'll also need to do this with scheduler and maybe react-test-renderer I think.

sebmarkbage

comment created time in 2 months

PR opened facebook/react

Reviewers
Build FB specific Isomorphic Bundles

We need this so we can version them separately and use different feature flags than we use for OSS RN.

I put them in a separate facebook-react-native folder which won't go into the RN GH repo. I plan on moving the renderers there too but not yet.

+11 -0

0 comment

2 changed files

pr created time in 2 months

create barnchsebmarkbage/react

branch : rnisomorphic

created branch time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 89edb0eae34be30954bcbdbca69467c5b0fbcb20

Enable component stack locations in www (#19047)

view details

push time in 2 months

PR merged facebook/react

Reviewers
Enable component stack locations in www CLA Signed React Core Team

I'd like to enable this everywhere but haven't tested it in RN yet and enabling it isomorphic would affect RN.

+2 -1

3 comments

1 changed file

sebmarkbage

pr closed time in 2 months

PR opened facebook/react

Reviewers
Enable component stack locations in www

I'd like to enable this everywhere but haven't tested it in RN yet.

+2 -1

0 comment

1 changed file

pr created time in 2 months

create barnchsebmarkbage/react

branch : hardcodecomponentstacks

created branch time in 2 months

issue openedfacebook/react

[DevTools Feature Request] Break on Warnings

It's be nice to have a toggle to pause the debugger when warnings fire so you can inspect the stack as it's happening.

console.error = function() {
  ...
  if (isBreakOn) {
    debugger;
  }
}

See https://github.com/facebook/react/pull/19044

created time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha cb141681750c8221ac799074df09df2bb448c7a4

Remove unnecessary throw catch (#19044) This was originally added so you could use "break on caught exceptions" but that feature is pretty useless these days since it's used for feature detection and Suspense. The better pattern is to use the stack trace, jump to source and set a break point here. Since DevTools injects its own console.error, we could inject a "debugger" statement in there. Conditionally. E.g. React DevTools could have a flag to toggle "break on warnings".

view details

push time in 2 months

PR merged facebook/react

Reviewers
Remove unnecessary throw catch CLA Signed React Core Team

This was originally added so you could use "break on caught exceptions" but that feature is pretty useless these days since it's used for feature detection and Suspense.

The better pattern is to use the stack trace, jump to source and set a break point here.

Since DevTools injects its own console.error, we could inject a "debugger" statement in there. Conditionally. E.g. React DevTools could have a flag to toggle "break on warnings".

+0 -10

3 comments

1 changed file

sebmarkbage

pr closed time in 2 months

PR opened facebook/react

Reviewers
Remove unnecessary throw catch

This was originally added so you could use "break on caught exceptions" but that feature is pretty useless these days since it's used for feature detection and Suspense.

The better pattern is to use the stack trace, jump to source and set a break point here.

Since DevTools injects its own console.error, we could inject a "debugger" statement in there. Conditionally. E.g. React DevTools could have a flag to toggle "break on warnings".

+0 -10

0 comment

1 changed file

pr created time in 2 months

create barnchsebmarkbage/react

branch : rmthrowcatch

created branch time in 2 months

create barnchsebmarkbage/react

branch : rmextraframes

created branch time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha c03b8661a990401bf663d2175597ef8bb6947921

Upgrade Closure Compiler (#19041) The Symbol bug has now been fixed so we can remove the hack that renames the global variable.

view details

push time in 2 months

PR merged facebook/react

Upgrade Closure Compiler CLA Signed React Core Team

The Symbol bug has now been fixed so we can remove the hack that renames the global variable.

Diff after upgrading: https://github.com/sebmarkbage/react-builds/commit/d77c303fcaf516c0335e8f42d5e489f0e1b76aa8

The upgrade leaves an unnecessary return statement in the output in one place which is a tiny regression but meh. We can fix the source.

Diff after removing Symbol hack: https://github.com/sebmarkbage/react-builds/commit/a5d7d93107f763f31ad14454c23b50e9c454cc1e

This just shifts where the line breaks are in the out since it used to be longer (SymbolTmp vs Symbol).

+37 -49

3 comments

3 changed files

sebmarkbage

pr closed time in 2 months

PR opened facebook/react

Reviewers
Upgrade Closure Compiler

The Symbol bug has now been fixed so we can remove the hack that renames the global variable.

Diff after upgrading: https://github.com/sebmarkbage/react-builds/commit/d77c303fcaf516c0335e8f42d5e489f0e1b76aa8

The upgrade leaves an unnecessary return statement in the output in one place which is a tiny regression but meh. We can fix the source.

Diff after removing Symbol hack: https://github.com/sebmarkbage/react-builds/commit/a5d7d93107f763f31ad14454c23b50e9c454cc1e

This just shifts where the line breaks are in the out since it used to be longer (SymbolTmp vs Symbol).

+37 -49

0 comment

3 changed files

pr created time in 2 months

create barnchsebmarkbage/react

branch : upgradeclosurecompiler

created branch time in 2 months

push eventsebmarkbage/react-builds

Sebastian Markbage

commit sha ac2dc2bd362f5aae608f2ef29835f5af44da2069

Before

view details

Sebastian Markbage

commit sha d77c303fcaf516c0335e8f42d5e489f0e1b76aa8

After

view details

Sebastian Markbage

commit sha a5d7d93107f763f31ad14454c23b50e9c454cc1e

After removing Symbol hack

view details

push time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 6d375f3078b6b58afb9c07dce3c5144344d8d3de

Revert autofix lint (#19040) I accidentally committed this since I had it on locally so I didn't have to manually convert things to const. However, this causes things to always pass lint since CI also runs this.

view details

push time in 2 months

PR merged facebook/react

Reviewers
Revert autofix lint CLA Signed React Core Team

I accidentally committed this since I had it on locally so I didn't have to manually convert things to const.

However, this causes things to always pass lint since CI also runs this which fixes the lint violations in CI without committing it.

We should probably add this as an option to the command line tool. Ideally all the eslint options should be passable.

+4 -5

5 comments

1 changed file

sebmarkbage

pr closed time in 2 months

push eventsebmarkbage/react

Sebastian Markbåge

commit sha 76f157e3dd18d0501b4ed083e54b444ce11d232f

Add simple Node build (#19022) The webpack plugin doesn't really need a separate prod and dev build. It also needs to be ES2015 otherwise we can't extend native classes.

view details

Sebastian Markbåge

commit sha 2e7cc949ae7c7ed5a583d15b4ea32c68c7730dab

Remove www builds of fetch (#19038) I don't think we'll ever use this just because we have such a unique set up for network delivery so we'll use something custom for this case. Also, we don't need a profiling build for this since it doesn't have an entry point.

view details

Sebastian Markbåge

commit sha 8f511754dbe3651e2e93b6264e2e0e230b936a38

Prettier wants me to change this (#19039)

view details

Sebastian Markbage

commit sha 1ce8fdd3c7b1fa7338c377172076338974a0aa97

Revert autofix lint I accidentally committed this since I had it on locally so I didn't have to manually convert things to const. However, this causes things to always pass lint since CI also runs this.

view details

push time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 8f511754dbe3651e2e93b6264e2e0e230b936a38

Prettier wants me to change this (#19039)

view details

push time in 2 months

PR merged facebook/react

Reviewers
Lint autofix wants me to fix this CLA Signed React Core Team

I'm not sure why this isn't just failing the lint on CI though. It's supposed to fail if const is not used.

+1 -1

4 comments

1 changed file

sebmarkbage

pr closed time in 2 months

pull request commentfacebook/react

Lint autofix wants me to fix this

I'll just merge this to unblock reenabling the lint.

sebmarkbage

comment created time in 2 months

pull request commentfacebook/react

Revert autofix lint

This reveals this violation. https://github.com/facebook/react/pull/19039

sebmarkbage

comment created time in 2 months

pull request commentfacebook/react

Revert autofix lint

Ya'll probably don't see it locally because it runs against only changed files. The way that's implemented doesn't work with how I use git so it runs against everything for me.

sebmarkbage

comment created time in 2 months

push eventsebmarkbage/react

Sebastian Markbage

commit sha 2455d92a907c547084f002e119fc70dc2d7c52ea

Revert autofix lint I accidentally committed this since I had it on locally so I didn't have to manually convert things to const. However, this causes things to always pass lint since CI also runs this.

view details

push time in 2 months

PR opened facebook/react

Reviewers
Revert autofix lint

I accidentally committed this since I had it on locally so I didn't have to manually convert things to const.

However, this causes things to always pass lint since CI also runs this which fixes the bugs in CI.

We should probably add this as an option to the command line tool. Ideally all the eslint options should be passable.

+1 -1

0 comment

1 changed file

pr created time in 2 months

create barnchsebmarkbage/react

branch : disableautofix

created branch time in 2 months

PR opened facebook/react

Reviewers
Lint autofix wants me to fix this

I'm not sure why this isn't just failing the lint on CI though. It's supposed to fail if const is not used.

+1 -1

0 comment

1 changed file

pr created time in 2 months

push eventsebmarkbage/react

Brian Vaughn

commit sha 1e3b0b520e1d77ed3926ac9e41bea3a5c7309cad

Added a null check around memoizedProps

view details

Brian Vaughn

commit sha a39d9c3dff451c5280dded9418a627f37871b94b

4.0.5 -> 4.0.6

view details

Brian Vaughn

commit sha 0da7bd0604a5be7f96572b9f75d16fef5674bc5d

React DevTools CHANGELOG entry for 4.0.6

view details

Brian Vaughn

commit sha c00a920640d5855888c4aec645e7e58de82cb65c

Merge branch 'master' into devtools-v4-merge

view details

Brian Vaughn

commit sha 13a93e7b82119d60532e3d7c8273c90764ec4bae

Configured CI to run DevTools tests. Updated other test configs not to include DevTools tests.

view details

Brian Vaughn

commit sha 4c1514495bf77acad2677b9944726e512691150e

Merge branch 'source' of github.com:bvaughn/react-devtools-experimental

view details

Brian Vaughn

commit sha 9d4fd7a24991598aa2fcaec203dbba5c04d253d1

Merged changes from 4.0.5 -> 4.0.6 from DevTools fork

view details

Brian Vaughn

commit sha ee4806f47ae594ea20b5296dd913ed67d7809b86

Fixed flushing problem with tests

view details

Brian Vaughn

commit sha a48593a8d36f5e1c26d0d98b6ceae77642aed5cb

Iterating on DevTools tests: Trying to run tests against pre-build react-dom and react-test-renderers

view details

Brian Vaughn

commit sha 177f357d9da5b21050ddd92084a6f0ce67c09e03

Updated DevTools test setup to no longer mock test renerer

view details

Brian Vaughn

commit sha e3cc42be97d65abeb3f5907320c88f457265f459

Fix Console patching test by resetting modules

view details

Brian Vaughn

commit sha 896c993ada2875997a0f090e76992eb3c550d973

Fixed remaining DevTools broken tests by fixing a hydration/spread bug

view details

Brian Vaughn

commit sha 892ca8137eea69198c3f5b75cfeb375a4aebce53

Disabled DevTools tests from yarn-build target

view details

Dominic Gannaway

commit sha 4ef269606c691f9b8c833f18d75342b34ef021db

[react-events] Support screen reader virtual clicks (#16584)

view details

Brian Vaughn

commit sha f55b4f8e28053eacde8e11325d99779783abec1c

CI runs DevTools tests against built source

view details

Brian Vaughn

commit sha 9a016c0c2b8e21b43085bf8c282d1a7ec3ee8778

Removed outdated snapshot

view details

Brian Vaughn

commit sha 8c684bf7e19d6942eb9adb9d16aefe5dc8491bfa

Removed forked DevTools Flow types

view details

Brian Vaughn

commit sha 49b0f87d10a2fab056c29f24228acf3ce2bcc26b

Suppress act/renderer warning for DevTools tests

view details

Brian Vaughn

commit sha 8e1434e80e203ebd2cd066772d68f121808c83aa

Added FB copyright header

view details

Brian Vaughn

commit sha fb316787cbefff7a864beb8268dc395fec535ebb

Removed unused Chrome Flow types

view details

push time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 2e7cc949ae7c7ed5a583d15b4ea32c68c7730dab

Remove www builds of fetch (#19038) I don't think we'll ever use this just because we have such a unique set up for network delivery so we'll use something custom for this case. Also, we don't need a profiling build for this since it doesn't have an entry point.

view details

push time in 2 months

PR merged facebook/react

Remove www builds of fetch CLA Signed React Core Team

I don't think we'll ever use this just because we have such a unique set up for network delivery so we'll use something custom for this case.

Also, we don't need a profiling build for this since it doesn't have an entry point.

+1 -8

0 comment

1 changed file

sebmarkbage

pr closed time in 2 months

push eventsebmarkbage/react

Sebastian Markbage

commit sha 9fb572dbd412ca7283f157bcd53beba29d839c22

Remove www builds of fetch I don't think we'll ever use this just because we have such a unique set up for network delivery so we'll use something custom for this case. Also, we don't need a profiling build for this since it doesn't have an entry point.

view details

push time in 2 months

PR opened facebook/react

Reviewers
Remove www builds of fetch

I don't think we'll ever use this just because we have such a unique set up for network delivery so we'll use something custom for this case.

Also, we don't need a profiling build for this since it doesn't have an entry point.

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory.

Before submitting a pull request, please make sure the following is done:

  1. Fork the repository and create your branch from master.
  2. Run yarn in the repository root.
  3. If you've fixed a bug or added code that should be tested, add tests!
  4. Ensure the test suite passes (yarn test). Tip: yarn test --watch TestName is helpful in development.
  5. Run yarn test-prod to test in the production environment. It supports the same options as yarn test.
  6. If you need a debugger, run yarn debug-test --watch TestName, open chrome://inspect, and press "Inspect".
  7. Format your code with prettier (yarn prettier).
  8. Make sure your code lints (yarn lint). Tip: yarn linc to only check changed files.
  9. Run the Flow typechecks (yarn flow).
  10. If you haven't already, complete the CLA.

Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html -->

Summary

<!-- Explain the motivation for making this change. What existing problem does the pull request solve? -->

Test Plan

<!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. -->

+0 -4

0 comment

1 changed file

pr created time in 2 months

create barnchsebmarkbage/react

branch : nofetchinfb

created branch time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 76f157e3dd18d0501b4ed083e54b444ce11d232f

Add simple Node build (#19022) The webpack plugin doesn't really need a separate prod and dev build. It also needs to be ES2015 otherwise we can't extend native classes.

view details

push time in 2 months

PR merged facebook/react

Add ES2015 Node Build Config without ESM nor PROD/DEV CLA Signed React Core Team

I've had this pending in a branch for a while so I figured I'd just get it in.

The webpack plugin doesn't really need a separate prod and dev build. It also needs to be ES2015 otherwise we can't extend native classes.

Notably, unlike other build variants we'll add for ESM, this compiles to CommonJS. This is basically the current idiomatic output for Node.js script builds.

We could probably use this for other Node scripts as well like eslint-plugin-react-hooks.

+89 -17

5 comments

7 changed files

sebmarkbage

pr closed time in 2 months

push eventsebmarkbage/react

Sebastian Markbåge

commit sha e668f1b54f123c1a927d1bd80270db48c4842ee9

Remove unstable-fire from package.json (#19026) This hasn't existed for a while now.

view details

Sebastian Markbåge

commit sha 43e59f29d6edbd5b968a895e1a8bef8af1479a77

Delete Entries without Build Output from package.json and the build directory (#19029) * Gate test * Delete entrypoints without Build Outputs from package.json and build output If an entry point exists in bundles.js but doesn't have any bundleTypes, I delete that entry point file from the build directory. I also remove it from the files field in package.json if it exists. This allows us to remove bundles from being built in the stable release channel.

view details

Sebastian Markbåge

commit sha 607148673b3156d051d1fed17cd49e83698dce54

Remove ReactComponentTreeHook from internals (#19032) We don't really support mixing minor versions anymore anyway. But seems safe to remove in 17.

view details

Brian Vaughn

commit sha 86b4070ddb6bd2fcf22c904cfff07a04696b9495

Cleaned up passive effects experimental flags (#19021)

view details

Sebastian Markbåge

commit sha 4985bb0a80f5cbeaa61d21a7daf7da5ecff2d892

Rename 17 to 18 in warnings (#19031) We're not really supposed to refer to future versions by numbers. These will all slip so these numbers don't make sense anymore.

view details

Sebastian Markbåge

commit sha 518ce9c25f18075214cb572e7dc240598090e648

Add Lazy Elements Behind a Flag (#19033) We really needed this for Flight before as well but we got away with it because Blocks were lazy but with the removal of Blocks, we'll need this to ensure that we can lazily stream in part of the content. Luckily LazyComponent isn't really just a Component. It's just a generic type that can resolve into anything kind of like a Promise. So we can use that to resolve elements just like we can components. This allows keys and props to become lazy as well. To accomplish this, we suspend during reconciliation. This causes us to not be able to render siblings because we don't know if the keys will reconcile. For initial render we could probably special case this and just render a lazy component fiber. Throwing in reconciliation didn't work correctly with direct nested siblings of a Suspense boundary before but it does now so it depends on new reconciler.

view details

Sebastian Markbåge

commit sha 60afa3c11761e62d98c90b036890372c61bcc4c9

Lint bundles using the bundle config instead of scanning for files (#19025) * Lint bundles using the bundle config instead of scanning for files This ensures that we look for all the files that we expect to see there. If something doesn't get built we wouldn't detect it. However, this doesn't find files that aren't part of our builds such as indirection files in the root. This will need to change with ESM anyway since indirection files doesn't work. Everything should be built anyway. This ensures that we can use the bundles.js config to determine special cases instead of relying on file system conventions. * Run lint with flag

view details

Sebastian Markbage

commit sha 5392d1a92ccac5f93cb22320eec2b724edab64c0

Add simple Node build The webpack plugin doesn't really need a separate prod and dev build. It also needs to be ES2015 otherwise we can't extend native classes.

view details

push time in 2 months

pull request commentfacebook/react

[DevTools] Support FunctionComponent.contextTypes

Another case is that forwardRef passes a second arg. That kind of doesn't work already but that's probably fine since it needs to be resilient to missing refs anyway. However, it shouldn't pass context to a forwardRef component even if it has contextTypes.

(We also have an experimental feature, Blocks, that provides a second arg but I'll remove that one.)

bl00mber

comment created time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 60afa3c11761e62d98c90b036890372c61bcc4c9

Lint bundles using the bundle config instead of scanning for files (#19025) * Lint bundles using the bundle config instead of scanning for files This ensures that we look for all the files that we expect to see there. If something doesn't get built we wouldn't detect it. However, this doesn't find files that aren't part of our builds such as indirection files in the root. This will need to change with ESM anyway since indirection files doesn't work. Everything should be built anyway. This ensures that we can use the bundles.js config to determine special cases instead of relying on file system conventions. * Run lint with flag

view details

push time in 2 months

PR merged facebook/react

Lint bundles using the bundle config instead of scanning for files CLA Signed React Core Team

If something doesn't get built we wouldn't detect it in lint. This ensures that we look for all the files that we expect to see there.

However, this doesn't find files that aren't part of our builds such as indirection files in the root. This will need to change with ESM anyway since indirection files doesn't work. Everything should be built anyway.

This ensures that we can use the bundles.js config to determine special cases instead of relying on file system conventions.

Ideally we'd use the same convention for jest so we stick to the same model for all the tools.

+168 -120

3 comments

6 changed files

sebmarkbage

pr closed time in 2 months

push eventfacebook/react

Sebastian Markbåge

commit sha 518ce9c25f18075214cb572e7dc240598090e648

Add Lazy Elements Behind a Flag (#19033) We really needed this for Flight before as well but we got away with it because Blocks were lazy but with the removal of Blocks, we'll need this to ensure that we can lazily stream in part of the content. Luckily LazyComponent isn't really just a Component. It's just a generic type that can resolve into anything kind of like a Promise. So we can use that to resolve elements just like we can components. This allows keys and props to become lazy as well. To accomplish this, we suspend during reconciliation. This causes us to not be able to render siblings because we don't know if the keys will reconcile. For initial render we could probably special case this and just render a lazy component fiber. Throwing in reconciliation didn't work correctly with direct nested siblings of a Suspense boundary before but it does now so it depends on new reconciler.

view details

push time in 2 months

more