react-native-transformer-text-input 0.1.0-alpha.0

package/package.json

@@ -0,0 +1,199 @@
+{
+  "name": "react-native-transformer-text-input",
+  "version": "0.1.0-alpha.0",
+  "description": "TextInput component that allows transforming text synchronously with a worklet",
+  "main": "./lib/module/index.js",
+  "types": "./lib/typescript/src/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.tsx",
+      "types": "./lib/typescript/src/index.d.ts",
+      "default": "./lib/module/index.js"
+    },
+    "./formatters/phone-number": {
+      "source": "./src/formatters/phone-number.ts",
+      "types": "./lib/typescript/src/formatters/phone-number.d.ts",
+      "default": "./lib/module/formatters/phone-number.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "src",
+    "lib",
+    "android",
+    "ios",
+    "cpp",
+    "*.podspec",
+    "react-native.config.js",
+    "!ios/build",
+    "!android/build",
+    "!android/gradle",
+    "!android/gradlew",
+    "!android/gradlew.bat",
+    "!android/local.properties",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__",
+    "!**/.*"
+  ],
+  "scripts": {
+    "example": "yarn workspace react-native-transformer-text-input-example",
+    "clean": "del-cli android/build example/android/build example/android/app/build example/ios/build lib",
+    "prepare": "bob build",
+    "test": "jest",
+    "lint": "yarn lint:eslint && yarn lint:ts && yarn lint:android",
+    "lint:ts": "tsc",
+    "lint:eslint": "eslint \"**/*.{js,ts,tsx}\"",
+    "lint:android": "cd example/android && RNTTI_WARNINGS_AS_ERRORS=true ./gradlew :react-native-transformer-text-input:lint --rerun-tasks",
+    "release": "release-it --only-version",
+    "format:prettier:check": "prettier \"src/**/*.{js,ts,tsx}\" \"example/**/*.{js,ts,tsx}\" --check",
+    "format:prettier:write": "yarn format:prettier:check --write",
+    "format:android:check": "cd android && ./gradlew spotlessCheck",
+    "format:android:write": "cd android && ./gradlew spotlessApply",
+    "format:clang:check": "clang-format --dry-run --Werror --glob='{ios,android/src,cpp}/**/*.{h,cpp,m,mm}'",
+    "format:clang:write": "clang-format -i --glob='{ios,android/src,cpp}/**/*.{h,hpp,cpp,m,mm}'",
+    "format:spotless:check": "cd android && ./gradlew spotlessCheck",
+    "format:spotless:write": "cd android && ./gradlew spotlessApply",
+    "format:check": "yarn format:prettier:check && yarn format:clang:check && yarn format:spotless:check",
+    "format:write": "yarn format:prettier:write && yarn format:clang:write && yarn format:spotless:write"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AppAndFlow/react-native-transformer-text-input.git"
+  },
+  "author": "Janic Duplessis <janic@appandflow.com> (https://appandflow.com)",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/AppAndFlow/react-native-transformer-text-input/issues"
+  },
+  "homepage": "https://github.com/AppAndFlow/react-native-transformer-text-input#readme",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.3.2",
+    "@eslint/eslintrc": "^3.3.1",
+    "@eslint/js": "^9.35.0",
+    "@react-native/babel-preset": "0.83.0",
+    "@react-native/eslint-config": "0.83.0",
+    "@release-it/conventional-changelog": "^10.0.1",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^29.5.14",
+    "@types/react": "^19.2.0",
+    "clang-format": "^1.8.0",
+    "commitlint": "^19.8.1",
+    "del-cli": "^6.0.0",
+    "eslint": "^9.35.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "jest": "^30.2.0",
+    "lefthook": "^2.0.3",
+    "prettier": "^2.8.8",
+    "react": "19.2.0",
+    "react-native": "0.83.0",
+    "react-native-builder-bob": "^0.40.17",
+    "react-native-worklets": "^0.7.1",
+    "react-test-renderer": "19.2.0",
+    "release-it": "^19.0.4",
+    "turbo": "^2.5.6",
+    "typescript": "^5.9.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-worklets": "*"
+  },
+  "workspaces": [
+    "example"
+  ],
+  "packageManager": "yarn@4.11.0",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      [
+        "module",
+        {
+          "esm": true
+        }
+      ],
+      [
+        "typescript",
+        {
+          "project": "tsconfig.build.json"
+        }
+      ]
+    ]
+  },
+  "codegenConfig": {
+    "name": "rntti",
+    "type": "all",
+    "jsSrcsDir": "src",
+    "android": {
+      "javaPackageName": "com.appandflow.transformertextinput"
+    },
+    "ios": {
+      "modulesProvider": {
+        "TransformerTextInputModule": "TransformerTextInputModule"
+      },
+      "componentProvider": {
+        "TransformerTextInputDecoratorView": "TransformerTextInputDecoratorView"
+      }
+    }
+  },
+  "prettier": {
+    "quoteProps": "consistent",
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "all",
+    "useTabs": false
+  },
+  "jest": {
+    "preset": "react-native",
+    "modulePathIgnorePatterns": [
+      "<rootDir>/example/node_modules",
+      "<rootDir>/lib/"
+    ]
+  },
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
+    ]
+  },
+  "release-it": {
+    "git": {
+      "commitMessage": "chore: release ${version}",
+      "tagName": "v${version}"
+    },
+    "npm": {
+      "publish": true
+    },
+    "github": {
+      "release": true
+    },
+    "plugins": {
+      "@release-it/conventional-changelog": {
+        "preset": {
+          "name": "angular"
+        }
+      }
+    }
+  },
+  "create-react-native-library": {
+    "type": "fabric-view",
+    "languages": "kotlin-objc",
+    "tools": [
+      "eslint",
+      "jest",
+      "lefthook",
+      "release-it"
+    ],
+    "version": "0.56.0"
+  }
+}

