feat(react-native): initialization (#1150)

related with #1093 #1109 #1072 #1071

# Overview

<!--
    A clear and concise description of what this pr is about.
 -->

I want to support isomorphic `<InView/>`, `<FadeIn/>` for react-dom and
react-native at once. This pull request is start for it

- @suspenisve/react-native 
- @suspenisve/react-dom

![Jul-27-2024
05-05-21-min](https://github.com/user-attachments/assets/ce5bc8bd-9a96-42b3-b954-672dacbc0dec)

## PR Checklist

- [x] I did below actions if need

1. I read the [Contributing
Guide](https://github.com/toss/suspensive/blob/main/CONTRIBUTING.md)
2. I added documents and tests.

.gitignore

@@ -7,6 +7,7 @@ node_modules
 coverage
 __screenshots__
 vitest.config.ts.timestamp*
+tsconfig.vitest-temp.json
 
 # next.js
 .next/
@@ -20,6 +21,7 @@ build
 # debug
 npm-debug.log*
 .pnpm-debug.log*
+npm-debug.*
 
 # local env files
 .env.local
@@ -37,8 +39,19 @@ esm
 # graph
 graph/
 
-# test
-tsconfig.vitest-temp.json
-
 # benchmark
 benchmarks/
+
+# react-native
+expo-env.d.ts
+.expo/
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

examples/react-native-playground/.eslintrc.cjs

@@ -0,0 +1,10 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+ root: true,
+ extends: ['@suspensive/eslint-config/react-ts', '@react-native-community'],
+ ignorePatterns: ['dist', 'coverage'],
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: 'tsconfig.json',
+ },
+}

examples/react-native-playground/.expo-shared/assets.json

@@ -0,0 +1,4 @@
+{
+ "12bb71342c6255bbf50437ec8f4441c083f47cdb74bd89160c15e4f43e52a1cb": true,
+ "40b842e832070c58deac6aa9e08fa459302ee3f9da492c7e77d93d2fbf4a56fd": true
+}

examples/react-native-playground/App.tsx

@@ -0,0 +1,28 @@
+import { StyleSheet, Text, View } from 'react-native'
+import { StatusBar } from 'expo-status-bar'
+import { TestText } from '@suspensive/react-native'
+
+export default function Native() {
+ return (
+ <View style={styles.container}>
+ <Text style={styles.header}>
+ Suspensive <TestText />
+ </Text>
+ <StatusBar style="auto" />
+ </View>
+ )
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ header: {
+ fontWeight: 'bold',
+ marginBottom: 20,
+ fontSize: 36,
+ },
+})

examples/react-native-playground/README.md

@@ -0,0 +1,3 @@
+# Native
+
+A [react-native](https://reactnative.dev/) app built using [expo](https://docs.expo.dev/)

examples/react-native-playground/app.json

@@ -0,0 +1,31 @@
+{
+ "expo": {
+ "name": "react-native-playground",
+ "slug": "react-native-playground",
+ "version": "1.0.0",
+ "orientation": "portrait",
+ "icon": "./assets/icon.png",
+ "userInterfaceStyle": "light",
+ "splash": {
+ "image": "./assets/splash.png",
+ "resizeMode": "contain",
+ "backgroundColor": "#ffffff"
+ },
+ "updates": {
+ "fallbackToCacheTimeout": 0
+ },
+ "assetBundlePatterns": ["**/*"],
+ "ios": {
+ "supportsTablet": true
+ },
+ "android": {
+ "adaptiveIcon": {
+ "foregroundImage": "./assets/adaptive-icon.png",
+ "backgroundColor": "#FFFFFF"
+ }
+ },
+ "web": {
+ "favicon": "./assets/favicon.png"
+ }
+ }
+}

examples/react-native-playground/babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function (api) {
+ api.cache(true);
+ return {
+ presets: ["babel-preset-expo"],
+ };
+};

examples/react-native-playground/index.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from "expo";
+
+import App from "./App";
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

examples/react-native-playground/metro.config.js

@@ -0,0 +1,21 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require("expo/metro-config");
+const path = require("path");
+
+// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(__dirname, "../..");
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages, and in what order
+config.resolver.nodeModulesPaths = [
+ path.resolve(projectRoot, "node_modules"),
+ path.resolve(workspaceRoot, "node_modules"),
+];
+// 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+config.resolver.disableHierarchicalLookup = true;
+
+module.exports = config;

examples/react-native-playground/package.json

@@ -0,0 +1,23 @@
+{
+ "name": "@suspensive/react-native-playground",
+ "version": "1.0.0",
+ "private": true,
+ "main": "index.js",
+ "scripts": {
+ "android": "expo start --android",
+ "eject": "expo eject",
+ "ios": "expo start --ios"
+ },
+ "dependencies": {
+ "@suspensive/react-native": "workspace:*",
+ "expo": "^51.0.22",
+ "expo-status-bar": "~1.12.1",
+ "react": "^18.3.1",
+ "react-native": "0.74.3"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.24.9",
+ "@expo/webpack-config": "^19.0.1",
+ "@types/react": "^18.3.3"
+ }
+}

examples/react-native-playground/tsconfig.json

@@ -0,0 +1,7 @@
+{
+ "extends": "expo/tsconfig.base",
+ "include": [".", "./.eslintrc.cjs", "babel.config.js"],
+ "compilerOptions": {
+ "strict": true
+ }
+}

knip.json

@@ -18,6 +18,10 @@
  },
  "packages/react-query-*": {
  "ignoreDependencies": ["@suspensive/react"]
+ },
+ "packages/react-native": {
+ "ignoreDependencies": ["expo", "@testing-library/react-native"],
+ "ignore": ["babel.config.cjs"]
  }
  }
 }

