feat: component upgrading

Author: marklawlor

README.md

@@ -27,7 +27,7 @@ These are the features that are "done". Only basic testing as been performed.
 - [ ] Style target prop
 - [ ] Metro
 - [ ] Update compiler to new syntax
-- [ ] Upgrading elements
+- [x] Upgrading elements
 - [ ] Animations
 - [ ] Transitions
 - [ ] Important styles

src/components/Text/Text.native.tsx

@@ -2,14 +2,14 @@ import { useId } from "react";
 import { Text as RNText, type TextProps } from "react-native";
 
 import { useRef } from "../../native/useRef";
-import { useStyled } from "../../native/useStyled";
+import { useStyledProps } from "../../native/useStyled";
 import { StyleRegistry } from "../../specs/StyleRegistry";
 import { copyComponentProperties, getDeepKeys } from "../../utils";
 
 export const Text = copyComponentProperties(RNText, (props: TextProps) => {
   const componentId = useId();
 
-  const style = useStyled(
+  const style = useStyledProps(
     componentId,
     (props as Record<string, string>).className,
     props,

src/components/View/View.native.tsx

@@ -1,42 +1,45 @@
 import { useId } from "react";
-import { View as RNView, type ViewProps } from "react-native";
+import { Pressable, View as RNView, type ViewProps } from "react-native";
 
+import { useElement } from "../../native/useElement";
 import { useRef } from "../../native/useRef";
-import { useStyled } from "../../native/useStyled";
+import { useStyledProps } from "../../native/useStyled";
 import { StyleRegistry } from "../../specs/StyleRegistry";
 import { copyComponentProperties, getDeepKeys } from "../../utils";
 
-export const View = copyComponentProperties(RNView, (props: ViewProps) => {
-  const componentId = useId();
+export const View = copyComponentProperties(
+  RNView,
+  (originalProps: ViewProps) => {
+    let p = originalProps as Record<string, any>;
+    const componentId = useId();
+    const ref = useRef(componentId, p.ref);
+    const next = useStyledProps(componentId, p.className, p);
 
-  const style = useStyled(
-    componentId,
-    (props as Record<string, string>).className,
-    props,
-  );
+    if (p.style) {
+      StyleRegistry.updateComponentInlineStyleKeys(
+        componentId,
+        getDeepKeys(p.style),
+      );
+    }
 
-  const ref = useRef(componentId, (props as Record<string, any>).ref);
+    p = {
+      ...next.props,
+      ...p,
+      ...next.importantProps,
+      ref,
+      style:
+        next.style || next.importantStyle
+          ? [next.style, p.style, next.importantStyle]
+          : p.style,
+    };
 
-  if (props.style) {
-    StyleRegistry.updateComponentInlineStyleKeys(
+    return useElement(
+      next.declarations.active || next.declarations.hover ? Pressable : RNView,
       componentId,
-      getDeepKeys(props.style),
+      next,
+      p,
     );
-  }
-
-  return (
-    <RNView
-      {...style.props}
-      {...props}
-      {...style.importantProps}
-      ref={ref}
-      style={
-        style.style || style.importantStyle
-          ? [style.style, props.style, style.importantStyle]
-          : props.style
-      }
-    />
-  );
-});
+  },
+);
 
 export default View;

src/index.tsx

@@ -6,7 +6,7 @@ import type { Math } from "./specs/Math.nitro";
 export { StyleRegistry } from "./specs/StyleRegistry";
 export type * from "./specs/StyleRegistry";
 
-export { useStyled } from "./native/useStyled";
+export { useStyledProps as useStyled } from "./native/useStyled";
 export * from "./native/specificity";
 
 const CssNitroHybridObject =

src/native/useElement.ts

@@ -0,0 +1,107 @@
+import { createElement, type ComponentType, type ExoticComponent } from "react";
+
+import { StyleRegistry } from "../specs/StyleRegistry";
+import { ContainerContext, VariableContext } from "./contexts";
+import type { useStyledProps } from "./useStyled";
+
+export function useElement(
+  component: ComponentType | ExoticComponent<any>,
+  componentId: string,
+  next: ReturnType<typeof useStyledProps>,
+  p: Record<string, any>,
+) {
+  if (next.declarations.active) {
+    p.onPress =
+      p.onPress ??
+      (() => {
+        return;
+      });
+    p.onPressIn = onPressIn(componentId, p);
+    p.onPressOut = onPressOut(componentId, p);
+  }
+
+  if (next.declarations.hover) {
+    p.onHoverIn = onHoverIn(componentId, p);
+    p.onHoverOut = onHoverOut(componentId, p);
+  }
+
+  if (next.declarations.focus) {
+    p.onFocus = onFocus(componentId, p);
+    p.onBlur = onBlur(componentId, p);
+  }
+
+  if (next.declarations.animated) {
+    component = getAnimatedComponent(component);
+  }
+
+  if (next.containerScope === componentId) {
+    p = {
+      value: next.containerScope,
+      children: createElement(component, p),
+    };
+    component = ContainerContext;
+  }
+
+  if (next.variableScope === componentId) {
+    p = {
+      value: next.variableScope,
+      children: createElement(component, p),
+    };
+    component = VariableContext;
+  }
+
+  return createElement(component, p);
+}
+
+const onPressIn = (id: string, props: Record<string, any>) => () => {
+  props.onPressIn?.();
+  StyleRegistry.updateComponentState(id, "active", true);
+};
+
+const onPressOut = (id: string, props: Record<string, any>) => () => {
+  props.onPressIn?.();
+  StyleRegistry.updateComponentState(id, "active", false);
+};
+
+const onHoverIn = (id: string, props: Record<string, any>) => () => {
+  props.onHoverIn?.();
+  StyleRegistry.updateComponentState(id, "hover", true);
+};
+
+const onHoverOut = (id: string, props: Record<string, any>) => () => {
+  props.onHoverOut?.();
+  StyleRegistry.updateComponentState(id, "hover", false);
+};
+
+const onFocus = (id: string, props: Record<string, any>) => () => {
+  props.onFocus?.();
+  StyleRegistry.updateComponentState(id, "focus", true);
+};
+
+const onBlur = (id: string, props: Record<string, any>) => () => {
+  props.onBlur?.();
+  StyleRegistry.updateComponentState(id, "focus", false);
+};
+
+const animatedCache = new WeakMap<ComponentType, ComponentType>();
+function getAnimatedComponent(component: ComponentType) {
+  if (
+    "displayName" in component &&
+    component.displayName?.startsWith("Animated.")
+  ) {
+    return component;
+  }
+
+  const cached = animatedCache.get(component);
+  if (cached) {
+    return cached;
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  const createAnimatedComponent = require("react-native-reanimated")
+    .createAnimatedComponent as (component: ComponentType) => ComponentType;
+
+  const animatedComponent = createAnimatedComponent(component);
+  animatedCache.set(component, animatedComponent);
+  return animatedComponent;
+}

src/native/useHandlers.ts

@@ -4,14 +4,13 @@ import type { AnyMap } from "react-native-nitro-modules";
 
 import { StyleRegistry, type Declarations } from "../specs/StyleRegistry";
 import { ContainerContext, VariableContext } from "./contexts";
-import { useHandlers } from "./useHandlers";
 
 const EMPTY_DECLARATIONS: Declarations = { classNames: "" };
 
-export function useStyled(
+export function useStyledProps(
   componentId: string,
   className: string | undefined,
-  props: Record<string, any>,
+  originalProps: Record<string, any>,
   isDisabled = false,
 ) {
   const [instance, rerender] = useReducer(() => ({}), {});
@@ -32,7 +31,7 @@ export function useStyled(
 
   if (declarations.requiresRuntimeCheck) {
     for (const entry of declarations.requiresRuntimeCheck) {
-      if (entry[1](componentId, props as AnyMap, isDisabled)) {
+      if (entry[1](componentId, originalProps as AnyMap, isDisabled)) {
         validClassNames += " " + entry[0];
       }
     }
@@ -41,7 +40,7 @@ export function useStyled(
   // Update the variable scope after we have retrieved the declarations, so it uses its own scope
   variableScope = declarations.variableScope ?? variableScope;
 
-  let styled = useMemo(() => {
+  const props = useMemo(() => {
     if (!validClassNames) {
       return {};
     }
@@ -65,7 +64,10 @@ export function useStyled(
     [componentId],
   );
 
-  styled = useHandlers(componentId, props, declarations, styled);
-
-  return styled;
+  return {
+    ...props,
+    declarations,
+    variableScope: variableScope,
+    containerScope,
+  };
 }