feat(typescript): update API

Author: mgcrea

src/SwiftUI.tsx

@@ -34,21 +34,25 @@ export type SwiftUIProps = {
   id?: string;
   onEvent?: (event: { nativeEvent: NativeSwiftUIEvent }) => void;
   style?: StyleProp<ViewStyle>;
+  debug?: boolean;
 };
 
 export const SwiftUIRoot = ({
   id: rootId,
   children,
   style,
   onEvent: rootOnEvent,
+  debug = false,
 }: PropsWithChildren<SwiftUIProps>): ReactNode => {
   const { nativeRef, getEventHandler, nodesKey, getNodes, renderSequence } = useSwiftUIContext();
 
   const log = useCallback(
     (message: string, ...args: unknown[]) => {
-      console.log(`SwiftUIRoot(${rootId}) ${message}`, ...args);
+      if (debug) {
+        console.log(`SwiftUIRoot(${rootId}) ${message}`, ...args);
+      }
     },
-    [rootId],
+    [rootId, debug],
   );
 
   const nodes = getNodes();
@@ -78,13 +82,13 @@ export const SwiftUIRoot = ({
   );
 };
 
-export const SwiftUI = ({ children, ...props }: PropsWithChildren<SwiftUIProps>): ReactElement => {
+export const SwiftUI = ({ children, debug, ...props }: PropsWithChildren<SwiftUIProps>): ReactElement => {
   // eslint-disable-next-line react-hooks/rules-of-hooks, @typescript-eslint/prefer-nullish-coalescing
   const id = props.id || `root:${useId()}`;
   return (
-    <SwiftUIProvider id={id}>
+    <SwiftUIProvider id={id} debug={debug}>
       <SwiftUIParentIdProvider id="__root">
-        <SwiftUIRoot id={id} {...props}>
+        <SwiftUIRoot id={id} debug={debug} {...props}>
           {children}
         </SwiftUIRoot>
       </SwiftUIParentIdProvider>

src/components/Button.tsx

@@ -1,6 +1,7 @@
 import { type PropsWithChildren } from "react";
+import { type StyleProp } from "react-native";
 import { SwiftUIParentIdProvider } from "../contexts";
-import { useSwiftUINode } from "../hooks";
+import { useNormalizedStyles, useSwiftUINode } from "../hooks";
 import type { FunctionComponentWithId, NativeTextStyle } from "../types";
 
 export type CustomNativeButtonStyle = "subtle" | "picker";
@@ -16,16 +17,26 @@ export type NativeButtonProps = {
   title?: string;
   disabled?: boolean;
   buttonStyle?: NativeButtonStyle;
-  style?: NativeTextStyle;
+  style?: StyleProp<NativeTextStyle>;
   onPress?: () => void;
 };
 
 export const Button: FunctionComponentWithId<PropsWithChildren<NativeButtonProps>> = ({
+  title,
   children,
   onPress,
+  style,
   ...otherProps
 }) => {
-  const { id } = useSwiftUINode("Button", otherProps, { press: onPress });
+  const normalizedTitle = title ? String(title) : undefined;
+  const normalizedStyle = useNormalizedStyles<NativeTextStyle>(style);
+
+  const { id } = useSwiftUINode(
+    "Button",
+    { title: normalizedTitle, style: normalizedStyle, ...otherProps },
+    { press: onPress },
+  );
+
   return <SwiftUIParentIdProvider id={id}>{children}</SwiftUIParentIdProvider>;
 };
 Button.displayName = "Button";

src/components/DatePicker.tsx

@@ -29,7 +29,11 @@ export const DatePicker: FunctionComponentWithId<NativeDatePickerProps> = ({
     () =>
       onChangeProp
         ? (date: string) => {
-            onChangeProp(new Date(date)); // Convert string to Date
+            let parsedDate = new Date(date);
+            if (isNaN(parsedDate.getTime())) {
+              parsedDate = new Date();
+            }
+            onChangeProp(parsedDate);
           }
         : undefined,
     [onChangeProp],

src/components/Form.tsx

@@ -1,19 +1,23 @@
 import { type PropsWithChildren } from "react";
+import { StyleProp } from "react-native";
 import { SwiftUIParentIdProvider } from "../contexts";
-import { useSwiftUINode } from "../hooks";
+import { useNormalizedStyles, useSwiftUINode } from "../hooks";
 import type { FunctionComponentWithId, NativeViewStyle } from "../types";
 
 // https://developer.apple.com/documentation/swiftui/form
 
 export type NativeFormProps = {
-  style?: NativeViewStyle;
+  style?: StyleProp<NativeViewStyle>;
 };
 
 export const Form: FunctionComponentWithId<PropsWithChildren<NativeFormProps>> = ({
   children,
+  style,
   ...otherProps
 }) => {
-  const { id } = useSwiftUINode("Form", otherProps);
+  const normalizedStyle = useNormalizedStyles<NativeViewStyle>(style);
+
+  const { id } = useSwiftUINode("Form", { style: normalizedStyle, ...otherProps });
 
   return <SwiftUIParentIdProvider id={id}>{children}</SwiftUIParentIdProvider>;
 };

src/components/NumberField.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
-import { useSwiftUINode } from "../hooks";
+import { StyleProp } from "react-native";
+import { useNormalizedStyles, useSwiftUINode } from "../hooks";
 import type { FunctionComponentWithId, NativeTextStyle } from "../types";
 import { NativeKeyboardType, NativeReturnKeyType } from "./TextField";
 
@@ -15,17 +16,17 @@ export type NumberFormatter =
   | "currencyAccounting";
 
 export type NativeNumberFieldProps<T = number> = {
-  value?: T;
+  value?: T | null;
   label?: string;
   placeholder?: string;
   keyboardType?: NativeKeyboardType;
   returnKeyType?: NativeReturnKeyType;
   min?: number | null;
   max?: number | null;
   disabled?: boolean;
-  style?: NativeTextStyle;
+  style?: StyleProp<NativeTextStyle>;
   formatter?: NumberFormatter;
-  onChange?: (value: T) => void;
+  onChange?: (value: T | null) => void;
   onFocus?: () => void;
   onBlur?: () => void;
 };
@@ -34,19 +35,27 @@ export const NumberField: FunctionComponentWithId<NativeNumberFieldProps> = ({
   onChange: onChangeProp,
   onFocus,
   onBlur,
+  style,
   ...otherProps
 }) => {
   const onChange = useMemo(
     () =>
       onChangeProp
         ? (date: string) => {
-            onChangeProp(parseFloat(date)); // Convert string to number
+            const parsedFloat = parseFloat(date);
+            onChangeProp(!isNaN(parsedFloat) ? parsedFloat : null); // Convert string to number
           }
         : undefined,
     [onChangeProp],
   );
 
-  useSwiftUINode("NumberField", otherProps, { change: onChange, focus: onFocus, blur: onBlur });
+  const normalizedStyle = useNormalizedStyles<NativeTextStyle>(style);
+
+  useSwiftUINode(
+    "NumberField",
+    { style: normalizedStyle, ...otherProps },
+    { change: onChange, focus: onFocus, blur: onBlur },
+  );
 
   return null;
 };

src/components/Picker.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useMemo } from "react";
-import { StyleProp, StyleSheet } from "react-native";
-import { useSwiftUINode } from "../hooks";
+import { StyleProp } from "react-native";
+import { useNormalizedStyles, useSwiftUINode } from "../hooks";
 import type { NativeTextStyle } from "../types";
 
 // https://developer.apple.com/documentation/swiftui/picker
@@ -20,6 +20,7 @@ export type NativePickerProps<T extends string> = {
 };
 
 export const Picker = <T extends string>({
+  selection,
   options,
   onChange: onChangeProp,
   onFocus,
@@ -37,6 +38,7 @@ export const Picker = <T extends string>({
     [onChangeProp],
   );
 
+  const normalizedSelection = selection ? String(selection) : undefined;
   const normalizedOptions = useMemo(
     () =>
       options.length > 0 && typeof options[0] === "string"
@@ -45,11 +47,11 @@ export const Picker = <T extends string>({
     [options],
   );
 
-  const normalizedStyles = useMemo(() => (Array.isArray(style) ? StyleSheet.flatten(style) : style), [style]);
+  const normalizedStyles = useNormalizedStyles<NativeTextStyle>(style);
 
   useSwiftUINode(
     "Picker",
-    { options: normalizedOptions, style: normalizedStyles, ...otherProps },
+    { options: normalizedOptions, selection: normalizedSelection, style: normalizedStyles, ...otherProps },
     {
       change: onChange,
       focus: onFocus,

src/components/TextField.tsx

@@ -5,6 +5,16 @@ export type NativeKeyboardType = "default" | "numberPad" | "emailAddress" | "dec
 export type NativeTextContentType = "username" | "password" | "emailAddress";
 export type NativeReturnKeyType = "default" | "done" | "next" | "search";
 export type NativeAutocapitalizationType = "none" | "words" | "sentences" | "allCharacters";
+export type NativeSubmitLabel =
+  | "continue"
+  | "done"
+  | "go"
+  | "join"
+  | "next"
+  | "return"
+  | "route"
+  | "search"
+  | "send";
 
 export type NativeTextFieldProps<T = string> = {
   text?: T;
@@ -15,6 +25,7 @@ export type NativeTextFieldProps<T = string> = {
   returnKeyType?: NativeReturnKeyType;
   secure?: boolean;
   autocapitalizationType?: NativeAutocapitalizationType;
+  submitLabel?: NativeSubmitLabel;
   maxLength?: number | null;
   multiline?: boolean;
   disabled?: boolean;

src/contexts/SwiftUIContext.tsx

@@ -38,10 +38,12 @@ const SwiftUIContext = createContext<SwiftUIContextValue | undefined>(undefined)
 
 export type SwiftUIProviderProps = {
   id: string;
+  debug?: boolean;
 };
 
 export const SwiftUIProvider: FunctionComponent<PropsWithChildren<SwiftUIProviderProps>> = ({
   id: rootId,
+  debug,
   children,
 }) => {
   const eventRegistry = useRef<EventRegistry>(new Map());
@@ -52,9 +54,11 @@ export const SwiftUIProvider: FunctionComponent<PropsWithChildren<SwiftUIProvide
 
   const log = useCallback(
     (message: string, ...args: unknown[]) => {
-      console.log(`SwiftUIContext(${rootId}) ${message}`, ...args);
+      if (debug) {
+        console.log(`SwiftUIContext(${rootId}) ${message}`, ...args);
+      }
     },
-    [rootId],
+    [debug, rootId],
   );
 
   const nodesKey = useMemo(() => {

src/hooks/index.ts

@@ -1,5 +1,6 @@
 export * from "./useDebounce";
 export * from "./useDebugEffect";
 export * from "./useJsonMemo";
+export * from "./useNormalizedStyles";
 export * from "./useSwiftUINode";
 export * from "./useThrottle";

src/hooks/useNormalizedStyles.ts

@@ -0,0 +1,11 @@
+import { useMemo } from "react";
+import { StyleProp, StyleSheet } from "react-native";
+import { NativeTextStyle, NativeViewStyle } from "src/types";
+
+export const useNormalizedStyles = <T extends NativeTextStyle | NativeViewStyle>(
+  style?: StyleProp<T>,
+): T | undefined => {
+  return useMemo(() => (Array.isArray(style) ? StyleSheet.flatten<T>(style) : style), [style]) as
+    | T
+    | undefined;
+};