package.json

@@ -26,12 +26,12 @@
  "ci:attw": "turbo run ci:attw",
  "ci:bench": "turbo run ci:bench",
  "ci:eslint": "turbo run ci:eslint",
+ "ci:knip": "pnpm prepack && pnpm knip",
  "ci:publint": "turbo run ci:publint",
  "ci:sherif": "sherif --ignore-package \"./examples/*\" --ignore-package \"./websites/*\" --ignore-package \"./docs/*\" --ignore-dependency \"@tanstack/react-query\" ",
  "ci:test": "turbo run ci:test",
  "ci:test:watch": "turbo run ci:test:watch --parallel",
  "ci:type": "turbo run ci:type",
- "ci:knip": "pnpm prepack && pnpm knip",
  "clean": "turbo run clean",
  "dev": "turbo run dev --concurrency 20",
  "format": "prettier --write \"**/*.{ts,tsx,md}\"",

packages/react-native/.eslintrc.cjs

@@ -0,0 +1,10 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+ root: true,
+ extends: ['@suspensive/eslint-config/react-ts'],
+ ignorePatterns: ['dist', 'coverage'],
+ parserOptions: {
+ tsconfigRootDir: __dirname,
+ project: 'tsconfig.json',
+ },
+}

packages/react-native/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Viva Republica, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/react-native/babel.config.cjs

@@ -0,0 +1,6 @@
+module.exports = (api) => {
+ api.cache(true)
+ return {
+ presets: ['babel-preset-expo'],
+ }
+}

packages/react-native/jest.config.cjs

@@ -0,0 +1,11 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { resolve } = require('path')
+
+module.exports = {
+ preset: 'jest-expo',
+ transform: {
+ '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
+ },
+ // https://github.com/jestjs/jest/blob/b113b44e7252fef18c71d72e70a9293a50f50b96/examples/react-native/jest.config.js
+ transformIgnorePatterns: [resolve(__dirname, '../../packages')],
+}

packages/react-native/package.json

@@ -0,0 +1,75 @@
+{
+ "name": "@suspensive/react-native",
+ "version": "0.0.0",
+ "description": "Useful interfaces for React Suspense",
+ "keywords": [
+ "suspensive",
+ "react"
+ ],
+ "homepage": "https://suspensive.org",
+ "bugs": "https://github.com/toss/suspensive/issues",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/toss/suspensive.git",
+ "directory": "packages/react-native"
+ },
+ "license": "MIT",
+ "author": "Jonghyeon Ko <[email protected]>",
+ "sideEffects": false,
+ "type": "module",
+ "exports": {
+ ".": {
+ "import": {
+ "types": "./dist/index.d.ts",
+ "default": "./dist/index.js"
+ },
+ "require": {
+ "types": "./dist/index.d.cts",
+ "default": "./dist/index.cjs"
+ }
+ },
+ "./package.json": "./package.json"
+ },
+ "main": "dist/index.cjs",
+ "module": "dist/index.js",
+ "types": "dist/index.d.ts",
+ "files": [
+ "dist",
+ "src"
+ ],
+ "scripts": {
+ "build": "tsup",
+ "ci:attw": "attw --pack",
+ "ci:eslint": "eslint \"**/*.{js,jsx,cjs,mjs,ts,tsx,cts,mts}\"",
+ "ci:publint": "publint --strict",
+ "ci:test": "jest",
+ "ci:test:watch": "vitest --ui --coverage --typecheck",
+ "ci:type": "tsc --noEmit",
+ "clean": "rimraf ./dist && rimraf ./coverage",
+ "dev": "tsup --watch",
+ "prepack": "pnpm build"
+ },
+ "dependencies": {
+ "@suspensive/utils": "workspace:*"
+ },
+ "devDependencies": {
+ "@suspensive/eslint-config": "workspace:*",
+ "@suspensive/tsconfig": "workspace:*",
+ "@suspensive/tsup": "workspace:*",
+ "@testing-library/react-native": "^12.5.2",
+ "@types/react": "^18.3.3",
+ "babel-jest": "^29.7.0",
+ "expo": "^51.0.22",
+ "jest": "^29.7.0",
+ "jest-expo": "^51.0.3",
+ "react": "^18.3.1",
+ "react-native": "0.74.3"
+ },
+ "peerDependencies": {
+ "react": "^18",
+ "react-native": "0.74.3"
+ },
+ "publishConfig": {
+ "access": "public"
+ }
+}

packages/react-native/src/TestText.spec.tsx

@@ -0,0 +1,5 @@
+describe('<TestText />', () => {
+ it('should render text "Test" with custom text', () => {
+ expect(1).toBe(1)
+ })
+})

packages/react-native/src/TestText.tsx

@@ -0,0 +1,3 @@
+import { Text } from 'react-native'
+
+export const TestText = () => <Text>Test</Text>

packages/react-native/src/index.ts

@@ -0,0 +1 @@
+export { TestText } from './TestText'

packages/react-native/tsconfig.json

@@ -0,0 +1,7 @@
+{
+ "extends": "@suspensive/tsconfig/react-library.json",
+ "include": [".", "./.eslintrc.cjs", "./babel.config.cjs"],
+ "compilerOptions": {
+ "types": ["@testing-library/jest-dom/vitest", "vitest/globals"]
+ }
+}

packages/react-native/tsup.config.ts

@@ -0,0 +1,4 @@
+import { options } from '@suspensive/tsup'
+import { defineConfig } from 'tsup'
+
+export default defineConfig(options)