profile
viewpoint
Caíque de Castro Soares da Silva caiquecastro @Venturus-org Taubaté http://www.caiquecastro.com A Developer and R&D Engineer.

caiquecastro/adonis-lucid 0

🗃 The ORM of AdonisJs Framework with support for PostgreSQL, MSSQL, MySQL, MariaDB, SQLite3, Oracle and Amazon Redshift

caiquecastro/adonis-mail 0

Email provider for adonis framework

caiquecastro/ambientum 0

Docker native solution for running Laravel projects. From Development to Production

caiquecastro/awesome-nodejs 0

:zap: Delightful Node.js packages and resources

caiquecastro/awesome-uses 0

A list of /uses pages detailing developer setups, gear, software and configs.

caiquecastro/bluebird 0

:bird: :zap: Bluebird is a full featured promise library with unmatched performance.

caiquecastro/boilr-docker-compose-php 0

Boilr template for generating `docker-compose.yml` files for `PHP` projects

caiquecastro/bootstrap 0

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

caiquecastro/bootstrap-vue 0

BootstrapVue, with over 40 plugins and more than 80 custom components, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.

issue closedfacebook/react

Bug: the input event was trigger in wrong time

here is the reproduce link

when you input something, it triggers both input and change event

but according to official doc, change event only be triggered when input blur

closed time in 6 minutes

HomyeeKing

issue commentfacebook/react

Bug: the input event was trigger in wrong time

@HomyeeKing from our docs:

The onChange event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because onChange is a misnomer for its behavior and React relies on this event to handle user input in real time.

Going to close this as it seems to be working as documented, but thanks for submitting.

HomyeeKing

comment created time in 6 minutes

pull request commentfacebook/react

Devtool: `$r` should contain `hooks` property when it is forwardRef or memo component

Seems good. Thanks 👍

meowtec

comment created time in 20 minutes

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

Let's continue in the separate PR? That way we can focus on that by itself

rickhanlonii

comment created time in 38 minutes

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

Maybe it is trivial, and we just don't store the microtask on the node.

rickhanlonii

comment created time in 42 minutes

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

