https://github.com/darianstlex/vike-react-template
Vike + React + Effector
https://github.com/darianstlex/vike-react-template
effector react vike
Last synced: about 1 year ago
JSON representation
Vike + React + Effector
- Host: GitHub
- URL: https://github.com/darianstlex/vike-react-template
- Owner: darianstlex
- Created: 2024-06-11T22:04:32.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-05T23:43:38.000Z (over 1 year ago)
- Last Synced: 2025-01-08T09:15:45.763Z (about 1 year ago)
- Topics: effector, react, vike
- Language: TypeScript
- Homepage:
- Size: 1.67 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Vike + React + Effector + SSR
This template is based on Vike + React + Effector.
`vike-react` is not used to have better control over rendering mechanism.
### Hooks/Events
All standard hooks can be used, plus some extra to control effector values
Data flow:
`+data.ts`: vike hook for initial data preparation if needed\
`+onBeforeInit.ts`: hook, fires before page init event on server side, have access to the effector scope\
`+pageInitiated.ts`: effector event, fires on page init on server side.\
`+onAfterInit.ts`: hook, fires after page init event on server side, have access to the effector scope\
`appStarted`: effector event, fires on app start on client side. On UI changes will cause diff in server/client render\
`+onBeforeStart.ts`: hook, fires before page start event on client side, have access to the effector scope. On UI changes will cause diff in server/client render\
`+pageStarted.ts`: effector event, fires on page start on client side. Runs after the first render.
Page Components:
`+Layout.tsx`: custom layout component to override the global one\
`+Wrapper.tsx`: additional page wrapper
Development:
```bash
npm i / npm ci
npm run dev
```
## Tests
To run unit tests
```bash
npm run unit
npm run unit:open
npm run unit:coverage
```
To run functional tests
```bash
npm run func
npm run func:open
npm run func:coverage
npm run test:coverage
```
To run all tests wth coverage
```bash
npm run test:coverage
```
## Learn More
To learn more about framework, take a look at the following resources:
- [Vike Documentation](https://vike.dev) - learn about Vike features and API.