With Flare, you can build responders to intercept DOM events. There are two types of ways of doing this:
- capturing target events
- capturing root events
Target events occur on a child in a sub-tree:
| /** | |
| * React v16.0.0-alpha.3 | |
| * | |
| * Copyright 2013-present, Facebook, Inc. | |
| * All rights reserved. | |
| * | |
| * This source code is licensed under the BSD-style license found in the | |
| * LICENSE file in the root directory of this source tree. An additional grant | |
| * of patent rights can be found in the PATENTS file in the same directory. | |
| * |
| let start = 0; | |
| let timerId = null; | |
| let log = []; | |
| let invalidatingEvent = false; | |
| const validInputTypes = new Set([ | |
| 'insertText', | |
| 'insertCompositionText', | |
| 'insertFromComposition', | |
| 'insertLineBreak', |
| // I'm suggesting we add a new "adopt X from <Y />" syntax to the JSX language | |
| // it would de-sugar to render prop children, but look and read better than | |
| // what we currently have. For example: | |
| // 1. | |
| // this sugar | |
| function MyComponent(props) { | |
| adopt foo from <Bar />; | |
| return <div>{foo}</div>; | |
| } |
| import {useEffect} from 'react'; | |
| const originalSetBaseAndExtent = Selection.prototype.setBaseAndExtent; | |
| export default function useEventRecorder() { | |
| useEffect(() => { | |
| const records = []; | |
| let isComposing = false; | |
| const onSelectionChange = (event: Event) => { |
| // Option C: | |
| // this implementation has a small amount of overhead compared to (a) and (b) | |
| const React = require('react'); | |
| const counterState = React.createStateReducer({ | |
| initialState: props => ({ | |
| counter: 0, | |
| divRef: React.createRef(), | |
| }), | |
| reducer: (action, state) => { |
| // ----------------- | |
| // This system replaces this existing Flare event system and its concept of Event Components. | |
| // ----------------- | |
| // Here's an example of how we might make a Pressable View: | |
| // PressableView.js | |
| import {usePressResponder} from "react-events/press"; | |
| import {useFocusResponder} from "react-events/focus"; | |
| import {useHoverResponder} from "react-events/hover"; |
| // "counter.react" | |
| import {format} from 'externalLib'; | |
| state { | |
| // acts like default state | |
| counter = 0; | |
| } | |
| props { |
| _getPropertyAssignmentStatement( | |
| location: BabelNodeLVal, | |
| value: Value, | |
| mightHaveBeenDeleted: boolean, | |
| deleteIfMightHaveBeenDeleted: boolean = false | |
| ): BabelNodeStatement { | |
| if (mightHaveBeenDeleted) { | |
| // We always need to serialize this value in order to keep the invariants happy. | |
| let serializedValue = this.serializeValue(value); | |
| let condition; |
| const React = require("react"); | |
| const Lifecycles = React.createLifecycleEvents({ | |
| didMount({ setState }) { | |
| setState({ | |
| disabled: false, | |
| }); | |
| }, | |
| didUpdate({ inputRef }) { | |
| if (document.activeElement !== inputRef.value) { |