80 lines
1.5 KiB
Plaintext
80 lines
1.5 KiB
Plaintext
---
|
|
title: React Integration
|
|
description: Using React within WooNooW Addons
|
|
date: 2024-01-31
|
|
---
|
|
|
|
# Addon React Integration
|
|
|
|
## The Challenge
|
|
|
|
External addons cannot bundle React because WooNooW already ships with a React runtime. Bundling it again would cause conflicts and bloat.
|
|
|
|
## Solution: Exposed Runtime
|
|
|
|
WooNooW exposes its React instance and Component library on the `window` object.
|
|
|
|
### Core Setup (How it works internally)
|
|
|
|
```typescript
|
|
// WooNooW Core
|
|
window.WooNooW = {
|
|
React: React,
|
|
ReactDOM: ReactDOM,
|
|
components: {
|
|
Button: Button,
|
|
Input: Input,
|
|
Select: Select,
|
|
},
|
|
hooks: { addFilter, addAction }
|
|
};
|
|
```
|
|
|
|
### Addon implementation
|
|
|
|
#### Level 1: Vanilla JS (No Build)
|
|
|
|
Good for simple injections.
|
|
|
|
```javascript
|
|
(function() {
|
|
window.addEventListener('woonoow:loaded', function() {
|
|
window.WooNooW.addFilter('woonoow_order_form_after_shipping', function(container) {
|
|
// Manual DOM manipulation
|
|
return container;
|
|
});
|
|
});
|
|
})();
|
|
```
|
|
|
|
#### Level 2: React with Build (Recommended)
|
|
|
|
Use `vite` or `webpack` and configure React as an **external**.
|
|
|
|
**vite.config.js**
|
|
```javascript
|
|
export default {
|
|
build: {
|
|
rollupOptions: {
|
|
external: ['react', 'react-dom'],
|
|
output: {
|
|
globals: {
|
|
react: 'window.WooNooW.React',
|
|
'react-dom': 'window.WooNooW.ReactDOM'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
```
|
|
|
|
**Index.tsx**
|
|
```typescript
|
|
const { React, hooks, components } = window.WooNooW;
|
|
const { Button } = components;
|
|
|
|
function MyAddonComponent() {
|
|
return <Button>Click Me</Button>;
|
|
}
|
|
```
|