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)