profile
viewpoint
Ricky rickhanlonii @facebook EST. AKRON React Core @facebook · he/him

reactjs/reactjs.org 4856

The React documentation website

joestump/python-oauth2 2920

A fully tested, abstract interface to creating OAuth clients and servers.

react-native-community/cli 1364

React Native command line tools

larvalabs/pullup 315

A website you join via pull request.

larvalabs/breaker 20

Chat rooms for subreddits.

elharony/react-native-website 0

The site and docs for React Native

kckolz/cross-track-loopback 0

Crossfit tracking/management application

kckolz/quicktrack 0

Android app for tracking workouts

rickhanlonii/aamnotifs 0

Simple notifications implementation with RabbitMQ using pika.

rickhanlonii/alex 0

Catch insensitive, inconsiderate writing

Pull request review commentfacebook/react

[Scheduler] Re-throw unhandled errors

 describe('SchedulerPostTask', () => {       },     }; +    // Note: setTimeout is used to report errors and nothing else
    // Note: setTimeout is used to report errors and nothing else.
acdlite

comment created time in 10 hours

Pull request review commentfacebook/react

[Scheduler] Re-throw unhandled errors

 function runTask<T>(           ),           continuationOptions,         )-        .catch(handlePostTaskError);+        .catch(handleAbortError);     }+  } catch (error) {+    // We're inside a promise. If we don't handle this error, then it will
    // We're inside a `postTask` promise. If we don't handle this error, then it will

Wasn't super clear which promise you we're talking about.

acdlite

comment created time in 10 hours

Pull request review commentfacebook/react

[Scheduler] Re-throw unhandled errors

 function runTask<T>(           ),           continuationOptions,         )-        .catch(handlePostTaskError);+        .catch(handleAbortError);     }+  } catch (error) {+    // We're inside a promise. If we don't handle this error, then it will+    // trigger an "Unhandled promise rejection" error. We don't want that, but+    // we do want the default error reporting behavior that normal (non-Promise)+    // tasks get for unhandled errors.+    //+    // So we'll re-throw the error inside a regular browser task.+    setTimeout(() => {+      throw error;+    });   } finally {     currentPriorityLevel_DEPRECATED = NormalPriority;   } } -function handlePostTaskError(error) {-  // This error is either a user error thrown by a callback, or an AbortError-  // as a result of a cancellation.-  //-  // User errors trigger a global `error` event even if we don't rethrow them.-  // In fact, if we do rethrow them, they'll get reported to the console twice.-  // I'm not entirely sure the current `postTask` spec makes sense here. If I-  // catch a `postTask` call, it shouldn't trigger a global error.-  //+function handleAbortError(error) {

Doesn't handleAbortError assume that the only way a postTask rejects is via an abort?

acdlite

comment created time in 10 hours

push eventfacebook/react-native-website

Bartosz Kaszubowski

commit sha ff49d1743a2de50de2feff59b60abfce72f97157

adjust BLM banner height and text style (#2137)

view details

push time in 18 hours

PR merged facebook/react-native-website

adjust BLM banner height and text style CLA Signed Design

Fixes #2134

This PR changes the height of BLM banner from 100px to 60px and updates the banner text style to ensure that in the most cases text will fit in two lines (previously on some mobile devices text could break to three lines) and additional space can be reduced.

Preview

Desktop (Win + 4k)

Desktop (MacBook Pro 15) Screenshot 2020-08-11 at 21 17 29

Mobile (iPhone SE)

+23 -18

1 comment

2 changed files

Simek

pr closed time in 18 hours

issue closedfacebook/react-native-website

[UI/UX] Improve the announcement on smaller screens

Description

<!-- Please provide a clear and concise description of your idea, a "TLDR." You can go into more detail below—more details make issues more actionable for us and help us prioritize! Include screenshots if needed. --> The announcement div, currently used for a Black Lives Matter donation link, is too large, and makes using the docs a huge hassle on smaller screens.

What is the problem?

<!-- Does this solve a problem? If so, what is it? --> On a small laptop screen, the actual docs content ends up being about 1/2 of the entire screen, due to the large announcement, navbar and system elements accumulating. With many pictures in the guides and docs, this makes the user experience on smaller screens poor.

How can we address it?

<!-- Are there any actionable steps we can take to rectify the situation? --> We can make two things, either:

  1. Add a closing button to the announcement. I guess that wouldn't be too hard, just a small change in CSS visibility or otherwise disabling the div.
  2. Make it smaller. Vue's banner on their main page is about 40 pixels high, where it's still quite visible, but doesn't interrupt user's workflow. Even main React page has a smaller banner (60px vs Native's 100px).

Why is it important?

<!-- Make your case here! --> While the BLM movement is really important, and support should be given for it, it shouldn't interrupt average person's work. I'll still use the docs, but it's really uncomfortable for me to not see the whole picture at the same time.

Who needs this?

<!-- Android devs? New learners? TypeScript users? --> Users with small screens.

closed time in 18 hours

Wuzado

Pull request review commentfacebook/react

[Scheduler] Call postTask directly

 describe('SchedulerPostTask', () => {     scheduleCallback(NormalPriority, () => {       runtime.log('B');     });-    runtime.assertLog(['Post Task']);-    runtime.fireNextTask();-    runtime.assertLog(['Task Event', 'A', 'B']);-  });--  it('multiple tasks with a yield in between', () => {-    scheduleCallback(NormalPriority, () => {-      runtime.log('A');-      runtime.advanceTime(4999);-    });-    scheduleCallback(NormalPriority, () => {-      runtime.log('B');-    });-    runtime.assertLog(['Post Task']);-    runtime.fireNextTask();     runtime.assertLog([-      'Task Event',-      'A',-      // Ran out of time. Post a continuation event.-      'Post Task',+      'Post Task 0 [user-visible]',+      'Post Task 1 [user-visible]',     ]);-    runtime.fireNextTask();-    runtime.assertLog(['Task Event', 'B']);+    runtime.flushTasks();+    runtime.assertLog(['Task 0 Fired', 'A', 'Task 1 Fired', 'B']);   });    it('cancels tasks', () => {     const task = scheduleCallback(NormalPriority, () => {-      runtime.log('Task');+      runtime.log('A');     });-    runtime.assertLog(['Post Task']);+    runtime.assertLog(['Post Task 0 [user-visible]']);     cancelCallback(task);+    runtime.flushTasks();     runtime.assertLog([]);   }); -  it('throws when a task errors then continues in a new event', () => {+  it('an error in one task does not affect execution of other tasks', () => {     scheduleCallback(NormalPriority, () => {-      runtime.log('Oops!');       throw Error('Oops!');     });     scheduleCallback(NormalPriority, () => {       runtime.log('Yay');     });-    runtime.assertLog(['Post Task']);--    expect(() => runtime.fireNextTask()).toThrow('Oops!');-    runtime.assertLog(['Task Event', 'Oops!', 'Post Task']);--    runtime.fireNextTask();-    runtime.assertLog(['Task Event', 'Yay']);+    runtime.assertLog([+      'Post Task 0 [user-visible]',+      'Post Task 1 [user-visible]',+    ]);+    runtime.flushTasks();+    runtime.assertLog([+      'Task 0 Fired',+      'Task 0 errored [Oops!]',+      'Task 1 Fired',+      'Yay',+    ]);   });    it('schedule new task after queue has emptied', () => {     scheduleCallback(NormalPriority, () => {       runtime.log('A');     }); -    runtime.assertLog(['Post Task']);-    runtime.fireNextTask();-    runtime.assertLog(['Task Event', 'A']);+    runtime.assertLog(['Post Task 0 [user-visible]']);+    runtime.flushTasks();+    runtime.assertLog(['Task 0 Fired', 'A']);      scheduleCallback(NormalPriority, () => {       runtime.log('B');     });-    runtime.assertLog(['Post Task']);-    runtime.fireNextTask();-    runtime.assertLog(['Task Event', 'B']);+    runtime.assertLog(['Post Task 1 [user-visible]']);+    runtime.flushTasks();+    runtime.assertLog(['Task 1 Fired', 'B']);   });    it('schedule new task after a cancellation', () => {     const handle = scheduleCallback(NormalPriority, () => {       runtime.log('A');     }); -    runtime.assertLog(['Post Task']);+    runtime.assertLog(['Post Task 0 [user-visible]']);     cancelCallback(handle); -    runtime.fireNextTask();-    runtime.assertLog(['Task Event']);+    runtime.flushTasks();+    runtime.assertLog([]);      scheduleCallback(NormalPriority, () => {       runtime.log('B');     });-    runtime.assertLog(['Post Task']);-    runtime.fireNextTask();-    runtime.assertLog(['Task Event', 'B']);+    runtime.assertLog(['Post Task 1 [user-visible]']);+    runtime.flushTasks();+    runtime.assertLog(['Task 1 Fired', 'B']);+  });++  it('schedules tasks at different priorities', () => {+    scheduleCallback(ImmediatePriority, () => {+      runtime.log('A');+    });+    scheduleCallback(UserBlockingPriority, () => {+      runtime.log('B');+    });+    scheduleCallback(NormalPriority, () => {+      runtime.log('C');+    });+    scheduleCallback(LowPriority, () => {+      runtime.log('D');+    });+    scheduleCallback(IdlePriority, () => {+      runtime.log('E');+    });+    runtime.assertLog([+      'Post Task 0 [user-blocking]',+      'Post Task 1 [user-blocking]',+      'Post Task 2 [user-visible]',+      'Post Task 3 [user-visible]',+      'Post Task 4 [background]',

Is it worth testing the opposite order? I guess that would only be testing that our mock handled the ordering correctly, but that may give us more confidence in the mock.

acdlite

comment created time in a day

Pull request review commentfacebook/react

[Scheduler] Call postTask directly

 describe('SchedulerPostTask', () => {     scheduleCallback(NormalPriority, () => {       runtime.log('B');     });-    runtime.assertLog(['Post Task']);-    runtime.fireNextTask();-    runtime.assertLog(['Task Event', 'A', 'B']);-  });--  it('multiple tasks with a yield in between', () => {

Where did this test go?

acdlite

comment created time in a day

push eventfacebook/react

Ricky

commit sha c8d9b8878a3a50fe94db5407727a3d5cba13f971

Speed up yarn cache in circle (#19566)

view details

push time in 2 days

delete branch rickhanlonii/react

delete branch : rh-circle-yarn

delete time in 2 days

PR merged facebook/react

Speed up yarn installs in circle builds CLA Signed React Core Team

Overview

This PR optimizes the circle config so that we run exactly one yarn install across the entire workflow, which is itself cached, and then uses a node_modules cache for all subsequent jobs.

Perf wins

In the parallel jobs you can now see that we completely removed the yarn install step, which shave 10-60s off each of those, giving feedback up to a minute faster:

Before

Screen Shot 2020-08-09 at 11 45 09 AM

After

Screen Shot 2020-08-09 at 11 45 25 AM

We also improved overall times (there's a lot of variance here, but the trend is accurate):

Before

Screen Shot 2020-08-09 at 11 42 17 AM

After

Screen Shot 2020-08-09 at 11 47 07 AM

+52 -71

3 comments

1 changed file

rickhanlonii

pr closed time in 2 days

Pull request review commentfacebook/react

[WIP] Speed up circle builds with yarn

 jobs:       - run:           name: Nodejs Version           command: node --version-      - *restore_yarn_cache-      - *run_yarn+      - restore_cache:+          name: Restore yarn cache+          key: v2-node-{{ arch }}-{{ checksum "yarn.lock" }}-yarn+      - run:+          name: Install Packages+          command: yarn --frozen-lockfile --cache-folder ~/.cache/yarn       - save_cache:-          name: Save node_modules cache-          key: v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}+          # Store the yarn cache globally for all lock files with this same+          # checksum. This will speed up the setup job for all PRs where the+          # lockfile is the same.+          name: Save yarn cache for future installs+          key: v2-node-{{ arch }}-{{ checksum "yarn.lock" }}-yarn           paths:             - ~/.cache/yarn+      - save_cache:+          # Store node_modules for all jobs in this workflow so that they don't+          # need to each run a yarn install for each job. This will speed up+          # all jobs run on this branch with the same lockfile.+          name: Save node_modules cache+          # This cache key is per branch, a yarn install in setup is required.+          key: v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-node-modules+          paths:+            - node_modules

We're now saving two different caches:

  • yarn: This is the global yarn node_module cache to be used only by the setup job to speed up yarn install across all jobs and PRs with the same yarn.lock. It's only restored in the setup job.
  • node_modules: Once the setup job installs a node_modules directory, we cache node_modules to use in every child job. This means that we only need to run yarn install once in the setup and never for the child jobs.

The node_modules cache key is per branch just so that it's scoped per PR. Caches in circle are global and immutable so this just prevents unexpected collisions and should not change performance.

rickhanlonii

comment created time in 4 days

Pull request review commentfacebook/react

[WIP] Speed up circle builds with yarn

 aliases:   - &environment     TZ: /usr/share/zoneinfo/America/Los_Angeles -  - &restore_yarn_cache+  - &restore_node_modules     restore_cache:       name: Restore node_modules cache       keys:-        - v2-node-{{ arch }}-{{ .Branch }}-{{ checksum "yarn.lock" }}-        - v2-node-{{ arch }}-{{ .Branch }}--        - v2-node-{{ arch }}--  - &run_yarn

Removing this alias because a yarn install should only be necessary in the setup job.

rickhanlonii

comment created time in 4 days

Pull request review commentfacebook/react

[WIP] Speed up circle builds with yarn

 aliases:   - &environment     TZ: /usr/share/zoneinfo/America/Los_Angeles -  - &restore_yarn_cache

Renamed to clarify what this is actually restoring, which is the node_modules directory now.

rickhanlonii

comment created time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 9ef19ff06a3c10ef1ba123b57c48241076de071e

Speed up yarn cache in circle

view details

push time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 3950c184003f5213bd19da394419ab9ff0e7bc40

Speed up yarn cache in circle

view details

push time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 233c1614977815842b3dfa803f593ff6e56bd1c2

Use singular 'key' key

view details

push time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha c127cc7ea9733ed4391257457de38359a13b097a

Fix stray 's' from broken cmd key

view details

push time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 625a3c959cf0abc65f436f85295e7aa4204b4233

Add separate caches for yarn and node_modules

view details

push time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 232a8223833db9487f83d5382b080f0e0fd4b88f

Change cache key

view details

push time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha a000241982b2fe08cc4c247e1d2c095a12a6ee46

Try caching node_modules

view details

push time in 4 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 3818b2a0c279abe240af27547b03aa10f5e99244

Try setting the yarn cache folder

view details

push time in 4 days

create barnchrickhanlonii/react

branch : rh-circle-yarn

created branch time in 4 days

PR opened facebook/react

[WIP] Speed up circle builds with yarn

WIP

Trying some things

+0 -28

0 comment

1 changed file

pr created time in 4 days

issue commentromefrontend/rome

🐛 Error: Should have returned a node

Here's the file, I don't see anything flow specific in the file.

rickhanlonii

comment created time in 4 days

CommitCommentEvent

issue openedromefrontend/rome

🐛 Error: Should have returned a node

<!-- Bug reports that don't follow this template will be closed. --> <!-- Please provide a clear and concise description of what the bug is. -->

Environment

<!-- Run rome rage --summary and paste the output below. --> <details><pre>Environment Variables Object { TERM: "xterm-256color" USER: "rickhanlonii" }

User Config unset

Rome Version 10.0.3-beta

Node Version 12.16.1

Platform darwin x64 19.4.0

Terminal Features Object { background: "unknown" colorDepth: 8 columns: 231 cursor: true hyperlinks: true isTTY: true unicode: true }

Client Flags Object { clientName: "cli" cwd: "/Users/rickhanlonii/dev/oss/react" realCwd: "/Users/rickhanlonii/dev/oss/react" silent: false }

Server Status Object { projects: Array [ Object {id: 0} Object {id: 1} ] server: Object { heapTotal: 26_316_800 pid: 42_498 uptime: 0.237943279 } workers: Array [ Object { astCacheSize: 0 heapTotal: 26_316_800 ownedBytes: 0 ownedFileCount: 0 pid: 42_498 uptime: 0.237854373 } ] } </pre></details>

Steps To Reproduce

<!-- Provide a detailed list of steps that reproduce the issue. --> <!-- The more information and included steps, the quicker your report can be confirmed and addressed! -->

  1. clone facebook/react
  2. npx rome init
  3. npx rome check

Expected Results

<!-- Describe what you expected to happen. --> Either the result of the check or an error explaining what is configured wrong.

Actual Result

Screen Shot 2020-08-08 at 5 58 13 PM

created time in 5 days

pull request commentfacebook/react-native

Migrating RNTester to Packages Directory

Importing isn't working for me, could you try @cpojer?

stealthanthrax

comment created time in 5 days

Pull request review commentfacebook/react-native

Migrating RNTester to Packages Directory

 # yarn lockfile v1

Not if the dependencies don't change.

stealthanthrax

comment created time in 5 days

issue commentreactjs/reactjs.org

There was an error in your GraphQL query

@DSchau is this something you can help with? I've been working with @manyaagarwal and in addition to the graphql error we're also seeing a related path not found issue. Somehow we're trying to create page-data paths like:

D:\reactjs.org\public\page-data\D:\reactjs.org\example\es5-syntax-example\page-data.json

I've dug in the best I can and I can't figure out how we're trying to create page data for this example or why the path is wrong. On OSX we don't create page data for this example.

image

harshilparmar

comment created time in 5 days

pull request commentfacebook/react-native

Migrating RNTester to Packages Directory

Going to import this just to see what's failing internally

stealthanthrax

comment created time in 5 days

Pull request review commentfacebook/react-native

Migrating RNTester to Packages Directory

 # yarn lockfile v1

Why did this change?

stealthanthrax

comment created time in 5 days

Pull request review commentfacebook/react-native

Migrating RNTester to Packages Directory

 SPEC CHECKSUMS:   Folly: b73c3869541e86821df3c387eb0af5f65addfab4   glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3   OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355+<<<<<<< HEAD:packages/rn-tester/Podfile.lock

Merge conflict still in this file, doesn't this make the lockfile invalid?

stealthanthrax

comment created time in 5 days

Pull request review commentfacebook/react-native

Migrating RNTester to Packages Directory

 const RNTesterNavigationReducer = require('./utils/RNTesterNavigationReducer'); const React = require('react'); const URIActionMap = require('./utils/URIActionMap'); -const nativeImageSource = require('../../Libraries/Image/nativeImageSource');+const nativeImageSource = require('../../../Libraries/Image/nativeImageSource');

This is a good example of the next step we'll take later to decouple RNTester from React Native. We should be able to set it up so that react-native resolves to '../../../, so that all of JavaScript references react-native, even if the native dependencies are still relative. Then we would work to treat the native deps the same way.

stealthanthrax

comment created time in 5 days

Pull request review commentfacebook/react-native

Migrating RNTester to Packages Directory

+/*___Generated_by_IDEA___*/

What are these files?

stealthanthrax

comment created time in 5 days

Pull request review commentfacebook/react

Support inner component _debugOwner in memo

 function updateMemoComponent(       Component.type,       null,       nextProps,-      null,+      workInProgress,

Why were we passing null before?

bvaughn

comment created time in 6 days

pull request commentfacebook/react

Parallelize Jest in CI

Looks like we cut the test run time in half!

yarn test took 5m46s here but only 2m56s on this PR.

acdlite

comment created time in 6 days

Pull request review commentfacebook/react

Parallelize Jest in CI

+'use strict';++const Sequencer = require('@jest/test-sequencer').default;++class CustomSequencer extends Sequencer {+  sort(tests) {+    if (process.env.CIRCLE_NODE_TOTAL) {

You'll want to clear this envar in the ReactClassEquivalence-test so that it can pick up the test files it runs, since it shells out to jest. We could also special case ReactClassEquivalence-test and run it on it's own.

acdlite

comment created time in 7 days

Pull request review commentfacebook/react

[WIP][Scheduler] Call postTask directly

 const forks = Object.freeze({       entry === 'react-test-renderer'     ) {       return 'scheduler/src/forks/SchedulerHostConfig.mock';-    } else if (entry === 'scheduler/unstable_post_task') {-      return 'scheduler/src/forks/SchedulerHostConfig.post-task';

Should we get rid of all the scheduler host configs eventually?

acdlite

comment created time in 7 days

push eventfacebook/react

Ricky

commit sha 32ff4286872d1a6bb8ce71730064f60ebbdd1509

Add feature flag for setting update lane priority (#19401) * Add feature flag for setting update lane priority * Remove second feature flag * Refactor feature flag locations * Add missing else

view details

push time in 7 days

delete branch rickhanlonii/react

delete branch : rh-ff-update-lane-2

delete time in 7 days

PR merged facebook/react

Reviewers
Add feature flag for setting update lane priority CLA Signed React Core Team

Overview

Wrap calls to set update lane priority in a feature flag so it doesn't impact the stable release channel.

+479 -223

4 comments

7 changed files

rickhanlonii

pr closed time in 7 days

pull request commentfacebook/react

Nesting Fixture

How do you expect the nested root to unmount?

The more I toggle the about page, the more roots are created:

Screen Shot 2020-08-06 at 1 35 56 AM

gaearon

comment created time in 7 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}>

At least in the fixture here we're using the same React version in /legacy and /modern. I tested with different versions and there's no warning.

gaearon

comment created time in 7 days

Pull request review commentfacebook/react

Nesting Fixture

+{

Should we either add the package-lock.json files are gitignore them?

gaearon

comment created time in 7 days

Pull request review commentfacebook/react

Nesting Fixture

+import React from 'react';+import {useContext, useMemo, useRef, useState, useLayoutEffect} from 'react';++import {__RouterContext} from 'react-router';

We should probably list react-router in the dependencies explicitly if we're using it directly instead of relying on the transitive install.

gaearon

comment created time in 7 days

Pull request review commentfacebook/react

Nesting Fixture

+import React from 'react';+import {useContext, useMemo, useRef, useState, useLayoutEffect} from 'react';++import {__RouterContext} from 'react-router';+import ThemeContext from './shared/ThemeContext';++let rendererModule = {+  status: 'pending',+  promise: null,+  result: null,+};++export default function lazyLegacyRoot(getLegacyComponent) {+  let componentModule = {+    status: 'pending',+    promise: null,+    result: null,+  };++  return function Wrapper(props) {+    const createLegacyRoot = readRecord(rendererModule, () =>+      import('../legacy/createLegacyRoot')+    ).default;+    const Component = readRecord(componentModule, getLegacyComponent).default;+    const containerRef = useRef(null);+    const [root, setRoot] = useState(null);++    // Popluate every contexts we want the legacy subtree to see.
    // Populate every contexts we want the legacy subtree to see.
gaearon

comment created time in 7 days

Pull request review commentfacebook/react

Nesting Fixture

+import React from 'react';+import {useContext, useMemo, useRef, useState, useLayoutEffect} from 'react';++import {__RouterContext} from 'react-router';+import ThemeContext from './shared/ThemeContext';++let rendererModule = {+  status: 'pending',+  promise: null,+  result: null,+};++export default function lazyLegacyRoot(getLegacyComponent) {+  let componentModule = {+    status: 'pending',+    promise: null,+    result: null,+  };++  return function Wrapper(props) {+    const createLegacyRoot = readRecord(rendererModule, () =>+      import('../legacy/createLegacyRoot')+    ).default;+    const Component = readRecord(componentModule, getLegacyComponent).default;+    const containerRef = useRef(null);+    const [root, setRoot] = useState(null);++    // Popluate every contexts we want the legacy subtree to see.+    // Then in src/legacy/createLegacyRoot we will apply them.+    const theme = useContext(ThemeContext);+    const router = useContext(__RouterContext);+    const context = useMemo(+      () => ({+        theme,+        router,+      }),+      [theme, router]+    );++    // Create/unmount.+    useLayoutEffect(() => {+      if (!root) {+        let r = createLegacyRoot(containerRef.current);+        setRoot(r);+        return () => r.unmount();+      }+    }, [createLegacyRoot, root]);++    // Mout/update.
    // Mount/update.
gaearon

comment created time in 7 days

push eventgaearon/react

Rick Hanlon

commit sha ebfeb86be2c89c19e90043c2acdaf3c86617998b

Add README to nesting fixture

view details

push time in 7 days

push eventrickhanlonii/react

Haseeb Khan

commit sha ecbdb74d7ce0f009cb735ddb83d4f760020b9f88

Added the word "events" to clear ambiguousness. (#19409)

view details

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

Ricky

commit sha c9749d38e3f6c4d9f6c6cbca900ec83cc6cd30ee

Generate RN renderers for stable builds (#19421) * Generate RN renderers for experimental builds * Don't generate FB builds for experimental channels

view details

Dan Abramov

commit sha 1dcee8656523668038551b3d1b69f7d679e769f8

Regression test for media event bubbling (#19428)

view details

Dominic Gannaway

commit sha 356c17108f4e132371450338fa86e195f5e0acf4

Remove capturePhaseEvents and separate events by bubbling (#19278) * Remove capturePhaseEvents and separate events by bubbling WIP Refine all logic Revise types Fix Fix conflicts Fix flags Fix Fix Fix test Revise Cleanup Refine Deal with replaying Fix * Add non delegated listeners unconditionally * Add media events * Fix a previously ignored test * Address feedback Co-authored-by: Dan Abramov <dan.abramov@me.com>

view details

Dominic Gannaway

commit sha 1aae05c4364ca8553c62b46a8df70ebe8fa574f0

Revise comment + add non-bubbling event test (#19432)

view details

Dan Abramov

commit sha 125d1a19a211c51d5ee52ec0c1cc1f538eb44d5c

Move event things around (#19433) * Put all synthetic events in one file * Inline other helpers * Remove Modern from filenames

view details

Dominic Gannaway

commit sha 30e3cfe40679f2247179bfe54f4768f2cbbc8161

Fix scope issue (#19434)

view details

Dan Abramov

commit sha 76ce685d0fc7821a6c8be486d7cbb2c3d22f6fb7

Remove SyntheticEvent subtypes (#19436) * Remove SyntheticEvent subtypes * Code golf

view details

Ricky

commit sha 909b612e27d1a59aa601e2b8461a44661faaffa8

Sync React Native types (#19437)

view details

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

Robert Ferentz

commit sha b55f75d0a5383a60085e051d19b62ae68d71e366

fix issue #19362 + test (#19412)

view details

Dominic Gannaway

commit sha ef22aecfc52cdf0d7cedc723c590719c009c2a64

Add invalid/close events to <dialog> element (#19439) Support dialog Fix

view details

Dominic Gannaway

commit sha 242a50a652f70df73a9ea4c696c2ed00e55e5bae

Fix issue with capture phase non-bubbling events (#19452)

view details

Ashwin Ramaswami

commit sha 5530f1ccfba873e04b1580629b6659139435f9a8

Upgrade art fixtures to babel 7 (#16235) * chore: upgrade art fixtures to babel 7 * upgrade * use yarn

view details

Ricky

commit sha d29bf59a6e5bc79aa623538288f49cedee7cbb96

Update my mailmap entries (#19455)

view details

Dominic Gannaway

commit sha 05344faca42468ff7e9225fa26d79fb89377c0cb

Follow up fix to 19452 (#19454)

view details

Dominic Gannaway

commit sha 6bb86fd1629896019dfaa9c6ea6e0680913820a7

Delegated all capture events (#19463)

view details

Dominic Gannaway

commit sha 217ecf581bb1e62dacafb3125b9d92b3346a3fa8

Re-added toggle event to non-delegated events (#19465)

view details

Dan Abramov

commit sha 06d104e8ec89df4bc5176e014c83e8b6393e555f

Don't emulate bubbling of the scroll event (#19464) * Don't emulate bubbling of the scroll event * Put behind a flag

view details

push time in 7 days

push eventrickhanlonii/react

Ricky

commit sha a437f3ff302dc92347d812d518c9a9659d9aa546

Use RN fork in default branch of feature flags (#19522)

view details

Halit Ogunc

commit sha 8d57ca519a3f8e7f76f81f404d048dfc35303d98

fix: typo in React Release Scripts (#19524)

view details

Dominic Gannaway

commit sha b61174fb7b09580c1ec2a8f55e73204b706d2935

Remove the deprecated React Flare event system (#19520)

view details

Dan Abramov

commit sha e9721e14e4b8776c107afa3cdd7c6d664fe20c24

Remove onScroll bubbling flag (#19535)

view details

Emilis Baliukonis

commit sha 5cff7755022220f24c1066643e0036b41806e8fa

[Scheduler] Get current time from performance.now in non-DOM environments (#19532) * Get current time from performance.now in non-DOM environments * Use local references to native APIs for Date and Performance * Refactored to read globals directly

view details

Brian Vaughn

commit sha e67a6b16030ebc30257a69a7fb36a9ed67f29b39

Fix runtime error that happens if a passive destroy function throws within an unmounted tree (#19543) A passive effect's cleanup function may throw after an unmount. In that event, React sometimes threw an uncaught runtime error trying to access a property on a null stateNode field. This commit fixes that (and adds a regression test).

view details

push time in 7 days

push eventrickhanlonii/react

Rick Hanlon

commit sha caceeca98e84ee2a38a221452989f902813bee79

Add missing else

view details

push time in 7 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 287a1f031054c3f18324eb5bf8eb38cf2cb4fb17

Remove second feature flag

view details

Rick Hanlon

commit sha baf12b80d5f1c70e33a9fbc00a567f56b12d8800

Refactor feature flag locations

view details

push time in 7 days

pull request commentfacebook/react

Fix for react-tester-renderer swallowing error boundary logs

@acdlite @gaearon if you want a good place to start, check out the test that I changed.

You can see that in dev, console.log is only called once. It does not include the actual error that was thrown, only the "the above error" addendum. After the fix, we log both the error and the addendum.

rickhanlonii

comment created time in 8 days

push eventfacebook/react

Brian Vaughn

commit sha e67a6b16030ebc30257a69a7fb36a9ed67f29b39

Fix runtime error that happens if a passive destroy function throws within an unmounted tree (#19543) A passive effect's cleanup function may throw after an unmount. In that event, React sometimes threw an uncaught runtime error trying to access a property on a null stateNode field. This commit fixes that (and adds a regression test).

view details

push time in 8 days

PR merged facebook/react

Reviewers
Fix runtime error that happens if a passive destroy function throws within an unmounted tree CLA Signed React Core Team

A passive effect's cleanup function may throw after an unmount. In that event, React sometimes threw an uncaught runtime error trying to access a property on a null stateNode field. This commit fixes that (and adds a regression test).

+105 -1

4 comments

3 changed files

bvaughn

pr closed time in 8 days

push eventfacebook/react

Ricky

commit sha a437f3ff302dc92347d812d518c9a9659d9aa546

Use RN fork in default branch of feature flags (#19522)

view details

push time in 10 days

delete branch rickhanlonii/react

delete branch : rh-rn-ffs

delete time in 10 days

PR merged facebook/react

Use RN fork in default branch of feature flags CLA Signed React Core Team

Overview

When I did https://github.com/facebook/react/pull/19521 I didn't realize that react/jsx-runtime also pulls in the component stack frames so this failed a test I didn't think to check.

To fix, this diff changes FB RN to fall back to use the FB RN feature flags for any entry point in the default case, similar to www.

Testing

  • Ran yarn build confirmed that only JSXDevRuntime.js, JSXRuntime, and React-dev.js change to remove the new component stacks.
  • Sync internally and run tests to confirm all tests pass as expected.
+1 -10

3 comments

1 changed file

rickhanlonii

pr closed time in 10 days

PR opened facebook/react

Use RN fork in default branch of feature flags

Overview

When I did https://github.com/facebook/react/pull/19521 I didn't realize that react/jsx-runtime also pulls in the component stack frames so this failed a test I didn't think to check.

To fix, this diff changes FB RN to fall back to use the FB RN feature flags for any entry point in the default case, similar to www.

Testing

  • Ran yarn build confirmed that only JSXDevRuntime.js, JSXRuntime, and React-dev.js change to remove the new component stacks.
  • Sync internally and run tests to confirm all tests pass as expected.
+1 -10

0 comment

1 changed file

pr created time in 10 days

create barnchrickhanlonii/react

branch : rh-rn-ffs

created branch time in 10 days

push eventrickhanlonii/react

Brian Vaughn

commit sha eae90cdbe90ab6ad8c48cee6f5af10e767a3f9fc

Effects list refactor continued: passive effects traversal (#19374) * Adds new `Passive` subtree tag value. * Adds recursive traversal for passive effects (mounts and unmounts). * Removes `pendingPassiveHookEffectsMount` and `pendingPassiveHookEffectsUnmount` arrays from work loop. * Re-adds sibling and child pointer detaching (temporarily removed in previous PR). * Addresses some minor TODO comments left over from previous PRs. --- Co-authored-by: Luna Ruan <luna@fb.com>

view details

Dan Abramov

commit sha dff97a6915ef3a3897f85e3e47ffa55d4714ae72

Fix onGot/LostPointerCapture events (#19487)

view details

Andrew Clark

commit sha e1f96b82b4aff1d5c50d02c76df9c60e32dba408

Check PassiveStatic instead of Passive (#19489) Saves us from having to set a flag on `current` during the layout phase. Could result in some redundant traversal, since PassiveStatic includes effects that don't need clean-up. But it's worth it to remove the work from the layout phase. While I was editing this, I also re-arranged it so that we check the `effectTag` check before we check the `tag`, since the `effectTag` check is the one that's more likely to fail.

view details

Andrew Clark

commit sha 6ef997b534bfbf10071401ea15b39a678d557135

Check for passive effects on the root fiber (#19488) The root fiber doesn't have a parent from which we can read the `subtreeTag`, so we need to check its `effectTag` directly. The root fiber previously did not have any pending passive effects, but it does now that deleted fibers are cleaned up in the passive phase. This allows us to remove a `schedulePassiveEffectCallback` call from the synchronous unmount path. Co-authored-by: Brian Vaughn <bvaughn@fb.com>

view details

Dan Abramov

commit sha 22d16cc15df8e570b79c2825fb495c2b98b40bf5

Remove event constants (#19276) * Remove opaque event type * Rename type and merge files * Use literals where we have Flow coverage * Flowify some plugins * Remove constants except necessary ones

view details

Andrew Clark

commit sha ede9170648d07a63cd282e6acb3ea1fe9e22ded9

Move passive logic out of layout phase (#19500) * setCurrentFiber per fiber, instead of per effect * Re-use safelyCallDestroy Part of the code in flushPassiveUnmountEffects is a duplicate of the code used for unmounting layout effects. I did some minor refactoring to so we could use the same function in both places. Closure will inline anyway so it doesn't affect code size or performance, just maintainability. * Don't check HookHasEffect during deletion We don't need to check HookHasEffect during a deletion; all effects are unmounted. So we also don't have to set HookHasEffect during a deletion, either. This allows us to remove the last remaining passive effect logic from the synchronous layout phase.

view details

Dan Abramov

commit sha 815ee89bf55078f2447fe49a1c68336e70c1ce44

Statically enable enableFilterEmptyStringAttributesDOM (#19502)

view details

Dan Abramov

commit sha 332ecefacec7a15d9088b37e2a158fe91641ed67

Revert "Statically enable enableFilterEmptyStringAttributesDOM (#19502)" (#19504) This reverts commit 815ee89bf55078f2447fe49a1c68336e70c1ce44.

view details

Dan Abramov

commit sha 3d0895557a8c06e8fcab3bebaee368d5bc582337

Disable onScroll bubbling statically except for WWW (#19503)

view details

Dan Abramov

commit sha 7543459a4819a443f4e3fd9fcf55d773721e0571

Allow publishing untagged releases (#19505)

view details

Dan Abramov

commit sha 58b3ee7a889b62fefb9cc64962819795bebce7b8

Support untagged releases (#19507) * Support untagged releases * Fix

view details

Dan Abramov

commit sha 5d271fc3b173e9b6d67d6c38af2048be0382408a

Revert "Support untagged releases (#19507)" (#19508) This reverts commit 58b3ee7a889b62fefb9cc64962819795bebce7b8.

view details

Dan Abramov

commit sha a1c0864d19b16a76a0727934e59406e2d77bd6ee

Support untagged releases (#19509)

view details

Andrew Clark

commit sha 93a0c2830534cfbc4e6be3ecc9c9fc34dee3cfaa

Add static version of Passive subtree tag (#19510) Creates new subtree tag, PassiveStatic, that represents whether a tree contains any passive effect hooks. It corresponds to the PassiveStatic effect tag, which represents the same concept for an individual fiber. This allows us to remove the PassiveStatic effect tag from PassiveMask. Its presence was causing us to schedule a passive effect phase callback on every render, instead of only when something changed. That's now fixed; this is reflected in the SchedulerProfiler tests. (The naming is getting really confusing. Need to do some bikeshedding.)

view details

Andrew Clark

commit sha 5f1890f12b4ea900a82853c528c0fe040760857c

Bugfix: Don't unmount siblings of deleted node (#19516) * Test: Don't unmount siblings of deleted node Adds a failing regression test. Will fix in the next commit. * Refactor to accept deleted fiber, not child list A deleted fiber is passed to flushPassiveUnmountEffectsInsideOfDeletedTree, but the code is written as if it accepts the first node of a child list. This is likely because the function was based on similar functions like `flushPassiveUnmountEffects`, which do accept a child list. Unfortunately, types don't help here because we use the first node in the list to represent the whole list, so in both cases, the type is Fiber. Might be worth changing the other functions to also accept individual fibers instead of a child list, to help avoid confusion. * Add layout effect to regression test, just in case

view details

Ricky

commit sha 86314d5b458348c06df810a67605e8dad1133dd1

Turn off new component stacks for React Native (#19521)

view details

push time in 10 days

push eventfacebook/react

Ricky

commit sha 86314d5b458348c06df810a67605e8dad1133dd1

Turn off new component stacks for React Native (#19521)

view details

push time in 10 days

delete branch rickhanlonii/react

delete branch : rh-rn-react

delete time in 10 days

PR merged facebook/react

Turn off new component stacks for React Native CLA Signed React Core Team

Overview

This internal React build for React Native running off the main branch is not ready for the new component stack (e.g it breaks LogBox). To unblock the sync to React Native and test the React main branch we're turning off the new component stacks by using the React Native feature flags for React.

I've confirmed that the only major feature flag changes between the default and RN flags is the component stack flag.

+13 -0

4 comments

1 changed file

rickhanlonii

pr closed time in 10 days

pull request commentfacebook/react

Turn off new component stacks for React Native

Tested this by running a git diff before and after yarn build to confirm that the only change is to the way we gather component stack frames in React-dev.js, as expected.

rickhanlonii

comment created time in 10 days

Pull request review commentfacebook/react

Turn off new component stacks for React Native

 const forks = Object.freeze({             return 'shared/forks/ReactFeatureFlags.testing.www.js';         }         return 'shared/forks/ReactFeatureFlags.testing.js';+      case 'react':+        switch (bundleType) {+          case FB_WWW_DEV:+          case FB_WWW_PROD:+          case FB_WWW_PROFILING:+            return 'shared/forks/ReactFeatureFlags.www.js';+          case RN_FB_DEV:+          case RN_FB_PROD:+          case RN_FB_PROFILING:+            return 'shared/forks/ReactFeatureFlags.native-fb.js';+          default:+            return 'shared/ReactFeatureFlags.js';

That fails eslint no-fallthrough, and I think for good reason - it's nice to explicitly know which flags are used in the default case. For example, I didn't really know or believe that we used the non-scoped ReactFeatureFlags.js file for all of React. If this fell through (especially if there's a case added after this before the default case later), it would be more difficult to see which flag is used.

rickhanlonii

comment created time in 10 days

PR opened facebook/react

Turn off new component stacks for React Native

Overview

This internal React build for React Native running off the main branch is not ready for the new component stack (e.g it breaks LogBox). To unblock the sync to React Native and test the React main branch we're turning off the new component stacks by using the React Native feature flags for React.

I've confirmed that the only major feature flag changes between the default and RN flags is the component stack flag.

+13 -0

0 comment

1 changed file

pr created time in 10 days

create barnchrickhanlonii/react

branch : rh-rn-react

created branch time in 10 days

PR closed facebook/react

Rename internal methods CLA Signed
  • Shipped Children object to ReactChildren
  • Replaced multiple exports to default export
  • Changed methods name to exported name
+17 -23

4 comments

2 changed files

behnammodi

pr closed time in 11 days

pull request commentfacebook/react

Rename internal methods

Hey @behnammodi, thanks for the PR!

We don't normally take stylistic PRs, style and readability are extremely subjective and these changes often introduce subtle mistakes. Going to close this but thanks again for your work!

behnammodi

comment created time in 11 days

PR closed facebook/react

Update README

<!-- 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 type checks (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. -->

+1 -1

4 comments

1 changed file

saogary

pr closed time in 11 days

PR closed reactjs/reactjs.org

Make example finished CLA Signed

In the edited example we created a method "handleSubmit" but didn't use it. I fixed it.

<!--

Thank you for the PR! Contributors like you keep React awesome!

Please see the Contribution Guide for guidelines:

https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md

If your PR references an existing issue, please add the issue number below

-->

+1 -1

3 comments

1 changed file

Azatik1000

pr closed time in 13 days

pull request commentreactjs/reactjs.org

Make example finished

Hey @Azatik1000, thanks for the PR.

The handleSubmit handler exists on the form element as:

<form onSubmit={this.handleSubmit}>

When the input button is clicked, it directs the onSubmit event of the form element which calls handleSubmit.

I think this is working as expected so I'm going to close but let me know if you have any questions!

Azatik1000

comment created time in 13 days

issue closedreactjs/reactjs.org

test

test

closed time in 13 days

tuanphanfi

issue commentreactjs/reactjs.org

test

ಠ_ಠ

tuanphanfi

comment created time in 13 days

Pull request review commentfacebook/react

Add feature flag for setting update lane priority

 export function flushSync<A, R>(fn: A => R, a: A): R {     return fn(a);   }   executionContext |= BatchedContext;-  const previousLanePriority = getCurrentUpdateLanePriority();+  let previousLanePriority;   try {-    setCurrentUpdateLanePriority(SyncLanePriority);+    if (enableSetUpdateLanePriority) {+      previousLanePriority = getCurrentUpdateLanePriority();+      setCurrentUpdateLanePriority(SyncLanePriority);+    }     if (fn) {       return runWithPriority(ImmediateSchedulerPriority, fn.bind(null, a));     } else {       return (undefined: $FlowFixMe);     }   } finally {-    setCurrentUpdateLanePriority(previousLanePriority);+    if (enableSetUpdateLanePriority && previousLanePriority != null) {

+1

rickhanlonii

comment created time in 13 days

Pull request review commentfacebook/react

Add feature flag for setting update lane priority

 export const deferRenderPhaseUpdateToNextBatch = true;  // Replacement for runWithPriority in React internals. export const decoupleUpdatePriorityFromScheduler = false;+export const enableSetUpdateLanePriority = false;

Agreed, I thought you said we should use a separate flag so that this one could be hard coded to either true or false while the other one is dynamic but maybe I misunderstood?

rickhanlonii

comment created time in 13 days

push eventrickhanlonii/react

Ricky

commit sha 52c51462744ac6a9437d64ae84fcd94eacbb8aa8

Add SchedulerHostConfig fork for post task (#19470)

view details

Brian Vaughn

commit sha 5227a37868c4bf3133ba5f2b3b39cac9175d7ea9

Add "unstable_" prefix to experimental mutable source APIs (#19472) * Add "unstbale_" prefix to mutable source APIs * DebugHooks no longer calls useMutableSource() on init This was causing an observable behavioral difference between experimental DEV and PROD builds. We don't initialize stack position for other composite hooks (e.g. useDeferredValue, useTransition, useOpaqueIdentifier). If we did, it would cause the same obesrvable behavioral difference.

view details

Dan Abramov

commit sha 0eea16601cab75dbb698d67220bce5674a13e38a

Event propagation test suite (#19483)

view details

Ricky

commit sha 7c8cc4358e79670d1e3be803a8c5267116e09bff

Add postTask browser scheduler implementation (#19479) * Reduce code to necessities * Switch to postTask API * Add SchedulerPostTask tests * Updates from review * Fix typo from review * Generate build of unstable_post_task

view details

Dan Abramov

commit sha 291db05a756dd88d0f687b3083e85a22abbf5214

Add regression tests for all events (#19485)

view details

Ricky

commit sha 74cd7e5f17e801f89c88689ecd9560a342b95c2c

Use feature flags for React Native in the test renderer (#19486)

view details

push time in 14 days

Pull request review commentfacebook/react-native

Update ECOSYSTEM.md to reflect updated partnerships

 There are three types of stakeholders:  ## Partners -Partners are companies that are significantly invested in React Native and have been for years. Informed by their use of React Native, they push for improvements of the core and/or the ecosystem around it. Facebook's partners think of React Native as a product: they understand the trade offs that the project makes as well as future plans and goals. Together we shape the vision for React Native to make it the best way to build applications.+Partners are companies that are significantly invested in React Native and have been for years. Informed by their use of React Native, they push for improvements of the core and/or the ecosystem around it. Partners think of React Native as a product: they understand the trade offs that the project makes as well as future plans and goals. Together we shape the vision for React Native to make it the best way to build applications. -Our current set of partners include Callstack, Expo, Infinite Red, Microsoft and Software Mansion. Many engineers from these companies are core contributors, and their partner responsibilities also include:+React Native's current set of partners include Callstack, Expo, Facebook, Infinite Red, Microsoft and Software Mansion. Many engineers from these companies are core contributors, and their partner responsibilities also include:  * **[Callstack](https://callstack.com/):** Manages releases, maintains the [React Native CLI](https://github.com/react-native-community/react-native-cli) and organizes [React Native EU](https://react-native.eu/) * **[Expo](https://expo.io/):** Builds [expo](https://github.com/expo/expo) on top of React Native to simplify app development+* **[Facebook]():** Oversees the React Native product and maintains the [React Native core repo](https://reactnative.dev/) 

https://opensource.facebook.com?

stmoy

comment created time in 14 days

Pull request review commentfacebook/react

Fix onGot/LostPointerCapture events

 export function listenToReactEvent(       }     }   } else {-    // Check if the react event ends in "Capture"-    const isCapturePhaseListener = reactEvent.substr(-7) === 'Capture';+    const isCapturePhaseListener =+      reactEvent.substr(-7) === 'Capture' &&+      // Edge case: onGotPointerCapture and onLostPointerCapture+      // end with "Capture" but that's part of their event names.+      // The Capture versions would end with CaptureCapture.+      // So we have to check against that.+      // This check works because none of the events we support+      // end with "Pointer".

Why not check the exact event names?

gaearon

comment created time in 15 days

push eventfacebook/react

Ricky

commit sha 74cd7e5f17e801f89c88689ecd9560a342b95c2c

Use feature flags for React Native in the test renderer (#19486)

view details

push time in 15 days

delete branch rickhanlonii/react

delete branch : rh-react-sync

delete time in 15 days

PR merged facebook/react

Use feature flags for React Native in the test renderer CLA Signed React Core Team

Overview

The React Native renderer has enableComponentStackLocations disabled, but the react-test-renderer for React Native has enableComponentStackLocations enabled. This causes issues syncing React to React Native.

+63 -0

5 comments

2 changed files

rickhanlonii

pr closed time in 15 days

pull request commentfacebook/react

Use feature flags for React Native in the test renderer

Good point.

The issue I'm solving is that when we sync React to RN from master and fix the tests internally, the OSS tests fail. Disabling this setting now allows us the react-test-renderer to match the way open source currently works, but that will break when we update RN to the next OSS React release.

To fix this fully, we'll need to either turn this flag off for all react-test-renderer, or completely upgrade React Native to use the new component stack formatting.

rickhanlonii

comment created time in 15 days

Pull request review commentfacebook/react

Use feature flags for React Native in the test renderer

+/**+ * 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.+ *+ * @flow+ */++import typeof * as FeatureFlagsType from 'shared/ReactFeatureFlags';+import typeof * as ExportsType from './ReactFeatureFlags.test-renderer';++export const debugRenderPhaseSideEffectsForStrictMode = false;+export const enableDebugTracing = false;+export const enableSchedulingProfiler = false;+export const enableSchedulingProfilerComponentStacks = false;+export const warnAboutDeprecatedLifecycles = true;+export const replayFailedUnitOfWorkWithInvokeGuardedCallback = false;+export const enableProfilerTimer = __PROFILE__;+export const enableProfilerCommitHooks = false;+export const enableSchedulerTracing = __PROFILE__;+export const enableSuspenseServerRenderer = false;+export const enableSelectiveHydration = false;+export const enableBlocksAPI = false;+export const enableLazyElements = false;+export const disableJavaScriptURLs = false;+export const disableInputAttributeSyncing = false;+export const enableSchedulerDebugging = false;+export const enableDeprecatedFlareAPI = false;+export const enableFundamentalAPI = false;+export const enableScopeAPI = false;+export const enableCreateEventHandleAPI = false;+export const warnAboutUnmockedScheduler = false;+export const enableSuspenseCallback = false;+export const warnAboutDefaultPropsOnFunctionComponents = false;+export const warnAboutStringRefs = false;+export const disableLegacyContext = false;+export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;+export const enableTrustedTypesIntegration = false;+export const disableTextareaChildren = false;+export const disableModulePatternComponents = false;+export const warnUnstableRenderSubtreeIntoContainer = false;+export const warnAboutSpreadingKeyToJSX = false;+export const enableComponentStackLocations = false;

This file is copied from ReactFeatureFlags.test-renderer.js except for this flag.

rickhanlonii

comment created time in 15 days

PR opened facebook/react

Use feature flags for React Native in the test renderer

Overview

The React Native renderer has enableComponentStackLocations disabled, but the react-test-renderer for React Native has enableComponentStackLocations enabled. This causes issues syncing React to React Native.

+63 -0

0 comment

2 changed files

pr created time in 15 days

create barnchrickhanlonii/react

branch : rh-react-sync

created branch time in 15 days

delete branch rickhanlonii/react

delete branch : rh-post-task-impl

delete time in 15 days

push eventfacebook/react

Ricky

commit sha 7c8cc4358e79670d1e3be803a8c5267116e09bff

Add postTask browser scheduler implementation (#19479) * Reduce code to necessities * Switch to postTask API * Add SchedulerPostTask tests * Updates from review * Fix typo from review * Generate build of unstable_post_task

view details

push time in 15 days

PR merged facebook/react

Reviewers
Add postTask browser scheduler implementation CLA Signed React Core Team

Overview

This diff adds a Scheduler implementation that uses the experimental postTask API provided by Chrome.

Details

The postTask API is an experimental first step towards adding main thread scheduling to browsers.

It's based off of the main-thread-scheduling proposal and help solves the issue of coordinating work at various priorities. In React's case, it allows a browser-native strategy for breaking up long tasks (such as rendering) into smaller chucks that yield to other, possibly more important, work in between.

React already has a mechanism for breaking rendering into smaller chucks that yield to other work, and we use it in concurrent mode. The way we do that today is to use the MessageChannel API to "schedule" work:

let scheduledWork;

function doWork() {
  scheduledWork();
}

// Create a MessageChannel that we will post work to.
// the browser will call onmessage when it's our turn to work.
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = doWork;

// Entry point to scheduling work
export function scheduleWork(callback) {
  scheduledWork = callback;
  port.postMessage(null);
};

The change in this diff replaces the above strategy with postTask:

export function scheduleWork(callback) {
  scheduler.postTask(callback);
};

Why

There are a few disadvantages of the MessageChannel implementation.

First, all work is scheduled with the same priority. This initial change doesn't solve this because we're still posting all tasks with the same priority. In the future, the scheduler API will allow us to post tasks with different priorities levels and the browser will do the scheduling.

Second, the MessageChannel implementation requires us to do work in 5ms increments and yield to the browser to see if there's more browser work to do. In the future, this can be improved with additional scheduler APIs which will allow us to check if there is pending input. This will allow React to continue rendering until the browser has more important work today, and fill more gaps in under utilized CPU time.

Finally, the MessageChannel implementation does not have a way to continue work that's interrupted. This means, when rendering is paused to yield to the browser, we cannot continue until the event loops comes back around again and we will pay the overhead of letting other (lower-priority) task run in between. What we want to do is ask the browser to yield to higher priority work, but continue with our work before anything else that's the same priority or lower is allowed to complete. This will be possible with scheduler.yield.

For the first step though, we'll continue to manage priority in user land and yield to entire event loop every 5s.

+362 -231

3 comments

6 changed files

rickhanlonii

pr closed time in 15 days

Pull request review commentfacebook/react

Add postTask browser scheduler implementation

  * LICENSE file in the root directory of this source tree.  */ -import {enableIsInputPending} from '../SchedulerFeatureFlags';+// Capture local references to native APIs, in case a polyfill overrides them.+const date = window.Date;+const perf = window.performance;+const setTimeout = window.setTimeout;+const clearTimeout = window.clearTimeout;++// This check should be done upstream but do it again for a clear failure message.+if (global.scheduler === undefined || global.scheduler.postTask === undefined) {+  throw new Error('Cannot use postTask Scheduler without global.scheduler');+} -export let requestHostCallback;-export let cancelHostCallback;-export let requestHostTimeout;-export let cancelHostTimeout;-export let shouldYieldToHost;-export let requestPaint;-export let getCurrentTime;-export let forceFrameRate;+function postTask(callback) {+  // Use experimental Chrome Scheduler postTask API.+  global.scheduler.postTask(callback);+} -if (-  // If Scheduler runs in a non-DOM environment, it falls back to a naive-  // implementation using setTimeout.-  typeof window === 'undefined' ||-  // Check if MessageChannel is supported, too.-  typeof MessageChannel !== 'function'-) {-  // If this accidentally gets imported in a non-browser environment, e.g. JavaScriptCore,-  // fallback to a naive implementation.-  let _callback = null;-  let _timeoutID = null;-  const _flushCallback = function() {-    if (_callback !== null) {-      try {-        const currentTime = getCurrentTime();-        const hasRemainingTime = true;-        _callback(hasRemainingTime, currentTime);-        _callback = null;-      } catch (e) {-        setTimeout(_flushCallback, 0);-        throw e;-      }-    }-  };-  const initialTime = Date.now();-  getCurrentTime = function() {-    return Date.now() - initialTime;-  };-  requestHostCallback = function(cb) {-    if (_callback !== null) {-      // Protect against re-entrancy.-      setTimeout(requestHostCallback, 0, cb);-    } else {-      _callback = cb;-      setTimeout(_flushCallback, 0);-    }-  };-  cancelHostCallback = function() {-    _callback = null;-  };-  requestHostTimeout = function(cb, ms) {-    _timeoutID = setTimeout(cb, ms);-  };-  cancelHostTimeout = function() {-    clearTimeout(_timeoutID);-  };-  shouldYieldToHost = function() {-    return false;-  };-  requestPaint = forceFrameRate = function() {};+let getNow;+if (typeof perf === 'object' && typeof perf.now === 'function') {+  getNow = () => perf.now(); } else {-  // Capture local references to native APIs, in case a polyfill overrides them.-  const performance = window.performance;-  const Date = window.Date;-  const setTimeout = window.setTimeout;-  const clearTimeout = window.clearTimeout;+  const initialTime = date.now();+  getNow = () => date.now() - initialTime;+} -  if (typeof console !== 'undefined') {-    // TODO: Scheduler no longer requires these methods to be polyfilled. But-    // maybe we want to continue warning if they don't exist, to preserve the-    // option to rely on it in the future?-    const requestAnimationFrame = window.requestAnimationFrame;-    const cancelAnimationFrame = window.cancelAnimationFrame;-    // TODO: Remove fb.me link-    if (typeof requestAnimationFrame !== 'function') {-      // Using console['error'] to evade Babel and ESLint-      console['error'](-        "This browser doesn't support requestAnimationFrame. " +-          'Make sure that you load a ' +-          'polyfill in older browsers. https://fb.me/react-polyfills',-      );-    }-    if (typeof cancelAnimationFrame !== 'function') {-      // Using console['error'] to evade Babel and ESLint-      console['error'](-        "This browser doesn't support cancelAnimationFrame. " +-          'Make sure that you load a ' +-          'polyfill in older browsers. https://fb.me/react-polyfills',-      );-    }+let isMessageLoopRunning = false;+let scheduledHostCallback = null;+let taskTimeoutID = -1;++// Scheduler periodically yields in case there is other work on the main+// thread, like user events. By default, it yields multiple times per frame.+// It does not attempt to align with frame boundaries, since most tasks don't+// need to be frame aligned; for those that do, use requestAnimationFrame.+let yieldInterval = 5;+let deadline = 0;++// `isInputPending` is not available. Since we have no way of knowing if+// there's pending input, always yield at the end of the frame.+export const shouldYieldToHost = function() {+  return getNow() >= deadline;+};++// Since we yield every frame regardless, `requestPaint` has no effect.+export const requestPaint = function() {};++export const forceFrameRate = function(fps) {+  if (fps < 0 || fps > 125) {+    // Using console['error'] to evade Babel and ESLint+    console['error'](+      'forceFrameRate takes a positive int between 0 and 125, ' ++        'forcing frame rates higher than 125 fps is not unsupported',

Fixed in SchedulerHostConfig.default.js

rickhanlonii

comment created time in 15 days

push eventrickhanlonii/react

Rick Hanlon

commit sha 9050609a9a5da069dd2a5bef0e97ba0b47d3f476

Updates from review

view details

Rick Hanlon

commit sha d92ee682b42023dd6cabc81dda1b04d81f121915

Fix typo from review

view details

Rick Hanlon

commit sha 416ec1ec89d7631bfa4440f6e4349c6a9b0a2ee7

Generate build of unstable_post_task

view details

push time in 15 days

delete branch rickhanlonii/jest

delete branch : rh-fix-forward-ref

delete time in 15 days

PR closed facebook/jest

Fix for pretty-format and react elements cla signed

<!-- Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. The two fields below are mandatory. -->

<!-- Please remember to update CHANGELOG.md in the root of the project if you have not done so. -->

Summary

This PR fixes an issue with the pretty-format react plugin where it was only checking the $$typeof symbol for object element types. I found that function element types are possible with the $$typeof checks, so I moved those checks to before the typeof type === function check

The practical change is that in some scenarios, instead of printing

<Component />

We will now print

<ForwardRef(Foo) />

Test plan

I actually can't figure out how to write a test for this issue in our repo, but I did apply the change manually in https://github.com/rajivshah3/rn-broken-snapshot/tree/broken-example, where I discovered the issue, to confirm the fix

I suspect it's related to some combination of jest, react, react-native, and react-test-renderer

+17 -16

10 comments

2 changed files

rickhanlonii

pr closed time in 15 days

pull request commentfacebook/jest

Fix for pretty-format and react elements

Actually I'm going to close this, the bug here was in the way we were doing mocks in React Native and was fixed by https://github.com/facebook/react-native/commit/4b935ae95f09e4a1eb1e5ac8089eb258222a0f8b

rickhanlonii

comment created time in 15 days

PR opened facebook/react

Add postTask browser scheduler implementation

Overview

This diff adds a Scheduler implementation that uses the experimental postTask API provided by Chrome.

Details

The postTask API is an experimental first step towards adding main thread scheduling to browsers.

It's based off of the main-thread-scheduling proposal and help solves the issue of coordinating work at various priorities. In React's case, it allows a browser-native strategy for breaking up long tasks (such as rendering) into smaller chucks that yield to other, possibly more important, work in between.

React already has a mechanism for breaking rendering into smaller chucks that yield to other work, and we use it in concurrent mode. The way we do that today is to use the MessageChannel API to "schedule" work:

let scheduledWork;

function doWork() {
  scheduledWork();
}

// Create a MessageChannel that we will post work to.
// the browser will call onmessage when it's our turn to work.
const channel = new MessageChannel();
const port = channel.port2;
channel.port1.onmessage = doWork;

// Entry point to scheduling work
export function scheduleWork(callback) {
  scheduledWork = callback;
  port.postMessage(null);
};

The change in this diff replaces the above strategy with postTask:

export function scheduleWork(callback) {
      scheduler.postTask(callback);
};

Next steps

There are a few disadvantages of the MessageChannel implementation.

First, all work is scheduled with the same priority. This initial change doesn't solve this because we're still posting all tasks with the same priority. In the future, the scheduler API will allow us to post tasks with different priorities levels and the browser will do the scheduling.

Second, the MessageChannel implementation requires us to do work in 5ms increments and yield to the browser to see if there's more browser work to do. In the future, this can be improved with additional scheduler APIs which will allow us to check if there is pending input. This will allow React to continue rendering until the browser has more important work today, and fill more gaps in under utilized CPU time.

Finally, the MessageChannel implementation does not have a way to continue work that's interrupted. This means, when rendering is paused to yield to the browser, we cannot continue until the event loops comes back around again and we will pay the overhead of letting other (lower-priority) task run in between. What we want to do is ask the browser to yield to higher priority work, but continue with our work before anything else that's the same priority or lower is allowed to complete. This will be possible with scheduler.yield.

For the first step though, we'll continue to manage priority in user land and yield to entire event loop every 5s.

+363 -227

0 comment

2 changed files

pr created time in 15 days

create barnchrickhanlonii/react

branch : rh-post-task-impl

created branch time in 15 days

delete branch rickhanlonii/react

delete branch : rh-fix-act-fallbacks

delete time in 16 days

pull request commentfacebook/react

Fix flushing suspense fallbacks at the end of Act when the scheduler is mocked

Yeah I can do that 👍

rickhanlonii

comment created time in 16 days

more