package/react-native.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  dependency: {
+    platforms: {
+      android: {
+        libraryName: 'rntti',
+        componentDescriptors: [
+          'TransformerTextInputDecoratorViewComponentDescriptor',
+        ],
+        cmakeListsPath: 'src/main/jni/CMakeLists.txt',
+      },
+    },
+  },
+};

package/src/NativeTransformerTextInputModule.ts

@@ -0,0 +1,10 @@
+import type { TurboModule } from 'react-native';
+import { TurboModuleRegistry } from 'react-native';
+
+export interface Spec extends TurboModule {
+  install(): boolean;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>(
+  'TransformerTextInputModule',
+);

package/src/Transformer.ts

@@ -0,0 +1,32 @@
+export type Selection = { start: number; end: number };
+
+export type TransformerWorklet = (input: {
+  value: string;
+  previousValue: string;
+  selection: Selection;
+  previousSelection: Selection;
+}) =>
+  | {
+      value?: string | null;
+      selection?: Selection | null;
+    }
+  | null
+  | undefined;
+
+export class Transformer {
+  private readonly _worklet: TransformerWorklet;
+
+  constructor(worklet: TransformerWorklet) {
+    const workletHash = (worklet as { __workletHash?: number }).__workletHash;
+    if (workletHash == null) {
+      throw new Error(
+        '[rntti] Transformer must be a worklet. Did you forget to add the "worklet" directive?',
+      );
+    }
+    this._worklet = worklet;
+  }
+
+  get worklet() {
+    return this._worklet;
+  }
+}

package/src/TransformerTextInput.tsx

@@ -0,0 +1,147 @@
+import {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  type ElementRef,
+  type Ref,
+} from 'react';
+import {
+  StyleSheet,
+  TextInput,
+  type HostInstance,
+  type TextInputProps,
+} from 'react-native';
+import { type Selection, type Transformer } from './Transformer';
+import TransformerTextInputDecoratorViewNativeComponent, {
+  Commands,
+} from './TransformerTextInputDecoratorViewNativeComponent';
+import { registerTransformer, unregisterTransformer } from './registry';
+import useMergeRefs from './utils/useMergeRefs';
+import { validateSelection } from './selection';
+
+type TransformerTextInputInstanceMethods = {
+  /**
+   * Get the current text value.
+   */
+  getValue: () => string;
+  /**
+   * Update the value and/or selection, optionally running the transformer.
+   */
+  update: (options: {
+    /**
+     * New value to apply.
+     */
+    value?: string | null;
+    /**
+     * Optional selection to apply alongside the value.
+     */
+    selection?: { start: number; end: number };
+    /**
+     * Whether to run the transformer on update. Defaults to true.
+     */
+    transform?: boolean;
+  }) => void;
+  /**
+   * Clear the input value without running the transformer.
+   */
+  clear: () => void;
+};
+
+export type TransformerTextInputInstance = HostInstance &
+  TransformerTextInputInstanceMethods;
+
+export type TransformerTextInputProps = Omit<TextInputProps, 'value'> & {
+  /**
+   * Transformer instance used to sync text changes on the UI thread.
+   */
+  transformer: Transformer;
+};
+
+export const TransformerTextInput = forwardRef(
+  (
+    { transformer, onChangeText, ...others }: TransformerTextInputProps,
+    forwardedRef: Ref<TransformerTextInputInstance>,
+  ) => {
+    const transformerId = useMemo(() => {
+      return registerTransformer(transformer);
+    }, [transformer]);
+
+    useEffect(() => {
+      return () => {
+        unregisterTransformer(transformerId);
+      };
+    }, [transformerId]);
+
+    const decoratorRef =
+      useRef<
+        ElementRef<typeof TransformerTextInputDecoratorViewNativeComponent>
+      >(null);
+    const textRef = useRef('');
+
+    const setInputRef = useCallback((instance: HostInstance | null) => {
+      if (instance != null) {
+        Object.assign(instance, {
+          getValue() {
+            return textRef.current;
+          },
+          update({ value, selection, transform }) {
+            const nativeRef = decoratorRef.current;
+            if (!nativeRef) {
+              return;
+            }
+            let newSelection: Selection;
+            const newValue = value ?? textRef.current;
+            if (selection != null) {
+              validateSelection(selection, newValue.length);
+              newSelection = selection;
+            } else {
+              // When changing value without selection, move cursor to end.
+              newSelection = { start: newValue.length, end: newValue.length };
+            }
+            Commands.update(
+              nativeRef,
+              transform ?? true,
+              value ?? null,
+              newSelection.start,
+              newSelection.end,
+            );
+          },
+          clear() {
+            this.update({ value: '', transform: false });
+          },
+        } satisfies TransformerTextInputInstanceMethods);
+      }
+    }, []);
+
+    const inputRef = useMergeRefs(setInputRef, forwardedRef);
+
+    const handleChangeText = useCallback(
+      (text: string) => {
+        textRef.current = text;
+        onChangeText?.(text);
+      },
+      [onChangeText],
+    );
+
+    return (
+      <TransformerTextInputDecoratorViewNativeComponent
+        ref={decoratorRef}
+        style={styles.decorator}
+        transformerId={transformerId}
+      >
+        <TextInput
+          // @ts-expect-error
+          ref={inputRef}
+          onChangeText={handleChangeText}
+          {...others}
+        />
+      </TransformerTextInputDecoratorViewNativeComponent>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  decorator: { display: 'contents' },
+});

package/src/TransformerTextInputDecoratorViewNativeComponent.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import {
+  codegenNativeCommands,
+  codegenNativeComponent,
+  type HostComponent,
+  type ViewProps,
+  type CodegenTypes,
+} from 'react-native';
+
+interface NativeProps extends ViewProps {
+  transformerId: CodegenTypes.Int32;
+}
+
+interface NativeCommands {
+  update: (
+    viewRef: React.ElementRef<HostComponent<NativeProps>>,
+    transform: boolean,
+    value: string | null,
+    selectionStart: CodegenTypes.Int32,
+    selectionEnd: CodegenTypes.Int32,
+  ) => void;
+}
+
+export const Commands: NativeCommands = codegenNativeCommands<NativeCommands>({
+  supportedCommands: ['update'],
+});
+
+export default codegenNativeComponent<NativeProps>(
+  'TransformerTextInputDecoratorView',
+  { interfaceOnly: true },
+);