https://github.com/justinline/marionette-react-view
Render React inside of Marionette views 🎩🐇
https://github.com/justinline/marionette-react-view
marionette migration react tooling
Last synced: 7 months ago
JSON representation
Render React inside of Marionette views 🎩🐇
- Host: GitHub
- URL: https://github.com/justinline/marionette-react-view
- Owner: justinline
- Created: 2023-12-12T13:13:50.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-13T12:00:51.000Z (almost 2 years ago)
- Last Synced: 2025-01-15T10:57:18.615Z (9 months ago)
- Topics: marionette, migration, react, tooling
- Language: TypeScript
- Homepage:
- Size: 44.9 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Marionette React View tooling
## Work in progress
TODO: Publish on `npm`
TODO: Test more provider use-cases
## What is this?
Found yourself working on an old Marionettejs app? Want to migrate to react so you can have a better DevEx? Can't just rewrite the whole thing?
This might be for you!
This small repo provides some utilities for glue-code that can render react components inside of marionette applications.
This allows you to re-use stuff from your existing React design systems with ease.
Note: It is slightly opinionated in that it uses `zod` for schema validation to get type-safe props.
## Usage
### ReactView & wrapComponent
`ReactView` is an extended Marionette `View` class with some logic for mapping options to props and such.
The API to create a `ReactView` is via the `buildWrapComponent` function.
Firstly you'll want to create and export your own function `wrapComponent` utility where you can pass in any necessary providers.
Example:
```tsx
// utils/wrapComponent.ts
import { buildWrapComponent } from 'marionette-react-view'
type CustomOptions = {
store: typeof myReduxStore
};
export const wrapComponent = buildWrapComponent(
({options, children}) => (
{children}
)
)
```
then you can use this in your existing marionette views, as follows:
```js
import { wrapComponent } from '~/utils/wrapComponent';
import template from 'lodash/template';
import z from 'zod'
const MyButtonPropsSchema = z.object({text: z.string()});
const MyButtonView = wrapComponent(
(props: z.infer) => {props.text},
{ schema: MyButtonPropsSchema } // This is optional runtime type validation
);
export default Mn.View.extend({
template: template('
'),
regions: {
reactRegion: '.example-react-region',
},
onRender() {
this.showChildView(
'reactRegion',
new MyButtonView(
{ props: { text: 'Click me!'}, store: myReduxStore }
)
)
}
})
```
### extendMarionetteViews & showReactView
This library also exports a method that can be attached to `Mn.View` called `showReactView`.
This replaces `showChildView` with a similar functionality, but the key difference is that it replaces
the element of the region the `ReactView` get's rendered into. As a visual example:
```html
react content
```
becomes
```html
react content
```
You can see the middle `
` in the example got replaced by the `` which is the react component
## Demo
Run `npm run dev` to check out the demo page
## Tests
Run `npm run test` to run the integration tests