refactor @wq/router for compat with expo-router

wq · Aug 20, 2024 · d8ea672 · d8ea672
1 parent 0e26b77
commit d8ea672
Show file tree

Hide file tree

Showing 28 changed files with 16,037 additions and 17,365 deletions.
diff --git a/packages/map-gl-native/jest.config.js b/packages/map-gl-native/jest.config.js
@@ -2,9 +2,7 @@ export default {
     preset: "jest-expo",
     setupFiles: [
         "./node_modules/@maplibre/maplibre-react-native/setup-jest.js",
-        "./setup-jest.js",
     ],
     testMatch: ["**/__tests__/**/*.js?(x)"],
     transformIgnorePatterns: [],
-    moduleNameMapper: { "@wq/material": "<rootDir>/setup-jest.js" },
 };
diff --git a/packages/map-gl-native/package-lock.json b/packages/map-gl-native/package-lock.json
diff --git a/packages/map-gl-native/package.json b/packages/map-gl-native/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@wq/map-gl-native",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "React Native & Expo bindings for @wq/map-gl",
     "type": "module",
     "main": "src/index.js",
@@ -30,18 +30,18 @@
     },
     "homepage": "https://wq.io/@wq/map-gl",
     "dependencies": {
-        "@turf/circle": "^6.5.0",
-        "@wq/map": "^2.0.0"
+        "@turf/circle": "^7.1.0",
+        "@wq/map": "^2.1.0"
     },
     "peerDependencies": {
         "@maplibre/maplibre-react-native": "*",
         "expo-location": "*",
         "react-native-paper": "*"
     },
     "devDependencies": {
-        "@maplibre/maplibre-react-native": "github:maplibre/maplibre-react-native#a2b72b6",
-        "expo-location": "^16.1.0",
-        "jest-expo": "^49.0.0",
-        "react-native-paper": "^5.10.3"
+        "@maplibre/maplibre-react-native": "^10.0.0-alpha.10",
+        "expo-location": "^17.0.1",
+        "jest-expo": "^51.0.3",
+        "react-native-paper": "^5.12.5"
     }
 }
diff --git a/packages/map-gl-native/setup-jest.js b/packages/map-gl-native/setup-jest.js
diff --git a/packages/material-native/package-lock.json b/packages/material-native/package-lock.json
diff --git a/packages/material-native/package.json b/packages/material-native/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@wq/material-native",
-    "version": "2.0.0",
+    "version": "2.1.0",
     "description": "React Native and Expo bindings for @wq/material",
     "type": "module",
     "main": "src/index.js",
@@ -28,8 +28,8 @@
     },
     "homepage": "https://wq.io/@wq/material",
     "dependencies": {
-        "@wq/react": "^2.0.0",
-        "date-fns": "^2.30.0"
+        "@wq/react": "^2.1.0",
+        "date-fns": "^3.6.0"
     },
     "peerDependencies": {
         "@react-native-async-storage/async-storage": "*",
@@ -43,15 +43,15 @@
         "react-native-picker-select": "*"
     },
     "devDependencies": {
-        "@react-native-async-storage/async-storage": "^1.19.1",
-        "@react-native-community/netinfo": "^9.4.1",
-        "@react-navigation/stack": "^6.3.17",
-        "expo-application": "^5.3.0",
-        "expo-document-picker": "^11.5.4",
-        "expo-image-picker": "^14.3.2",
-        "jest-expo": "^49.0.0",
-        "react-native-modal-datetime-picker": "^17.0.0",
-        "react-native-paper": "^5.10.1",
-        "react-native-picker-select": "github:Expensify/react-native-picker-select#eae0585"
+        "@react-native-async-storage/async-storage": "^1.24.0",
+        "@react-native-community/netinfo": "^11.3.2",
+        "@react-navigation/stack": "^6.4.1",
+        "expo-application": "^5.9.1",
+        "expo-document-picker": "^12.0.2",
+        "expo-image-picker": "^15.0.7",
+        "jest-expo": "^51.0.3",
+        "react-native-modal-datetime-picker": "^17.1.0",
+        "react-native-paper": "^5.12.5",
+        "react-native-picker-select": "^9.3.1"
     }
 }
diff --git a/packages/material-native/src/App.js → packages/material-native/src/Root.js b/packages/material-native/src/App.js → packages/material-native/src/Root.js
@@ -1,5 +1,5 @@
 import React, { useMemo } from "react";
