emotion-js/emotion 10130
👩🎤 CSS-in-JS library designed for high performance style composition
threepointone/css-suspense 312
css loading for react
TheLarkInn/unity-component-specification 208
This is a WIP draft of the Unity (Single File Web Component) Specification
css-in-reason
macros for babel. I think.
threepointone/asyncstorage-mock 9
a mock for react-native's asyncstorage api. useful for testing.
threepointone/css-in-js-workshop 6
css, in your js, in your head, in your heart
iOS apps in Javascript like React Native.
global event bus
threepointone/async-act-test-21-11 1
Created with CodeSandbox
Pull request review commentfacebook/react
Don't warn about unmounted updates if pending passive unmount
function warnAboutUpdateOnUnmountedFiberInDEV(fiber) { // Only warn for user-defined components, not internal ones like Suspense. return; }++ if (+ deferPassiveEffectCleanupDuringUnmount &&+ runAllPassiveEffectDestroysBeforeCreates+ ) {+ // If there are pending passive effects unmounts for this Fiber,+ // we can assume that they would have prevented this update.+ if (pendingPassiveHookEffectsUnmount.includes(fiber)) {+ return;+ }+ }+
odd, syntax highlighting seems to be broken for this file
comment created time in a day
pull request commentreactjs/react-codemod
Fix pure component transform edge cases
At a glance it seems reasonable. Thank you for the PR! I'll do a proper review soon.
comment created time in a day
issue closedfacebook/react
Fetch API call inside use effect to get items in page load not working in IOS devices
I tried to get list of items to display in the page load using use effect with React 16.4.. async function fetchData() { const res = await fetch("https://swapi.co/api/planets/4/"); res .json() .then(res => setPlanets(res)) .catch(err => setErrors(err)); }
useEffect(() => { fetchData(); });
It's working with desktop and Android devices. But it's not working with IOS. Iphone 7, iphone 8+ etc
Please suggest to resolve issue with IOS devices.. @coryhouse @acdlite
closed time in a day
maraimalaissn
issue commentfacebook/react
Fetch API call inside use effect to get items in page load not working in IOS devices
It's not clear how this is an issue with React. We use this tracker for bugs and feature requests, you'd probably be better served by using one of our community resources (like Stack Overflow) https://reactjs.org/community/support.html.
Alternately, if this is a problem with React, please make a reproducible example with codesandbox, or as a git repo, that demonstrates the problem.
Closing.
comment created time in a day
PR closed facebook/react
this commit adds support for Gitpod.io, a free automated dev environment that makes contributing and generally working on GitHub projects much easier. It allows anyone to start a ready-to-code dev environment for any branch, issue and pull request with a single click.
<!-- 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:
- Fork the repository and create your branch from
master. - Run
yarnin the repository root. - If you've fixed a bug or added code that should be tested, add tests!
- Ensure the test suite passes (
yarn test). Tip:yarn test --watch TestNameis helpful in development. - Run
yarn test-prodto test in the production environment. It supports the same options asyarn test. - If you need a debugger, run
yarn debug-test --watch TestName, openchrome://inspect, and press "Inspect". - Format your code with prettier (
yarn prettier). - Make sure your code lints (
yarn lint). Tip:yarn lincto only check changed files. - Run the Flow typechecks (
yarn flow). - 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. -->
pr closed time in a day
pull request commentfacebook/react
Thanks for the request, but I don't think we're comfortable adding this. Nobody on the team uses it, and it's not a priority to support this environment. Would recommend instead that you make this an external project/template?
Closing this.
comment created time in a day
push eventthreepointone/react
commit sha 8777b44e982e7ddedda62aee02f1fd370795db44
Add Modern WWW build (#18028) * Build both stable and experimental WWW builds * Flip already experimental WWW flags to true * Remove FB-specific internals from modern FB builds We think we're not going to need these. * Disable classic features in modern WWW builds * Disable legacy ReactDOM API for modern WWW build * Don’t include user timing in prod * Fix bad copy paste and add missing flags to test renderer * Add testing WWW feature flag file We need it because WWW has a different meaning of experimental now.
commit sha d4f2b0379c8ecf8266497f863ee5a2aa612ff4ba
Add Auto Import to Babel Plugin (#16626) This babel transform is a fork of the @babel/plugin-transform-react-jsx transform and is for experimentation purposes only. We don't plan to own this code in the future, and we will upstream this to Babel at some point once we've proven out the concept. As per the RFC to simplify element creation, we want to add the ability to auto import "react' directly from the babel plugin. This commit updates the babel plugin with two options: 1.) importSource: The React module to import from. Defaults to react. 2.) autoImport: The type of import. Defaults to none. - none: Does not import React. JSX compiles to React.jsx etc. - namespace: import * as _react from "react";. JSX compiles to _react.jsx etc. - default: import _default from "react"; JSX compiles to _default.jsx etc. - namedExports: import {jsx as _jsx} from "react"; JSX compiles to _jsx etc. - require: var _react = _interopRequireWildcard(require("react"));. jSX compiles to _react.jsx etc. namespace, default, and namedExports can only be used when sourceType: module and require can only be used when sourceType: script. It also adds two pragmas (jsxAutoImport and jsxImportSource) that allow users to specify autoImport and importSource in the docblock.
commit sha 2d6be757df86177ca8590bf7c361d6c910640895
[Native] Delete NativeComponent and NativeMethodsMixin (#18036) * [Native] Delete NativeComponent and NativeMethodsMixin * Remove more files
commit sha 9def56ec0e1e71928ee999f48c00b1803ed8772a
Refactor DOM plugin system to single module (#18025)
commit sha 93a229bab59f94e214256582c55d3b6c1fc2b958
Update eslint rule exhaustive deps to use new suggestions feature (#17385) This closes #16313
commit sha 56a8c353219ac93ab358eb28009de881ae48251e
eslint-plugin-react-hooks@2.4.0
commit sha d533229fba8f7e7e576436bf52bbcae56c862906
Fix Prettier
commit sha f48a5e64e8fd903293f5b854beb795dcc6bae86d
Further cleanup of plugin event system (#18056)
commit sha d5ddc16a3398c33d70489cee87f5176c85f3c9f5
React developer tools extension for Microsoft Edge (#18041) * Port Chrome extension to Microsoft Edge
commit sha 90be006da8e231279151e7b1518bb64c62e26851
Updated Yarn lockfile
commit sha 48c4867d745bbf91ae73892545960c0979c2dbf7
Update issue templates to directly link to relevant sources (#18039) GitHub supports linking to off-site sources for certain types of issue.
commit sha 1a6d8179b6dd427fdf7ee50d5ac45ae5a40979eb
[react-interactions] Ensure onBeforeBlur fires for hideInstance (#18064)
commit sha 56d8a73affad624ee4d48f1685e0a92adce0bd9c
[www] Disable Scheduler `timeout` w/ dynamic flag (#18069) Before attempting to land an expiration times refactor, I want to see if this particular change will impact performance (either positively or negatively). I will test this with a GK.
commit sha 691096c95d1019f57e0da2c9a060c5e094b7c586
Split recent passive effects changes into 2 flags (#18030) * Split recent passive effects changes into 2 flags Separate flags can now be used to opt passive effects into: 1) Deferring destroy functions on unmount to subsequent passive effects flush 2) Running all destroy functions (for all fibers) before create functions This allows us to test the less risky feature (2) separately from the more risky one. * deferPassiveEffectCleanupDuringUnmount is ignored unless runAllPassiveEffectDestroysBeforeCreates is true
commit sha 14afeb1033e25942e63787750388972916f20a39
Added missing feature flag
commit sha 4d9f8500651c5d1e19d8ec9a2359d5476a53814b
Re-throw errors thrown by the renderer at the root in the complete phase (#18029) * Re-throw errors thrown by the renderer at the root React treats errors thrown at the root as a fatal because there's no parent component that can capture it. (This is distinct from an "uncaught error" that isn't wrapped in an error boundary, because in that case we can fall back to deleting the whole tree -- not great, but at least the error is contained to a single root, and React is left in a consistent state.) It turns out we didn't have a test case for this path. The only way it can happen is if the renderer's host config throws. We had similar test cases for host components, but none for the host root. This adds a new test case and fixes a bug where React would keep retrying the root because the `workInProgress` pointer was not advanced to the next fiber. (Which in this case is `null`, since it's the root.) We could consider in the future trying to gracefully exit from certain types of root errors without leaving React in an inconsistent state. For example, we should be able to gracefully exit from errors thrown in the begin phase. For now, I'm treating it like an internal invariant and immediately exiting. * Add comment
commit sha 4912ba31e3dcc8d08f5b16ae38b38d74da85ea21
Add modern event system flag + rename legacy plugin module (#18073)
commit sha a8643e905e39f041cda80b498dc06018b27f6554
add no-restricted-globals to eslint config (#18076) Our current lint config assumes a browser environment, which means it won't warn you if you use a variable like `name` without declaring it earlier. This imports the same list as the one used by create-react-app, and enables it against our codebase.
commit sha 2512c309e34f0207d29c19392d144edab719f347
Remove Flare bundles from build (#18077)
commit sha 44e5f5e6451cf192af5dee3aa1f3a87119fc231e
Add fiber summary tooltip to devtools profiling (#18048) * Add tooltip component * Separate logic of ProfilerWhatChanged to a component * Add hovered Fiber info tooltip component * Add flame graph chart tooltip * Add commit ranked list tooltip * Fix flow issues * Minor improvement in filter * Fix flickering issue * Resolved issues on useCallbacks and mouse event listeners * Fix lints * Remove unnecessary useCallback
push time in 2 days
push eventthreepointone/react
commit sha a8643e905e39f041cda80b498dc06018b27f6554
add no-restricted-globals to eslint config (#18076) Our current lint config assumes a browser environment, which means it won't warn you if you use a variable like `name` without declaring it earlier. This imports the same list as the one used by create-react-app, and enables it against our codebase.
commit sha 2512c309e34f0207d29c19392d144edab719f347
Remove Flare bundles from build (#18077)
commit sha 44e5f5e6451cf192af5dee3aa1f3a87119fc231e
Add fiber summary tooltip to devtools profiling (#18048) * Add tooltip component * Separate logic of ProfilerWhatChanged to a component * Add hovered Fiber info tooltip component * Add flame graph chart tooltip * Add commit ranked list tooltip * Fix flow issues * Minor improvement in filter * Fix flickering issue * Resolved issues on useCallbacks and mouse event listeners * Fix lints * Remove unnecessary useCallback
commit sha a12dd52a4a5f19d990694810db86cc30e98308ae
Don't build some packages for WWW (#18078)
commit sha 1000f6135efba4f8d8ebffedeb7b472f532a8475
Add container to event listener signature (#18075)
commit sha b6c94d636cb33a265671b864b97870da38d97207
Add guard around FocusWithin responder root events (#18080)
commit sha 7e770dae93e1a934b905d8678c7ce368ed86ef0b
Profiler tooltip tweaks (#18082) * Moved Profiler views into Profiler folder * Tweaked Profiler tooltip CSS styles * Tweaked Tooltip positioning code
commit sha 085d02133e9e3b24ae548d89e4003899bf85022c
[Native] Migrate focus/blur to call TextInputState with the host component (#18068)
commit sha ea6ed3dbbd32515e2d4d9783c358beceeadd4b1d
Warn for update on different component in render (#17099) This warning already exists for class components, but not for functions. It does not apply to render phase updates to the same component, which have special semantics that we do support.
commit sha 3f85d53ca6f2af8a711daae6322e6bdda862f660
Further pre-requisite changes to plugin event system (#18083)
commit sha b789060dca314f052d856cab509569cf41020cd5
Feature Flag for React.jsx` "spreading a key to jsx" warning (#18074) Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www. I also included the component name in the warning.
push time in 2 days
pull request commentfacebook/react
Ship React.jsx and React.jsxDEV
The 'Spreading a key to JSX' warning is now behind a feature flag (https://github.com/facebook/react/pull/18074). Could we rebase and land this?
comment created time in 2 days
push eventfacebook/react
commit sha b789060dca314f052d856cab509569cf41020cd5
Feature Flag for React.jsx` "spreading a key to jsx" warning (#18074) Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www. I also included the component name in the warning.
push time in 2 days
PR merged facebook/react
Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www.
I also included the component name in the warning.
pr closed time in 2 days
push eventfacebook/react
commit sha a8643e905e39f041cda80b498dc06018b27f6554
add no-restricted-globals to eslint config (#18076) Our current lint config assumes a browser environment, which means it won't warn you if you use a variable like `name` without declaring it earlier. This imports the same list as the one used by create-react-app, and enables it against our codebase.
push time in 3 days
PR merged facebook/react
Our current lint config assumes a browser environment, which means it won't warn you if you use a variable like name without declaring it earlier. This PR imports the same one used by create-react-app, and enables it against our codebase.
pr closed time in 3 days
pull request commentfacebook/react
add no-restricted-globals to eslint config
Yup. Added console.log(name) to an arbit module, ran yarn linc - errored!
comment created time in 3 days
Pull request review commentfacebook/react
Feature Flag for React.jsx' "spreading a key to jsx" warning
export function jsxWithValidation( } } - if (hasOwnProperty.call(props, 'key')) {- if (__DEV__) {- console.error(- 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +- 'Explicitly pass a key after spreading props in your JSX call. ' +- 'E.g. <ComponentName {...props} key={key} />',- );+ if (__DEV__) {+ if (warnAboutSpreadingKeyToJSX) {+ if (+ didWarnAboutSpreadingKey[name] !== true &&
followup - https://github.com/facebook/react/pull/18076
comment created time in 3 days
push eventthreepointone/react
commit sha 4bde4b895e35771dba629cc98cf5f435b72b8ce6
add no-restricted-globals to eslint config Our current lint config assumes a browser environment, which means it won't warn you if you use a variable like `name` without declaring it earlier. This imports the same list as the one used by create-react-app, and enables it against our codebase.
push time in 3 days
PR opened facebook/react
Our current lint config assumes a browser environment, which means it won't warn you if you use a variable like name without declaring it earlier. This copies the restricted globals list from create-react-app, and enables it against our codebase.
pr created time in 3 days
Pull request review commentfacebook/react
Feature Flag for React.jsx' "spreading a key to jsx" warning
export function jsxWithValidation( } } - if (hasOwnProperty.call(props, 'key')) {- if (__DEV__) {- console.error(- 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +- 'Explicitly pass a key after spreading props in your JSX call. ' +- 'E.g. <ComponentName {...props} key={key} />',- );+ if (__DEV__) {+ if (warnAboutSpreadingKeyToJSX) {+ if (hasOwnProperty.call(props, 'key')) {+ const name = getComponentName(type) || 'ComponentName';+ if (didWarnAboutSpreadingKey[name] !== true) {+ didWarnAboutSpreadingKey[name] = true;+ console.error(+ 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' ++ 'Explicitly pass a key after spreading props in your JSX call. ' ++ 'E.g. <%s {...props} key={key} />',+ name,+ );+ }+ }
punting on the deduplication for now.
comment created time in 3 days
push eventthreepointone/react
commit sha 4912ba31e3dcc8d08f5b16ae38b38d74da85ea21
Add modern event system flag + rename legacy plugin module (#18073)
commit sha 96c85c64fa897b38a7f6879c50244224743f5ff6
Feature Flag for React.jsx` "spreading a key to jsx" warning Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www. I also included the component name in the warning.
push time in 3 days
push eventthreepointone/react
commit sha f48a5e64e8fd903293f5b854beb795dcc6bae86d
Further cleanup of plugin event system (#18056)
commit sha d5ddc16a3398c33d70489cee87f5176c85f3c9f5
React developer tools extension for Microsoft Edge (#18041) * Port Chrome extension to Microsoft Edge
commit sha 90be006da8e231279151e7b1518bb64c62e26851
Updated Yarn lockfile
commit sha 48c4867d745bbf91ae73892545960c0979c2dbf7
Update issue templates to directly link to relevant sources (#18039) GitHub supports linking to off-site sources for certain types of issue.
commit sha 1a6d8179b6dd427fdf7ee50d5ac45ae5a40979eb
[react-interactions] Ensure onBeforeBlur fires for hideInstance (#18064)
commit sha 56d8a73affad624ee4d48f1685e0a92adce0bd9c
[www] Disable Scheduler `timeout` w/ dynamic flag (#18069) Before attempting to land an expiration times refactor, I want to see if this particular change will impact performance (either positively or negatively). I will test this with a GK.
commit sha 691096c95d1019f57e0da2c9a060c5e094b7c586
Split recent passive effects changes into 2 flags (#18030) * Split recent passive effects changes into 2 flags Separate flags can now be used to opt passive effects into: 1) Deferring destroy functions on unmount to subsequent passive effects flush 2) Running all destroy functions (for all fibers) before create functions This allows us to test the less risky feature (2) separately from the more risky one. * deferPassiveEffectCleanupDuringUnmount is ignored unless runAllPassiveEffectDestroysBeforeCreates is true
commit sha 14afeb1033e25942e63787750388972916f20a39
Added missing feature flag
commit sha 4d9f8500651c5d1e19d8ec9a2359d5476a53814b
Re-throw errors thrown by the renderer at the root in the complete phase (#18029) * Re-throw errors thrown by the renderer at the root React treats errors thrown at the root as a fatal because there's no parent component that can capture it. (This is distinct from an "uncaught error" that isn't wrapped in an error boundary, because in that case we can fall back to deleting the whole tree -- not great, but at least the error is contained to a single root, and React is left in a consistent state.) It turns out we didn't have a test case for this path. The only way it can happen is if the renderer's host config throws. We had similar test cases for host components, but none for the host root. This adds a new test case and fixes a bug where React would keep retrying the root because the `workInProgress` pointer was not advanced to the next fiber. (Which in this case is `null`, since it's the root.) We could consider in the future trying to gracefully exit from certain types of root errors without leaving React in an inconsistent state. For example, we should be able to gracefully exit from errors thrown in the begin phase. For now, I'm treating it like an internal invariant and immediately exiting. * Add comment
commit sha 4912ba31e3dcc8d08f5b16ae38b38d74da85ea21
Add modern event system flag + rename legacy plugin module (#18073)
push time in 3 days
Pull request review commentfacebook/react
Feature Flag for React.jsx' "spreading a key to jsx" warning
export function jsxWithValidation( } } - if (hasOwnProperty.call(props, 'key')) {
Oh hmm you're right. I only glanced at sizebot, probably not relevant.
comment created time in 3 days
push eventthreepointone/react
commit sha 78f69d0bae3caa8a7b3327b233673b59d571df98
Feature Flag for React.jsx` "spreading a key to jsx" warning Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www. I also made it so it warns at most once per component name, and included the name in the warning.
push time in 3 days
Pull request review commentfacebook/react
Feature Flag for React.jsx' "spreading a key to jsx" warning
export function jsxWithValidation( } } - if (hasOwnProperty.call(props, 'key')) {- if (__DEV__) {- console.error(- 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +- 'Explicitly pass a key after spreading props in your JSX call. ' +- 'E.g. <ComponentName {...props} key={key} />',- );+ if (__DEV__) {+ if (warnAboutSpreadingKeyToJSX) {+ if (hasOwnProperty.call(props, 'key')) {+ const name = getComponentName(type) || 'ComponentName';+ if (didWarnAboutSpreadingKey[name] !== true) {+ didWarnAboutSpreadingKey[name] = true;+ console.error(+ 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' ++ 'Explicitly pass a key after spreading props in your JSX call. ' ++ 'E.g. <%s {...props} key={key} />',+ name,+ );+ }+ }
What I don't like about this implementation, is if a common component is used 'wrongly' in several places, it'll warn only for the 'first' one it encounters. A dev will fix it, run code again, and then see the next one. SO it'll become a game of whack-a-mole to fix all the usages. The cache should probably be based on component+location.
comment created time in 3 days
push eventthreepointone/react
commit sha 513ed10905ebdf4cbd535c97c12da8d803191a31
Feature Flag for React.jsx` "spreading a key to jsx" warning Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www. I also made it so it warns at most once per component name, and included the name in the warning.
push time in 3 days
push eventthreepointone/react
commit sha 0643ad6763e7f1192d60cf6da521bc9a5fc18655
Feature Flag for React.jsx` "spreading a key to jsx" warning Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www. I also made it so it warns at most once per component name, and included the name in the warning.
push time in 3 days
Pull request review commentfacebook/react
Feature Flag for React.jsx' "spreading a key to jsx" warning
export function jsxWithValidation( } } - if (hasOwnProperty.call(props, 'key')) {- if (__DEV__) {- console.error(- 'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +- 'Explicitly pass a key after spreading props in your JSX call. ' +- 'E.g. <ComponentName {...props} key={key} />',- );+ if (__DEV__) {+ if (warnAboutSpreadingKeyToJSX) {+ if (+ didWarnAboutSpreadingKey[name] !== true &&
oh YIKES, lint or flow didn't catch this undefined var (because window.name is an actual thing?) 😱
comment created time in 3 days
Pull request review commentfacebook/react
Feature Flag for React.jsx' "spreading a key to jsx" warning
export function jsxWithValidation( } } - if (hasOwnProperty.call(props, 'key')) {
moved this inside the DEV block. It wasn't being DCEed, so that gets us a few bytes back too.
comment created time in 3 days
Pull request review commentfacebook/react
Add modern event system flag + rename legacy plugin module
describe('ReactBrowserEventEmitter', () => { React = require('react'); ReactDOM = require('react-dom'); ReactDOMComponentTree = require('../client/ReactDOMComponentTree');- DOMEventPluginSystem = require('../events/DOMEventPluginSystem');+ listenToEvent = require('../events/DOMLegacyEventPluginSystem')
Could you keep this named as legacyListenToEvent?
legacyListenToEvent = require('../events/DOMLegacyEventPluginSystem')
comment created time in 3 days
push eventthreepointone/react
commit sha 6c600131f34368cf1181f4f321955b19e94eefb3
Feature Flag for React.jsx` "spreading a key to jsx" warning Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www. I also made it so it warns at most once per component name, and included the name in the warning.
push time in 3 days
PR opened facebook/react
Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www.
I also made it so it warns at most once per component name, and included the name in the warning.
pr created time in 3 days
create barnchthreepointone/react
branch : jsx-spread-warning-feature-flag
created branch time in 3 days
Pull request review commentfacebook/react
Split recent passive effects changes into 2 flags
let forwardRef; let memo; let act; -describe('ReactHooksWithNoopRenderer', () => {- beforeEach(() => {- jest.resetModules();- jest.useFakeTimers();-- ReactFeatureFlags = require('shared/ReactFeatureFlags');- ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;- ReactFeatureFlags.enableSchedulerTracing = true;- ReactFeatureFlags.flushSuspenseFallbacksInTests = false;- ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount = true;- React = require('react');- ReactNoop = require('react-noop-renderer');- Scheduler = require('scheduler');- SchedulerTracing = require('scheduler/tracing');- ReactCache = require('react-cache');- useState = React.useState;- useReducer = React.useReducer;- useEffect = React.useEffect;- useLayoutEffect = React.useLayoutEffect;- useCallback = React.useCallback;- useMemo = React.useMemo;- useRef = React.useRef;- useImperativeHandle = React.useImperativeHandle;- forwardRef = React.forwardRef;- memo = React.memo;- useTransition = React.useTransition;- useDeferredValue = React.useDeferredValue;- Suspense = React.Suspense;- act = ReactNoop.act;-- TextResource = ReactCache.unstable_createResource(- ([text, ms = 0]) => {- return new Promise((resolve, reject) =>- setTimeout(() => {- Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);- resolve(text);- }, ms),+function loadModules({+ deferPassiveEffectCleanupDuringUnmount,+ runAllPassiveEffectDestroysBeforeCreates,+}) {+ ReactFeatureFlags = require('shared/ReactFeatureFlags');+ ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;+ ReactFeatureFlags.enableSchedulerTracing = true;+ ReactFeatureFlags.flushSuspenseFallbacksInTests = false;+ ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount = deferPassiveEffectCleanupDuringUnmount;+ ReactFeatureFlags.runAllPassiveEffectDestroysBeforeCreates = runAllPassiveEffectDestroysBeforeCreates;+ React = require('react');+ ReactNoop = require('react-noop-renderer');+ Scheduler = require('scheduler');+ SchedulerTracing = require('scheduler/tracing');+ ReactCache = require('react-cache');+ useState = React.useState;+ useReducer = React.useReducer;+ useEffect = React.useEffect;+ useLayoutEffect = React.useLayoutEffect;+ useCallback = React.useCallback;+ useMemo = React.useMemo;+ useRef = React.useRef;+ useImperativeHandle = React.useImperativeHandle;+ forwardRef = React.forwardRef;+ memo = React.memo;+ useTransition = React.useTransition;+ useDeferredValue = React.useDeferredValue;+ Suspense = React.Suspense;+ act = ReactNoop.act;+}++[true, false].forEach(deferPassiveEffectCleanupDuringUnmount => {
wow function much pure
comment created time in 4 days
pull request commentreactjs/react-codemod
Bump handlebars from 4.1.2 to 4.5.3
Thanks bot
comment created time in 4 days
push eventreactjs/react-codemod
commit sha ad866c2590c97055ffaaf49a51921a2d1a551a86
Bump handlebars from 4.1.2 to 4.5.3 (#253) Bumps [handlebars](https://github.com/wycats/handlebars.js) from 4.1.2 to 4.5.3. - [Release notes](https://github.com/wycats/handlebars.js/releases) - [Changelog](https://github.com/wycats/handlebars.js/blob/master/release-notes.md) - [Commits](https://github.com/wycats/handlebars.js/compare/v4.1.2...v4.5.3) Signed-off-by: dependabot[bot] <support@github.com>
push time in 4 days
issue commentreactjs/react-codemod
Error when running rename-unsafe-lifecycles
Very helpful, thank you! I'll have a look this weekend.
comment created time in 4 days
pull request commentreactjs/react-codemod
Fixes #51: Declare eslint dependency
Alright, I'm going to merge this, thank you for the PR!
I'll do a release this weekend. We can revisit if there are complaints about download size.
comment created time in 4 days
push eventreactjs/react-codemod
commit sha 748d6136cb1eb1de5a893f6f9bfee29af17501d3
Fixes #51: Declare eslint dependency (#252)
push time in 4 days
PR merged reactjs/react-codemod
This should fix the sort-comp code-mod as stated in #51
pr closed time in 4 days
push eventthreepointone/react
commit sha 8777b44e982e7ddedda62aee02f1fd370795db44
Add Modern WWW build (#18028) * Build both stable and experimental WWW builds * Flip already experimental WWW flags to true * Remove FB-specific internals from modern FB builds We think we're not going to need these. * Disable classic features in modern WWW builds * Disable legacy ReactDOM API for modern WWW build * Don’t include user timing in prod * Fix bad copy paste and add missing flags to test renderer * Add testing WWW feature flag file We need it because WWW has a different meaning of experimental now.
commit sha d4f2b0379c8ecf8266497f863ee5a2aa612ff4ba
Add Auto Import to Babel Plugin (#16626) This babel transform is a fork of the @babel/plugin-transform-react-jsx transform and is for experimentation purposes only. We don't plan to own this code in the future, and we will upstream this to Babel at some point once we've proven out the concept. As per the RFC to simplify element creation, we want to add the ability to auto import "react' directly from the babel plugin. This commit updates the babel plugin with two options: 1.) importSource: The React module to import from. Defaults to react. 2.) autoImport: The type of import. Defaults to none. - none: Does not import React. JSX compiles to React.jsx etc. - namespace: import * as _react from "react";. JSX compiles to _react.jsx etc. - default: import _default from "react"; JSX compiles to _default.jsx etc. - namedExports: import {jsx as _jsx} from "react"; JSX compiles to _jsx etc. - require: var _react = _interopRequireWildcard(require("react"));. jSX compiles to _react.jsx etc. namespace, default, and namedExports can only be used when sourceType: module and require can only be used when sourceType: script. It also adds two pragmas (jsxAutoImport and jsxImportSource) that allow users to specify autoImport and importSource in the docblock.
commit sha 2d6be757df86177ca8590bf7c361d6c910640895
[Native] Delete NativeComponent and NativeMethodsMixin (#18036) * [Native] Delete NativeComponent and NativeMethodsMixin * Remove more files
commit sha 9def56ec0e1e71928ee999f48c00b1803ed8772a
Refactor DOM plugin system to single module (#18025)
commit sha 93a229bab59f94e214256582c55d3b6c1fc2b958
Update eslint rule exhaustive deps to use new suggestions feature (#17385) This closes #16313
commit sha 56a8c353219ac93ab358eb28009de881ae48251e
eslint-plugin-react-hooks@2.4.0
commit sha d533229fba8f7e7e576436bf52bbcae56c862906
Fix Prettier
push time in 4 days
PR closed facebook/react
For FB, we need to make it so React.jsxDEV calls 'work' even with prod builds. Setting this PR up as a possible option/discussion point, while I add some more tests.
For testing, I forked ReactJSXElementValidator-test.js to ReactJSXElementValidator-test.internal.js, turned on the feature flag, and aliased React.jsx with React.jsxDEV.
These tests will run in test-source and test-source-prod; if we change the function signature in the future, then one of these should fail.
My understanding is this might be a bit of a stop gap while we figure out a solution for FB, so this might not be necessary in the future.
pr closed time in 5 days
issue commentfacebook/react
Question: useContext state is not updating between siblings?
Please share a reproducing usecase with codesandbox? Hard to tell without some code.
Is it best practice to only use context as a direct child of a provider? No, context is specifically for passing deep into trees. That shouldn't be a problem.
comment created time in 5 days
push eventthreepointone/react
commit sha 401585ce6f598b36e9ec365318768013612f21ed
WIP: alias React.jsxDEV to React.jsx in DEV builds For FB, we need to make it so React.jsxDEV calls 'work' even with prod builds. Setting this PR up as a possible option/discussion point, while I add some more tests.
push time in 9 days
PR opened facebook/react
For FB, we need to make it so React.jsxDEV calls 'work' even with prod builds. Setting this PR up as a possible option/discussion point, while I add some more tests.
pr created time in 9 days
push eventthreepointone/react
commit sha 4401645c9a8e05c2ef53b38d9a3c61bde0012cc8
WIP: alias React.jsxDEV to React.jsx in DEV builds For FB, we need to make it so React.jsxDEV calls 'work' even with prod builds. Setting this PR up as a possible option/discussion point, while I add some more tests.
push time in 9 days
create barnchthreepointone/react
branch : enable-warning-feature-flags
created branch time in 9 days
issue commentreactjs/react-codemod
Error when running rename-unsafe-lifecycles
Could you try to isolate what file this happened on? If you could make a git repo with a reduced usecase, that would be excellent.
Just to be sure that it isn’t related to your own dependencies, would you also try running this from outside your project? ie- instead of cd my-project and npx react-codemod ..., could you run `npx react-codemod my-project‘?
comment created time in 10 days
push eventthreepointone/react
commit sha df134d31cb107d0dbcdf036d3502a23a81b2c029
Use babel parser rather than Babylon in extract errors (#17988)
commit sha 256d78d11f1c7da749914a8b2d35b2974a54b0f2
Add feature flag for removing children Map support (#17990)
commit sha 3f814e75823dcef29a2f4ee5b22c94830a85a0e2
Fix Flow type for React Native (#17992)
commit sha 901d76bc5c8dcd0fa15bb32d1dfe05709aa5d273
dataForRoots.set duplicate removal (#17993) dataForRoots.set duplicate removal
commit sha c55c34e46a6d8148afb78594d14f4675f9346900
Move React Map child check to behind flags or __DEV__ (#17995)
commit sha d1bfdfb861dfcb5e9697686bfa37c5b734c0250e
Ignore react-native-web in Flow checks (#17999)
commit sha e05dedc415171aad65e4263ef861b21e867325f7
Added $FlowFixMe to DevTools shell for module we Flow-ignore (#18001)
commit sha 4f71f25a34db0caa1c9c0b75f1f453f948272e65
Re-enable shorthand CSS property collision warning (#18002) Originally added in https://github.com/facebook/react/pull/14181; disabled in https://github.com/facebook/react/pull/14245. Intention was to enable it in React 16.7 but we forgot.
commit sha 89c6042df373f422bce5744f28597390b6c01ecb
fix: typo in test (#18005)
commit sha b63cb6f6cf18bbe28eb0a443c64fd9b87d79616d
Update ReactFiberExpirationTime.js (#17825) replaced 'add' with 'subtract'
commit sha 517de74b0c33aa800dbf1f5ce48dc7e336c93cfb
Tweak comment wording (#18007) * Revert "Update ReactFiberExpirationTime.js (#17825)" This reverts commit b63cb6f6cf18bbe28eb0a443c64fd9b87d79616d. * Reword
commit sha ab7b83a924bc7c9f43d37beb601d42215916c891
Stop exposing some internals on FB build (#18011)
commit sha df5faddcc2ad27be5700823d4f5367e5e9ae4620
Refactor commitPlacement to recursively insert nodes (#17996)
commit sha 42918f40aabd41a324b5dd10652e078dd2c411e6
Change build from babylon to babel (#18015)
commit sha 529e58ab0a62ed22be9b40bbe44a6ac1b2c89cfe
Remove legacy www config from Rollup build (#18016)
commit sha f7278034de5a289571f26666e6717c4df9f519ad
Flush all passive destroy fns before calling create fns (#17947) * Flush all passive destroy fns before calling create fns Previously we only flushed destroy functions for a single fiber. The reason this is important is that interleaving destroy/create effects between sibling components might cause components to interfere with each other (e.g. a destroy function in one component may unintentionally override a ref value set by a create function in another component). This PR builds on top of the recently added deferPassiveEffectCleanupDuringUnmount kill switch to separate passive effects flushing into two separate phases (similar to layout effects). * Change passive effect flushing to use arrays instead of lists This change offers a small advantage over the way we did things previous: it continues invoking destroy functions even after a previous one errored.
commit sha 988f4b14eee482e6f73e897cd5329318023e5696
Do not export passiveBrowserEventsSupported from Focus responder (#18022) Remove code
commit sha a607ea4c424356707302da998bf13e9bf1b55007
Remove getIsHydrating (#18019)
commit sha 58b8797b7372c9296e65e08ce8297e4a394b7972
remove "Unreleased" section from CHANGELOG (#18027) This section is empty, and imo isn't really helpful in React's changelog. I'm honestly not sure why this is even here? Figured I'd start a discussion with a PR, or we can remove it right now.
push time in 10 days
push eventfacebook/react
commit sha 58b8797b7372c9296e65e08ce8297e4a394b7972
remove "Unreleased" section from CHANGELOG (#18027) This section is empty, and imo isn't really helpful in React's changelog. I'm honestly not sure why this is even here? Figured I'd start a discussion with a PR, or we can remove it right now.
push time in 10 days
PR merged facebook/react
This section is empty, and imo isn't really helpful in React's changelog. I'm honestly not sure why this is even here? Figured I'd start a discussion with a PR, or we can remove it right now.
pr closed time in 10 days
PR opened facebook/react
This section is empty, and imo isn't really helpful in React's changelog. I'm honestly not sure why this is even here? Figured I'd start a discussion with a PR, or we can remove it right now.
pr created time in 10 days
Pull request review commentfacebook/react
Ship React.jsx and React.jsxDEV
if (enableScopeAPI) { // Make sure that stable builds for open source // don't modify the React object to avoid deopts. // Also let's not expose their names in stable builds.--if (enableJSXTransformAPI) {- if (__DEV__) {- React.jsxDEV = jsxWithValidation;- React.jsx = jsxWithValidationDynamic;- React.jsxs = jsxWithValidationStatic;- } else {- React.jsx = jsx;- // we may want to special case jsxs internally to take advantage of static children.- // for now we can ship identical prod functions- React.jsxs = jsx;- }+if (__DEV__) {+ React.jsxDEV = jsxWithValidation;+ React.jsx = jsxWithValidationDynamic;
Would you consider moving .jsx and .jsxs up to Line 105?
jsx: __DEV__ ? jsxWithValidationDynamic : jsx,
jsxs: __DEV__ ? jsxWithValidationStatic : jsx,
and leave React.jsxDEV = jsxWithValidation; as it is here in this __DEV__ check
Just for consistency with createElement.
comment created time in 11 days
pull request commentfacebook/react
Do not export passiveBrowserEventsSupported from Focus module
Why re-include the legacy builds if you’re removing the problematic export?
comment created time in 11 days
Pull request review commentfacebook/react
Change build from babylon to babel
async function createBundle(bundle, bundleType) { bundle.moduleType, pureExternalModules ),- // We can't use getters in www.
I don't understand why this is removed (I'm also not sure why it's here at all tbh).
comment created time in 11 days
PR opened facebook/react
This PR makes disableLegacyContext a dynamic feature flag for fb/www. For FB internal usage only.
pr created time in 12 days
create barnchthreepointone/react
branch : dynamic-www-disable-legacy-context-flag
created branch time in 12 days
push eventfacebook/react
commit sha 4f71f25a34db0caa1c9c0b75f1f453f948272e65
Re-enable shorthand CSS property collision warning (#18002) Originally added in https://github.com/facebook/react/pull/14181; disabled in https://github.com/facebook/react/pull/14245. Intention was to enable it in React 16.7 but we forgot.
push time in 12 days
PR merged facebook/react
Originally added in https://github.com/facebook/react/pull/14181; disabled in https://github.com/facebook/react/pull/14245. Intention was to enable it in React 16.7 but we forgot.
Fixes #16393.
pr closed time in 12 days
issue closedfacebook/react
Shorthand CSS property collision should trigger a warning
I faced a "bug" today that made me spent 1h figuring out what was going on:
I'm using an external component that accepts a color prop in order to set the background-color of the root element, but this same component also accepts a background prop which I wasn't passing, and by default, it was set to ''.
The result: React didn't throw an error nor a warning, however, the resulting element in the DOM didn't contain either background-color or background, and since the element had a default background-color coming from a CSS class, it took me a while to figure out why the color that I was passing wasn't being applied, and instead it was using the one from the CSS class.
See: https://codesandbox.io/s/react-example-8rxc8
What I reported above was the static1 case.
I added other cases as a bonus, as when I was playing with this they also seemed weird to me. On static2 I define the same properties, but because I change the order, it works. On the toggleable ones, initially I can see the background, but after changing it never appears anymore.
I'm not sure if I created those extra "test cases" correctly. My main concern is really around static1 not outputting anything on the console as a warning.
Related issues: #6348 #8689
I wonder if #14181 (@sophiebits) should have covered this?
closed time in 12 days
rdsedmundo
issue commentfacebook/react
Bug: React Dev Tools Firefox extension fails to detect React
@ruslan-shuster sure! assigning to you.
comment created time in 13 days
issue closedfacebook/react
Modal onSubmit just redirects to home page and then crashes
I messed around with some installs and configurations. And now for some reason my code isn't working like it used to. I'm not sure where I messed up. I've included my package.json and my next.config.js. This is how my code was working before: when I clicked on the cell in the table, it popped up the question modal. Then when I clicked submit on the question modal, the question modal would disappear and the feedback modal would pop up. Now when I click submit on the question modal, it just randomly redirects me to the home page.
I'm on next.js 8.0.4-canary.21 and I do not plan to upgrade because it causes a lot of other problems for me when I do.
Question Modal:
import React, { Component } from 'react';
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button";
import UserInput from './userInput.js';
import Feedback from "./feedback/feedback";
class SampleQ extends Component {
static getInitialProps({query: {amount, question, answer}}) {
return {specAmt: amount, specQ: question, specA: answer}
}
constructor(props) {
super(props);
this.state = {
showQuestion: false, // tracks visibility of first modal (the question modal in this component)
showFeedback: false // tracks visibility of second modal (the feedback modal in other component)
};
this.handleShow = () => {
this.setState({ showQuestion: true });
};
this.handleHide = () => {
this.setState({ showQuestion: false });
};
this.submitForm = () => {
this.setState({
showQuestion: false, // close question modal
showFeedback: true, // should open Feedback modal
});
};
this.closeFeedback = () => {
this.setState( { showFeedback: false }); // close Feedback modal
}
}
render() {
return (
<>
<Button variant="outline-danger" size = "lg" onClick={this.handleShow}>
$ {this.props.amount}00
</Button>
<Modal
show={this.state.showQuestion}
onHide={this.handleHide}
dialogClassName="modal-90w"
aria-labelledby="example-custom-modal-styling-title"
>
<Modal.Header closeButton>
<Modal.Title id="example-custom-modal-styling-title">
Question
</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
{this.props.question}
</p>
<div>
<UserInput
answer={this.props.specA}
handleClick={this.submitForm}
/>
<Feedback
showModal={this.state.showFeedback}
onSubmit={this.closeFeedback}
/>
</div>
</Modal.Body>
</Modal>
</>
);
}
}
export default SampleQ;
Form for the Question Modal:
import React, { Component } from "react";
import Form from "react-bootstrap/Form";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
class UserInput extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Form onSubmit={this.props.handleClick}>
<Form.Group as={Row} controlId="formAnswer">
<Form.Label column sm={2}>
Answer
</Form.Label>
<Col sm={10}>
<Form.Control type="text" placeholder="Enter Here"/>
</Col>
</Form.Group>
<div>
<Button
variant="primary"
onClick={this.props.handleClick}
>Submit</Button>
</div>
</Form>
);
}
}
export default UserInput;
Feedback Modal:
import React, { Component } from 'react';
import styles from "../../scss/modalStyle.scss";
import Modal from "react-bootstrap/Modal";
import { AiFillCheckCircle } from 'react-icons/ai';
import { IconContext } from "react-icons";
import Button from "react-bootstrap/Button";
class Feedback extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Modal
show={this.props.showModal}
onHide={this.props.onSubmit}
className="Feedback"
>
<Modal.Dialog style={[styles.modalDialog, styles.modalConfirm]}>
<Modal.Body style={styles.modalContent}>
<Modal.Body style={styles.modalHeader}>
<Modal.Body style={styles.iconBox}>
<IconContext.Provider value={{ size: "70px", className: "global-class-name" }}>
<div>
<AiFillCheckCircle />
</div>
</IconContext.Provider>
</Modal.Body>
<h4 className='mx-auto'>Congratulations!</h4>
</Modal.Body>
<Modal.Body style={styles.modalBody}>
<p className="text-center">That was the correct answer.</p>
</Modal.Body>
<Modal.Body style={styles.modalFooter}>
<Button
className="btn btn-success btn-block"
data-dismiss="modal"
onClick={this.props.onSubmit}
>
OK
</Button>
</Modal.Body>
</Modal.Body>
</Modal.Dialog>
</Modal>
);
}
}
export default Feedback;
my package.json
{
"name": "hello-next",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "nodemon server/index.js",
"build": "next build",
"start": "next start"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@zeit/next-sass": "^1.0.1",
"bootstrap": "^4.3.1",
"express": "^4.16.4",
"i": "^0.3.6",
"jquery": "^3.4.1",
"mysql": "^2.16.0",
"next": "^8.0.4-canary.21",
"node-sass": "^4.13.1",
"npm": "^6.13.7",
"react": "^16.8.5",
"react-bootstrap": "^1.0.0-beta.9",
"react-dom": "^16.8.5",
"react-icons": "^3.9.0"
},
"devDependencies": {
"css-loader": "^1.0.1",
"html-webpack-plugin": "^3.2.0",
"sass-loader": "^8.0.2",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-middleware": "^3.7.2",
"webpack-dev-server": "^3.10.3"
}
}
next.config.js
// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass({
cssModules: true,
cssLoaderOptions: {
importLoaders: 1,
localIdentName: "[local]___[hash:base64:5]",
}
});
closed time in 13 days
ruthvikkonda
issue commentfacebook/react
Modal onSubmit just redirects to home page and then crashes
This doesn't seem like a bug/feature request for React. Did you mean to file this issue at https://github.com/zeit/next.js/issues?
comment created time in 13 days
pull request commentfacebook/react
Use testing builds for our own tests
I tried this and it failed because it kept referring to itself and failing the build. Maybe I didn’t try it hard enough, I’ll try again.
comment created time in 15 days
pull request commentfacebook/react
Use testing builds for our own tests
Updated the PR and description. Copy pasting a specific concern -
I'll write a post before I land this, but this setup has an annoyance. If you add a new feature flag, and run your tests, your test will probably fail, since it's likely you've not added it to the .testing forks. There's nothing to warn this except for flow. which might not be running. Open to ideas for syncing these forks.
comment created time in 16 days
Pull request review commentfacebook/react
Use testing builds for our own tests
function getPlugins( bundleType === RN_FB_DEV || bundleType === RN_FB_PROD || bundleType === RN_FB_PROFILING;+ const isTestBuild = entry === 'react-dom/testing';
This isn't necessary anymore, since the renderers read the feature flag now
comment created time in 16 days
push eventthreepointone/react
commit sha fe0c9456515128a9b208c4bb80ca69effa5b3a9a
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha 331ab4902e0026d350084da405236c43d5765c44
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha e25d4e19d4e1e19a3556470b051e3497e4628254
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
Pull request review commentfacebook/react
Use testing builds for our own tests
function getPlugins( bundleType === RN_FB_DEV || bundleType === RN_FB_PROD || bundleType === RN_FB_PROFILING;+ const isTestBuild = entry === 'react-dom/testing';
I thought we'd delay it until we actually used TEST in any of its code paths. Happy to add it right now tho.
comment created time in 16 days
pull request commentfacebook/react
[fail] move IsThisRendererActing to own namespace
closing this, will revisit right before 17
comment created time in 16 days
PR closed facebook/react
The Events namespace on the secret object might be disappearing, so IsThisRendererActing can't live on it anymore. This PR -
- moves
IsThisRendererActingfromReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.EventstoReactDOM....Tests
pr closed time in 16 days
push eventthreepointone/react
commit sha f39963ff0ad935b696139723672a423e9b6f8860
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha fe3bb48456dcb7d7e5539322e862d1bbd5489461
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha df134d31cb107d0dbcdf036d3502a23a81b2c029
Use babel parser rather than Babylon in extract errors (#17988)
commit sha 256d78d11f1c7da749914a8b2d35b2974a54b0f2
Add feature flag for removing children Map support (#17990)
commit sha bc92411752d3a68e5f94e0dc3ebdb8ebacbbf753
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha 2078aa9a401aa91e97b42cdd36a6310888128ab2
Add dom fixture for autofilled form state (#17951)
commit sha 812277dab6b449596288825d59184dfc1acdf370
Fix onMouseEnter is fired on disabled buttons (#17675)
commit sha d6e08fe0a806703241311b5331c21f29fdf4a139
Remove Suspense priority warning (#17971) * Remove Suspense priority warning * Fix tests
commit sha cddde45806a8e37f534742a280fa18be79871d18
apply changes on editablevalue on blur feature implemented (#17062) * apply changes on editablevalue on blur feature implemented * Removed "Undo" button and unnecessary event.preventDefault() Co-authored-by: Brian Vaughn <brian.david.vaughn@gmail.com>
commit sha 9dba218d933d66fba9a8ba23b90dbb852514da8b
[Mock Scheduler] Mimic browser's advanceTime (#17967) The mock Scheduler that we use in our tests has its own fake timer implementation. The `unstable_advanceTime` method advances the timeline. Currently, a call to `unstable_advanceTime` will also flush any pending expired work. But that's not how it works in the browser: when a timer fires, the corresponding task is added to the Scheduler queue. However, we will still wait until the next message event before flushing it. This commit changes `unstable_advanceTime` to more closely resemble the browser behavior, by removing the automatic flushing of expired work. ```js // Before this commit Scheduler.unstable_advanceTime(ms); // Equivalent behavior after this commit Scheduler.unstable_advanceTime(ms); Scheduler.unstable_flushExpired(); ``` The general principle is to prefer separate APIs for scheduling tasks and flushing them. This change does not affect any public APIs. `unstable_advanceTime` is only used by our own test suite. It is not used by `act`. However, we may need to update tests in www, like Relay's.
commit sha 562d2fbc497d5e8e6ae5934ae9f68b28cd613fab
Fix release scripts (#17972) Circle CI seems to have changed the reported artifact path which broke our scripts.
commit sha 613cbd3acef902c9737a8934f0950bf934c5f30e
Formatting fix (Prettier) to build script
commit sha d84c539b31bc703fe6271965ce85344f50c8c207
fix sizebot - point correctly to circleci artifact (#17975) similar to #17972, this should fix sizebot not reporting stats right now
commit sha 9e158c091bb2bd795b734437bf5cead514039531
Updated release script documentation and command names (#17929) * Updated release script documentation and command names * Update scripts/release/README.md Co-Authored-By: Sunil Pai <threepointone@oculus.com> * Updated README Co-authored-by: Sunil Pai <threepointone@oculus.com>
push time in 16 days
push eventthreepointone/react
commit sha 1c8894c43377c0276f4c435f426163097bebbf60
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha 62fb7996051275020fa76a4507e2e455389729df
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha 7bf2df282da5abc67fd75f318c1a57311cd92419
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
push eventthreepointone/react
commit sha a1682c79f0902a4d0e85cdd506c0dcfd90d26899
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 16 days
pull request commentfacebook/react
Use testing builds for our own tests
I’m worried the testing feature flags could go out of sync with their base files. Open to ideas to mitigate that.
comment created time in 16 days
push eventthreepointone/react
commit sha fda318c4b9cc425650a080021a92c9601f7198d7
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 17 days
push eventthreepointone/react
commit sha 70579f1e9337b0ed44c48428886eb798f20962f9
Use testing builds for our own tests Following up from #17915 where we generated testing builds for `react-dom`, this PR uses those builds for our own tests. - fixes `ReactFeatureFlags.testing` to use all the default flags - changes `ReactFeatureFlags.readonly` to return `isTestEnvironment: true` (this might not strictly be needed) - with jest, mocks `react-dom` with the testing version, both for source and builds - uses `ReactDOM.act` in one of these tests to verify it actually works
push time in 17 days
PR opened facebook/react
Following up from #17915 where we generated testing builds for react-dom, this PR uses those builds for our own tests.
- fixes
ReactFeatureFlags.testingto use all the default flags - changes
ReactFeatureFlags.readonlyto returnisTestEnvironment: true(this might not strictly be needed) - with jest, mocks
react-domwith the testing version, both for source and builds - uses
ReactDOM.actin one of these tests to verify it actually works
Let's see what CI says.
pr created time in 17 days
push eventthreepointone/react
commit sha 3e9251d605692e6db6103e4fca9771ac30a62247
make testing builds for React/ReactDOM (#17915) This PR introduces adds `react/testing` and `react-dom/testing`. - changes infra to generate these builds - exports act on ReactDOM in these testing builds - uses the new test builds in fixtures/dom In the next PR - - I'll use the new builds for all our own tests - I'll replace usages of TestUtils.act with ReactDOM.act.
push time in 17 days
issue commentfacebook/react
Bug: Strange situation when I create react element outside react class
either on this.config, or as a local variable in render() should be fine. Because it evaluates it "late", the import would have resolved correctly, and it'll use the right definition.
I don't know what elsewhere in your project looks like, but I assume you don't have a circular dependency like this there.
Consider your example again. If you do render BorderCrossDetails inside PersonCrossesGrid, you'll get an infinite depth tree, because PersonCrossesGrid is inside BorderCrossDetails too. I'd reexamine your code, it probably means you haven't structured something right.
comment created time in 17 days
issue commentfacebook/react
Bug: Strange situation when I create react element outside react class
I missed that sorry! As I suspected, BorderCrossDetails depends on PersonCrossesGrid which depends on BorderCrossDetails. That seems wrong.
In general, you shouldn't have to hoist element trees like this, there isn't much of a win to be had, and React is efficient about rendering these trees. So you could keep config inside the component definition. Hard for me to say further because I'm not sure what you're building.
comment created time in 17 days
issue closedfacebook/react
Bug: Strange situation when I create react element outside react class
Here is link for reproduction:https://codesandbox.io/s/friendly-wind-oli5k
My question is can code below
import React, { Component } from "react";
import BorderCrossDetails from "./BorderCrossDetails";
let config = {
detailsComponent: <BorderCrossDetails />
};
class PersonCrossesGrid extends Component {
render() {
console.log(
"From config",
config,
"From render",
<BorderCrossDetails test />
);
return <div>test</div>;
}
}
export default PersonCrossesGrid;
produce this screenshot??
See how in one case type is undefined, and in another case type is BorderCrossDetails.
Strange thing is in my project if I use such line in the code above:
detailsComponent: <PersonDetails/>,
e.g. some different component in the config, the type is resolved correctly.
closed time in 17 days
giorgi-m
issue commentfacebook/react
Bug: Strange situation when I create react element outside react class
My guess is there's a circular dependency at play here, resulting in an undefined import before all the modules have had a chance to settle. That said, it's hard to comment without a code sample, either as a codesandbox link, or as a git repo. Further, this doesn't seem like a React bug/feature request, so I'm going to close the issue, but I'm happy to have a look if if you have a reproducible example. Alternately, I suggest using a community resource like STack overflow (but with a running code sample, or you'll get a similar asnswer)
comment created time in 17 days
Pull request review commentfacebook/react
Portals trigger Suspense boundaries in SSR and only render on client
describe('ReactDOMServerPartialHydration', () => { // Now we're hydrated. expect(ref.current).not.toBe(null); });++ it('should return fallback during server rendering when Portal has a suspense boundary ', () => {+ const portalContainer = document.createElement('div');
@sema can createPortal accept null if document.createElement doesn’t exist? The partial renderer won’t even need it. In the browser, we could throw if an element isn’t passed.
comment created time in 18 days
Pull request review commentfacebook/react
Portals trigger Suspense boundaries in SSR and only render on client
class ReactDOMServerRenderer { try { outBuffer += this.render(child, frame.context, frame.domNamespace); } catch (err) {- if (err != null && typeof err.then === 'function') {+ if (+ err != null &&+ (typeof err.then === 'function' || err === REACT_PORTAL_TYPE)+ ) { if (enableSuspenseServerRenderer) {- invariant(- this.suspenseDepth > 0,- // TODO: include component name. This is a bit tricky with current factoring.- 'A React component suspended while rendering, but no fallback UI was specified.\n' +- '\n' +- 'Add a <Suspense fallback=...> component higher in the tree to ' +- 'provide a loading indicator or placeholder to display.',- );+ if (err === REACT_PORTAL_TYPE) {+ invariant(+ this.suspenseDepth > 0,+ 'Portals must have a fallback UI when being rendered on the server.\n' +
'Portals must have a fallback UI when rendered on the server.\n' +
comment created time in 18 days
Pull request review commentfacebook/react
Portals trigger Suspense boundaries in SSR and only render on client
describe('ReactDOMServerPartialHydration', () => { // Now we're hydrated. expect(ref.current).not.toBe(null); });++ it('should return fallback during server rendering when Portal has a suspense boundary ', () => {+ const portalContainer = document.createElement('div');
In a typical SSR setup, document won't be available, so document.createElement will throw.
So it begs the question: what does a component that has a createPortal call looks like in an SSR setup? Because it won't look like these tests.
comment created time in 18 days
Pull request review commentfacebook/react
Portals trigger Suspense boundaries in SSR and only render on client
describe('ReactDOMServerPartialHydration', () => { // Now we're hydrated. expect(ref.current).not.toBe(null); });++ it('should return fallback during server rendering when Portal has a suspense boundary ', () => {+ const portalContainer = document.createElement('div');+ function App() {+ return (+ <div>+ <React.Suspense fallback={'Loading...'}>+ {ReactDOM.createPortal(<div>{'Portal'}</div>, portalContainer)}+ </React.Suspense>+ </div>+ );+ }++ const markup = ReactDOMServer.renderToString(<App />);+ expect(markup).toContain('Loading...');+ expect(portalContainer.textContent).toBe('');++ const container = document.createElement('div');+ container.innerHTML = markup;++ // Hydrating this cames the fallback to be removed and the Portal to be added.+ const root = ReactDOM.createRoot(container, {hydrate: true});+ act(() => {+ root.render(<App />);+ });+ expect(portalContainer.textContent).toBe('Portal');+ expect(container.textContent).toBe('');+ });++ it('should error during server rendering when Portal does not have a Suspense boundary', () => {+ const portalContainer = document.createElement('div');+ function App() {+ return (+ <div>+ {ReactDOM.createPortal(<div>{'Portal'}</div>, portalContainer)}+ </div>+ );+ }++ expect(() => ReactDOMServer.renderToString(<App />)).toThrow(+ 'Portals must have a fallback UI when being rendered on the server.\n\n' +
'Portals must have a fallback UI when rendered on the server.\n\n' +
comment created time in 18 days
Pull request review commentfacebook/react
Portals trigger Suspense boundaries in SSR and only render on client
describe('ReactDOMServerPartialHydration', () => { // Now we're hydrated. expect(ref.current).not.toBe(null); });++ it('should return fallback during server rendering when Portal has a suspense boundary ', () => {+ const portalContainer = document.createElement('div');+ function App() {+ return (+ <div>+ <React.Suspense fallback={'Loading...'}>+ {ReactDOM.createPortal(<div>{'Portal'}</div>, portalContainer)}+ </React.Suspense>+ </div>+ );+ }++ const markup = ReactDOMServer.renderToString(<App />);+ expect(markup).toContain('Loading...');+ expect(portalContainer.textContent).toBe('');++ const container = document.createElement('div');+ container.innerHTML = markup;++ // Hydrating this cames the fallback to be removed and the Portal to be added.
// Hydrating this removes the fallback and adds the Portal.
comment created time in 18 days
Pull request review commentfacebook/react
Updated release script documentation and command names
Next cherry pick any changes from master that you want to include in the release git cherry-pick <commit-hash> ``` -Once you have cherry picked all of the commits you want to include in the release, push your feature branch and create a Pull Request (so that Circle CI will create a canary):+Once you have cherry picked all of the commits you want to include in the release, push your feature branch and create a Pull Request (so that Circle CI will create a build): ```sh git push origin 16.8.3 ``` -Once CI is complete, follow the regular [**canary**](#publishing-a-canary) and [**promote to stable**](#publishing-a-stable-release) processes.+Once CI is complete, follow the regular [**next**](#publishing-next) and [**promote to stable**](#publishing-a-stable-release) processes. <sup>1: The `build-info.json` artifact can also be used to identify the appropriate commit (e.g. [unpkg.com/react@16.8.3/build-info.json](https://unpkg.com/react@16.8.3/build-info.json) shows us that react version 16.8.3 was created from commit [`29b7b775f`](https://github.com/facebook/react/commit/29b7b775f)).</sup> # Scripts -## `create-canary`-Creates a canary build from the current (local) Git revision.+## `create-next`+Creates a "next" build from the current (local) Git revision. -**This script is an escape hatch.** It allows a canary release to be created without pushing a commit to be verified by Circle CI. **It does not run any automated unit tests.** Testing is solely the responsibility of the release engineer.+**This script is an escape hatch.** It allows a release to be created without pushing a commit to be verified by Circle CI. **It does not run any automated unit tests.** Testing is solely the responsibility of the release engineer. Note that this script git-archives the React repo (at the current revision) to a temporary directory before building, so **uncommitted changes are not included in the build**. #### Example usage-To create a canary from the current branch and revision:+To create a build from the current branch and revision: ```sh-scripts/release/create-canary.js+scripts/release/create-next.js ``` -## `prepare-canary`-Downloads build artifacts from Circle CI in preparation to be published to NPM as a canary release.+## `prepare-next`+Downloads build artifacts from Circle CI in preparation to be published to NPM as a "next" release. -All artifacts built by Circle CI have already been unit-tested (both source and bundles) but canaries should **always be manually tested** before being published. Upon completion, this script prints manual testing instructions.+All artifacts built by Circle CI have already been unit-tested (both source and bundles) but these candidates should **always be manually tested** before being published. Upon completion, this script prints manual testing instructions. #### Example usage-To prepare the artifacts created by [Circle CI build 12677](https://circleci.com/gh/facebook/react/12677#artifacts/containers/0) you would run:+To prepare the artifacts created by [Circle CI build 80592](https://circleci.com/gh/facebook/react/80592#artifacts/containers/0) you would run: ```sh-scripts/release/prepare-canary.js --build=12677+scripts/release/prepare-next.js --build=80592 ``` ## `prepare-stable`-Checks out a canary release from NPM and prepares it to be published as a stable release.+Checks out a "next" release from NPM and prepares it to be published as a stable release. This script prompts for new (stable) release versions for each public package and updates the package contents (both `package.json` and inline version numbers) to match. It also updates inter-package dependencies to account for the new versions. -Canary release have already been tested but it is still a good idea to **manually test and verify a release** before publishing to ensure that e.g. version numbers are correct. Upon completion, this script prints manual testing instructions.+Next release have already been tested but it is still a good idea to **manually test and verify a release** before publishing to ensure that e.g. version numbers are correct. Upon completion, this script prints manual testing instructions.
This release has already been tested, but it is still a good idea to **manually test and verify a release** before publishing to ensure that e.g. version numbers are correct. Upon completion, this script prints manual testing instructions.
comment created time in 18 days