@myop/react-native 0.0.4 → 0.0.6

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,53 @@ 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();
+```
+
+### Loading & Error States
+
+By default, no loader is shown while the component loads. The Myop-branded fallback is displayed automatically on error.
+
+### Using the Default Myop Loader
+
+```tsx
+import { MyopComponent, MyopLoader } from '@myop/react-native';
+
+<MyopComponent
+  componentId="abc123"
+  loader={<MyopLoader />}  // Opt-in to default Myop loader
+  fadeDuration={300}
+  style={{ flex: 1 }}
+/>
 ```
 
 ### Custom Loading State
@@ -128,13 +160,13 @@ import { ActivityIndicator, View } from 'react-native';
 />
 ```
 
-Set `loader={null}` to disable the loading state entirely.
-
-### Custom Fallback State
+### Custom Error Fallback
 
 Display a custom view when the component fails to load:
 
 ```tsx
+import { MyopComponent, MyopFallback } from '@myop/react-native';
+
 <MyopComponent
   componentId="abc123"
   fallback={
@@ -145,6 +177,13 @@ Display a custom view when the component fails to load:
   onError={(error) => console.error('Load failed:', error)}
   style={{ flex: 1 }}
 />
+
+// Or use the default Myop fallback explicitly
+<MyopComponent
+  componentId="abc123"
+  fallback={<MyopFallback />}
+  style={{ flex: 1 }}
+/>
 ```
 
 ### Using Component Configuration
@@ -182,6 +221,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 +287,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 |
+| `loader` | `ReactNode` | `null` | Loading component (default: no loader). Use `<MyopLoader />` for default Myop loader |
+| `fallback` | `ReactNode` | `<MyopFallback />` | Error fallback component (default: Myop-branded fallback) |
 | `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 +309,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,sBAgU9C,CAAA"}