Skip to content

Instantly share code, notes, and snippets.

View trueadm's full-sized avatar

Dominic Gannaway trueadm

View GitHub Profile
/**
* 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',
@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>;
}
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) => {

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";
// "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) {