profile
viewpoint
Philipp Spiess philipp-spiess @facebook London, England http://ᵮ.com ❤️✨🇦🇹 in 🇬🇧 · http://this-week-in-react.org · @reactjs DOM team · he/him · Twitter: PhilippSpiess

philipp-spiess/create-store 5

🍱 Create state atoms that are updated via reducers

philipp-spiess/booky 2

Booky is a collaborative, lightweight, real-time bookmark service.

philipp-spiess/awesome 1

A Google inspired TinyMCE Theme.

philipp-spiess/awesome-wasm 1

😎 Curated list of awesome things regarding WebAssembly (wasm) ecosystem.

philipp-spiess/acd_cli 0

A command line interface and FUSE filesystem for Amazon (Cloud) Drive

philipp-spiess/actions-test 0

Testing GitHub Actions. Nothing to see here.

philipp-spiess/ads2-pa1 0

Algorithmen und Datenstrukturen 2 (algodat2)

philipp-spiess/alacritty 0

A cross-platform, GPU-accelerated terminal emulator

Pull request review commentfacebook/react

Add modern event plugin system fork that uses roots

 describe('ReactDOMEventListener', () => {         // The first call schedules a render of '1' into the 'Child'.         // However, we're batching so it isn't flushed yet.         expect(mock.mock.calls[0][0]).toBe('Child');-        // The first call schedules a render of '2' into the 'Child'.-        // We're still batching so it isn't flushed yet either.-        expect(mock.mock.calls[1][0]).toBe('Child');+        if (ReactFeatureFlags.enableModernEventSystem) {+          // As we have two roots, it means we have two event listeners.+          // This also means we enter the event batching phase twice,+          // flushing the child to be 1.+          // TODO: can we improve on this? microtasks seem to problematic+          // (I tried that). We don't have any good way of knowing if+          // another event will occur because another event handler+          // might invoke stopPropagation() along the way. This means+          // we over-flush.

I have played around with this before and also did not find a good way to batch events. Micro tasks are also problematic indeed because they are exhausted before the next event listener is fired (https://jsfiddle.net/gm7r5fkp/) and this behaviour is different when you call the event listeners programatically.

But batched mode (is this still a thing?) or concurrent mode should fix this, right?

trueadm

comment created time in 5 days

push eventphilipp-spiess/philipp-spiess.github.io

Philipp Spiess

commit sha e1442fc69924b0adeb4523d54ea33531698e1286

Updates

view details

push time in a month

push eventphilipp-spiess/philipp-spiess.github.io

Philipp Spiess

commit sha ca61b9126aa1070e0b4fb08dd7ef6cdbb286ba84

Update current role

view details

push time in a month

Pull request review commentfacebook/react

[react-dom] Refactor event priority handling to its own module

+/**+ * 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 type {EventPriority} from 'shared/ReactTypes';+import type {+  TopLevelType,+  DOMTopLevelEventType,+} from 'legacy-events/TopLevelEventTypes';+import type {DispatchConfig} from 'legacy-events/ReactSyntheticEventType';++import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';+import {+  DiscreteEvent,+  UserBlockingEvent,+  ContinuousEvent,+} from 'shared/ReactTypes';+import {simpleEventPluiginEventTypes} from './SimpleEventPlugin';++export const topLevelEventsToDispatchConfig: Map<+  TopLevelType,+  DispatchConfig,+> = new Map();++const eventPriorities = new Map();++// We store all the DOMTopLevelEventTypes and their React Types in pairs of two.+// Furthermore, we ignore prettier so we can keep the formatting sane.++// prettier-ignore+const discreteEvents = [+  DOMTopLevelEventTypes.TOP_BLUR, 'blur',+  DOMTopLevelEventTypes.TOP_CANCEL, 'cancel',+  DOMTopLevelEventTypes.TOP_CLICK, 'click',+  DOMTopLevelEventTypes.TOP_CLOSE, 'close',+  DOMTopLevelEventTypes.TOP_CONTEXT_MENU, 'contextMenu',+  DOMTopLevelEventTypes.TOP_COPY, 'copy',+  DOMTopLevelEventTypes.TOP_CUT, 'cut',+  DOMTopLevelEventTypes.TOP_AUX_CLICK, 'auxClick',+  DOMTopLevelEventTypes.TOP_DOUBLE_CLICK, 'doubleClick',+  DOMTopLevelEventTypes.TOP_DRAG_END, 'dragEnd',+  DOMTopLevelEventTypes.TOP_DRAG_START, 'dragStart',+  DOMTopLevelEventTypes.TOP_DROP, 'drop',+  DOMTopLevelEventTypes.TOP_FOCUS, 'focus',+  DOMTopLevelEventTypes.TOP_INPUT, 'input',+  DOMTopLevelEventTypes.TOP_INVALID, 'invalid',+  DOMTopLevelEventTypes.TOP_KEY_DOWN, 'keyDown',+  DOMTopLevelEventTypes.TOP_KEY_PRESS, 'keyPress',+  DOMTopLevelEventTypes.TOP_KEY_UP, 'keyUp',+  DOMTopLevelEventTypes.TOP_MOUSE_DOWN, 'mouseDown',+  DOMTopLevelEventTypes.TOP_MOUSE_UP, 'mouseUp',+  DOMTopLevelEventTypes.TOP_PASTE, 'paste',+  DOMTopLevelEventTypes.TOP_PAUSE, 'pause',+  DOMTopLevelEventTypes.TOP_PLAY, 'play',+  DOMTopLevelEventTypes.TOP_POINTER_CANCEL, 'pointerCancel',+  DOMTopLevelEventTypes.TOP_POINTER_DOWN, 'pointerDown',+  DOMTopLevelEventTypes.TOP_POINTER_UP, 'pointerUp',+  DOMTopLevelEventTypes.TOP_RATE_CHANGE, 'rateChange',+  DOMTopLevelEventTypes.TOP_RESET, 'reset',+  DOMTopLevelEventTypes.TOP_SEEKED, 'seeked',+  DOMTopLevelEventTypes.TOP_SUBMIT, 'submit',+  DOMTopLevelEventTypes.TOP_TOUCH_CANCEL, 'touchCancel',+  DOMTopLevelEventTypes.TOP_TOUCH_END, 'touchEnd',+  DOMTopLevelEventTypes.TOP_TOUCH_START, 'touchStart',+  DOMTopLevelEventTypes.TOP_VOLUME_CHANGE, 'volumeChange',+];++// prettier-ignore+const userBlockingEvents = [+  DOMTopLevelEventTypes.TOP_DRAG, 'drag',+  DOMTopLevelEventTypes.TOP_DRAG_ENTER, 'dragEnter',+  DOMTopLevelEventTypes.TOP_DRAG_EXIT, 'dragExit',+  DOMTopLevelEventTypes.TOP_DRAG_LEAVE, 'dragLeave',+  DOMTopLevelEventTypes.TOP_DRAG_OVER, 'dragOver',+  DOMTopLevelEventTypes.TOP_MOUSE_MOVE, 'mouseMove',+  DOMTopLevelEventTypes.TOP_MOUSE_OUT, 'mouseOut',+  DOMTopLevelEventTypes.TOP_MOUSE_OVER, 'mouseOver',+  DOMTopLevelEventTypes.TOP_POINTER_MOVE, 'pointerMove',+  DOMTopLevelEventTypes.TOP_POINTER_OUT, 'pointerOut',+  DOMTopLevelEventTypes.TOP_POINTER_OVER, 'pointerOver',+  DOMTopLevelEventTypes.TOP_SCROLL, 'scroll',+  DOMTopLevelEventTypes.TOP_TOGGLE, 'toggle',+  DOMTopLevelEventTypes.TOP_TOUCH_MOVE, 'touchMove',+  DOMTopLevelEventTypes.TOP_WHEEL, 'wheel',+];++// prettier-ignore+const continuousEvents = [+  DOMTopLevelEventTypes.TOP_ABORT, 'abort',+  DOMTopLevelEventTypes.TOP_ANIMATION_END, 'animationEnd',+  DOMTopLevelEventTypes.TOP_ANIMATION_ITERATION, 'animationIteration',+  DOMTopLevelEventTypes.TOP_ANIMATION_START, 'animationStart',+  DOMTopLevelEventTypes.TOP_CAN_PLAY, 'canPlay',+  DOMTopLevelEventTypes.TOP_CAN_PLAY_THROUGH, 'canPlayThrough',+  DOMTopLevelEventTypes.TOP_DURATION_CHANGE, 'durationChange',+  DOMTopLevelEventTypes.TOP_EMPTIED, 'emptied',+  DOMTopLevelEventTypes.TOP_ENCRYPTED, 'encrypted',+  DOMTopLevelEventTypes.TOP_ENDED, 'ended',+  DOMTopLevelEventTypes.TOP_ERROR, 'error',+  DOMTopLevelEventTypes.TOP_GOT_POINTER_CAPTURE, 'gotPointerCapture',+  DOMTopLevelEventTypes.TOP_LOAD, 'load',+  DOMTopLevelEventTypes.TOP_LOADED_DATA, 'loadedData',+  DOMTopLevelEventTypes.TOP_LOADED_METADATA, 'loadedMetadata',+  DOMTopLevelEventTypes.TOP_LOAD_START, 'loadStart',+  DOMTopLevelEventTypes.TOP_LOST_POINTER_CAPTURE, 'lostPointerCapture',+  DOMTopLevelEventTypes.TOP_PLAYING, 'playing',+  DOMTopLevelEventTypes.TOP_PROGRESS, 'progress',+  DOMTopLevelEventTypes.TOP_SEEKING, 'seeking',+  DOMTopLevelEventTypes.TOP_STALLED, 'stalled',+  DOMTopLevelEventTypes.TOP_SUSPEND, 'suspend',+  DOMTopLevelEventTypes.TOP_TIME_UPDATE, 'timeUpdate',+  DOMTopLevelEventTypes.TOP_TRANSITION_END, 'transitionEnd',+  DOMTopLevelEventTypes.TOP_WAITING, 'waiting',+];++/**+ * Turns+ * ['abort', ...]+ * into+ * eventTypes = {+ *   'abort': {+ *     phasedRegistrationNames: {+ *       bubbled: 'onAbort',+ *       captured: 'onAbortCapture',+ *     },+ *     dependencies: [TOP_ABORT],+ *   },+ *   ...+ * };+ * topLevelEventsToDispatchConfig = new Map([+ *   [TOP_ABORT, { sameConfig }],+ * ]);+ */++function processTopEventTypesByPriority(+  eventTypes: Array<DOMTopLevelEventType | string>,+  priority: EventPriority,+): void {+  // As the event types are in pairs of two, we need to iterate+  // through in twos.

😮 neat!

trueadm

comment created time in 2 months

Pull request review commentfacebook/react

[react-dom] Refactor event priority handling to its own module

+/**+ * 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 type {EventPriority} from 'shared/ReactTypes';+import type {TopLevelType} from 'legacy-events/TopLevelEventTypes';++import * as DOMTopLevelEventTypes from './DOMTopLevelEventTypes';+import {DiscreteEvent, UserBlockingEvent, ContinuousEvent} from 'shared/ReactTypes';++// We use a Set here rather than an Array or Object map.

Out of curiosity: Have you also tried a switch statement?

trueadm

comment created time in 2 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 4113547a3df8709cb073146cd3bef48a996feb38

Updates

view details

push time in 2 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha a6da2a8ddad201dfaa3073a371b6e3ee3ac4f55b

Add Twitter pic

view details

push time in 2 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha d6f7df759400606b31377fcc484d6e55c9477768

Add missing header

view details

push time in 2 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 87e3e14ba53c0e10f7257e451be93d51ac945a26

Updates

view details

push time in 2 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 9a1396a4b48a4baeb55a413033b831afc7356147

Publish 43

view details

push time in 2 months

push eventphilipp-spiess/dotfiles

Philipp Spiess

commit sha a9a254280f643d4bab8a29054723ebfdcf2e75c7

Add realpath

view details

push time in 2 months

push eventphilipp-spiess/dotfiles

Philipp Spiess

commit sha 7112d4042458a19f2a53ad782fbddb8e22927ffb

Upgrade Alacritty Config

view details

push time in 3 months

Pull request review commentfacebook/react

Replace `wrap-warning-with-env-check` with an eslint plugin

 module.exports = function(babel, options) {

Maybe rename this babel rule now? It's now longer adding env checks.

walaura

comment created time in 3 months

Pull request review commentfacebook/react

Replace `wrap-warning-with-env-check` with an eslint plugin

-/**- * 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.- */-'use strict';--module.exports = function(babel, options) {-  const t = babel.types;--  const DEV_EXPRESSION = t.identifier('__DEV__');--  const SEEN_SYMBOL = Symbol('expression.seen');--  return {-    visitor: {-      CallExpression: {-        exit: function(path) {-          const node = path.node;--          // Ignore if it's already been processed-          if (node[SEEN_SYMBOL]) {-            return;-          }--          if (-            path.get('callee').isIdentifier({name: 'warning'}) ||-            path.get('callee').isIdentifier({name: 'warningWithoutStack'})-          ) {-            // Turns this code:-            //-            // warning(condition, argument, argument);-            //-            // into this:-            //-            // if (__DEV__) {-            //   if (!condition) {

This part of the babel plugin is no longer in the ESLint rule causing the dev packages to have the following diff:

- !(typeof trustedTypes === 'undefined') ? warning$1(false, "Using 'dangerouslySetInnerHTML' in an svg element with " + 'Trusted Types enabled in an Internet Explorer will cause ' + 'the trusted value to be converted to string. Assigning string ' + "to 'innerHTML' will throw an error if Trusted Types are enforced. " + "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " + 'on the enclosing div instead.') : void 0;
+ warning$1(typeof trustedTypes === 'undefined', "Using 'dangerouslySetInnerHTML' in an svg element with " + 'Trusted Types enabled in an Internet Explorer will cause ' + 'the trusted value to be converted to string. Assigning string ' + "to 'innerHTML' will throw an error if Trusted Types are enforced. " + "You can try to wrap your svg element inside a div and use 'dangerouslySetInnerHTML' " + 'on the enclosing div instead.');
walaura

comment created time in 3 months

Pull request review commentfacebook/react

Replace `wrap-warning-with-env-check` with an eslint plugin

+/**+ * Copyright (c) Facebook, Inc. and its affiliates.+ *+ * This source code is licensed under the MIT license found in the+ * LICENSE file in the root directory of this source tree.+ *+ * @emails react-core+ */++'use strict';++module.exports = function(context) {+  function traverseIf(node) {+    switch (node.type) {+      case 'Identifier':+        return [node.name];+      case 'LogicalExpression':+        if (node.operator === '&&') {+          return [...traverseIf(node.left), ...traverseIf(node.right)];+        }+        return [];+      default:+        return [];+    }+  }++  function hasIfInParents(node) {+    let done = false;+    while (!done) {+      if (!node.parent) {+        return false;+      }+      node = node.parent;+      if (+        node.type === 'IfStatement' &&+        traverseIf(node.test).includes('__DEV__')+      ) {+        return true;+      }+    }+  }++  function report(node) {+    context.report({+      node: node,+      message: 'Wrap {{identifier}} in a `if (__DEV__)` check',

Maybe add why so when new contributors see them they learn something? I.e "to ensure that warnings are omitted in production builds".

walaura

comment created time in 3 months

issue commentwebpack-contrib/mini-css-extract-plugin

Access Entrypoint Chunk Name At Runtime

@Quirksmode We're solving the usecase via https://github.com/webpack-contrib/mini-css-extract-plugin/pull/459 now :-)

philipp-spiess

comment created time in 4 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 166213668f5fa13c1f6511dcfd15282ea0f2093d

Updates

view details

push time in 4 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha fa59846141ac7a81474253748fdcdd002e667aeb

Issue 42

view details

push time in 4 months

issue commentfacebook/react

preventDefault() on pointerdown events don't work as expected on Chrome for Android

I suspect this is a browser issue. Did it work on Chrome for Android before? (I don't have a device to test unfortunately)

There's no special code in React for handing preventDefault() of pointer events. We simply forward the call to the native event: https://github.com/facebook/react/blob/5faf377df5267c4248599e14311a75c2f46050c0/packages/legacy-events/SyntheticEvent.js#L115-L128

Do you mind checking what happens when you use native event listeners instead? https://codesandbox.io/s/pointerdown-prevent-default-react-xnydk

If the same issue occurs, I suggest we file a Chromium ticket instead 🙂

voluntadpear

comment created time in 4 months

pull request commentwebpack-contrib/mini-css-extract-plugin

feat(ordering): add support for insertInto option

style-loader recently made the custom insertion function a bit more generic by not requiring it to return a parent to insert the style into but instead allow the user to handle the DOM attachment on their own: https://github.com/webpack-contrib/style-loader/pull/413/files

I think it would be great if we can have the same behavior for mini-css-extract-plugin. What do you think?

brophdawg11

comment created time in 4 months

push eventphilipp-spiess/this-week-in-react

philipp-spiess

commit sha 31d9e136c2fe5b51641c0b359d0e7bd494cb4d06

Deploy to GitHub pages

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha c6c9061cdb8cd05ec86ad534582b573586626fb0

Updates

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 543c371d3d71a0c00dd320c98b2e2ac6b6670ca3

Update html

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

philipp-spiess

commit sha 05c433d14987222e05413d2a288b8e85cd89a212

Deploy to GitHub pages

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 3f90157bc909061238783938a0f526d60861caaf

Updates

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 937ac87d9d597882cc53ce4c86205ad6a2bc3713

Update Contribution Number

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

philipp-spiess

commit sha dfcd18e7d742174260d5613745120fbdde45a595

Deploy to GitHub pages

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 78125ba11fc4302a04d68805007a0041a21025ee

Updates

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha d3d0f3c39d43daec1fb239474c1bb20481c381e0

Prevent flickering on Safari

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

philipp-spiess

commit sha 2684a5422408240c055a499ce38d031fcb540452

Deploy to GitHub pages

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

philipp-spiess

commit sha 02b8aa312526b24db72e9a8bfda96ff3d9b69ced

Deploy to GitHub pages

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 32ed629b65384878c6a5b50afa2e2e5f3a8fb830

Updates

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 45ca1b0fbcaaefa012c7b95e05f1e2d0a362647b

Remove the weekly part

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha e1ca1b9cbdf4211966a5c0e3c914319fbb845cfc

Updates

view details

push time in 5 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha 9317a962508312c3502be4669f1a71bf1c6c359f

Release Issue 41

view details

push time in 5 months

create barnchPSPDFKit-labs/hammer.js

branch : clear-stale-events-in-store

created branch time in 5 months

push eventPSPDFKit/pspdfkit-web-example-vue

PSPDFKit

commit sha 2b250a439ca139c8a97ea7428df1ef203bbcb0b7

PSPDFKit for Web Vue.js Example

view details

push time in 6 months

push eventPSPDFKit/pspdfkit-web-example-react

PSPDFKit

commit sha 2659a423ca7d533ec427af24ce5ef4a9d0621c88

PSPDFKit for Web React.js Example

view details

push time in 6 months

push eventPSPDFKit/pspdfkit-web-example-webpack

PSPDFKit

commit sha 88921a6c91313a3dc48757338d5172ef4b172ed3

PSPDFKit for Web Webpack Example

view details

push time in 6 months

push eventPSPDFKit/pspdfkit-server-example-nodejs

PSPDFKit

commit sha af96a554132531f6b383eb9772be9646c0ab9c8a

PSPDFKit for Web Node.js Example

view details

push time in 6 months

push eventPSPDFKit/pspdfkit-server-example-rails

PSPDFKit

commit sha db6940d051a5465f64c52af4e0dbef247b4d3301

PSPDFKit for Web Rails Example

view details

push time in 6 months

push eventphilipp-spiess/this-week-in-react

philipp-spiess

commit sha 13cdd15da0d1a96aede126223d6b862f123d8ec4

Deploy to GitHub pages

view details

push time in 6 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha fe0267fb927fe33578e3d04cdaa339deb5b70740

Issue 40

view details

push time in 6 months

push eventphilipp-spiess/this-week-in-react

Philipp Spiess

commit sha abd2c090f9754e4ac2f5561969b86a7bc9480156

Updates

view details

push time in 6 months

more