@idealyst/cli 1.0.61 → 1.0.62

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/templates/native/src/App-with-trpc-and-shared.tsx +11 -16
  2. package/dist/templates/native/src/App-with-trpc.tsx +11 -16
  3. package/dist/templates/native/src/navigation/AppRouter.tsx +25 -20
  4. package/dist/templates/shared/package.json +2 -1
  5. package/dist/templates/shared/src/navigation/AppRouter.tsx +25 -20
  6. package/dist/templates/shared/src/trpc/client.ts +12 -7
  7. package/dist/templates/web/src/App-with-trpc-and-shared.tsx +10 -15
  8. package/dist/templates/web/src/App-with-trpc.tsx +10 -15
  9. package/dist/templates/web/src/navigation/AppRouter.tsx +25 -20
  10. package/dist/templates/web/src/navigation/AppRouterWithTrpc.tsx +25 -20
  11. package/package.json +1 -1
  12. package/templates/native/src/navigation/AppRouter.tsx +25 -20
  13. package/templates/shared/src/navigation/AppRouter.tsx +25 -20
  14. package/templates/web/src/navigation/AppRouter.tsx +25 -20
  15. package/templates/web/src/navigation/AppRouterWithTrpc.tsx +25 -20
package/dist/templates/native/src/App-with-trpc-and-shared.tsx CHANGED
@@ -1,26 +1,21 @@
1
1
  import React from 'react';
2
2
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3
- import { httpBatchLink } from '@trpc/client';
4
3
  import { NavigatorProvider } from '@idealyst/navigation';
5
- import { trpc } from './utils/trpc';
4
+ import { trpc, createTRPCClient } from './utils/trpc';
6
5
  import { AppRouter } from '@{{workspaceScope}}/shared';
7
6
 
8
- // Create tRPC client
7
+ // Create tRPC client using shared factory
9
8
  const queryClient = new QueryClient();
10
9
 
