Merge pull request #5 from javascripter/expo-universal-example

Add example for universal Expo and Expo Web with react-strict-dom

examples/expo-universal/.gitignore

@@ -0,0 +1,20 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store
+
+# @generated expo-cli sync-2b81b286409207a5da26e14c78851eb30d8ccbdb
+# The following patterns were generated by expo-cli
+
+expo-env.d.ts
+# @end expo-cli

examples/expo-universal/README.md

@@ -0,0 +1,50 @@
+# Welcome to your Expo app 👋
+
+This is an [Expo](https://expo.dev) project created with [`create-expo-app`](https://www.npmjs.com/package/create-expo-app).
+
+## Get started
+
+1. Install dependencies
+
+   ```bash
+   npm install
+   ```
+
+2. Start the app
+
+   ```bash
+    npx 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
+npm run reset-project
+```
+
+This command will move the starter code to the **app-example** directory and create a blank **app** directory where you can start developing.
+
+## Learn more
+
+To learn more about developing your project with Expo, look at the following resources:
+
+- [Expo documentation](https://docs.expo.dev/): Learn fundamentals, or go into advanced topics with our [guides](https://docs.expo.dev/guides).
+- [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
+
+Join our community of developers creating universal apps.
+
+- [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.

examples/expo-universal/app.json

@@ -0,0 +1,21 @@
+{
+  "expo": {
+    "name": "expo-universal",
+    "slug": "expo-universal",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "scheme": "myapp",
+    "userInterfaceStyle": "automatic",
+    "ios": {
+      "supportsTablet": true
+    },
+    "web": {
+      "bundler": "metro",
+      "output": "static"
+    },
+    "plugins": ["expo-router"],
+    "experiments": {
+      "typedRoutes": true
+    }
+  }
+}

examples/expo-universal/babel.config.js

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

examples/expo-universal/metro.config.js

@@ -0,0 +1,21 @@
+const path = require('node:path')
+
+// Learn more https://docs.expo.io/guides/customizing-metro
+const { getDefaultConfig } = require('expo/metro-config')
+
+/** @type {import('expo/metro-config').MetroConfig} */
+const config = getDefaultConfig(__dirname)
+
+const ALIASES = {
+  '@stylexjs/stylex': path.join(__dirname, 'src/lib/stylex'),
+}
+
+config.resolver.resolveRequest = (context, moduleName, platform) => {
+  return context.resolveRequest(
+    context,
+    ALIASES[moduleName] ?? moduleName,
+    platform
+  )
+}
+
+module.exports = config

examples/expo-universal/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "expo-universal",
+  "main": "expo-router/entry",
+  "version": "1.0.0",
+  "scripts": {
+    "start": "expo start",
+    "reset-project": "node ./scripts/reset-project.js",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "test": "jest --watchAll",
+    "lint": "expo lint"
+  },
+  "jest": {
+    "preset": "jest-expo"
+  },
+  "dependencies": {
+    "@expo/vector-icons": "^14.0.2",
+    "@nanocss/nanocss": "^0.0.3",
+    "@react-navigation/native": "^6.0.2",
+    "expo": "~51.0.28",
+    "expo-constants": "~16.0.2",
+    "expo-font": "~12.0.9",
+    "expo-linking": "~6.3.1",
+    "expo-router": "~3.5.23",
+    "expo-splash-screen": "~0.27.5",
+    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "~3.0.7",
+    "expo-web-browser": "~13.0.3",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-native": "0.74.5",
+    "react-native-gesture-handler": "~2.16.1",
+    "react-native-reanimated": "~3.10.1",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.31.1",
+    "react-native-web": "~0.19.10",
+    "react-strict-dom": "^0.0.24"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@types/jest": "^29.5.12",
+    "@types/react": "~18.2.45",
+    "@types/react-test-renderer": "^18.0.7",
+    "jest": "^29.2.1",
+    "jest-expo": "~51.0.3",
+    "react-test-renderer": "18.2.0",
+    "typescript": "~5.3.3"
+  },
+  "private": true
+}

examples/expo-universal/src/app/+html.tsx

@@ -0,0 +1,38 @@
+import { ScrollViewStyleReset } from 'expo-router/html'
+import { type PropsWithChildren } from 'react'
+import { styleSheet } from '../lib/stylex'
+
+/**
+ * This file is web-only and used to configure the root HTML for every web page during static rendering.
+ * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
+ */
+export default function Root({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no"
+        />
+        <style
+          dangerouslySetInnerHTML={{
+            __html: styleSheet(), // Add NanoCSS styles
+          }}
+        />
+      </head>
+      <body>{children}</body>
+    </html>
+  )
+}
+
+const responsiveBackground = `
+body {
+  background-color: #fff;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #000;
+  }
+}`

examples/expo-universal/src/app/_layout.tsx

@@ -0,0 +1,2 @@
+import { Stack } from 'expo-router'
+export default Stack

examples/expo-universal/src/app/index.tsx

@@ -0,0 +1,35 @@
+import { html, css } from 'react-strict-dom'
+import { colors } from '../styles/colors.stylex'
+
+export default function Home() {
+  return (
+    <html.main style={styles.main}>
+      <html.h1 style={styles.h1}>Next.js + NanoCSS</html.h1>
+      <html.p style={styles.p}>Hello, world!</html.p>
+      <html.p style={styles.theme}>Text in primary color.</html.p>
+      <html.button style={styles.dynamic(100)}>Dynamic width</html.button>
+    </html.main>
+  )
+}
+
+const styles = css.create({
+  main: {
+    padding: 16,
+  },
+  h1: {
+    fontSize: 24,
+  },
+  p: {
+    color: 'green',
+  },
+  theme: {
+    color: colors.primary,
+  },
+  dynamic: (width: number) => ({
+    width,
+    color: {
+      default: 'black',
+      ':hover': 'blue',
+    },
+  }),
+})

examples/expo-universal/src/lib/stylex.ts

@@ -0,0 +1,16 @@
+import { nanocss } from '@nanocss/nanocss'
+
+const { styleSheet, ...css } = nanocss({
+  hooks: [
+    ':hover',
+    // Add your hooks here
+  ],
+  debug: process.env.NODE_ENV !== 'production',
+})
+
+// For ESM imports
+export const { create, props, defineVars, createTheme } = css
+
+export { styleSheet } // Add styleSheet() in your layout.ts
+
+export default css

examples/expo-universal/src/styles/colors.stylex.ts

@@ -0,0 +1,5 @@
+import { css } from 'react-strict-dom'
+
+export const colors = css.defineVars({
+  primary: 'green',
+})

examples/expo-universal/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
+}