From 3f3c271458875805f48ccd99ddc6127d4dda9b22 Mon Sep 17 00:00:00 2001 From: Cody Bennett <23324155+CodyJasonBennett@users.noreply.github.com> Date: Wed, 1 Jun 2022 08:44:09 -0500 Subject: [PATCH] refactor(core): don't check react internals --- src/constants.ts | 5 ----- src/reconciler.ts | 7 +++---- src/utils.ts | 19 +++++++++++-------- 3 files changed, 14 insertions(+), 17 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index e8c386c..ea36b58 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -10,11 +10,6 @@ export const POINTER_EVENTS = [ 'onPointerOut', ] as const -/** - * React's internal props. - */ -export const RESERVED_PROPS = ['children', 'key', 'ref', '__self', '__source'] as const - /** * React rendering modes (defaults to blocking). */ diff --git a/src/reconciler.ts b/src/reconciler.ts index dbe7717..e7bae1f 100644 --- a/src/reconciler.ts +++ b/src/reconciler.ts @@ -2,7 +2,6 @@ import Reconciler from 'react-reconciler' import * as OGL from 'ogl' import * as React from 'react' import { toPascalCase, applyProps, attach, detach, classExtends } from './utils' -import { RESERVED_PROPS } from './constants' import { Catalogue, Instance, InstanceProps, RootState } from './types' // Custom objects that extend the OGL namespace @@ -79,7 +78,7 @@ export const createInstance = (type: string, { object, args, ...props }: Instanc } // Create instance - const instance = object || (Array.isArray(args) ? new target(...args) : new target(args)) + const instance: Instance = object || (Array.isArray(args) ? new target(...args) : new target(args)) // If primitive, make a note of it if (type === 'primitive') instance.isPrimitive = true @@ -202,13 +201,13 @@ export const checkShallow = (a: any, b: any) => { /** * Prepares a set of changes to be applied to the instance. */ -export const diffProps = (instance: Instance, newProps: InstanceProps, oldProps: InstanceProps = {}) => { +export const diffProps = (instance: Instance, newProps: InstanceProps, oldProps: InstanceProps) => { const changedProps: InstanceProps = {} // Sort through props for (const key in newProps) { // Skip reserved keys - if (RESERVED_PROPS.includes(key as typeof RESERVED_PROPS[number])) continue + if (key === 'children') continue // Skip primitives if (instance.isPrimitive && key === 'object') continue // Skip if props match diff --git a/src/utils.ts b/src/utils.ts index 5a5848c..685f0cb 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -1,6 +1,6 @@ import * as React from 'react' import * as OGL from 'ogl' -import { COLORS, POINTER_EVENTS, RESERVED_PROPS } from './constants' +import { COLORS, POINTER_EVENTS } from './constants' import { useIsomorphicLayoutEffect } from './hooks' import { DPR, EventHandlers, Instance, InstanceProps, ObjectMap, RootState, SetBlock } from './types' @@ -95,15 +95,18 @@ export const detach = (parent: Instance, child: Instance) => { export const applyProps = (instance: Instance, newProps: InstanceProps, oldProps?: InstanceProps) => { // Mutate our OGL element for (let key in newProps) { - const isReserved = RESERVED_PROPS.includes(key as typeof RESERVED_PROPS[number]) - const isHandler = POINTER_EVENTS.includes(key as typeof POINTER_EVENTS[number]) - const isIdentical = newProps[key] === oldProps?.[key] + // Don't mutate reserved keys + if (key === 'children') continue - // Collect event handlers - if (isHandler) instance.__handlers = { ...instance.__handlers, [key]: newProps[key] } + // Don't mutate unchanged keys + if (newProps[key] === oldProps?.[key]) continue - // Skip key if reserved to react, a react-ogl event, or unchanged (no-op) - if (isReserved || isHandler || isIdentical) continue + // Collect event handlers + const isHandler = POINTER_EVENTS.includes(key as typeof POINTER_EVENTS[number]) + if (isHandler) { + instance.__handlers = { ...instance.__handlers, [key]: newProps[key] } + continue + } const value = newProps[key] let root = instance