Initial commit of WooNooW Docs

contents/docs/developer/addons/react-integration/index.mdx

@@ -0,0 +1,79 @@
+---
+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>;
+}
+```