-import { App as DefaultApp, usePlugin } from "@wq/react";
+import { Root as DefaultRoot } from "@wq/react";
 import {
     MD2LightTheme,
     MD3LightTheme,
@@ -15,22 +15,13 @@ const THEMES = {
     "dark-3": MD3DarkTheme,
 };
 
-export default function App() {
-    const { theme: configTheme } = usePlugin("material").config,
-        theme = useMemo(() => createTheme(configTheme), [configTheme]),
-        options = useMemo(
-            () => ({
-                navigator: { theme },
-                screen: {
-                    cardStyle: { backgroundColor: theme.colors.background },
-                },
-            }),
-            [theme]
-        );
+export default function Root({ app, children }) {
+    const { theme: configTheme } = app.plugins.material.config,
+        theme = useMemo(() => createTheme(configTheme), [configTheme]);
 
     return (
         <PaperProvider theme={theme}>
-            <DefaultApp options={options} />
+            <DefaultRoot app={app}>{children}</DefaultRoot>
         </PaperProvider>
     );
 }

diff --git a/packages/material-native/src/index.js b/packages/material-native/src/index.js
@@ -1,5 +1,5 @@
 import react from "@wq/react";
-import App from "./App.js";
+import Root from "./Root.js";
 import * as components from "./components/index.js";
 import * as inputs from "./inputs/index.js";
 import * as icons from "./icons.js";
@@ -21,7 +21,7 @@ export default {
         },
     },
 
-    components: { App, ...components },
+    components: { Root, ...components },
     inputs: { ...inputs },
     icons: { ...icons },
 
@@ -38,7 +38,7 @@ export default {
     },
 };
 
-export { App };
+export { Root };
 export * from "./components/index.js";
 export * from "./inputs/index.js";
 export * from "./hooks.js";

diff --git a/packages/material-web/.gitignore b/packages/material-web/.gitignore
@@ -1,5 +1,5 @@
 /index.js
-/App.js
+/Root.js
 /icons.js
 /hooks.js
 /components/

diff --git a/packages/material-web/src/App.js → packages/material-web/src/Root.js b/packages/material-web/src/App.js → packages/material-web/src/Root.js
@@ -1,18 +1,18 @@
 import React, { useMemo } from "react";
-import { App as DefaultApp, usePlugin } from "@wq/react";
+import { Root as DefaultRoot, usePlugin } from "@wq/react";
 import {
     createTheme as createMuiTheme,
     ThemeProvider,
     CssBaseline,
 } from "@mui/material";
 
-export default function App() {
+export default function Root({ app, children }) {
     const { theme } = usePlugin("material").config,
         muiTheme = useMemo(() => createTheme(theme), [theme]);
     return (
         <ThemeProvider theme={muiTheme}>
             <CssBaseline />
-            <DefaultApp />
+            <Root app={app}>{children}</Root>
         </ThemeProvider>
     );
 }

diff --git a/packages/material-web/src/index.js b/packages/material-web/src/index.js
@@ -1,5 +1,5 @@
 import react from "@wq/react";
-import App from "./App.js";
+import Root from "./Root.js";
 import * as components from "./components/index.js";
 import * as inputs from "./inputs/index.js";
 import * as icons from "./icons.js";
@@ -21,7 +21,7 @@ export default {
         },
     },
 
-    components: { App, ...components },
+    components: { Root, ...components },
     inputs: { ...inputs },
     icons: { ...icons },
 
@@ -42,7 +42,7 @@ export default {
     },
 };
 
-export { App };
+export { Root };
 export * from "./components/index.js";
 export * from "./inputs/index.js";
 export * from "./hooks.js";

diff --git a/packages/react/.gitignore b/packages/react/.gitignore
@@ -3,12 +3,10 @@
 /index.native.js
 /index.expo.js
 /App.js
-/App.native.js
+/Root.js
 /hooks.js
-/hooks.native.js
 /icons.js
 /init.js
-/init.native.js
 /messages.js
 /validate.js
 /components/

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@wq/react",
-    "version": "2.1.0",
+    "version": "2.2.0",
     "description": "React renderer for use with @wq/app",
     "type": "module",
     "main": "index.js",

diff --git a/packages/react/src/App.native.js b/packages/react/src/App.native.js
diff --git a/packages/react/src/Root.js b/packages/react/src/Root.js
@@ -0,0 +1,12 @@
+import { Provider as StoreProvider } from "react-redux";
+import { AppContext } from "./hooks.js";
+
+export default function Root({ app, children }) {
+    return (
+        <StoreProvider store={app.store._store}>
+            <AppContext.Provider value={{ app }}>
+                {children}
+            </AppContext.Provider>
+        </StoreProvider>
+    );
+}