@myop/react-native 0.0.4 → 0.0.5

package/README.md

@@ -10,7 +10,9 @@ Embed [Myop](https://myop.dev) components in your React Native applications.
 - Load Myop components by ID or custom configuration
 - Two-way communication between React Native and embedded components
 - Customizable loading and fallback states
-- Support for both V1 and V2 component formats
+- Component preloading for instant rendering
+- Full component proxy API for DOM manipulation
+- Configurable scroll, zoom, and text selection
 - TypeScript support
 
 ## Installation
@@ -90,23 +92,36 @@ Listen for events from your component's `myop_cta_handler`:
 />
 ```
 
-### Executing Commands
+### Component Proxy API
 
-Access the component instance for direct command execution:
+Access the component instance for direct manipulation:
 
 ```tsx
-const [component, setComponent] = useState(null);
+import { IMyopComponentProxy } from '@myop/react-native';
+
+const [component, setComponent] = useState<IMyopComponentProxy | null>(null);
 
 <MyopComponent
   componentId="abc123"
-  onLoad={(instance) => setComponent(() => instance)}
+  onLoad={(proxy) => setComponent(proxy)}
   style={{ flex: 1 }}
 />
 
-// Execute commands on the component
-const handleReset = () => {
-  component?.('.reset()');
-};
+// Send data to component
+component?.props.myop_init_interface({ theme: 'dark' });
+
+// DOM manipulation
+component?.element.style.set('opacity', '0.5');
+component?.element.set('style.background', 'red');
+
+// Get values (async)
+const opacity = await component?.element.style.get('opacity');
+const scrollTop = await component?.element.get('scrollTop');
+
+// Lifecycle methods
+component?.hide();
+component?.show();
+component?.dispose();
 ```
 
 ### Custom Loading State
@@ -182,6 +197,62 @@ Target different deployment environments:
 />
 ```
 
+### WebView Behavior
+
+Control scroll, zoom, and text selection:
+
+```tsx
+<MyopComponent
+  componentId="abc123"
+  scrollEnabled={true}      // Enable scrolling (default: false)
+  zoomEnabled={true}        // Enable pinch-to-zoom (default: false)
+  selectionEnabled={true}   // Enable text selection (default: false)
+  style={{ flex: 1 }}
+/>
+```
+
+### Preloading Components
+
+Preload components for instant rendering when they're displayed:
+
+```tsx
+import { preloadComponents, isPreloaded } from '@myop/react-native';
+
+// Preload on app startup or before navigating
+await preloadComponents(['component-1', 'component-2']);
+
+// Check if component is preloaded
+if (isPreloaded('component-1')) {
+  // Component will render instantly without loader
+}
+```
+
+### Configuration APIs
+
+Configure the CloudRepository for custom endpoints or local development:
+
+```tsx
+import {
+  enableLocalDev,
+  setCloudRepositoryUrl,
+  setCloudRepository,
+  setEnvironment,
+  getCloudRepository
+} from '@myop/react-native';
+
+// Enable local development mode (connects to localhost:9292)
+enableLocalDev();
+
+// Use a custom endpoint
+setCloudRepositoryUrl('https://custom.myop.dev');
+
+// Set default environment for all components
+setEnvironment('staging');
+
+// Get the current CloudRepository instance
+const repo = getCloudRepository();
+```
+
 ## API Reference
 
 ### MyopComponent Props
@@ -192,13 +263,16 @@ Target different deployment environments:
 | `componentConfig` | `IComponentInstanceConfig` | - | Full component configuration object |
 | `data` | `any` | - | Data passed to `myop_init_interface` |
 | `on` | `(action: string, payload?: any) => void` | - | Handler for `myop_cta_handler` events |
-| `onLoad` | `(instance: (cmd: string) => void) => void` | - | Callback when component loads |
+| `onLoad` | `(proxy: IMyopComponentProxy) => void` | - | Callback with component proxy when loaded |
 | `onError` | `(error: string) => void` | - | Callback when component fails to load |
 | `loader` | `ReactNode` | `<MyopLoader />` | Custom loading component |
 | `fallback` | `ReactNode` | `<MyopFallback />` | Custom fallback component |
 | `fadeDuration` | `number` | `200` | Loader fade-out duration in ms |
 | `environment` | `string` | `"production"` | Target environment |
-| `v1Mode` | `boolean` | `false` | Use V1 component format |
+| `preview` | `boolean` | `false` | Load preview version of component |
+| `scrollEnabled` | `boolean` | `false` | Enable WebView scrolling |
+| `zoomEnabled` | `boolean` | `false` | Enable pinch-to-zoom |
+| `selectionEnabled` | `boolean` | `false` | Enable text selection |
 | `style` | `StyleProp<ViewStyle>` | - | Container styles |
 
 Either `componentId` or `componentConfig` must be provided.
@@ -211,9 +285,43 @@ Either `componentId` or `componentConfig` must be provided.
 | `MyopLoader` | Default animated loading state |
 | `MyopFallback` | Default error/fallback state |
 
+### Exported Functions
+
+| Function | Description |
+|----------|-------------|
+| `preloadComponents(ids, env?, preview?)` | Preload components for instant rendering |
+| `isPreloaded(componentId, env?, preview?)` | Check if a component is cached |
+| `enableLocalDev()` | Enable local development mode (localhost:9292) |
+| `setCloudRepositoryUrl(url)` | Set a custom CloudRepository URL |
+| `setCloudRepository(repository)` | Set a custom CloudRepository instance |
+| `setEnvironment(env)` | Set the default environment |
+| `getCloudRepository()` | Get the current CloudRepository instance |
+
 ### Types
 
 ```typescript
+interface IMyopComponentProxy {
+  id: string;
+  props: {
+    myop_init_interface: (data: any) => void;
+    myop_cta_handler: ((action: string, payload?: any) => void) | null;
+  };
+  element: IElementProxy;
+  dispose: () => void;
+  hide: () => void;
+  show: () => void;
+  inspect: () => void;
+}
+
+interface IElementProxy {
+  set: (path: string, value: any) => void;
+  get: (path: string) => Promise<any>;
+  style: {
+    set: (property: string, value: string) => void;
+    get: (property: string) => Promise<string>;
+  };
+}
+
 interface IComponentInstanceConfig {
   id: string;
   componentId: string;

package/dist/MyopComponent.d.ts

@@ -1,20 +1,59 @@
 import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import type { IComponentInstanceConfig } from './types';
+/**
+ * Element proxy for accessing/modifying the component's DOM element
+ */
+export interface IElementProxy {
+    /** Set a property on the element (e.g., element.style.background = 'red') */
+    set: (path: string, value: any) => void;
+    /** Get a property from the element (e.g., element.style.background) - returns Promise */
+    get: (path: string) => Promise<any>;
+    /** Style proxy for convenient access */
+    style: {
+        set: (property: string, value: string) => void;
+        get: (property: string) => Promise<string>;
+    };
+}
+/**
+ * Proxy interface for window.myopComponent in WebView
+ * Mirrors the IMyopComponent interface from @myop/sdk
+ */
+export interface IMyopComponentProxy {
+    /** Component ID */
+    id: string;
+    /** Props object with myop_init_interface and myop_cta_handler */
+    props: {
+        myop_init_interface: (data: any) => void;
+        myop_cta_handler: ((action: string, payload?: any) => void) | null;
+    };
+    /** Element proxy for DOM manipulation */
+    element: IElementProxy;
+    /** Dispose the component */
+    dispose: () => void;
+    /** Hide the component */
+    hide: () => void;
+    /** Show the component */
+    show: () => void;
+    /** Inspect the component (debug) */
+    inspect: () => void;
+}
 interface IPropTypes {
     style?: StyleProp<ViewStyle> | undefined;
     componentId?: string;
     componentConfig?: IComponentInstanceConfig;
-    onLoad?: (myopComponent: (command: string) => void) => void;
+    onLoad?: (myopComponent: IMyopComponentProxy) => void;
     onError?: (error: string) => void;
     on?: (action: string, payload?: any) => void;
     data?: any;
     loader?: ReactNode;
     fallback?: ReactNode;
     fadeDuration?: number;
-    v1Mode?: boolean;
     environment?: string;
     preview?: boolean;
+    scrollEnabled?: boolean;
+    zoomEnabled?: boolean;
+    selectionEnabled?: boolean;
 }
 export declare const MyopComponent: (props: IPropTypes) => React.JSX.Element;
 export {};

package/dist/MyopComponent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MyopComponent.d.ts","sourceRoot":"","sources":["../src/MyopComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmB,SAAS,EAAuD,MAAM,OAAO,CAAC;AAG/G,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,SAAS,CAAC;AAMtD,UAAU,UAAU;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,KAAK,IAAI,CAAC;IAC5D,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,sBAkO9C,CAAA"}
+{"version":3,"file":"MyopComponent.d.ts","sourceRoot":"","sources":["../src/MyopComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAmB,SAAS,EAAuD,MAAM,OAAO,CAAC;AAG/G,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,SAAS,CAAC;AAuEtD;;GAEG;AACH,MAAM,WAAW,aAAa;IAC1B,6EAA6E;IAC7E,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACxC,yFAAyF;IACzF,GAAG,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC;IACpC,wCAAwC;IACxC,KAAK,EAAE;QACH,GAAG,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAC/C,GAAG,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;KAC9C,CAAC;CACL;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAChC,mBAAmB;IACnB,EAAE,EAAE,MAAM,CAAC;IAEX,iEAAiE;IACjE,KAAK,EAAE;QACH,mBAAmB,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;QACzC,gBAAgB,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC,GAAG,IAAI,CAAC;KACtE,CAAC;IAEF,yCAAyC;IACzC,OAAO,EAAE,aAAa,CAAC;IAEvB,4BAA4B;IAC5B,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,yBAAyB;IACzB,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,yBAAyB;IACzB,IAAI,EAAE,MAAM,IAAI,CAAC;IAEjB,oCAAoC;IACpC,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,UAAU,UAAU;IAChB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,GAAG,SAAS,CAAC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,wBAAwB,CAAC;IAC3C,MAAM,CAAC,EAAE,CAAC,aAAa,EAAE,mBAAmB,KAAK,IAAI,CAAC;IACtD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,EAAE,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7C,IAAI,CAAC,EAAE,GAAG,CAAC;IACX,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,sBAkU9C,CAAA"}

package/dist/MyopComponent.js

@@ -38,13 +38,73 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_webview_1 = require("react-native-webview");
 const componentHost_html_js_1 = require("./componentHost.html.js");
+const getHtml = (zoomEnabled, selectionEnabled) => {
+    let html = componentHost_html_js_1.HTML;
+    // Disable zoom
+    if (!zoomEnabled) {
+        html = html.replace('width=device-width, initial-scale=1.0', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');
+    }
+    // Disable text selection for native feel
+    if (!selectionEnabled) {
+        const noSelectCSS = `
+          *, *::before, *::after {
+            -webkit-user-select: none !important;
+            -webkit-touch-callout: none !important;
+            -webkit-tap-highlight-color: transparent !important;
+            user-select: none !important;
+          }
+          input, textarea, [contenteditable="true"] {
+            -webkit-user-select: auto !important;
+            user-select: auto !important;
+          }
+        `;
+        html = html.replace('</style>', noSelectCSS + '</style>');
+        // Also inject into iframes via script
+        html = html.replace('</body>', `<script>
+              (function() {
+                const css = \`${noSelectCSS}\`;
+                function injectStyle(doc) {
+                  try {
+                    const style = doc.createElement('style');
+                    style.textContent = css;
+                    doc.head.appendChild(style);
+                  } catch(e) {}
+                }
+                // Inject into any iframe that loads
+                const observer = new MutationObserver(function(mutations) {
+                  document.querySelectorAll('iframe').forEach(function(iframe) {
+                    try {
+                      if (iframe.contentDocument && !iframe.contentDocument.__noSelectInjected) {
+                        iframe.contentDocument.__noSelectInjected = true;
+                        injectStyle(iframe.contentDocument);
+                        // Also observe iframe for nested iframes
+                        iframe.contentWindow.addEventListener('load', function() {
+                          injectStyle(iframe.contentDocument);
+                        });
+                      }
+                    } catch(e) {}
+                  });
+                });
+                observer.observe(document.body, { childList: true, subtree: true });
+              })();
+            </script></body>`);
+    }
+    return html;
+};
 const MyopLoader_1 = require("./MyopLoader");
 const MyopFallback_1 = require("./MyopFallback");
