react-native-css 0.0.0-nightly.99fdf44 → 0.0.0-nightly.a37903f

package/src/components/TouchableOpacity.tsx

@@ -7,16 +7,19 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNTouchableOpacity> = {
   className: "style",
 };
 
-export function TouchableOpacity(
-  props: StyledProps<TouchableOpacityProps, typeof mapping>,
-) {
-  return useCssElement(RNTouchableOpacity, props, mapping);
-}
+export const TouchableOpacity = copyComponentProperties(
+  RNTouchableOpacity,
+  (props: StyledProps<TouchableOpacityProps, typeof mapping>) => {
+    return useCssElement(RNTouchableOpacity, props, mapping);
+  },
+);
 
 export default TouchableOpacity;

package/src/components/TouchableWithoutFeedback.tsx

@@ -7,16 +7,19 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNTouchableWithoutFeedback> = {
   className: "style",
 };
 
-export function TouchableWithoutFeedback(
-  props: StyledProps<TouchableWithoutFeedbackProps, typeof mapping>,
-) {
-  return useCssElement(RNTouchableWithoutFeedback, props, mapping);
-}
+export const TouchableWithoutFeedback = copyComponentProperties(
+  RNTouchableWithoutFeedback,
+  (props: StyledProps<TouchableWithoutFeedbackProps, typeof mapping>) => {
+    return useCssElement(RNTouchableWithoutFeedback, props, mapping);
+  },
+);
 
 export default TouchableWithoutFeedback;

package/src/components/View.tsx

@@ -4,14 +4,19 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "react-native-css/native";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping = {
   className: "style",
 } satisfies StyledConfiguration<typeof RNView>;
 
-export function View(props: StyledProps<ViewProps, typeof mapping>) {
-  return useCssElement(RNView, props, mapping);
-}
+export const View = copyComponentProperties(
+  RNView,
+  (props: StyledProps<ViewProps, typeof mapping>) => {
+    return useCssElement(RNView, props, mapping);
+  },
+);
 
 export default View;

package/src/components/VirtualizedList.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import {
   VirtualizedList as RNVirtualizedList,
   type VirtualizedListProps,
@@ -7,7 +8,9 @@ import {
   useCssElement,
   type StyledConfiguration,
   type StyledProps,
-} from "../runtime";
+} from "react-native-css";
+
+import { copyComponentProperties } from "./copyComponentProperties";
 
 const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
   className: "style",
@@ -16,10 +19,19 @@ const mapping: StyledConfiguration<typeof RNVirtualizedList> = {
   contentContainerClassName: "contentContainerStyle",
 };
 
-export function VirtualizedList<ItemT>(
-  props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
-) {
-  return useCssElement(RNVirtualizedList, props, mapping);
-}
+export const VirtualizedList = copyComponentProperties(
+  RNVirtualizedList,
+  function <ItemT>(
+    props: StyledProps<VirtualizedListProps<ItemT>, typeof mapping>,
+  ) {
+    return useCssElement(RNVirtualizedList, props, mapping);
+  },
+) as unknown as typeof RNVirtualizedList &
+  (<ItemT>(
+    props: StyledProps<
+      VirtualizedListProps<ItemT>,
+      StyledConfiguration<typeof RNVirtualizedList>
+    >,
+  ) => ReactNode);
 
 export default VirtualizedList;

package/src/components/copyComponentProperties.ts

@@ -0,0 +1,21 @@
+import type { ComponentType } from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponent = ComponentType<any>;
+
+export function copyComponentProperties<T extends AnyComponent>(
+  BaseComponent: T,
+  Component: AnyComponent,
+) {
+  for (const [key, value] of Object.entries(BaseComponent)) {
+    if (key === "$$typeof" || key === "render" || key === "contextType") {
+      continue;
+    }
+
+    (Component as unknown as Record<string, unknown>)[key] = value;
+  }
+
+  Component.displayName = BaseComponent.displayName;
+
+  return Component as unknown as T;
+}

