Skip to content

Commit 3234ca1

Browse files
kunalchavhankunalchavhan
authored
chore: update documentation (#7)
* chore: add skelton for readme * chore: move fallback component out of homescreen component * chore: move server to example * chore: add relative path for mock in server * chore: update readme * chore: update readme * chore: update readme * chore: update readme * chore: update readme * chore: add image for showing working of server component * chore: update working image
1 parent 3a1329d commit 3234ca1

File tree

10 files changed

+505
-41
lines changed

10 files changed

+505
-41
lines changed

‎README.md

Lines changed: 142 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# react-native-server-component
22

3-
Server component for react native
3+
Server Component allow react-native (Host) applications to render remote (Server) components. Remote components are loaded through URI at runtime. Remotely loaded components behaves similar to the locally imported components.
44

55
## Installation
66

@@ -10,14 +10,151 @@ npm install react-native-server-component
1010

1111
## Usage
1212

13-
```js
14-
import { multiply } from 'react-native-server-component';
13+
### Server Component
1514

16-
// ...
15+
```tsx
16+
// Host Application Component using ServerComponent
1717

18-
const result = await multiply(3, 7);
18+
import React from 'react';
19+
import { View } from 'react-native';
20+
import { ServerComponent } from 'react-native-server-component';
21+
22+
const FallbackComponent = () => {
23+
return (
24+
<View>
25+
<Text> Fallback Component </Text>
26+
</View>
27+
);
28+
};
29+
30+
export default function App() {
31+
return (
32+
<View style={{ flex: 1 }}>
33+
<ServerComponent
34+
source={{ uri: 'http://10.0.2.2:8080/home-component' }}
35+
fallbackComponent={<FallbackComponent />}
36+
/>
37+
</View>
38+
);
39+
}
40+
```
41+
42+
```tsx
43+
// Server Component hosted on server
44+
45+
export const HomeComponent = () => {
46+
return (
47+
<View>
48+
<Text> Server Component </Text>
49+
</View>
50+
);
51+
};
1952
```
2053

54+
### Pre Load Component
55+
56+
```tsx
57+
import React from 'react';
58+
import { View } from 'react-native';
59+
import { ServerComponent } from 'react-native-server-component';
60+
61+
const { preload } = preloadServerComponent({});
62+
(async () => {
63+
try {
64+
await preload('http://10.0.2.2:8080/detail-component');
65+
} catch (e) {
66+
console.error('Failed to preload. ', e);
67+
}
68+
})();
69+
70+
export default function App() {
71+
return (
72+
<View style={{ flex: 1 }}>
73+
<ServerComponent
74+
source={{ uri: 'http://10.0.2.2:8080/detail-component' }}
75+
fallbackComponent={<FallbackComponent />}
76+
/>
77+
</View>
78+
);
79+
}
80+
```
81+
82+
## How does it work?
83+
84+
![Alt text](./docs/working.png)
85+
86+
## Props
87+
88+
- `source`
89+
- URI to fetch component source
90+
- `fallbackComponent`
91+
- `errorComponent`
92+
- Component to be used in case of error in ServerComponent
93+
- `loadingComponent`
94+
- `onAction`
95+
- Callback with `action` and `payload`. Current supported actions are `NAVIGATE`, `IO`.
96+
97+
## Handling Actions on Server Component
98+
99+
Server Component is capable of handling all the user interactions. They can emit event to let host application know about actions, host application needs to implement `onAction` callback provided by Server Component.
100+
101+
```tsx
102+
// Host application
103+
104+
const handleAction = useCallback(
105+
(action: string, payload: Record<string, any>) => {
106+
switch (action) {
107+
case 'NAVIGATE':
108+
navigation.navigate(payload.route);
109+
break;
110+
}
111+
},
112+
[navigation]
113+
);
114+
115+
<ServerComponent
116+
source={{ uri: 'http://10.0.2.2:8080' }}
117+
fallbackComponent={<FallbackComponent />}
118+
onAction={handleAction}
119+
/>;
120+
```
121+
122+
Action emitted contains action type and payload.
123+
124+
```tsx
125+
// Example Server Component
126+
127+
const ExampleServerComponent = ({
128+
onAction,
129+
}: {
130+
onAction: (action: any, payload: Record<string, any>) => void;
131+
}) => {
132+
const onPress = useCallback(() => {
133+
if (onAction) {
134+
onAction('NAVIGATE', { route: 'DetailsScreen' });
135+
}
136+
}, [onAction]);
137+
138+
return (
139+
<View>
140+
<Pressable onPress={onPress}>
141+
<View>
142+
<Text> {`Navigation`} </Text>
143+
</View>
144+
</Pressable>
145+
</View>
146+
);
147+
};
148+
```
149+
150+
## Component Caching
151+
152+
Server Components are cached in-memory for URI. Internally axios is used to fetch source from URI. `Cache-Control` header in response is used for cache burst in app session.
153+
154+
## Running example app
155+
156+
TODO:: Add documentation
157+
21158
## Contributing
22159

23160
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

‎docs/working.png

64.1 KB
Loading

‎example/package.json

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@
77
"ios": "react-native run-ios",
88
"start": "react-native start",
99
"build:android": "cd android && ./gradlew assembleDebug --no-daemon --console=plain -PreactNativeArchitectures=arm64-v8a",
10-
"build:ios": "cd ios && xcodebuild -workspace ServerComponentExample.xcworkspace -scheme ServerComponentExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO"
10+
"build:ios": "cd ios && xcodebuild -workspace ServerComponentExample.xcworkspace -scheme ServerComponentExample -configuration Debug -sdk iphonesimulator CC=clang CPLUSPLUS=clang++ LD=clang LDPLUSPLUS=clang++ GCC_OPTIMIZATION_LEVEL=0 GCC_PRECOMPILE_PREFIX_HEADER=YES ASSETCATALOG_COMPILER_OPTIMIZATION=time DEBUG_INFORMATION_FORMAT=dwarf COMPILER_INDEX_STORE_ENABLE=NO",
11+
"start:server": "node server/server.js",
12+
"transpile:mock": "npx babel --presets=@babel/preset-env,@babel/preset-react ./server/Mocks/ExampleServerComponent.tsx -o ./server/Mocks/TranspiledExample.js"
1113
},
1214
"dependencies": {
1315
"@react-navigation/native": "^6.1.17",
@@ -25,7 +27,9 @@
2527
"@react-native/babel-preset": "0.73.21",
2628
"@react-native/metro-config": "0.73.5",
2729
"@react-native/typescript-config": "0.73.1",
28-
"babel-plugin-module-resolver": "^5.0.0"
30+
"babel-plugin-module-resolver": "^5.0.0",
31+
"chalk": "^4.1.0",
32+
"express": "^4.17.1"
2933
},
3034
"engines": {
3135
"node": ">=18"

‎server/Mocks/ExampleServerComponent.tsx renamed to ‎example/server/Mocks/ExampleServerComponent.tsx

File renamed without changes.

‎server/Mocks/TranspiledExample.js renamed to ‎example/server/Mocks/TranspiledExample.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ var _react = _interopRequireWildcard(require('react'));
1010
var _reactNative = require('react-native');
1111
var _this = void 0,
1212
_jsxFileName =
13-
'/Users/kunal.chavhan/workplace/react-native-server-component/server/Mocks/ExampleServerComponent.tsx';
13+
'/Users/kunal.chavhan/workplace/react-native-server-component/example/server/Mocks/ExampleServerComponent.tsx';
1414
function _getRequireWildcardCache(e) {
1515
if ('function' != typeof WeakMap) return null;
1616
var r = new WeakMap(),

‎server/server.js renamed to ‎example/server/server.js

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
const express = require('express');
22
const fs = require('fs');
33
const chalk = require('chalk');
4-
4+
const path = require('path');
55
const app = express();
6-
6+
const mocks = path.resolve(`./server/Mocks`, 'TranspiledExample.js');
77
const PORT = 8080;
88

99
app.get('/', (req, res) => {
@@ -21,17 +21,7 @@ app.listen(PORT, () => {
2121

2222
const serverTranspiledJS = async (req, res) => {
2323
try {
24-
// const data = child_process
25-
// .execSync(
26-
// `npx babel --presets=@babel/preset-env,@babel/preset-react /Users/kunal.chavhan/workplace/RNPlayground/src/rsc/ContestCard/ContestCard.tsx`,
27-
// )
28-
// .toString();
29-
30-
const data = fs.readFileSync(
31-
'/Users/kunal.chavhan/workplace/react-native-server-component/server/Mocks/TranspiledExample.js',
32-
{ encoding: 'utf8', flag: 'r' }
33-
);
34-
24+
const data = fs.readFileSync(mocks, { encoding: 'utf8', flag: 'r' });
3525
return res.send(data);
3626
} catch (e) {
3727
console.log(chalk.red.bold`Got error ${e}`);

‎example/src/screens/HomeScreen.tsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,13 @@ import React, { useCallback } from 'react';
22
import { View, StyleSheet, Text } from 'react-native';
33
import { ServerComponent } from 'react-native-server-component';
44

5+
const FallbackComponent = () => {
6+
return (
7+
<View>
8+
<Text> Fallback Component </Text>
9+
</View>
10+
);
11+
};
512
export default function HomeScreen({ navigation }) {
613
const handleAction = useCallback(
714
(action: string, payload: Record<string, any>) => {
@@ -14,13 +21,6 @@ export default function HomeScreen({ navigation }) {
1421
[navigation]
1522
);
1623

17-
const FallbackComponent = () => {
18-
return (
19-
<View>
20-
<Text> Fallback Component </Text>
21-
</View>
22-
);
23-
};
2424
return (
2525
<View style={styles.container}>
2626
<ServerComponent

0 commit comments

Comments
 (0)