We do need to cancel non-discrete tasks once the priority changes to discrete (like a child that uses startTransition and a parent that doesn't), so we'll need to only cancel the non-discrete tasks somehow, which seems non-trivial to unblock this.

rickhanlonii

comment created time in 43 minutes

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

@rickhanlonii The suggestion is to not cancel the microtask once it's scheduled 😬

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

We can't cancel discrete work though. So that won't make sense anyway.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

@sebmarkbage one key benefit of using the scheduler for this right now is that we call cancelCallback when the priority changes. With this implementation, that just works. With a separate queueMicrotask impl, we'd have to sort out that cancelation. I know @acdlite had a suggestion for how to remove that dependency on cancelCallback, but I didn't entirely follow it.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

We could call it like queueDiscrete or something. That's fine, though feels like too early of an abstraction right now and I wouldn't block the PR over it. I would put a TODO and then revisit when React Native is ready.

rickhanlonii

comment created time in an hour

issue commentfacebook/react

RFC: Plan for custom element attributes/properties in React 18

We still can't pass JS values directly to Custom Elements (Web Components)? It's been many years...

robdodson

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

+/**+ * 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.+ *+ */++function queueMicrotaskPolyfill(callback: boolean => void) {+  if (typeof queueMicrotask !== 'undefined') {+    queueMicrotask(callback);+  } else if (typeof Promise !== 'undefined') {+    Promise.resolve(null)+      .then(callback)+      .catch(e => {

If you can, please double check that's what you meant.

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

+/**+ * 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.+ *+ */++function queueMicrotaskPolyfill(callback: boolean => void) {+  if (typeof queueMicrotask !== 'undefined') {+    queueMicrotask(callback);+  } else if (typeof Promise !== 'undefined') {+    Promise.resolve(null)+      .then(callback)+      .catch(e => {

Done

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

I was thinking that for React Native it might be that discrete !== micro task. Since we can implement it differently there and some discrete might need to consider the thread they're on. Seems like Host Config might be the better injection point there but could be layered twice. Like the DOM host config defers to scheduler/queueMicrotask.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

If we publish a timer polyfill we'll likely put that in the Scheduler package, too. We also may need to publish our own Promise polyfill for older browsers, so it integrates properly with our message event listener. I don't think we're going to solve all of that in this PR.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

Arguably all of the Scheduler methods should be host configs so we can possibly swap them out postTask one day without the Scheduler package indirection. (So, the same rationale for not wrapping queueMicrotask). But I don't want to bikeshed this right now so just put it somewhere and we can figure out the host config -> Scheduler boundary later.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

Maybe it should just be a host config?

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

I would do it as an export of Scheduler for now.

import queueMicrotask from 'scheduler/queueMicrotask';
rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

I'm not sure where this should live but the part I don't get is why it's adding it to a scheduler queue? It seems like it should just be straight passthrough.

It could be part of scheduler just to have one convenient way to get all these polyfills but now I'm skeptical it belongs there because it's tempting to integrate it unnecessarily.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

@acdlite I can break this up, do you agree with @sebmarkbage that this shouldn't be in scheduler? If so, where should this go?

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

 describe('ReactDOMHooks', () => {      inputRef.current.value = 'abc';     inputRef.current.dispatchEvent(-      new Event('input', {bubbles: true, cancelable: true}),+      new Event('input', {+        bubbles: true,+        cancelable: true,+      }),     ); -    Scheduler.unstable_flushAll();+    await act(async () => {

Will update, I didn't add the flush here but that's good context for fixing it in the future.

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

 import { const {   unstable_runWithPriority: Scheduler_runWithPriority,   unstable_scheduleCallback: Scheduler_scheduleCallback,+  unstable_scheduleMicrotaskCallback: Scheduler_scheduleMicrotaskCallback,

I think it should just be queueMicrotask. It's just a literal polyfill for that function which is already a standard.

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

+/**+ * 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.+ *+ */++function queueMicrotaskPolyfill(callback: boolean => void) {+  if (typeof queueMicrotask !== 'undefined') {+    queueMicrotask(callback);+  } else if (typeof Promise !== 'undefined') {+    Promise.resolve(null)+      .then(callback)+      .catch(e => {+        setTimeout(() => {

Not too concerned since it really only affects debugging and all modern browsers support queueMicrotask. (God I hate this problem so much, though.)

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

 import { const {   unstable_runWithPriority: Scheduler_runWithPriority,   unstable_scheduleCallback: Scheduler_scheduleCallback,+  unstable_scheduleMicrotaskCallback: Scheduler_scheduleMicrotaskCallback,

I don't have a strong opinion on the API.

An alternative may be:

scheduleCallback(
  MicrotaskPriority,
  performSyncWorkOnRoot.bind(null, root),
);
rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

+/**+ * 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.+ *+ */++function queueMicrotaskPolyfill(callback: boolean => void) {+  if (typeof queueMicrotask !== 'undefined') {+    queueMicrotask(callback);+  } else if (typeof Promise !== 'undefined') {+    Promise.resolve(null)+      .then(callback)+      .catch(e => {+        setTimeout(() => {

Important note: when we fallback to the promise implementation, we have to push errors into a new task or they'll be treated as unhandled promise rejections. I'm using the MDN polyfill version here, but we may want to schedule a MicrotaskPriority task instead, since these can be pushed behind other work.

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

 describe('ReactIncrementalErrorHandling', () => {     expect(ReactNoop.getChildren()).toEqual([span('Caught an error: oops!')]);   }); -  it("retries at a lower priority if there's additional pending work", () => {+  it("retries at a lower priority if there's additional pending work", async () => {+    if (gate(flags => flags.enableDiscreteEventMicroTasks)) {

@acdlite there are 3 tests disabled in this file, which I'm not sure how to fix without an microtask integration with toFlushAndYieldThrough

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

 describe('ReactSuspenseWithNoopRenderer', () => {     }      const root = ReactNoop.createRoot();-    ReactNoop.discreteUpdates(() => {-      // High pri-      root.render(<App text="A" />);-    });-    // Low pri-    root.render(<App text="A" shouldSuspend={true} />);+    if (gate(flags => flags.enableDiscreteEventMicroTasks)) {

These tests are not as good as before since we can't flush only the microtasks without all the other work.

rickhanlonii

comment created time in an hour

Pull request review commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

+/**+ * 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.+ *+ */++function queueMicrotaskPolyfill(callback: boolean => void) {+  if (typeof queueMicrotask !== 'undefined') {+    queueMicrotask(callback);+  } else if (typeof Promise !== 'undefined') {+    Promise.resolve(null)+      .then(callback)+      .catch(e => {

This function can be hoised to be the same instance instead of a closure.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

I wasn't thinking that queueMicrotask would be integrated into the scheduler since it's not natively neither. They're separate things.

Is there a reason that this isn't literally export scheduleMicrotask = typeof queueMicrotask === 'function' ? queueMicrotask : ... when it's available? That's the minimal overhead.

rickhanlonii

comment created time in an hour

pull request commentfacebook/react

Add scheduleMicrotaskCallback, use it to schedule flushSync for discrete update priority

<!-- 0 failure: 1 warning: Build job for bas...

1 markdown notices DangerID: danger-id-stable; -->

<table> <thead> <tr> <th width="50"></th> <th width="100%" data-danger-table="true">Warnings</th> </tr> </thead> <tbody><tr> <td>:warning:</td> <td>Build job for base commit is still pending: a6b5256a29b60620bdeb9266d4935cb59cc1258e</td> </tr> </tbody> </table>

Size changes (stable)

<p align="right"> Generated by :no_entry_sign: <a href="https://danger.systems/js">dangerJS</a> against 9545f0f7d3bd03344bdd06b782735d72309557ea </p>

rickhanlonii

comment created time in an hour

more