Skip to content

Instantly share code, notes, and snippets.

View trueadm's full-sized avatar

Dominic Gannaway trueadm

View GitHub Profile
let start = 0;
let timerId = null;
let log = [];
let invalidatingEvent = false;
const validInputTypes = new Set([
'insertText',
'insertCompositionText',
'insertFromComposition',
'insertLineBreak',
import {useEffect} from 'react';
const originalSetBaseAndExtent = Selection.prototype.setBaseAndExtent;
export default function useEventRecorder() {
useEffect(() => {
const records = [];
let isComposing = false;
const onSelectionChange = (event: Event) => {

React Flare

Target vs Root events

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:

// -----------------
// 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";
_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;
(function () {
var _$O = this;
var _$Q = _$O.Array;
var _$R = _$Q.from;
var _D = function (renderer, Root, data) {
var _U = function (story, i) {
var _1V = function (string) {
if (typeof string === "boolean" || typeof string === "number") {
const State = React.createState();
function MyComponent(props) {
return (
<State
initialState={() => ({ counter: 0, lastProps: props, divRef: React.createRef() }) }
deriveState={state => ({ lastProps: props }) }
shouldUpdate={(state, nextState) => ... }
didMount={(state, setState) => ... }
getSnapshotBeforeUpdate={state => ... }
@trueadm
trueadm / adopt-syntax.js
Last active November 27, 2021 03:32
Adding a the "adopt" keyword to the JSX syntax
// 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>;
}
const state = React.createState({
initialState(props) {
return {
counter: 0,
buttonRef: React.createRef(),
lastProps: props,
};
},
deriveState(props, state) {
return {
const React = require("react");
const Lifecycles = React.createLifecycleEvents({
didMount({ setState }) {
setState({
disabled: false,
});
},
didUpdate({ inputRef }) {
if (document.activeElement !== inputRef.value) {