Skip to content

Instantly share code, notes, and snippets.

Dominic Gannaway trueadm

Block or report user

Report or block trueadm

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile

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:

View flare-ideas.jsx
// -----------------
// 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";
View _getPropertyAssignmentStatement.js
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;
View output.js
(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") {
View React.createState.js
const State = React.createState();
function MyComponent(props) {
return (
initialState={() => ({ counter: 0, lastProps: props, divRef: React.createRef() }) }
deriveState={state => ({ lastProps: props }) }
shouldUpdate={(state, nextState) => ... }
didMount={(state, setState) => ... }
getSnapshotBeforeUpdate={state => ... }
trueadm / adopt-syntax.js
Last active Sep 11, 2019
Adding a the "adopt" keyword to the JSX syntax
View adopt-syntax.js
// 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>;
View more-ideas-with-state.js
const state = React.createState({
initialState(props) {
return {
counter: 0,
buttonRef: React.createRef(),
lastProps: props,
deriveState(props, state) {
return {
View 1-future-ideas.js
const React = require("react");
const Lifecycles = React.createLifecycleEvents({
didMount({ setState }) {
disabled: false,
didUpdate({ inputRef }) {
if (document.activeElement !== inputRef.value) {
View events.js
// maybe we don't need to pass "click" as the first param, just passing in the config might be good enough
const handleClick = ReactDOM.createEvent("click", {
// imperative stuff is defined with config
preventDefault: true,
stopPropagation: true,
passive: false,
function reducer(e) {
// do reducer stuff
View gist:69a3b3b743ec8623f2166575b70ec51b
// Use IntelliSense to learn about possible Node.js debug attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit:
"version": "0.2.0",
"configurations": [
"type": "node",
"request": "attach",
"name": "Attach",
You can’t perform that action at this time.