react-native-web-serial-api 0.0.3 → 0.2.0

package/example/App.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import {StatusBar, StyleSheet, View} from 'react-native';
-import type {SerialPort} from 'react-native-web-serial-api';
-import {ConnectScreen} from './src/screens/ConnectScreen';
-import {DevicesScreen} from './src/screens/DevicesScreen';
-import {TerminalScreen} from './src/screens/TerminalScreen';
-import {type ConnectionSettings, DEFAULT_SETTINGS} from './src/settings';
-import {colors} from './src/theme';
-
-type Screen = 'devices' | 'connect' | 'terminal';
-
-/**
- * A React Native clone of Kai Morich's SimpleUsbTerminal, built on the
- * react-native-web-serial-api Web Serial API. Runs on Android and (Chromium) web.
- */
-function App(): React.JSX.Element {
-  const [screen, setScreen] = React.useState<Screen>('devices');
-  const [port, setPort] = React.useState<SerialPort | null>(null);
-  const [settings, setSettings] =
-    React.useState<ConnectionSettings>(DEFAULT_SETTINGS);
-
-  // Devices -> Connect form
-  const selectPort = (p: SerialPort) => {
-    setPort(p);
-    setScreen('connect');
-  };
-
-  // Connect form -> Terminal
-  const startTerminal = (s: ConnectionSettings) => {
-    setSettings(s);
-    setScreen('terminal');
-  };
-
-  const backToDevices = () => {
-    setScreen('devices');
-    setPort(null);
-  };
-
-  const backToConnect = () => setScreen('connect');
-
-  return (
-    <View style={styles.root}>
-      <StatusBar
-        barStyle="light-content"
-        backgroundColor={colors.primaryDark}
-      />
-      {screen === 'terminal' && port ? (
-        <TerminalScreen
-          port={port}
-          settings={settings}
-          onBack={backToConnect}
-        />
-      ) : screen === 'connect' && port ? (
-        <ConnectScreen
-          port={port}
-          initial={settings}
-          onBack={backToDevices}
-          onConnect={startTerminal}
-        />
-      ) : (
-        <DevicesScreen onSelect={selectPort} />
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  root: {flex: 1, backgroundColor: colors.background},
-});
-
-export default App;

package/example/__tests__/App.test.tsx

@@ -1,16 +0,0 @@
-/**
- * @format
- */
-
-// Note: import explicitly to use the types shipped with jest.
-import {expect, it} from '@jest/globals';
-import {render, screen, waitFor} from '@testing-library/react-native';
-import App from '../App';
-
-it('renders the devices screen', async () => {
-  render(<App />);
-  expect(screen.getByText('USB Devices')).toBeTruthy();
-  // DevicesScreen kicks off an async serial.getPorts() refresh on mount; let it
-  // settle so the state update is wrapped in act() (avoids a console warning).
-  await waitFor(() => expect(screen.queryByText('USB Devices')).toBeTruthy());
-});

package/example/__tests__/connectEvents.test.tsx

@@ -1,81 +0,0 @@
-/**
- * @format
- *
- * Verifies that subscribing to Serial "connect"/"disconnect" wires up the
- * native USB state listeners WITHOUT first calling getPorts()/requestPort(),
- * and that a native event (e.g. the "connect" emitted when USB permission is
- * granted) reaches the JS listener. This is what lets the example's device
- * list auto-refresh on attach / detach / permission-grant.
- */
-
-import {afterEach, beforeEach, expect, it, jest} from '@jest/globals';
-import {NativeModules} from 'react-native';
-
-// Capture the JS listeners registered against the native event emitter so the
-// test can drive them like the native side would.
-const nativeListeners: Record<string, ((event: unknown) => void)[]> = {};
-
-beforeEach(() => {
-  for (const k of Object.keys(nativeListeners)) {
-    delete nativeListeners[k];
-  }
-  (NativeModules as any).NativeUsbSerial = {
-    findAllDrivers: jest.fn(async () => []),
-    addListener: jest.fn(),
-    removeListeners: jest.fn(),
-  };
-});
-
-afterEach(() => {
-  // RCTDeviceEventEmitter is a global singleton across the RN copy; clear it so
-  // listeners from one test don't leak into the next.
-  const {DeviceEventEmitter} = require('react-native');
-  DeviceEventEmitter.removeAllListeners('connect');
-  DeviceEventEmitter.removeAllListeners('disconnect');
-});
-
-function freshSerial() {
-  let api: any;
-  jest.isolateModules(() => {
-    api = require('react-native-web-serial-api');
-  });
-  return new api.Serial();
-}
-
-// Emit a native device event the way the TurboModule does (via
-// RCTDeviceEventEmitter, which NativeEventEmitter listens on).
-function emitNative(event: 'connect' | 'disconnect', payload: unknown) {
-  const {DeviceEventEmitter} = require('react-native');
-  DeviceEventEmitter.emit(event, payload);
-}
-
-it('addEventListener("connect") receives native events without calling getPorts() first', () => {
-  const serial = freshSerial();
-  const onConnect = jest.fn();
-
-  // Subscribe only — no getPorts()/requestPort() beforehand.
-  serial.addEventListener('connect', onConnect);
-
-  // Native fires "connect" (e.g. attach or permission-grant).
-  emitNative('connect', {
-    deviceId: 7,
-    usbVendorId: 0x0403,
-    usbProductId: 0x6001,
-  });
-
-  expect(onConnect).toHaveBeenCalledTimes(1);
-});
-
-it('forwards native disconnect to Serial listeners', () => {
-  const serial = freshSerial();
-  const onDisconnect = jest.fn();
-  serial.addEventListener('disconnect', onDisconnect);
-
-  emitNative('disconnect', {
-    deviceId: 7,
-    usbVendorId: 0x0403,
-    usbProductId: 0x6001,
-  });
-
-  expect(onDisconnect).toHaveBeenCalledTimes(1);
-});

package/example/__tests__/getPorts.test.tsx

@@ -1,140 +0,0 @@
-/**
- * @format
- *
- * Android/native permission-model contract for the Web Serial polyfill.
- *
- * getPorts() enumerates every probed USB-serial port the app can currently
- * access through Android USB permission (PortId.hasPermission === true) —
- * whether that permission came from requestPort() or was granted natively
- * (e.g. the system "use by default for this device" attach dialog). Ports the
- * app cannot access yet are excluded.
- *
- * requestPort() is unchanged: it shows the native picker and resolves with the
- * chosen port; it does not consult getPorts()/hasPermission.
- */
-
-import {afterEach, beforeEach, describe, expect, it, jest} from '@jest/globals';
-import {NativeModules} from 'react-native';
-
-type FakePort = {
-  deviceId: number;
-  portNumber: number;
-  usbVendorId: number;
-  usbProductId: number;
-  hasPermission: boolean;
-};
-
-const findAllDrivers = jest.fn<() => Promise<FakePort[]>>();
-const showPortPicker = jest.fn<() => Promise<FakePort>>();
-
-// In jest, TurboModuleRegistry.get() falls back to NativeModules[name], so
-// registering a fake here lets the real library (Serial -> UsbSerialModule)
-// run against controlled data. addListener/removeListeners are required by
-// NativeEventEmitter.
-beforeEach(() => {
-  (NativeModules as any).NativeUsbSerial = {
-    findAllDrivers,
-    showPortPicker,
-    addListener: jest.fn(),
-    removeListeners: jest.fn(),
-  };
-});
-
-afterEach(() => {
-  findAllDrivers.mockReset();
-  showPortPicker.mockReset();
-});
-
-// Fresh module graph each time so the Serial singleton / known-port cache does
-// not leak between tests.
-function freshSerial() {
-  let api: any;
-  jest.isolateModules(() => {
-    api = require('react-native-web-serial-api');
-  });
-  return new api.Serial();
-}
-
-const ftdi: FakePort = {
-  deviceId: 1,
-  portNumber: 0,
-  usbVendorId: 0x0403,
-  usbProductId: 0x6001,
-  hasPermission: true,
-};
-const cp210xUnpermitted: FakePort = {
-  deviceId: 2,
-  portNumber: 0,
-  usbVendorId: 0x10c4,
-  usbProductId: 0xea60,
-  hasPermission: false,
-};
-
-describe('getPorts() Android permission filtering', () => {
-  it('includes a device granted natively (never via requestPort)', async () => {
-    findAllDrivers.mockResolvedValueOnce([ftdi]);
-    const ports = await freshSerial().getPorts();
-    expect(ports).toHaveLength(1);
-    expect(ports[0].getInfo()).toEqual({
-      usbVendorId: 0x0403,
-      usbProductId: 0x6001,
-    });
-  });
-
-  it('excludes a probed device the app has no permission for', async () => {
-    findAllDrivers.mockResolvedValueOnce([cp210xUnpermitted]);
-    const ports = await freshSerial().getPorts();
-    expect(ports).toHaveLength(0);
-  });
-
-  it('returns only the permitted subset when mixed', async () => {
-    findAllDrivers.mockResolvedValueOnce([ftdi, cp210xUnpermitted]);
-    const ports = await freshSerial().getPorts();
-    expect(ports).toHaveLength(1);
-    expect(ports[0].getInfo().usbVendorId).toBe(0x0403);
-  });
-
-  it('returns an empty list when nothing is permitted', async () => {
-    findAllDrivers.mockResolvedValueOnce([
-      cp210xUnpermitted,
-      {...cp210xUnpermitted, deviceId: 3},
-    ]);
-    expect(await freshSerial().getPorts()).toHaveLength(0);
-  });
-
-  it('lists each port of a multi-port permitted device', async () => {
-    findAllDrivers.mockResolvedValueOnce([
-      {...ftdi, portNumber: 0},
-      {...ftdi, portNumber: 1},
-    ]);
-    const ports = await freshSerial().getPorts();
-    expect(ports).toHaveLength(2);
-  });
-
-  it('returns the SAME SerialPort instance across repeated calls', async () => {
-    const serial = freshSerial();
-    findAllDrivers.mockResolvedValue([ftdi]);
-    const first = await serial.getPorts();
-    const second = await serial.getPorts();
-    expect(first[0]).toBe(second[0]); // cached, not re-created
-  });
-});
-
-describe('requestPort() is unaffected by the permission filter', () => {
-  it('resolves with the picked port even if getPorts would exclude it', async () => {
-    // getPorts sees nothing permitted...
-    findAllDrivers.mockResolvedValue([]);
-    // ...but the user picks a device through the native picker.
-    showPortPicker.mockResolvedValueOnce(ftdi);
-
-    const serial = freshSerial();
-    expect(await serial.getPorts()).toHaveLength(0);
-
-    const port = await serial.requestPort();
-    expect(port.getInfo()).toEqual({
-      usbVendorId: 0x0403,
-      usbProductId: 0x6001,
-    });
-    expect(showPortPicker).toHaveBeenCalledTimes(1);
-  });
-});

package/example/android/app/build.gradle

@@ -1,120 +0,0 @@
-apply plugin: "com.android.application"
-apply plugin: "org.jetbrains.kotlin.android"
-apply plugin: "com.facebook.react"
-
-/**
- * This is the configuration block to customize your React Native Android app.
- * By default you don't need to apply any configuration, just uncomment the lines you need.
- */
-react {
-    /* Folders */
-    //   The root of your project, i.e. where "package.json" lives. Default is '../..'
-    // root = file("../../")
-    //   The folder where the react-native NPM package is. Default is ../../node_modules/react-native
-    // reactNativeDir = file("../../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../../node_modules/@react-native/codegen
-    // codegenDir = file("../../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../node_modules/react-native/cli.js
-    // cliFile = file("../../node_modules/react-native/cli.js")
-
-    /* Variants */
-    //   The list of variants to that are debuggable. For those we're going to
-    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
-    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
-    // debuggableVariants = ["liteDebug", "prodDebug"]
-
-    /* Bundling */
-    //   A list containing the node command and its flags. Default is just 'node'.
-    // nodeExecutableAndArgs = ["node"]
-    //
-    //   The command to run when bundling. By default is 'bundle'
-    // bundleCommand = "ram-bundle"
-    //
-    //   The path to the CLI configuration file. Default is empty.
-    // bundleConfig = file(../rn-cli.config.js)
-    //
-    //   The name of the generated asset file containing your JS bundle
-    // bundleAssetName = "MyApplication.android.bundle"
-    //
-    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-    // entryFile = file("../js/MyApplication.android.js")
-    //
-    //   A list of extra flags to pass to the 'bundle' commands.
-    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
-    // extraPackagerArgs = []
-
-    /* Hermes Commands */
-    //   The hermes compiler command to run. By default it is 'hermesc'
-    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
-    //
-    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
-    // hermesFlags = ["-O", "-output-source-map"]
-
-    /* Autolinking */
-    autolinkLibrariesWithApp()
-}
-
-/**
- * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
- */
-def enableProguardInReleaseBuilds = false
-
-/**
- * The preferred build flavor of JavaScriptCore (JSC)
- *
- * For example, to use the international variant, you can use:
- * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
- *
- * The international variant includes ICU i18n library and necessary data
- * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
- * give correct results when using with locales other than en-US. Note that
- * this variant is about 6MiB larger per architecture than default.
- */
-def jscFlavor = 'org.webkit:android-jsc:+'
-
-android {
-    ndkVersion rootProject.ext.ndkVersion
-    buildToolsVersion rootProject.ext.buildToolsVersion
-    compileSdk rootProject.ext.compileSdkVersion
-
-    namespace "dev.react_native_web_serial_api.example"
-    defaultConfig {
-        applicationId "dev.react_native_web_serial_api.example"
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 1
-        versionName "1.0"
-    }
-    signingConfigs {
-        debug {
-            storeFile file('debug.keystore')
-            storePassword 'android'
-            keyAlias 'androiddebugkey'
-            keyPassword 'android'
-        }
-    }
-    buildTypes {
-        debug {
-            signingConfig signingConfigs.debug
-        }
-        release {
-            // Caution! In production, you need to generate your own keystore file.
-            // see https://reactnative.dev/docs/signed-apk-android.
-            signingConfig signingConfigs.debug
-            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-        }
-    }
-}
-
-dependencies {
-    // usb-serial-for-android is provided transitively by react-native-web-serial-api
-    // The version of react-native is set by the React Native Gradle Plugin
-    implementation("com.facebook.react:react-android")
-
-    if (hermesEnabled.toBoolean()) {
-        implementation("com.facebook.react:hermes-android")
-    } else {
-        implementation jscFlavor
-    }
-}

package/example/android/app/proguard-rules.pro

@@ -1,10 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# Add any project specific keep options here:

package/example/android/app/src/debug/AndroidManifest.xml

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:tools="http://schemas.android.com/tools">
-
-    <application
-        android:usesCleartextTraffic="true"
-        tools:targetApi="28"
-        tools:ignore="GoogleAppIndexingWarning"/>
-</manifest>

package/example/android/app/src/main/AndroidManifest.xml

@@ -1,38 +0,0 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android">
-
-    <uses-permission android:name="android.permission.INTERNET" />
-    <uses-feature android:name="android.hardware.usb.host" />
-
-    <application
-      android:name=".MainApplication"
-      android:label="@string/app_name"
-      android:icon="@mipmap/ic_launcher"
-      android:roundIcon="@mipmap/ic_launcher_round"
-      android:allowBackup="false"
-      android:theme="@style/AppTheme"
-      android:supportsRtl="true">
-      <!-- PortPickerActivity and UsbDetachReceiver are provided by
-           react-native-web-serial-api and merged in automatically. -->
-      <activity
-        android:name=".MainActivity"
-        android:label="@string/app_name"
-        android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
-        android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize"
-        android:exported="true">
-        <intent-filter>
-            <action android:name="android.intent.action.MAIN" />
-            <category android:name="android.intent.category.LAUNCHER" />
-        </intent-filter>
-        <intent-filter>
-            <action android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED" />
-        </intent-filter>
-        <intent-filter>
-            <action android:name="android.hardware.usb.action.USB_DEVICE_DETACHED" />
-        </intent-filter>
-        <meta-data
-            android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED"
-            android:resource="@xml/device_filter" />
-      </activity>
-    </application>
-</manifest>

package/example/android/app/src/main/java/dev/uzlopak/MainActivity.kt

@@ -1,22 +0,0 @@
-package dev.react_native_web_serial_api.example
-
-import com.facebook.react.ReactActivity
-import com.facebook.react.ReactActivityDelegate
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
-import com.facebook.react.defaults.DefaultReactActivityDelegate
-
-class MainActivity : ReactActivity() {
-
-  /**
-   * Returns the name of the main component registered from JavaScript. This is used to schedule
-   * rendering of the component.
-   */
-  override fun getMainComponentName(): String = "SimpleUsbTerminal"
-
-  /**
-   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
-   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
-   */
-  override fun createReactActivityDelegate(): ReactActivityDelegate =
-      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
-}

package/example/android/app/src/main/java/dev/uzlopak/MainApplication.kt

@@ -1,41 +0,0 @@
-package dev.react_native_web_serial_api.example
-
-import android.app.Application
-import com.facebook.react.PackageList
-import com.facebook.react.ReactApplication
-import com.facebook.react.ReactHost
-import com.facebook.react.ReactNativeHost
-import com.facebook.react.ReactPackage
-import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
-import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
-import com.facebook.react.defaults.DefaultReactNativeHost
-import com.facebook.react.soloader.OpenSourceMergedSoMapping
-import com.facebook.soloader.SoLoader
-
-class MainApplication : Application(), ReactApplication {
-
-  override val reactNativeHost: ReactNativeHost =
-      object : DefaultReactNativeHost(this) {
-        override fun getPackages(): List<ReactPackage> =
-            // react-native-web-serial-api is linked automatically via autolinking
-            PackageList(this).packages
-
-        override fun getJSMainModuleName(): String = "index"
-
-        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
-
-        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
-        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
-      }
-
-  override val reactHost: ReactHost
-    get() = getDefaultReactHost(applicationContext, reactNativeHost)
-
-  override fun onCreate() {
-    super.onCreate()
-    SoLoader.init(this, OpenSourceMergedSoMapping)
-    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
-      load()
-    }
-  }
-}

package/example/android/app/src/main/res/drawable/rn_edit_text_material.xml

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Copyright (C) 2014 The Android Open Source Project
-
-     Licensed under the Apache License, Version 2.0 (the "License");
-     you may not use this file except in compliance with the License.
-     You may obtain a copy of the License at
-
-          http://www.apache.org/licenses/LICENSE-2.0
-
-     Unless required by applicable law or agreed to in writing, software
-     distributed under the License is distributed on an "AS IS" BASIS,
-     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-     See the License for the specific language governing permissions and
-     limitations under the License.
--->
-<inset xmlns:android="http://schemas.android.com/apk/res/android"
-       android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
-       android:insetTop="@dimen/abc_edit_text_inset_top_material"
-       android:insetBottom="@dimen/abc_edit_text_inset_bottom_material"
-       >
-
-    <selector>
-        <!--
-          This file is a copy of abc_edit_text_material (https://bit.ly/3k8fX7I).
-          The item below with state_pressed="false" and state_focused="false" causes a NullPointerException.
-          NullPointerException:tempt to invoke virtual method 'android.graphics.drawable.Drawable android.graphics.drawable.Drawable$ConstantState.newDrawable(android.content.res.Resources)'
-
-          <item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-
-          For more info, see https://bit.ly/3CdLStv (react-native/pull/29452) and https://bit.ly/3nxOMoR.
-        -->
-        <item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
-        <item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
-    </selector>
-
-</inset>

package/example/android/app/src/main/res/values/strings.xml

@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">Simple USB Terminal</string>
-</resources>

package/example/android/app/src/main/res/values/styles.xml

@@ -1,9 +0,0 @@
-<resources>
-
-    <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
-        <!-- Customize your theme here. -->
-        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
-    </style>
-
-</resources>

package/example/android/build.gradle

@@ -1,22 +0,0 @@
-buildscript {
-    ext {
-        buildToolsVersion = "35.0.0"
-        minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 34
-        ndkVersion = "27.1.12297006"
-        kotlinVersion = "2.1.0"
-    }
-    repositories {
-        maven { url "https://jitpack.io" }
-        google()
-        mavenCentral()
-    }
-    dependencies {
-        classpath("com.android.tools.build:gradle")
-        classpath("com.facebook.react:react-native-gradle-plugin")
-        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
-    }
-}
-
-apply plugin: "com.facebook.react.rootproject"