11
- const trpcClient = trpc.createClient({
12
- links: [
13
- httpBatchLink({
14
- url: 'http://localhost:3000/trpc', // Update this to your API URL
15
- // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
16
- // Optional: Add headers for authentication
17
- // headers() {
18
- // return {
19
- // authorization: getAuthToken(),
20
- // };
21
- // },
22
- }),
23
- ],
10
+ const trpcClient = createTRPCClient({
11
+ apiUrl: 'http://localhost:3000/trpc', // Update this to your API URL
12
+ // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
13
+ // Optional: Add headers for authentication
14
+ // headers() {
15
+ // return {
16
+ // authorization: getAuthToken(),
17
+ // };
18
+ // },
24
19
  });
25
20
 
26
21
  function App() {
package/dist/templates/native/src/App-with-trpc.tsx CHANGED
@@ -1,26 +1,21 @@
1
1
  import React from 'react';
2
2
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3
- import { httpBatchLink } from '@trpc/client';
4
3
  import { NavigatorProvider } from '@idealyst/navigation';
5
- import { trpc } from './utils/trpc';
4
+ import { trpc, createTRPCClient } from './utils/trpc';
6
5
  import AppRouter from './navigation/AppRouter';
7
6
 
8
- // Create tRPC client
7
+ // Create tRPC client using shared factory
9
8
  const queryClient = new QueryClient();
10
9
 
11
- const trpcClient = trpc.createClient({
12
- links: [
13
- httpBatchLink({
14
- url: 'http://localhost:3000/trpc', // Update this to your API URL
15
- // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
16
- // Optional: Add headers for authentication
17
- // headers() {
18
- // return {
19
- // authorization: getAuthToken(),
20
- // };
21
- // },
22
- }),
23
- ],
10
+ const trpcClient = createTRPCClient({
11
+ apiUrl: 'http://localhost:3000/trpc', // Update this to your API URL
12
+ // For device testing, you might need: 'http://192.168.1.xxx:3000/trpc'
13
+ // Optional: Add headers for authentication
14
+ // headers() {
15
+ // return {
16
+ // authorization: getAuthToken(),
17
+ // };
18
+ // },
24
19
  });
25
20
 
26
21
  function App() {
package/dist/templates/native/src/navigation/AppRouter.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon, Button } from '@idealyst/components';
4
4
 
5
5
  // Simple API test component for native-only projects
@@ -79,24 +79,28 @@ const SettingsScreen = () => (
79
79
  </Screen>
80
80
  );
81
81
 
82
- const AppRouter: RouteParam = {
83
- path: "/",
84
- component: HomeScreen,
85
- layout: {
86
- type: "tab",
87
- },
88
- screenOptions: {
89
- title: 'Home',
90
- tabBarLabel: 'Home',
91
- tabBarIcon: ({ focused, size }) => (
92
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
93
- ),
94
- },
82
+ const AppRouter: NavigatorParam = {
83
+ type: 'navigator',
84
+ path: '/',
85
+ layout: 'tab',
95
86
  routes: [
96
- {
97
- path: "profile",
87
+ {
88
+ type: 'screen',
89
+ path: '/',
90
+ component: HomeScreen,
91
+ options: {
92
+ title: 'Home',
93
+ tabBarLabel: 'Home',
94
+ tabBarIcon: ({ focused, size }) => (
95
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
96
+ ),
97
+ },
98
+ },
99
+ {
100
+ type: 'screen',
101
+ path: '/profile',
98
102
  component: ProfileScreen,
99
- screenOptions: {
103
+ options: {
100
104
  title: 'Profile',
101
105
  tabBarLabel: 'Profile',
102
106
  tabBarIcon: ({ focused, size }) => (
@@ -104,10 +108,11 @@ const AppRouter: RouteParam = {
104
108
  ),
105
109
  },
106
110
  },
107
- {
108
- path: "settings",
111
+ {
112
+ type: 'screen',
113
+ path: '/settings',
109
114
  component: SettingsScreen,
110
- screenOptions: {
115
+ options: {
111
116
  title: 'Settings',
112
117
  tabBarLabel: 'Settings',
113
118
  tabBarIcon: ({ focused, size }) => (
package/dist/templates/shared/package.json CHANGED
@@ -26,7 +26,8 @@
26
26
  "@trpc/react-query": "^11.5.1",
27
27
  "@trpc/server": "^11.5.1",
28
28
  "react": "^19.1.0",
29
- "react-native": "^0.80.1"
29
+ "react-native": "^0.80.1",
30
+ "{{workspaceScope}}/api": "*"
30
31
  },
31
32
  "peerDependenciesMeta": {
32
33
  "react-native": {
package/dist/templates/shared/src/navigation/AppRouter.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon } from '@idealyst/components';
4
4
  import { HelloWorld } from '../components/HelloWorld';
5
5
 
@@ -51,24 +51,28 @@ const SettingsScreen = () => (
51
51
  </Screen>
52
52
  );
53
53
 
54
- const AppRouter: RouteParam = {
55
- path: "/",
56
- component: HomeScreen,
57
- layout: {
58
- type: "tab",
59
- },
60
- screenOptions: {
61
- title: 'Home',
62
- tabBarLabel: 'Home',
63
- tabBarIcon: ({ focused, size }) => (
64
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
65
- ),
66
- },
54
+ const AppRouter: NavigatorParam = {
55
+ type: 'navigator',
56
+ path: '/',
57
+ layout: 'tab',
67
58
  routes: [
68
- {
69
- path: "profile",
59
+ {
60
+ type: 'screen',
61
+ path: '/',
62
+ component: HomeScreen,
63
+ options: {
64
+ title: 'Home',
65
+ tabBarLabel: 'Home',
66
+ tabBarIcon: ({ focused, size }) => (
67
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
68
+ ),
69
+ },
70
+ },
71
+ {
72
+ type: 'screen',
73
+ path: '/profile',
70
74
  component: ProfileScreen,
71
- screenOptions: {
75
+ options: {
72
76
  title: 'Profile',
73
77
  tabBarLabel: 'Profile',
74
78
  tabBarIcon: ({ focused, size }) => (
@@ -76,10 +80,11 @@ const AppRouter: RouteParam = {
76
80
  ),
77
81
  },
78
82
  },
79
- {
80
- path: "settings",
83
+ {
84
+ type: 'screen',
85
+ path: '/settings',
81
86
  component: SettingsScreen,
82
- screenOptions: {
87
+ options: {
83
88
  title: 'Settings',
84
89
  tabBarLabel: 'Settings',
85
90
  tabBarIcon: ({ focused, size }) => (
package/dist/templates/shared/src/trpc/client.ts CHANGED
@@ -1,9 +1,10 @@
1
- import { createTRPCReact } from '@trpc/react-query';
2
- import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
3
- import type { AppRouter } from '@{{workspaceScope}}/api';
1
+ import { createTRPCProxyClient, httpBatchLink } from "@trpc/client";
2
+ import { createTRPCReact } from "@trpc/react-query";
3
+ import type { AppRouter } from "@{{workspaceScope}}/api";
4
4
 
5
5
  // Create the tRPC React hooks with full type safety
6
- export const trpc = createTRPCReact<AppRouter>();
6
+ export const trpc: ReturnType<typeof createTRPCReact<AppRouter>> =
7
+ createTRPCReact<AppRouter>();
7
8
 
8
9
  // Configuration for tRPC client
9
10
  export interface TRPCClientConfig {
@@ -12,7 +13,9 @@ export interface TRPCClientConfig {
12
13
  }
13
14
 
14
15
  // Create tRPC client factory
15
- export function createTRPCClient(config: TRPCClientConfig) {
16
+ export function createTRPCClient(
17
+ config: TRPCClientConfig
18
+ ): ReturnType<typeof trpc.createClient> {
16
19
  return trpc.createClient({
17
20
  links: [
18
21
  httpBatchLink({
@@ -24,7 +27,9 @@ export function createTRPCClient(config: TRPCClientConfig) {
24
27
  }
25
28
 
26
29
  // Create a vanilla client (for use outside of React components)
27
- export function createVanillaTRPCClient(config: TRPCClientConfig) {
30
+ export function createVanillaTRPCClient(
31
+ config: TRPCClientConfig
32
+ ): ReturnType<typeof createTRPCProxyClient<AppRouter>> {
28
33
  return createTRPCProxyClient<AppRouter>({
29
34
  links: [
30
35
  httpBatchLink({
@@ -36,4 +41,4 @@ export function createVanillaTRPCClient(config: TRPCClientConfig) {
36
41
  }
37
42
 
38
43
  // Export types
39
- export type { AppRouter } from '@{{workspaceScope}}/api';
44
+ export type { AppRouter } from "@{{workspaceScope}}/api";
package/dist/templates/web/src/App-with-trpc-and-shared.tsx CHANGED
@@ -1,26 +1,21 @@
1
1
  import React from 'react';
2
2
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3
- import { httpBatchLink } from '@trpc/client';
4
3
  import { BrowserRouter } from 'react-router-dom';
5
4
  import { NavigatorProvider } from '@idealyst/navigation';
6
- import { trpc } from './utils/trpc';
5
+ import { trpc, createTRPCClient } from './utils/trpc';
7
6
  import { AppRouter } from '@{{workspaceScope}}/shared';
8
7
 
9
- // Create tRPC client
8
+ // Create tRPC client using shared factory
10
9
  const queryClient = new QueryClient();
11
10
 
12
- const trpcClient = trpc.createClient({
13
- links: [
14
- httpBatchLink({
15
- url: 'http://localhost:3000/trpc', // Update this to match your API URL
16
- // Optional: Add headers for authentication
17
- // headers() {
18
- // return {
19
- // authorization: getAuthToken(),
20
- // };
21
- // },
22
- }),
23
- ],
11
+ const trpcClient = createTRPCClient({
12
+ apiUrl: 'http://localhost:3000/trpc', // Update this to match your API URL
13
+ // Optional: Add headers for authentication
14
+ // headers() {
15
+ // return {
16
+ // authorization: getAuthToken(),
17
+ // };
18
+ // },
24
19
  });
25
20
 
26
21
  function App() {
package/dist/templates/web/src/App-with-trpc.tsx CHANGED
@@ -1,26 +1,21 @@
1
1
  import React from 'react';
2
2
  import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
3
- import { httpBatchLink } from '@trpc/client';
4
3
  import { BrowserRouter } from 'react-router-dom';
5
4
  import { NavigatorProvider } from '@idealyst/navigation';
6
- import { trpc } from './utils/trpc';
5
+ import { trpc, createTRPCClient } from './utils/trpc';
7
6
  import AppRouterWithTrpc from './navigation/AppRouterWithTrpc';
8
7
 
9
- // Create tRPC client
8
+ // Create tRPC client using shared factory
10
9
  const queryClient = new QueryClient();
11
10
 
12
- const trpcClient = trpc.createClient({
13
- links: [
14
- httpBatchLink({
15
- url: 'http://localhost:3000/trpc', // Update this to match your API URL
16
- // Optional: Add headers for authentication
17
- // headers() {
18
- // return {
19
- // authorization: getAuthToken(),
20
- // };
21
- // },
22
- }),
23
- ],
11
+ const trpcClient = createTRPCClient({
12
+ apiUrl: 'http://localhost:3000/trpc', // Update this to match your API URL
13
+ // Optional: Add headers for authentication
14
+ // headers() {
15
+ // return {
16
+ // authorization: getAuthToken(),
17
+ // };
18
+ // },
24
19
  });
25
20
 
26
21
  function App() {
package/dist/templates/web/src/navigation/AppRouter.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon } from '@idealyst/components';
4
4
 
5
5
  // Simple API test component for web-only projects
@@ -79,24 +79,28 @@ const SettingsScreen = () => (
79
79
  </Screen>
80
80
  );
81
81
 
82
- const AppRouter: RouteParam = {
83
- path: "/",
84
- component: HomeScreen,
85
- layout: {
86
- type: "tab",
87
- },
88
- screenOptions: {
89
- title: 'Home',
90
- tabBarLabel: 'Home',
91
- tabBarIcon: ({ focused, size }) => (
92
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
93
- ),
94
- },
82
+ const AppRouter: NavigatorParam = {
83
+ type: 'navigator',
84
+ path: '/',
85
+ layout: 'tab',
95
86
  routes: [
96
- {
97
- path: "profile",
87
+ {
88
+ type: 'screen',
89
+ path: '/',
90
+ component: HomeScreen,
91
+ options: {
92
+ title: 'Home',
93
+ tabBarLabel: 'Home',
94
+ tabBarIcon: ({ focused, size }) => (
95
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
96
+ ),
97
+ },
98
+ },
99
+ {
100
+ type: 'screen',
101
+ path: '/profile',
98
102
  component: ProfileScreen,
99
- screenOptions: {
103
+ options: {
100
104
  title: 'Profile',
101
105
  tabBarLabel: 'Profile',
102
106
  tabBarIcon: ({ focused, size }) => (
@@ -104,10 +108,11 @@ const AppRouter: RouteParam = {
104
108
  ),
105
109
  },
106
110
  },
107
- {
108
- path: "settings",
111
+ {
112
+ type: 'screen',
113
+ path: '/settings',
109
114
  component: SettingsScreen,
110
- screenOptions: {
115
+ options: {
111
116
  title: 'Settings',
112
117
  tabBarLabel: 'Settings',
113
118
  tabBarIcon: ({ focused, size }) => (
package/dist/templates/web/src/navigation/AppRouterWithTrpc.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon, Button } from '@idealyst/components';
4
4
  import { trpc } from '../utils/trpc';
5
5
 
@@ -75,24 +75,28 @@ const SettingsScreen = () => (
75
75
  </Screen>
76
76
  );
77
77
 
78
- const AppRouterWithTrpc: RouteParam = {
79
- path: "/",
80
- component: HomeScreen,
81
- layout: {
82
- type: "tab",
83
- },
84
- screenOptions: {
85
- title: 'Home',
86
- tabBarLabel: 'Home',
87
- tabBarIcon: ({ focused, size }) => (
88
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
89
- ),
90
- },
78
+ const AppRouterWithTrpc: NavigatorParam = {
79
+ type: 'navigator',
80
+ path: '/',
81
+ layout: 'tab',
91
82
  routes: [
92
- {
93
- path: "profile",
83
+ {
84
+ type: 'screen',
85
+ path: '/',
86
+ component: HomeScreen,
87
+ options: {
88
+ title: 'Home',
89
+ tabBarLabel: 'Home',
90
+ tabBarIcon: ({ focused, size }) => (
91
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
92
+ ),
93
+ },
94
+ },
95
+ {
96
+ type: 'screen',
97
+ path: '/profile',
94
98
  component: ProfileScreen,
95
- screenOptions: {
99
+ options: {
96
100
  title: 'Profile',
97
101
  tabBarLabel: 'Profile',
98
102
  tabBarIcon: ({ focused, size }) => (
@@ -100,10 +104,11 @@ const AppRouterWithTrpc: RouteParam = {
100
104
  ),
101
105
  },
102
106
  },
103
- {
104
- path: "settings",
107
+ {
108
+ type: 'screen',
109
+ path: '/settings',
105
110
  component: SettingsScreen,
106
- screenOptions: {
111
+ options: {
107
112
  title: 'Settings',
108
113
  tabBarLabel: 'Settings',
109
114
  tabBarIcon: ({ focused, size }) => (
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@idealyst/cli",
3
- "version": "1.0.61",
3
+ "version": "1.0.62",
4
4
  "description": "CLI tool for generating Idealyst Framework projects",
5
5
  "readme": "README.md",
6
6
  "main": "dist/index.js",
package/templates/native/src/navigation/AppRouter.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon, Button } from '@idealyst/components';
4
4
 
5
5
  // Simple API test component for native-only projects
@@ -79,24 +79,28 @@ const SettingsScreen = () => (
79
79
  </Screen>
80
80
  );
81
81
 
82
- const AppRouter: RouteParam = {
83
- path: "/",
84
- component: HomeScreen,
85
- layout: {
86
- type: "tab",
87
- },
88
- screenOptions: {
89
- title: 'Home',
90
- tabBarLabel: 'Home',
91
- tabBarIcon: ({ focused, size }) => (
92
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
93
- ),
94
- },
82
+ const AppRouter: NavigatorParam = {
83
+ type: 'navigator',
84
+ path: '/',
85
+ layout: 'tab',
95
86
  routes: [
96
- {
97
- path: "profile",
87
+ {
88
+ type: 'screen',
89
+ path: '/',
90
+ component: HomeScreen,
91
+ options: {
92
+ title: 'Home',
93
+ tabBarLabel: 'Home',
94
+ tabBarIcon: ({ focused, size }) => (
95
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
96
+ ),
97
+ },
98
+ },
99
+ {
100
+ type: 'screen',
101
+ path: '/profile',
98
102
  component: ProfileScreen,
99
- screenOptions: {
103
+ options: {
100
104
  title: 'Profile',
101
105
  tabBarLabel: 'Profile',
102
106
  tabBarIcon: ({ focused, size }) => (
@@ -104,10 +108,11 @@ const AppRouter: RouteParam = {
104
108
  ),
105
109
  },
106
110
  },
107
- {
108
- path: "settings",
111
+ {
112
+ type: 'screen',
113
+ path: '/settings',
109
114
  component: SettingsScreen,
110
- screenOptions: {
115
+ options: {
111
116
  title: 'Settings',
112
117
  tabBarLabel: 'Settings',
113
118
  tabBarIcon: ({ focused, size }) => (
package/templates/shared/src/navigation/AppRouter.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon } from '@idealyst/components';
4
4
  import { HelloWorld } from '../components/HelloWorld';
5
5
 
@@ -51,24 +51,28 @@ const SettingsScreen = () => (
51
51
  </Screen>
52
52
  );
53
53
 
54
- const AppRouter: RouteParam = {
55
- path: "/",
56
- component: HomeScreen,
57
- layout: {
58
- type: "tab",
59
- },
60
- screenOptions: {
61
- title: 'Home',
62
- tabBarLabel: 'Home',
63
- tabBarIcon: ({ focused, size }) => (
64
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
65
- ),
66
- },
54
+ const AppRouter: NavigatorParam = {
55
+ type: 'navigator',
56
+ path: '/',
57
+ layout: 'tab',
67
58
  routes: [
68
- {
69
- path: "profile",
59
+ {
60
+ type: 'screen',
61
+ path: '/',
62
+ component: HomeScreen,
63
+ options: {
64
+ title: 'Home',
65
+ tabBarLabel: 'Home',
66
+ tabBarIcon: ({ focused, size }) => (
67
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
68
+ ),
69
+ },
70
+ },
71
+ {
72
+ type: 'screen',
73
+ path: '/profile',
70
74
  component: ProfileScreen,
71
- screenOptions: {
75
+ options: {
72
76
  title: 'Profile',
73
77
  tabBarLabel: 'Profile',
74
78
  tabBarIcon: ({ focused, size }) => (
@@ -76,10 +80,11 @@ const AppRouter: RouteParam = {
76
80
  ),
77
81
  },
78
82
  },
79
- {
80
- path: "settings",
83
+ {
84
+ type: 'screen',
85
+ path: '/settings',
81
86
  component: SettingsScreen,
82
- screenOptions: {
87
+ options: {
83
88
  title: 'Settings',
84
89
  tabBarLabel: 'Settings',
85
90
  tabBarIcon: ({ focused, size }) => (
package/templates/web/src/navigation/AppRouter.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon } from '@idealyst/components';
4
4
 
5
5
  // Simple API test component for web-only projects
@@ -79,24 +79,28 @@ const SettingsScreen = () => (
79
79
  </Screen>
80
80
  );
81
81
 
82
- const AppRouter: RouteParam = {
83
- path: "/",
84
- component: HomeScreen,
85
- layout: {
86
- type: "tab",
87
- },
88
- screenOptions: {
89
- title: 'Home',
90
- tabBarLabel: 'Home',
91
- tabBarIcon: ({ focused, size }) => (
92
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
93
- ),
94
- },
82
+ const AppRouter: NavigatorParam = {
83
+ type: 'navigator',
84
+ path: '/',
85
+ layout: 'tab',
95
86
  routes: [
96
- {
97
- path: "profile",
87
+ {
88
+ type: 'screen',
89
+ path: '/',
90
+ component: HomeScreen,
91
+ options: {
92
+ title: 'Home',
93
+ tabBarLabel: 'Home',
94
+ tabBarIcon: ({ focused, size }) => (
95
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
96
+ ),
97
+ },
98
+ },
99
+ {
100
+ type: 'screen',
101
+ path: '/profile',
98
102
  component: ProfileScreen,
99
- screenOptions: {
103
+ options: {
100
104
  title: 'Profile',
101
105
  tabBarLabel: 'Profile',
102
106
  tabBarIcon: ({ focused, size }) => (
@@ -104,10 +108,11 @@ const AppRouter: RouteParam = {
104
108
  ),
105
109
  },
106
110
  },
107
- {
108
- path: "settings",
111
+ {
112
+ type: 'screen',
113
+ path: '/settings',
109
114
  component: SettingsScreen,
110
- screenOptions: {
115
+ options: {
111
116
  title: 'Settings',
112
117
  tabBarLabel: 'Settings',
113
118
  tabBarIcon: ({ focused, size }) => (
package/templates/web/src/navigation/AppRouterWithTrpc.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { RouteParam } from '@idealyst/navigation';
2
+ import { NavigatorParam } from '@idealyst/navigation';
3
3
  import { Screen, Text, View, Icon, Button } from '@idealyst/components';
4
4
  import { trpc } from '../utils/trpc';
5
5
 
@@ -75,24 +75,28 @@ const SettingsScreen = () => (
75
75
  </Screen>
76
76
  );
77
77
 
78
- const AppRouterWithTrpc: RouteParam = {
79
- path: "/",
80
- component: HomeScreen,
81
- layout: {
82
- type: "tab",
83
- },
84
- screenOptions: {
85
- title: 'Home',
86
- tabBarLabel: 'Home',
87
- tabBarIcon: ({ focused, size }) => (
88
- <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
89
- ),
90
- },
78
+ const AppRouterWithTrpc: NavigatorParam = {
79
+ type: 'navigator',
80
+ path: '/',
81
+ layout: 'tab',
91
82
  routes: [
92
- {
93
- path: "profile",
83
+ {
84
+ type: 'screen',
85
+ path: '/',
86
+ component: HomeScreen,
87
+ options: {
88
+ title: 'Home',
89
+ tabBarLabel: 'Home',
90
+ tabBarIcon: ({ focused, size }) => (
91
+ <Icon name="home" color={focused ? 'blue' : 'gray'} size={size || 24} />
92
+ ),
93
+ },
94
+ },
95
+ {
96
+ type: 'screen',
97
+ path: '/profile',
94
98
  component: ProfileScreen,
95
- screenOptions: {
99
+ options: {
96
100
  title: 'Profile',
97
101
  tabBarLabel: 'Profile',
98
102
  tabBarIcon: ({ focused, size }) => (
@@ -100,10 +104,11 @@ const AppRouterWithTrpc: RouteParam = {
100
104
  ),
101
105
  },
102
106
  },
103
- {
104
- path: "settings",
107
+ {
108
+ type: 'screen',
109
+ path: '/settings',
105
110
  component: SettingsScreen,
106
- screenOptions: {
111
+ options: {
107
112
  title: 'Settings',
108
113
  tabBarLabel: 'Settings',
109
114
  tabBarIcon: ({ focused, size }) => (