https://github.com/hermanbanken/sduix
Experiments with Server Driven UI (SDUI)
https://github.com/hermanbanken/sduix
Last synced: 8 months ago
JSON representation
Experiments with Server Driven UI (SDUI)
- Host: GitHub
- URL: https://github.com/hermanbanken/sduix
- Owner: hermanbanken
- Created: 2022-02-11T14:59:23.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-02-11T18:21:57.000Z (over 3 years ago)
- Last Synced: 2024-12-27T18:42:02.589Z (10 months ago)
- Language: TypeScript
- Size: 517 KB
- Stars: 1
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SDUIx
Render React Native UI's in the server using JSX/TSX syntax and send those to the client to be hydrated.
This project is a demonstrator of how easy it is to convert JSX to JSON and to rehydrate it locally. It is a work in progress, and the following things still need to be investigated:
- [ ] allow dynamic logic based on client state (maybe through `` blocks?)
- [ ] donut holes: create hole that renders SDUI from different urls
- [ ] actions: expose & hydrate dynamic actions from SDUI
- [ ] versioning: automatically detect incompatibilities in the registry/component-props
## Demo server-side output
```javascript
export const Screen = (props: ScreenProps) => (
<>
Submit
>
);
export const App = ;
const result = renderToJson(App);
console.log(inspect(result, false, null, true /* enable colors */));
```
results in:
```javascript
// npm run build && node dist/server.js
{
type: 'Screen',
props: { header: { title: 'foo' } },
items: [
{
type: '_',
props: {},
items: [
{
type: 'View',
props: { flex: true, 'margin-3': true },
items: [ { type: 'InputField', props: { value: 'username' } } ]
},
{
type: 'View',
props: { flex: true, 'margin-3': true },
items: [
{
type: 'InputField',
props: {
value: 'password',
textContentType: 'password',
placeholder: 'Password',
secureTextEntry: true
}
}
]
},
{
type: 'Button',
props: { 'margin-10': true },
items: [ { type: 'Text', props: {}, items: [ 'Submit' ] } ]
}
]
}
]
}
```
### References
- https://github.com/gorangajic/react-render-to-json
- https://stackoverflow.com/questions/60358261/how-to-compile-jsx-server-side
- https://www.storyblok.com/tp/react-dynamic-component-from-json
- https://stackoverflow.com/questions/5905492/dynamic-function-name-in-javascript