+const index_1 = require("./index");
 const MyopComponent = (props) => {
-    var _a, _b;
+    var _a, _b, _c, _d, _e;
     const webviewRef = (0, react_1.useRef)(null);
     const loaderRef = (0, react_1.useRef)(null);
-    const [showLoader, setShowLoader] = (0, react_1.useState)(true);
+    const isCancelled = (0, react_1.useRef)(false);
+    const pendingGetRequests = (0, react_1.useRef)(new Map());
+    // Don't show loader if component is already preloaded/cached
+    const componentIsPreloaded = props.componentId
+        ? (0, index_1.isPreloaded)(props.componentId, props.environment, props.preview)
+        : false;
+    const [showLoader, setShowLoader] = (0, react_1.useState)(!componentIsPreloaded);
     const [showFallback, setShowFallback] = (0, react_1.useState)(false);
     const [isComponentLoaded, setIsComponentLoaded] = (0, react_1.useState)(false);
     const fadeDuration = (_a = props.fadeDuration) !== null && _a !== void 0 ? _a : 200;
@@ -54,8 +114,8 @@ const MyopComponent = (props) => {
             return;
         const encoded = encodeURIComponent(JSON.stringify(data));
         webviewRef.current.injectJavaScript(`
-            if (window.myopComponent && window.myopComponent.element && window.myopComponent.element.contentWindow && window.myopComponent.element.contentWindow.myop_init_interface) {
-                window.myopComponent.element.contentWindow.myop_init_interface(JSON.parse(decodeURIComponent('${encoded}')));
+            if (window.myopComponent) {
+                window.myopComponent.props.myop_init_interface(JSON.parse(decodeURIComponent('${encoded}')));
             }
             true;
         `);
@@ -78,12 +138,127 @@ const MyopComponent = (props) => {
             setShowLoader(false);
         }
     }, [fadeDuration]);