package/src/components/index.cts

@@ -0,0 +1,308 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-require-imports */
+
+module.exports = {
+  get ActivityIndicator() {
+    return require("./ActivityIndicator").ActivityIndicator;
+  },
+  get Button() {
+    return require("./Button").Button;
+  },
+  get FlatList() {
+    return require("./FlatList").FlatList;
+  },
+  get Image() {
+    return require("./Image").Image;
+  },
+  get ImageBackground() {
+    return require("./ImageBackground").ImageBackground;
+  },
+  get KeyboardAvoidingView() {
+    return require("./KeyboardAvoidingView").KeyboardAvoidingView;
+  },
+  get Pressable() {
+    return require("./Pressable").Pressable;
+  },
+  get ScrollView() {
+    return require("./ScrollView").ScrollView;
+  },
+  get Switch() {
+    return require("./Switch").Switch;
+  },
+  get Text() {
+    return require("./Text").Text;
+  },
+  get TextInput() {
+    return require("./TextInput").TextInput;
+  },
+  get TouchableHighlight() {
+    return require("./TouchableHighlight").TouchableHighlight;
+  },
+  get TouchableOpacity() {
+    return require("./TouchableOpacity").TouchableOpacity;
+  },
+  get View() {
+    return require("./View").View;
+  },
+  get VirtualizedList() {
+    return require("./VirtualizedList").VirtualizedList;
+  },
+
+  /**
+   * We need to return
+   */
+  get DrawerLayoutAndroid() {
+    return require("react-native").DrawerLayoutAndroid;
+  },
+  get InputAccessoryView() {
+    return require("react-native").InputAccessoryView;
+  },
+  get experimental_LayoutConformance() {
+    return require("react-native").experimental_LayoutConformance;
+  },
+  get Modal() {
+    return require("react-native").Modal;
+  },
+  get ProgressBarAndroid() {
+    return require("react-native").ProgressBarAndroid;
+  },
+  get RefreshControl() {
+    return require("react-native").RefreshControl;
+  },
+  get SafeAreaView() {
+    return require("react-native").SafeAreaView;
+  },
+  get SectionList() {
+    return require("react-native").SectionList;
+  },
+  get StatusBar() {
+    return require("react-native").StatusBar;
+  },
+  get unstable_TextAncestorContext() {
+    return require("react-native").unstable_TextAncestorContext;
+  },
+  get Touchable() {
+    return require("react-native").Touchable;
+  },
+  get TouchableNativeFeedback() {
+    return require("react-native").TouchableNativeFeedback;
+  },
+  get TouchableWithoutFeedback() {
+    return require("./TouchableWithoutFeedback").TouchableWithoutFeedback;
+  },
+  get VirtualizedSectionList() {
+    return require("react-native").VirtualizedSectionList;
+  },
+  get unstable_VirtualView() {
+    return require("react-native").unstable_VirtualView;
+  },
+  get AccessibilityInfo() {
+    return require("react-native").AccessibilityInfo;
+  },
+  get ActionSheetIOS() {
+    return require("react-native").ActionSheetIOS;
+  },
+  get Alert() {
+    return require("react-native").Alert;
+  },
+  get Animated() {
+    return require("react-native").Animated;
+  },
+  get Appearance() {
+    return require("react-native").Appearance;
+  },
+  get AppRegistry() {
+    return require("react-native").AppRegistry;
+  },
+  get AppState() {
+    return require("react-native").AppState;
+  },
+  get BackHandler() {
+    return require("react-native").BackHandler;
+  },
+  get Clipboard() {
+    return require("react-native").Clipboard;
+  },
+  get codegenNativeCommands() {
+    return require("react-native").codegenNativeCommands;
+  },
+  get codegenNativeComponent() {
+    return require("react-native").codegenNativeComponent;
+  },
+  get DeviceEventEmitter() {
+    return require("react-native").DeviceEventEmitter;
+  },
+  get DeviceInfo() {
+    return require("react-native").DeviceInfo;
+  },
+  get DevMenu() {
+    return require("react-native").DevMenu;
+  },
+  get DevSettings() {
+    return require("react-native").DevSettings;
+  },
+  get Dimensions() {
+    return require("react-native").Dimensions;
+  },
+  get DynamicColorIOS() {
+    return require("react-native").DynamicColorIOS;
+  },
+  get Easing() {
+    return require("react-native").Easing;
+  },
+  get findNodeHandle() {
+    return require("react-native").findNodeHandle;
+  },
+  get I18nManager() {
+    return require("react-native").I18nManager;
+  },
+  get InteractionManager() {
+    return require("react-native").InteractionManager;
+  },
+  get Keyboard() {
+    return require("react-native").Keyboard;
+  },
+  get LayoutAnimation() {
+    return require("react-native").LayoutAnimation;
+  },
+  get Linking() {
+    return require("react-native").Linking;
+  },
+  get LogBox() {
+    return require("react-native").LogBox;
+  },
+  get NativeAppEventEmitter() {
+    return require("react-native").NativeAppEventEmitter;
+  },
+  get NativeDialogManagerAndroid() {
+    return require("react-native").NativeDialogManagerAndroid;
+  },
+  get NativeEventEmitter() {
+    return require("react-native").NativeEventEmitter;
+  },
+  get NativeModules() {
+    return require("react-native").NativeModules;
+  },
+  get Networking() {
+    return require("react-native").Networking;
+  },
+  get PanResponder() {
+    return require("react-native").PanResponder;
+  },
+  get PermissionsAndroid() {
+    return require("react-native").PermissionsAndroid;
+  },
+  get PixelRatio() {
+    return require("react-native").PixelRatio;
+  },
+  get Platform() {
+    return require("react-native").Platform;
+  },
+  get PlatformColor() {
+    return require("react-native").PlatformColor;
+  },
+  get PushNotificationIOS() {
+    return require("react-native").PushNotificationIOS;
+  },
+  get processColor() {
+    return require("react-native").processColor;
+  },
+  get registerCallableModule() {
+    return require("react-native").registerCallableModule;
+  },
+  get requireNativeComponent() {
+    return require("react-native").requireNativeComponent;
+  },
+  get RootTagContext() {
+    return require("react-native").RootTagContext;
+  },
+  get Settings() {
+    return require("react-native").Settings;
+  },
+  get Share() {
+    return require("react-native").Share;
+  },
+  get StyleSheet() {
+    return require("react-native").StyleSheet;
+  },
+  get Systrace() {
+    return require("react-native").Systrace;
+  },
+  get ToastAndroid() {
+    return require("react-native").ToastAndroid;
+  },
+  get TurboModuleRegistry() {
+    return require("react-native").TurboModuleRegistry;
+  },
+  get UIManager() {
+    return require("react-native").UIManager;
+  },
+  get unstable_batchedUpdates() {
+    return require("react-native").unstable_batchedUpdates;
+  },
+  get useAnimatedValue() {
+    return require("react-native").useAnimatedValue;
+  },
+  get useColorScheme() {
+    return require("react-native").useColorScheme;
+  },
+  get useWindowDimensions() {
+    return require("react-native").useWindowDimensions;
+  },
+  get UTFSequence() {
+    return require("react-native").UTFSequence;
+  },
+  get Vibration() {
+    return require("react-native").Vibration;
+  },
+  get VirtualViewMode() {
+    return require("react-native").VirtualViewMode;
+  },
+  get EventEmitter() {
+    return require("react-native").EventEmitter;
+  },
+  get unstable_NativeText() {
+    return require("react-native").unstable_NativeText;
+  },
+  get unstable_NativeView() {
+    return require("react-native").unstable_NativeView;
+  },
+  get unstable_VirtualArray() {
+    return require("react-native").unstable_VirtualArray;
+  },
+  get unstable_createVirtualCollectionView() {
+    return require("react-native").unstable_createVirtualCollectionView;
+  },
+  get unstable_VirtualColumn() {
+    return require("react-native").unstable_VirtualColumn;
+  },
+  get unstable_VirtualColumnGenerator() {
+    return require("react-native").unstable_VirtualColumnGenerator;
+  },
+  get unstable_VirtualRow() {
+    return require("react-native").unstable_VirtualRow;
+  },
+  get unstable_getScrollParent() {
+    return require("react-native").unstable_getScrollParent;
+  },
+  get unstable_DEFAULT_INITIAL_NUM_TO_RENDER() {
+    return require("react-native").unstable_DEFAULT_INITIAL_NUM_TO_RENDER;
+  },
+  get NativeComponentRegistry() {
+    return require("react-native").NativeComponentRegistry;
+  },
+  get ReactNativeVersion() {
+    return require("react-native").ReactNativeVersion;
+  },
+  get useAnimatedValueXY() {
+    return require("react-native").useAnimatedValueXY;
+  },
+  get useAnimatedColor() {
+    return require("react-native").useAnimatedColor;
+  },
+  get usePressability() {
+    return require("react-native").usePressability;
+  },
+};

