mirror of
https://github.com/EthanShoeDev/fressh.git
synced 2026-01-11 06:12:51 +00:00
Better docs
This commit is contained in:
EthanShoeDev
@@ -1,3 +1,71 @@
|
|||||||
nix develop .#default
|
## Contributing
|
||||||
|
|
||||||
|
### Monorepo layout
|
||||||
|
|
||||||
|
- `apps/mobile`: Expo app (serves as the example for both packages)
|
||||||
|
- `apps/web`: Static site (Astro)
|
||||||
|
- `packages/react-native-uniffi-russh`: React Native native module exposing
|
||||||
|
russh via UniFFI
|
||||||
|
- `packages/react-native-xtermjs-webview`: React Native WebView-based xterm.js
|
||||||
|
renderer
|
||||||
|
|
||||||
|
### Prerequisites
|
||||||
|
|
||||||
|
- Node and pnpm installed
|
||||||
|
- Optional: Nix for dev shells (recommended)
|
||||||
|
- For native module work: Rust toolchain (rustup, cargo), Android/iOS build
|
||||||
|
tools
|
||||||
|
|
||||||
|
With Nix:
|
||||||
|
|
||||||
|
```
|
||||||
|
nix develop .#default
|
||||||
|
```
|
||||||
|
|
||||||
|
Dev shell with android emulator included:
|
||||||
|
|
||||||
|
```
|
||||||
nix develop .#android-emulator
|
nix develop .#android-emulator
|
||||||
|
```
|
||||||
|
|
||||||
|
### Setup
|
||||||
|
|
||||||
|
1. Clone the repo
|
||||||
|
2. Install dependencies at the root:
|
||||||
|
|
||||||
|
```
|
||||||
|
pnpm install
|
||||||
|
```
|
||||||
|
|
||||||
|
3. Run the lint command:
|
||||||
|
|
||||||
|
```
|
||||||
|
pnpm exec turbo lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Develop
|
||||||
|
|
||||||
|
- Mobile app:
|
||||||
|
|
||||||
|
```
|
||||||
|
cd apps/mobile
|
||||||
|
pnpm run android
|
||||||
|
```
|
||||||
|
|
||||||
|
### Releasing
|
||||||
|
|
||||||
|
Each publishable package uses release-it. From the package directory:
|
||||||
|
|
||||||
|
```
|
||||||
|
pnpm run release
|
||||||
|
```
|
||||||
|
|
||||||
|
See the package CHANGELOGs for release notes:
|
||||||
|
|
||||||
|
- `packages/react-native-uniffi-russh/CHANGELOG.md`
|
||||||
|
- `packages/react-native-xtermjs-webview/CHANGELOG.md`
|
||||||
|
|
||||||
|
### CI
|
||||||
|
|
||||||
|
Pull requests run the workflow in `.github/workflows/check.yml`. Please ensure
|
||||||
|
lint/typecheck/tests pass.
|
||||||
|
|||||||
79
README.md
79
README.md
@@ -1,11 +1,74 @@
|
|||||||
Fressh is a mobile SSH client that remains clean and simple while supporting
|
## Fressh
|
||||||
powerful features:
|
|
||||||
|
|
||||||
- Securely storing previous connections
|
[Fressh](https://fressh.dev/) is a mobile SSH client that remains clean and
|
||||||
- Configurable preset command buttons
|
simple while supporting powerful features.
|
||||||
- Configurable theme
|
|
||||||
|
|
||||||
Coming soon
|
[](https://github.com/EthanShoeDev/fressh/actions/workflows/check.yml)
|
||||||
|
[](https://www.npmjs.com/package/@fressh/react-native-uniffi-russh)
|
||||||
|
[](https://www.npmjs.com/package/@fressh/react-native-xtermjs-webview)
|
||||||
|
|
||||||
- Fully accurate xterm emulation
|
### Features
|
||||||
- On-device LLM for command completion and output summarization
|
|
||||||
|
- **Secure connection history**: Securely store previous connections
|
||||||
|
- **Command presets**: Configurable preset command buttons
|
||||||
|
- **Theming**: Configurable theme
|
||||||
|
|
||||||
|
### Coming soon
|
||||||
|
|
||||||
|
- ~~**xterm fidelity**: Fully accurate xterm emulation~~ Done!
|
||||||
|
- **On-device AI**: On-device LLM for command completion and output
|
||||||
|
summarization
|
||||||
|
|
||||||
|
### Architecture
|
||||||
|
|
||||||
|
The app is a monorepo with three main parts:
|
||||||
|
|
||||||
|
- **`apps/mobile`**: The actual React Native Expo app.
|
||||||
|
- **`packages/react-native-uniffi-russh`**: A
|
||||||
|
[uniffi react native](https://github.com/jhugman/uniffi-bindgen-react-native)
|
||||||
|
binding package that exposes a native Rust module for
|
||||||
|
[russh](https://github.com/Eugeny/russh).
|
||||||
|
- **`packages/react-native-xtermjs-webview`**: A small library that instantiates
|
||||||
|
an Expo WebView preloaded with [xterm.js](https://xtermjs.org/).
|
||||||
|
|
||||||
|
Both packages are published on npm if you want to use them in your own project:
|
||||||
|
|
||||||
|
- [`@fressh/react-native-uniffi-russh`](https://www.npmjs.com/package/@fressh/react-native-uniffi-russh)
|
||||||
|
- [`@fressh/react-native-xtermjs-webview`](https://www.npmjs.com/package/@fressh/react-native-xtermjs-webview)
|
||||||
|
|
||||||
|
### Why
|
||||||
|
|
||||||
|
Mostly to practice with React Native, Expo, and Rust. There are a few more
|
||||||
|
developed SSH clients on the Google Play and iOS App Stores.
|
||||||
|
|
||||||
|
Some of those try to lock features like one-off commands behind a paywall, so
|
||||||
|
this aims to be a free alternative.
|
||||||
|
|
||||||
|
Another notable feature of the app is the WebView xterm.js renderer. Using this
|
||||||
|
as the render layer has a few benefits:
|
||||||
|
|
||||||
|
- **Parity with VS Code**: We match the render behavior of VS Code
|
||||||
|
- **Consistent visuals**: The render layer visually matches on both iOS and
|
||||||
|
Android
|
||||||
|
|
||||||
|
With that said, it is probably less performant than a native renderer, so it may
|
||||||
|
be replaced in the future. Implementing a
|
||||||
|
[Nitro view](https://nitro.margelo.com/docs/view-components) seems very
|
||||||
|
promising.
|
||||||
|
|
||||||
|
### Changelogs
|
||||||
|
|
||||||
|
- `apps/mobile`: [`apps/mobile/CHANGELOG.md`](./apps/mobile/CHANGELOG.md)
|
||||||
|
- `@fressh/react-native-uniffi-russh`:
|
||||||
|
[`packages/react-native-uniffi-russh/CHANGELOG.md`](./packages/react-native-uniffi-russh/CHANGELOG.md)
|
||||||
|
- `@fressh/react-native-xtermjs-webview`:
|
||||||
|
[`packages/react-native-xtermjs-webview/CHANGELOG.md`](./packages/react-native-xtermjs-webview/CHANGELOG.md)
|
||||||
|
|
||||||
|
### Contributing
|
||||||
|
|
||||||
|
We provide a Nix flake devshell to help get a working environment quickly. See
|
||||||
|
[`CONTRIBUTING.md`](./CONTRIBUTING.md) for details.
|
||||||
|
|
||||||
|
### License
|
||||||
|
|
||||||
|
MIT
|
||||||
|
|||||||
@@ -1,60 +1,28 @@
|
|||||||
# Welcome to your Expo app 👋
|
## Fressh Mobile (Expo)
|
||||||
|
|
||||||
This is an [Expo](https://expo.dev) project created with
|
This is the Fressh mobile app built with Expo. It provides a clean SSH client
|
||||||
[`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
|
experience. packages:
|
||||||
|
|
||||||
## Get started
|
- `@fressh/react-native-uniffi-russh`
|
||||||
|
- `@fressh/react-native-xtermjs-webview`
|
||||||
|
|
||||||
1. Install dependencies
|
### Setup
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm install
|
|
||||||
```
|
|
||||||
|
|
||||||
2. Start the app
|
|
||||||
|
|
||||||
```bash
|
|
||||||
pnpm exec expo start
|
|
||||||
```
|
|
||||||
|
|
||||||
In the output, you'll find options to open the app in a
|
|
||||||
|
|
||||||
- [development build](https://docs.expo.dev/develop/development-builds/introduction/)
|
|
||||||
- [Android emulator](https://docs.expo.dev/workflow/android-studio-emulator/)
|
|
||||||
- [iOS simulator](https://docs.expo.dev/workflow/ios-simulator/)
|
|
||||||
- [Expo Go](https://expo.dev/go), a limited sandbox for trying out app
|
|
||||||
development with Expo
|
|
||||||
|
|
||||||
You can start developing by editing the files inside the **app** directory. This
|
|
||||||
project uses [file-based routing](https://docs.expo.dev/router/introduction).
|
|
||||||
|
|
||||||
## Get a fresh project
|
|
||||||
|
|
||||||
When you're ready, run:
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
pnpm run reset-project
|
pnpm install
|
||||||
|
pnpm exec expo start
|
||||||
```
|
```
|
||||||
|
|
||||||
This command will move the starter code to the **app-example** directory and
|
Open using Expo Go, an emulator, or a simulator.
|
||||||
create a blank **app** directory where you can start developing.
|
|
||||||
|
|
||||||
## Learn more
|
For a high-level feature overview, see the root [`README.md`](../../README.md).
|
||||||
|
|
||||||
To learn more about developing your project with Expo, look at the following
|
### Development notes
|
||||||
resources:
|
|
||||||
|
|
||||||
- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into
|
- Edit files under `app/` (file-based routing)
|
||||||
advanced topics with our [guides](https://docs.expo.dev/guides).
|
- Ensure Android/iOS tooling is installed for native builds
|
||||||
- [Learn Expo tutorial](https://docs.expo.dev/tutorial/introduction/): Follow a
|
|
||||||
step-by-step tutorial where you'll create a project that runs on Android, iOS,
|
|
||||||
and the web.
|
|
||||||
|
|
||||||
## Join the community
|
### Links
|
||||||
|
|
||||||
Join our community of developers creating universal apps.
|
- Main README: [`../../README.md`](../../README.md)
|
||||||
|
- Changelog: [`./CHANGELOG.md`](./CHANGELOG.md)
|
||||||
- [Expo on GitHub](https://github.com/expo/expo): View our open source platform
|
|
||||||
and contribute.
|
|
||||||
- [Discord community](https://chat.expo.dev): Chat with Expo users and ask
|
|
||||||
questions.
|
|
||||||
|
|||||||
@@ -1,48 +1,17 @@
|
|||||||
# Astro Starter Kit: Basics
|
## Fressh Web
|
||||||
|
|
||||||
```sh
|
This is an Astro site used for the project website/docs. For project details,
|
||||||
pnpm create astro@latest -- --template basics
|
see the root README.
|
||||||
|
|
||||||
|
### Commands
|
||||||
|
|
||||||
|
```bash
|
||||||
|
pnpm install
|
||||||
|
pnpm dev
|
||||||
|
pnpm build
|
||||||
|
pnpm preview
|
||||||
```
|
```
|
||||||
|
|
||||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
### Links
|
||||||
|
|
||||||
## 🚀 Project Structure
|
- Main README: [`../../README.md`](../../README.md)
|
||||||
|
|
||||||
Inside of your Astro project, you'll see the following folders and files:
|
|
||||||
|
|
||||||
```text
|
|
||||||
/
|
|
||||||
├── public/
|
|
||||||
│ └── favicon.svg
|
|
||||||
├── src
|
|
||||||
│ ├── assets
|
|
||||||
│ │ └── astro.svg
|
|
||||||
│ ├── components
|
|
||||||
│ │ └── Welcome.astro
|
|
||||||
│ ├── layouts
|
|
||||||
│ │ └── Layout.astro
|
|
||||||
│ └── pages
|
|
||||||
│ └── index.astro
|
|
||||||
└── package.json
|
|
||||||
```
|
|
||||||
|
|
||||||
To learn more about the folder structure of an Astro project, refer to
|
|
||||||
[our guide on project structure](https://docs.astro.build/en/basics/project-structure/).
|
|
||||||
|
|
||||||
## 🧞 Commands
|
|
||||||
|
|
||||||
All commands are run from the root of the project, from a terminal:
|
|
||||||
|
|
||||||
| Command | Action |
|
|
||||||
| :--------------------- | :----------------------------------------------- |
|
|
||||||
| `pnpm install` | Installs dependencies |
|
|
||||||
| `pnpm dev` | Starts local dev server at `localhost:4321` |
|
|
||||||
| `pnpm build` | Build your production site to `./dist/` |
|
|
||||||
| `pnpm preview` | Preview your build locally, before deploying |
|
|
||||||
| `pnpm astro ...` | Run CLI commands like `astro add`, `astro check` |
|
|
||||||
| `pnpm astro -- --help` | Get help using the Astro CLI |
|
|
||||||
|
|
||||||
## 👀 Want to learn more?
|
|
||||||
|
|
||||||
Feel free to check [our documentation](https://docs.astro.build) or jump into
|
|
||||||
our [Discord server](https://astro.build/chat).
|
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
import type { Config } from 'release-it';
|
import { type Config } from 'release-it';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
npm: {
|
||||||
|
publish: true,
|
||||||
|
publishArgs: ['--access', 'public'],
|
||||||
|
},
|
||||||
git: {
|
git: {
|
||||||
requireCleanWorkingDir: true,
|
requireCleanWorkingDir: true,
|
||||||
tagName: '${npm.name}-v${version}',
|
tagName: '${npm.name}-v${version}',
|
||||||
@@ -10,20 +14,9 @@ export default {
|
|||||||
push: true,
|
push: true,
|
||||||
},
|
},
|
||||||
|
|
||||||
// This one *does* publish to npm
|
|
||||||
npm: {
|
|
||||||
publish: true,
|
|
||||||
// pass flags you’d give to `npm publish`
|
|
||||||
publishArgs: ['--access', 'public'],
|
|
||||||
// (optional) skip npm’s own prepublish checks:
|
|
||||||
// skipChecks: true
|
|
||||||
},
|
|
||||||
|
|
||||||
github: {
|
github: {
|
||||||
release: true,
|
release: true,
|
||||||
releaseName: '${npm.name} v${version}',
|
releaseName: '${npm.name} v${version}',
|
||||||
// optional: attach build artifacts
|
|
||||||
// assets: ['dist/**']
|
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: {
|
plugins: {
|
||||||
@@ -36,7 +29,7 @@ export default {
|
|||||||
|
|
||||||
hooks: {
|
hooks: {
|
||||||
'before:init': ['turbo run lint:check'],
|
'before:init': ['turbo run lint:check'],
|
||||||
'before:npm:release': 'turbo run build:android build:ios',
|
'after:bump': 'turbo run build',
|
||||||
'after:release': 'echo "Published ${npm.name} v${version} to npm"',
|
'after:release': 'echo "Published ${npm.name} v${version} to npm"',
|
||||||
},
|
},
|
||||||
} satisfies Config;
|
} satisfies Config;
|
||||||
|
|||||||
@@ -1,162 +0,0 @@
|
|||||||
# Contributing
|
|
||||||
|
|
||||||
Contributions are always welcome, no matter how large or small!
|
|
||||||
|
|
||||||
We want this community to be friendly and respectful to each other. Please
|
|
||||||
follow it in all your interactions with the project. Before contributing, please
|
|
||||||
read the [code of conduct](./CODE_OF_CONDUCT.md).
|
|
||||||
|
|
||||||
## Development workflow
|
|
||||||
|
|
||||||
This project is a monorepo managed using
|
|
||||||
[Yarn workspaces](https://yarnpkg.com/features/workspaces). It contains the
|
|
||||||
following packages:
|
|
||||||
|
|
||||||
- The library package in the root directory.
|
|
||||||
- An example app in the `example/` directory.
|
|
||||||
|
|
||||||
To get started with the project, make sure you have the correct version of
|
|
||||||
[Node.js](https://nodejs.org/) installed. See the [`.nvmrc`](./.nvmrc) file for
|
|
||||||
the version used in this project.
|
|
||||||
|
|
||||||
Run `yarn` in the root directory to install the required dependencies for each
|
|
||||||
package:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn
|
|
||||||
```
|
|
||||||
|
|
||||||
> Since the project relies on Yarn workspaces, you cannot use
|
|
||||||
> [`npm`](https://github.com/npm/cli) for development without manually
|
|
||||||
> migrating.
|
|
||||||
|
|
||||||
The [example app](/example/) demonstrates usage of the library. You need to run
|
|
||||||
it to test any changes you make.
|
|
||||||
|
|
||||||
It is configured to use the local version of the library, so any changes you
|
|
||||||
make to the library's source code will be reflected in the example app. Changes
|
|
||||||
to the library's JavaScript code will be reflected in the example app without a
|
|
||||||
rebuild, but native code changes will require a rebuild of the example app.
|
|
||||||
|
|
||||||
If you want to use Android Studio or XCode to edit the native code, you can open
|
|
||||||
the `example/android` or `example/ios` directories respectively in those
|
|
||||||
editors. To edit the Objective-C or Swift files, open
|
|
||||||
`example/ios/UniffiRusshExample.xcworkspace` in XCode and find the source files
|
|
||||||
at `Pods > Development Pods > react-native-uniffi-russh`.
|
|
||||||
|
|
||||||
To edit the Java or Kotlin files, open `example/android` in Android studio and
|
|
||||||
find the source files at `react-native-uniffi-russh` under `Android`.
|
|
||||||
|
|
||||||
You can use various commands from the root directory to work with the project.
|
|
||||||
|
|
||||||
To start the packager:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn example start
|
|
||||||
```
|
|
||||||
|
|
||||||
To run the example app on Android:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn example android
|
|
||||||
```
|
|
||||||
|
|
||||||
To run the example app on iOS:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn example ios
|
|
||||||
```
|
|
||||||
|
|
||||||
To confirm that the app is running with the new architecture, you can check the
|
|
||||||
Metro logs for a message like this:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
Running "UniffiRusshExample" with {"fabric":true,"initialProps":{"concurrentRoot":true},"rootTag":1}
|
|
||||||
```
|
|
||||||
|
|
||||||
Note the `"fabric":true` and `"concurrentRoot":true` properties.
|
|
||||||
|
|
||||||
Make sure your code passes TypeScript and ESLint. Run the following to verify:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn typecheck
|
|
||||||
yarn lint
|
|
||||||
```
|
|
||||||
|
|
||||||
To fix formatting errors, run the following:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn lint --fix
|
|
||||||
```
|
|
||||||
|
|
||||||
Remember to add tests for your change if possible. Run the unit tests by:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn test
|
|
||||||
```
|
|
||||||
|
|
||||||
### Commit message convention
|
|
||||||
|
|
||||||
We follow the
|
|
||||||
[conventional commits specification](https://www.conventionalcommits.org/en) for
|
|
||||||
our commit messages:
|
|
||||||
|
|
||||||
- `fix`: bug fixes, e.g. fix crash due to deprecated method.
|
|
||||||
- `feat`: new features, e.g. add new method to the module.
|
|
||||||
- `refactor`: code refactor, e.g. migrate from class components to hooks.
|
|
||||||
- `docs`: changes into documentation, e.g. add usage example for the module.
|
|
||||||
- `test`: adding or updating tests, e.g. add integration tests using detox.
|
|
||||||
- `chore`: tooling changes, e.g. change CI config.
|
|
||||||
|
|
||||||
Our pre-commit hooks verify that your commit message matches this format when
|
|
||||||
committing.
|
|
||||||
|
|
||||||
### Linting and tests
|
|
||||||
|
|
||||||
[ESLint](https://eslint.org/), [Prettier](https://prettier.io/),
|
|
||||||
[TypeScript](https://www.typescriptlang.org/)
|
|
||||||
|
|
||||||
We use [TypeScript](https://www.typescriptlang.org/) for type checking,
|
|
||||||
[ESLint](https://eslint.org/) with [Prettier](https://prettier.io/) for linting
|
|
||||||
and formatting the code, and [Jest](https://jestjs.io/) for testing.
|
|
||||||
|
|
||||||
Our pre-commit hooks verify that the linter and tests pass when committing.
|
|
||||||
|
|
||||||
### Publishing to npm
|
|
||||||
|
|
||||||
We use [release-it](https://github.com/release-it/release-it) to make it easier
|
|
||||||
to publish new versions. It handles common tasks like bumping version based on
|
|
||||||
semver, creating tags and releases etc.
|
|
||||||
|
|
||||||
To publish new versions, run the following:
|
|
||||||
|
|
||||||
```sh
|
|
||||||
yarn release
|
|
||||||
```
|
|
||||||
|
|
||||||
### Scripts
|
|
||||||
|
|
||||||
The `package.json` file contains various scripts for common tasks:
|
|
||||||
|
|
||||||
- `yarn`: setup project by installing dependencies.
|
|
||||||
- `yarn typecheck`: type-check files with TypeScript.
|
|
||||||
- `yarn lint`: lint files with ESLint.
|
|
||||||
- `yarn test`: run unit tests with Jest.
|
|
||||||
- `yarn example start`: start the Metro server for the example app.
|
|
||||||
- `yarn example android`: run the example app on Android.
|
|
||||||
- `yarn example ios`: run the example app on iOS.
|
|
||||||
|
|
||||||
### Sending a pull request
|
|
||||||
|
|
||||||
> **Working on your first pull request?** You can learn how from this _free_
|
|
||||||
> series:
|
|
||||||
> [How to Contribute to an Open Source Project on GitHub](https://app.egghead.io/playlists/how-to-contribute-to-an-open-source-project-on-github).
|
|
||||||
|
|
||||||
When you're sending a pull request:
|
|
||||||
|
|
||||||
- Prefer small pull requests focused on one change.
|
|
||||||
- Verify that linters and tests are passing.
|
|
||||||
- Review the documentation to make sure it looks good.
|
|
||||||
- Follow the pull request template when opening a pull request.
|
|
||||||
- For pull requests that change the API or implementation, discuss with
|
|
||||||
maintainers first by opening an issue.
|
|
||||||
@@ -1,34 +1,26 @@
|
|||||||
# react-native-uniffi-russh
|
## @fressh/react-native-uniffi-russh
|
||||||
|
|
||||||
Uniffi bindings for russh
|
React Native bindings (via UniFFI) for the Rust SSH library
|
||||||
|
[russh](https://github.com/Eugeny/russh).
|
||||||
|
|
||||||
## Installation
|
[](https://www.npmjs.com/package/@fressh/react-native-uniffi-russh)
|
||||||
|
|
||||||
```sh
|
### Install
|
||||||
npm install react-native-uniffi-russh
|
|
||||||
|
```bash
|
||||||
|
pnpm add @fressh/react-native-uniffi-russh
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
Peer dependencies (you manage): `react`, `react-native`.
|
||||||
|
|
||||||
```js
|
### Usage
|
||||||
import { multiply } from 'react-native-uniffi-russh';
|
|
||||||
|
|
||||||
// ...
|
This package exposes a native Rust module for SSH transport. For a complete,
|
||||||
|
working integration, see the example app in this monorepo at `apps/mobile`.
|
||||||
|
|
||||||
const result = multiply(3, 7);
|
### Links
|
||||||
```
|
|
||||||
|
|
||||||
## Contributing
|
- Changelog: [`CHANGELOG.md`](./CHANGELOG.md)
|
||||||
|
- Contributing: see the monorepo guide at
|
||||||
- [Development workflow](CONTRIBUTING.md#development-workflow)
|
[`../../CONTRIBUTING.md`](../../CONTRIBUTING.md)
|
||||||
- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
|
- License: MIT
|
||||||
- [Code of conduct](CODE_OF_CONDUCT.md)
|
|
||||||
|
|
||||||
## License
|
|
||||||
|
|
||||||
MIT
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
Made with
|
|
||||||
[create-react-native-library](https://github.com/callstack/react-native-builder-bob)
|
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import { type Config } from 'release-it';
|
import { type Config } from 'release-it';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
// Avoid double-publish from the built-in npm plugin
|
|
||||||
npm: {
|
npm: {
|
||||||
publish: true,
|
publish: true,
|
||||||
publishArgs: ['--access', 'public'],
|
publishArgs: ['--access', 'public'],
|
||||||
@@ -18,8 +17,6 @@ export default {
|
|||||||
github: {
|
github: {
|
||||||
release: true,
|
release: true,
|
||||||
releaseName: '${npm.name} v${version}',
|
releaseName: '${npm.name} v${version}',
|
||||||
// optional: attach build artifacts
|
|
||||||
// assets: ['dist/**']
|
|
||||||
},
|
},
|
||||||
|
|
||||||
plugins: {
|
plugins: {
|
||||||
@@ -32,7 +29,7 @@ export default {
|
|||||||
|
|
||||||
hooks: {
|
hooks: {
|
||||||
'before:init': ['turbo run lint:check'],
|
'before:init': ['turbo run lint:check'],
|
||||||
'before:github:release': 'turbo run build',
|
'after:bump': 'turbo run build',
|
||||||
'after:release': 'echo "Published ${npm.name} v${version} to npm"',
|
'after:release': 'echo "Published ${npm.name} v${version} to npm"',
|
||||||
},
|
},
|
||||||
} satisfies Config;
|
} satisfies Config;
|
||||||
|
|||||||
@@ -1,77 +1,67 @@
|
|||||||
# React + TypeScript + Vite
|
## @fressh/react-native-xtermjs-webview
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and
|
React Native WebView that embeds [xterm.js](https://xtermjs.org/) with sensible
|
||||||
some ESLint rules.
|
defaults and a bridge for input and output.
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
[](https://www.npmjs.com/package/@fressh/react-native-xtermjs-webview)
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react)
|
### Install
|
||||||
uses [Babel](https://babeljs.io/) for Fast Refresh
|
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc)
|
|
||||||
uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
```bash
|
||||||
|
pnpm add @fressh/react-native-xtermjs-webview react-native-webview
|
||||||
If you are developing a production application, we recommend updating the
|
|
||||||
configuration to enable type-aware lint rules:
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default tseslint.config([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
|
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
|
||||||
...tseslint.configs.recommendedTypeChecked,
|
|
||||||
// Alternatively, use this for stricter rules
|
|
||||||
...tseslint.configs.strictTypeChecked,
|
|
||||||
// Optionally, add this for stylistic rules
|
|
||||||
...tseslint.configs.stylisticTypeChecked,
|
|
||||||
|
|
||||||
// Other configs...
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
|
||||||
},
|
|
||||||
// other options...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
```
|
```
|
||||||
|
|
||||||
You can also install
|
Peer dependencies: `react`, `react-dom` (for web), `react-native-webview`.
|
||||||
[eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x)
|
|
||||||
and
|
|
||||||
[eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom)
|
|
||||||
for React-specific lint rules:
|
|
||||||
|
|
||||||
```js
|
### Usage
|
||||||
// eslint.config.js
|
|
||||||
import reactX from 'eslint-plugin-react-x';
|
|
||||||
import reactDom from 'eslint-plugin-react-dom';
|
|
||||||
|
|
||||||
export default tseslint.config([
|
See `apps/mobile` in this monorepo for a complete example. Basic usage:
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
```tsx
|
||||||
files: ['**/*.{ts,tsx}'],
|
import React, { useRef } from 'react';
|
||||||
extends: [
|
import {
|
||||||
// Other configs...
|
XtermJsWebView,
|
||||||
// Enable lint rules for React
|
type XtermWebViewHandle,
|
||||||
reactX.configs['recommended-typescript'],
|
} from '@fressh/react-native-xtermjs-webview';
|
||||||
// Enable lint rules for React DOM
|
|
||||||
reactDom.configs.recommended,
|
export function Terminal() {
|
||||||
],
|
const termRef = useRef<XtermWebViewHandle | null>(null);
|
||||||
languageOptions: {
|
return (
|
||||||
parserOptions: {
|
<XtermJsWebView
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
ref={termRef}
|
||||||
tsconfigRootDir: import.meta.dirname,
|
onInitialized={() =>
|
||||||
},
|
termRef.current?.write(new TextEncoder().encode('hello'))
|
||||||
// other options...
|
}
|
||||||
},
|
onData={(input) => console.log('user input:', input)}
|
||||||
},
|
/>
|
||||||
]);
|
);
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
#### Props
|
||||||
|
|
||||||
|
- `webViewOptions`: subset of `react-native-webview` props (sane defaults
|
||||||
|
applied)
|
||||||
|
- `xtermOptions`: partial `@xterm/xterm` options (theme, font, scrollback, etc.)
|
||||||
|
- `onInitialized`: called when the terminal is ready
|
||||||
|
- `onData(str)`: emits user keystrokes
|
||||||
|
- `size`: `{ cols, rows }` to set terminal size
|
||||||
|
- `autoFit`: auto-fit after important changes (default: true)
|
||||||
|
|
||||||
|
#### Ref API
|
||||||
|
|
||||||
|
- `write(bytes)`, `writeMany([bytes...])`, `flush()`
|
||||||
|
- `clear()`, `focus()`, `fit()`, `resize({ cols, rows })`
|
||||||
|
|
||||||
|
### Publishing contents
|
||||||
|
|
||||||
|
This package intentionally publishes both `src/` and built `dist/` artifacts for
|
||||||
|
transparency and debugging.
|
||||||
|
|
||||||
|
### Links
|
||||||
|
|
||||||
|
- Changelog: [`CHANGELOG.md`](./CHANGELOG.md)
|
||||||
|
- Contributing: see the monorepo guide at
|
||||||
|
[`../../CONTRIBUTING.md`](../../CONTRIBUTING.md)
|
||||||
|
- Example: `apps/mobile`
|
||||||
|
- License: MIT
|
||||||
|
|||||||
Reference in New Issue
Block a user