-    const myopComponent = (command) => {
-        var _a;
-        (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`
-                window.myopComponent${command}
-             `);
-    };
+    // Create proxy object for window.myopComponent
+    const createMyopComponentProxy = (0, react_1.useCallback)((componentId) => {
+        const injectJS = (js) => {
+            var _a;
+            (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`${js}; true;`);
+        };
+        // Generate unique request ID for async get operations
+        const generateRequestId = () => `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        // Element proxy for DOM manipulation
+        const elementProxy = {
+            set: (path, value) => {
+                const encoded = encodeURIComponent(JSON.stringify(value));
+                injectJS(`
+                    if (window.myopComponent && window.myopComponent.element) {
+                        const parts = '${path}'.split('.');
+                        let target = window.myopComponent.element;
+                        for (let i = 0; i < parts.length - 1; i++) {
+                            target = target[parts[i]];
+                        }
+                        target[parts[parts.length - 1]] = JSON.parse(decodeURIComponent('${encoded}'));
+                    }
+                `);
+            },
+            get: (path) => {
+                return new Promise((resolve) => {
+                    const requestId = generateRequestId();
+                    pendingGetRequests.current.set(requestId, resolve);
+                    injectJS(`
+                        if (window.myopComponent && window.myopComponent.element) {
+                            const parts = '${path}'.split('.');
+                            let value = window.myopComponent.element;
+                            for (const part of parts) {
+                                value = value[part];
+                            }
+                            window.ReactNativeWebView.postMessage('GET_RESULT:' + JSON.stringify({
+                                requestId: '${requestId}',
+                                value: value
+                            }));
+                        } else {
+                            window.ReactNativeWebView.postMessage('GET_RESULT:' + JSON.stringify({
+                                requestId: '${requestId}',
+                                value: undefined
+                            }));
+                        }
+                    `);
+                });
+            },
+            style: {
+                set: (property, value) => {
+                    injectJS(`
+                        if (window.myopComponent && window.myopComponent.element) {
+                            window.myopComponent.element.style['${property}'] = '${value}';
+                        }
+                    `);
+                },
+                get: (property) => {
+                    return new Promise((resolve) => {
+                        const requestId = generateRequestId();
+                        pendingGetRequests.current.set(requestId, resolve);
+                        injectJS(`
+                            if (window.myopComponent && window.myopComponent.element) {
+                                const value = window.myopComponent.element.style['${property}'];
+                                window.ReactNativeWebView.postMessage('GET_RESULT:' + JSON.stringify({
+                                    requestId: '${requestId}',
+                                    value: value
+                                }));
+                            } else {
+                                window.ReactNativeWebView.postMessage('GET_RESULT:' + JSON.stringify({
+                                    requestId: '${requestId}',
+                                    value: undefined
+                                }));
+                            }
+                        `);
+                    });
+                }
+            }
+        };
+        return {
+            id: componentId,
+            props: {
+                myop_init_interface: (data) => {
+                    const encoded = encodeURIComponent(JSON.stringify(data));
+                    injectJS(`
+                        if (window.myopComponent && window.myopComponent.props.myop_init_interface) {
+                            window.myopComponent.props.myop_init_interface(JSON.parse(decodeURIComponent('${encoded}')));
+                        }
+                    `);
+                },
+                myop_cta_handler: null // CTA is handled via message passing (props.on)
+            },
+            element: elementProxy,
+            dispose: () => {
+                injectJS(`
+                    if (window.myopComponent && window.myopComponent.dispose) {
+                        window.myopComponent.dispose();
+                    }
+                `);
+            },
+            hide: () => {
+                injectJS(`
+                    if (window.myopComponent && window.myopComponent.hide) {
+                        window.myopComponent.hide();
+                    }
+                `);
+            },
+            show: () => {
+                injectJS(`
+                    if (window.myopComponent && window.myopComponent.show) {
+                        window.myopComponent.show();
+                    }
+                `);
+            },
+            inspect: () => {
+                injectJS(`
+                    if (window.myopComponent && window.myopComponent.inspect) {
+                        window.myopComponent.inspect();
+                    }
+                `);
+            }
+        };
+    }, []);
     const handleError = (0, react_1.useCallback)((errorMsg) => {
         console.error('[MyopComponent] Error:', errorMsg);
         hideLoader();
@@ -93,101 +268,42 @@ const MyopComponent = (props) => {
         }
     }, [hideLoader, props.onError]);
     const loadComponent = (0, react_1.useCallback)(async () => {
-        var _a, _b, _c;
+        var _a;
+        isCancelled.current = false;
         try {
             let componentConfig = null;
             if (props.componentConfig) {
                 componentConfig = props.componentConfig;
             }
             else if (props.componentId) {
-                if (props.v1Mode) {
-                    // V1 mode: use flow endpoint
-                    const res = await fetch(`https://cloud.myop.dev/flow?id=${props.componentId}&auto=true`);
-                    const json = await res.json();
-                    if (!((_b = (_a = json.item) === null || _a === void 0 ? void 0 : _a.components) === null || _b === void 0 ? void 0 : _b[0])) {
-                        handleError(`Component "${props.componentId}" not found`);
-                        return;
-                    }
-                    componentConfig = json.item.components[0];
-                }
-                else {
-                    // V2 mode (default): use consume endpoint
-                    const env = props.environment || 'production';
-                    let consumeUrl = `https://cloud.myop.dev/consume?id=${props.componentId}&env=${env}`;
-                    if (props.preview) {
-                        consumeUrl += '&preview=true';
-                    }
-                    const res = await fetch(consumeUrl);
-                    const config = await res.json();
-                    const variant = config.item;
-                    if (!variant) {
-                        handleError(`Component "${props.componentId}" not found`);
-                        return;
-                    }
-                    if (!variant.consume_variant || !variant.consume_variant.length) {
-                        handleError(`Component "${props.componentId}" has no implementation for environment "${env}"`);
-                        return;
-                    }
-                    // Build V2 component config
-                    componentConfig = {
-                        instance: {
-                            id: 'auto',
-                            componentId: variant.componentId,
-                            componentName: variant.name,
-                            skinSelector: {
-                                type: 'Dedicated',
-                                skin: { id: 'skin_auto_v2_converted' }
-                            }
-                        },
-                        type: {
-                            id: variant.id,
-                            name: variant.name,
-                            description: variant.description,
-                            props: [
-                                {
-                                    id: 'in_auto_v2_converted',
-                                    name: 'myop_init_interface',
-                                    type: 'any',
-                                    behavior: { type: 'code' }
-                                },
-                                {
-                                    id: 'out_auto_v2_converted',
-                                    name: 'myop_cta_handler',
-                                    type: 'any',
-                                    behavior: { type: 'code' }
-                                }
-                            ],
-                            refs: [],
-                            skins: [{
-                                    id: 'skin_auto_v2_converted',
-                                    name: 'auto_v2_converted',
-                                    description: '',
-                                    loader: variant.consume_variant[0].loader
-                                }],
-                            defaultSkin: 0
-                        },
-                        name: variant.name
-                    };
+                const env = props.environment || (0, index_1.getCloudRepository)().getDefaultEnvironment();
+                componentConfig = await (0, index_1.getCloudRepository)().fetchComponentV2(props.componentId, env, props.preview);
+                if (!componentConfig) {
+                    handleError(`Component "${props.componentId}" not found`);
+                    return;
                 }
             }
             if (!componentConfig) {
                 handleError('No component configuration provided');
                 return;
             }
+            if (isCancelled.current)
+                return;
             const encoded = encodeURIComponent(JSON.stringify(componentConfig));
-            (_c = webviewRef.current) === null || _c === void 0 ? void 0 : _c.injectJavaScript(`
+            (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`
                 loadMyopComponent(\`${encoded}\`);
-                true;
             `);
         }
         catch (err) {
-            handleError((err === null || err === void 0 ? void 0 : err.message) || 'Unknown error');
+            if (!isCancelled.current) {
+                handleError((err === null || err === void 0 ? void 0 : err.message) || 'Unknown error');
+            }
         }
-    }, [props.componentConfig, props.componentId, props.v1Mode, props.environment, props.preview, handleError]);
+    }, [props.componentConfig, props.componentId, props.environment, props.preview, handleError]);
     const onMessage = (0, react_1.useCallback)((event) => {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         const message = event.nativeEvent.data;
-        console.log('[MyopComponent] Message from WebView:', message);
+        //console.log('[MyopComponent] Message from WebView:', message);
         if (message === 'WEBVIEW_READY') {
             // WebView is ready, now inject the component loading code
             loadComponent();
@@ -199,14 +315,13 @@ const MyopComponent = (props) => {
             if (props.data !== undefined) {
                 const encoded = encodeURIComponent(JSON.stringify(props.data));
                 (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`
-                    if (window.myopComponent && window.myopComponent.element && window.myopComponent.element.contentWindow && window.myopComponent.element.contentWindow.myop_init_interface) {
-                        window.myopComponent.element.contentWindow.myop_init_interface(JSON.parse(decodeURIComponent('${encoded}')));
+                    if (window.myopComponent) {
+                        window.myopComponent.props.myop_init_interface(JSON.parse(decodeURIComponent('${encoded}')));
                     }
-                    true;
                 `);
             }
             if (props.onLoad) {
-                props.onLoad(myopComponent);
+                props.onLoad(createMyopComponentProxy(props.componentId || 'unknown'));
             }
         }
         else if (((_b = message === null || message === void 0 ? void 0 : message.startsWith) === null || _b === void 0 ? void 0 : _b.call(message, 'COMPONENT_ERROR:')) || ((_c = message === null || message === void 0 ? void 0 : message.startsWith) === null || _c === void 0 ? void 0 : _c.call(message, 'SDK_INIT_ERROR:'))) {
@@ -230,15 +345,35 @@ const MyopComponent = (props) => {
                 console.error('[MyopComponent] Failed to parse CTA message:', e);
             }
         }
-    }, [loadComponent, props.onLoad, props.onError, props.on, hideLoader]);
+        else if ((_e = message === null || message === void 0 ? void 0 : message.startsWith) === null || _e === void 0 ? void 0 : _e.call(message, 'GET_RESULT:')) {
+            // Handle element.get() responses
+            try {
+                const result = JSON.parse(message.substring(11));
+                const resolver = pendingGetRequests.current.get(result.requestId);
+                if (resolver) {
+                    resolver(result.value);
+                    pendingGetRequests.current.delete(result.requestId);
+                }
+            }
+            catch (e) {
+                console.error('[MyopComponent] Failed to parse GET_RESULT message:', e);
+            }
+        }
+    }, [loadComponent, props.onLoad, props.onError, props.on, hideLoader, createMyopComponentProxy]);
+    // Cleanup on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            isCancelled.current = true;
+        };
+    }, []);
     return (react_1.default.createElement(react_native_1.View, { style: props.style ? props.style : styles.root },
-        react_1.default.createElement(react_native_webview_1.WebView, { ref: webviewRef, originWhitelist: ['*'], source: { html: componentHost_html_js_1.HTML }, onMessage: onMessage, style: styles.webview, javaScriptEnabled: true, domStorageEnabled: true, mixedContentMode: "always", allowFileAccess: true, allowUniversalAccessFromFileURLs: true }),
+        react_1.default.createElement(react_native_webview_1.WebView, { ref: webviewRef, originWhitelist: ['*'], source: { html: getHtml((_b = props.zoomEnabled) !== null && _b !== void 0 ? _b : false, (_c = props.selectionEnabled) !== null && _c !== void 0 ? _c : false) }, onMessage: onMessage, style: styles.webview, javaScriptEnabled: true, domStorageEnabled: true, mixedContentMode: "always", allowFileAccess: true, allowUniversalAccessFromFileURLs: true, overScrollMode: "never", scrollEnabled: (_d = props.scrollEnabled) !== null && _d !== void 0 ? _d : false }),
         showLoader && (react_1.default.createElement(react_native_1.View, { style: styles.loaderContainer }, props.loader !== undefined
             ? ((0, react_1.isValidElement)(props.loader)
                 ? (0, react_1.cloneElement)(props.loader, { ref: loaderRef })
                 : props.loader)
             : react_1.default.createElement(MyopLoader_1.MyopLoader, { ref: loaderRef }))),
-        showFallback && (react_1.default.createElement(react_native_1.View, { style: styles.loaderContainer }, (_b = props.fallback) !== null && _b !== void 0 ? _b : react_1.default.createElement(MyopFallback_1.MyopFallback, null)))));
+        showFallback && (react_1.default.createElement(react_native_1.View, { style: styles.loaderContainer }, (_e = props.fallback) !== null && _e !== void 0 ? _e : react_1.default.createElement(MyopFallback_1.MyopFallback, null)))));
 };
 exports.MyopComponent = MyopComponent;
 const styles = react_native_1.StyleSheet.create({