package/src/components/{index.tsx → index.ts}

@@ -1,5 +1,4 @@
 export * from "react-native";
-
 export { ActivityIndicator } from "./ActivityIndicator";
 export { Button } from "./Button";
 export { FlatList } from "./FlatList";

package/src/jest/index.ts

@@ -21,13 +21,14 @@ export const testID = "react-native-css";
 beforeEach(() => {
   StyleCollection.styles.clear();
   dimensions.set(Dimensions.get("window"));
-  Appearance.setColorScheme(null);
+  Appearance.setColorScheme("unspecified");
   colorScheme.set(null);
 });
 
 const debugDefault = Boolean(
   process.env.REACT_NATIVE_CSS_TEST_DEBUG &&
-    process.env.NODE_OPTIONS?.includes("--inspect"),
+    typeof process.env.NODE_OPTIONS === "string" &&
+    process.env.NODE_OPTIONS.includes("--inspect"),
 );
 
 export function registerCSS(

package/src/metro/cache-version.ts

@@ -0,0 +1,48 @@
+import { createHash } from "node:crypto";
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+
+import type { CompilerOptions } from "../compiler";
+
+/**
+ * Expo's supervising worker bypasses a custom worker's getCacheKey hook.
+ * Put the engine fingerprint in Metro's top level cacheVersion instead so
+ * both supervised and direct workers invalidate compiled CSS after an update.
+ */
+export function getCacheVersion(
+  cacheVersion: string | undefined,
+  options: CompilerOptions | undefined,
+) {
+  const root = dirname(__dirname);
+  const hash = createHash("sha256");
+
+  function visit(directory: string) {
+    for (const entry of readdirSync(directory, { withFileTypes: true }).sort(
+      (a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0),
+    )) {
+      const file = join(directory, entry.name);
+      if (entry.isDirectory()) {
+        if (!["__tests__", "__fixtures__", "__mocks__"].includes(entry.name)) {
+          visit(file);
+        }
+      } else if (
+        entry.isFile() &&
+        /\.[cm]?[jt]sx?$/.test(entry.name) &&
+        !/\.d\.[cm]?ts$/.test(entry.name) &&
+        !/\.(test|spec)\.[cm]?[jt]sx?$/.test(entry.name)
+      ) {
+        // Relative names keep identical installations independent of location.
+        hash.update(relative(root, file).split("\\").join("/"));
+        hash.update("\0");
+        hash.update(readFileSync(file));
+        hash.update("\0");
+      }
+    }
+  }
+
+  // Cover transitive engine helpers as well as the transformer itself. Maps,
+  // declarations, and tests do not affect the generated application code.
+  visit(root);
+  hash.update(JSON.stringify(options ?? {}));
+  return `${cacheVersion ?? ""}:react-native-css:${hash.digest("hex")}`;
+}