@myop/react-native 0.0.1 → 0.0.3

package/README.md

@@ -1,122 +1,217 @@
-# @myop/react-native-host
+# @myop/react-native
 
-A React Native library for embedding Myop components via WebView.
+[![npm version](https://img.shields.io/npm/v/@myop/react-native.svg)](https://www.npmjs.com/package/@myop/react-native)
+[![license](https://img.shields.io/npm/l/@myop/react-native.svg)](https://github.com/myop-dev/react-native/blob/main/LICENSE)
+
+Embed [Myop](https://myop.dev) components in your React Native applications.
+
+## Features
+
+- 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
+- TypeScript support
 
 ## Installation
 
 ```bash
-npm install @myop/react-native-host
+npm install @myop/react-native
 ```
 
-### Peer Dependencies
-
-Make sure you have the required peer dependencies installed:
+Install the required peer dependency:
 
 ```bash
 npm install react-native-webview
 ```
 
-## Usage
-
-### Basic Usage with Component ID
+## Quick Start
 
 ```tsx
-import React from 'react';
-import { View } from 'react-native';
-import { MyopComponent } from '@myop/react-native-host';
+import { MyopComponent } from '@myop/react-native';
 
 export default function App() {
   return (
-    <View style={{ flex: 1 }}>
-      <MyopComponent
-        componentId="your-component-id"
-        style={{ flex: 1 }}
-      />
-    </View>
+    <MyopComponent
+      componentId="your-component-id"
+      style={{ flex: 1 }}
+    />
   );
 }
 ```
 
-### Usage with Component Config
+## Usage
+
+### Loading by Component ID
+
+The simplest way to embed a Myop component:
+
+```tsx
+<MyopComponent
+  componentId="abc123"
+  style={{ flex: 1 }}
+/>
+```
+
+### Passing Data to Components
+
+Use the `data` prop to send data to your component's `myop_init_interface`:
 
 ```tsx
-import React from 'react';
-import { View } from 'react-native';
-import { MyopComponent, IComponentInstanceConfig } from '@myop/react-native-host';
+const [userData, setUserData] = useState({ name: 'John', theme: 'dark' });
 
-export default function App() {
-  const componentConfig: IComponentInstanceConfig = {
-    id: 'component-instance-id',
-    componentId: 'your-component-id',
-    componentName: 'MyComponent',
-    skinSelector: {
-      // your skin selector config
+<MyopComponent
+  componentId="abc123"
+  data={userData}
+  style={{ flex: 1 }}
+/>
+```
+
+When `data` changes, `myop_init_interface` is automatically called with the new value.
+
+### Handling Component Events
+
+Listen for events from your component's `myop_cta_handler`:
+
+```tsx
+<MyopComponent
+  componentId="abc123"
+  on={(action, payload) => {
+    switch (action) {
+      case 'submit':
+        handleSubmit(payload);
+        break;
+      case 'navigate':
+        navigation.navigate(payload.screen);
+        break;
     }
-  };
+  }}
+  style={{ flex: 1 }}
+/>
+```
 
-  return (
-    <View style={{ flex: 1 }}>
-      <MyopComponent
-        componentConfig={componentConfig}
-        style={{ flex: 1 }}
-      />
-    </View>
-  );
-}
+### Executing Commands
+
+Access the component instance for direct command execution:
+
+```tsx
+const [component, setComponent] = useState(null);
+
+<MyopComponent
+  componentId="abc123"
+  onLoad={(instance) => setComponent(() => instance)}
+  style={{ flex: 1 }}
+/>
+
+// Execute commands on the component
+const handleReset = () => {
+  component?.('.reset()');
+};
 ```
 
-### With onLoad Callback
+### Custom Loading State
 
-The `onLoad` callback gives you access to the component instance after it loads, allowing you to execute commands:
+Provide your own loading component:
 
 ```tsx
-import React from 'react';
-import { View, Button } from 'react-native';
-import { MyopComponent } from '@myop/react-native-host';
+import { ActivityIndicator, View } from 'react-native';
 
-export default function App() {
-  const [myopInstance, setMyopInstance] = React.useState(null);
+<MyopComponent
+  componentId="abc123"
+  loader={
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <ActivityIndicator size="large" color="#0000ff" />
+    </View>
+  }
+  fadeDuration={300}
+  style={{ flex: 1 }}
+/>
+```
 
-  const handleLoad = (myopComponent) => {
-    setMyopInstance(() => myopComponent);
-    console.log('Myop component loaded!');
-  };
+Set `loader={null}` to disable the loading state entirely.
 
-  const executeCommand = () => {
-    if (myopInstance) {
-      myopInstance('.someMethod()');
-    }
-  };
+### Custom Fallback State
 
-  return (
-    <View style={{ flex: 1 }}>
-      <MyopComponent
-        componentId="your-component-id"
-        onLoad={handleLoad}
-        style={{ flex: 1 }}
-      />
-      <Button title="Execute Command" onPress={executeCommand} />
+Display a custom view when the component fails to load:
+
+```tsx
+<MyopComponent
+  componentId="abc123"
+  fallback={
+    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+      <Text>Unable to load component</Text>
     </View>
-  );
-}
+  }
+  onError={(error) => console.error('Load failed:', error)}
+  style={{ flex: 1 }}
+/>
+```
+
+### Using Component Configuration
+
+For advanced use cases, pass a full configuration object:
+
+```tsx
+import { MyopComponent, IComponentInstanceConfig } from '@myop/react-native';
+
+const config: IComponentInstanceConfig = {
+  id: 'instance-1',
+  componentId: 'abc123',
+  componentName: 'MyComponent',
+  skinSelector: {
+    type: 'Dedicated',
+    skin: { id: 'skin-1' }
+  }
+};
+
+<MyopComponent
+  componentConfig={config}
+  style={{ flex: 1 }}
+/>
 ```
 
-## API
+### Environment Selection
 
-### Props
+Target different deployment environments:
 
-| Prop | Type | Required | Description |
-|------|------|----------|-------------|
-| `componentId` | `string` | No* | The ID of the component to load from Myop cloud |
-| `componentConfig` | `IComponentInstanceConfig` | No* | The complete component configuration object |
-| `style` | `StyleProp<ViewStyle>` | No | Custom styles for the component container |
-| `onLoad` | `(myopComponent: (command: string) => void) => void` | No | Callback fired when component loads, receives command executor function |
+```tsx
+<MyopComponent
+  componentId="abc123"
+  environment="staging"  // defaults to "production"
+  style={{ flex: 1 }}
+/>
+```
 
-\* Either `componentId` or `componentConfig` must be provided
+## API Reference
 
-### Types
+### MyopComponent Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `componentId` | `string` | - | Component ID to load from Myop cloud |
+| `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 |
+| `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 |
+| `style` | `StyleProp<ViewStyle>` | - | Container styles |
 
-#### IComponentInstanceConfig
+Either `componentId` or `componentConfig` must be provided.
+
+### Exported Components
+
+| Component | Description |
+|-----------|-------------|
+| `MyopComponent` | Main component for embedding Myop content |
+| `MyopLoader` | Default animated loading state |
+| `MyopFallback` | Default error/fallback state |
+
+### Types
 
 ```typescript
 interface IComponentInstanceConfig {
@@ -129,38 +224,24 @@ interface IComponentInstanceConfig {
   resolvedNestedComponents?: IComponentConfig[];
   [key: string]: any;
 }
-```
-
-## How it Works
 
-The component uses a WebView to load and render Myop components. It:
-
-1. Loads the Myop SDK from the CDN
-2. Fetches the component configuration (if using `componentId`)
-3. Initializes the component inside the WebView
-4. Provides a bridge to execute commands on the loaded component
+interface MyopLoaderRef {
+  fadeOut: (duration?: number) => void;
+}
+```
 
 ## Requirements
 
-- React Native 0.60.0 or higher
-- React 16.8.0 or higher
-- react-native-webview 13.0.0 or higher
-
-## Development
-
-This project includes a demo Expo app for testing. To run the development app:
-
-```bash
-npm install
-npx expo start
-```
+| Dependency | Version |
+|------------|---------|
+| React | >= 16.8.0 |
+| React Native | >= 0.60.0 |
+| react-native-webview | >= 11.0.0 |
 
-## Building the Library
+## Contributing
 
-```bash
-npm run build
-```
+Contributions are welcome. Please open an issue to discuss proposed changes before submitting a pull request.
 
 ## License
 
-MIT
+MIT

package/dist/MyopComponent.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { StyleProp, ViewStyle } from 'react-native';
 import type { IComponentInstanceConfig } from './types';
 interface IPropTypes {
@@ -6,6 +6,14 @@ interface IPropTypes {
     componentId?: string;
     componentConfig?: IComponentInstanceConfig;
     onLoad?: (myopComponent: (command: string) => void) => void;
+    onError?: (error: string) => void;
+    on?: (action: string, payload?: any) => void;
+    data?: any;
+    loader?: ReactNode;
+    fallback?: ReactNode;
+    fadeDuration?: number;
+    v1Mode?: boolean;
+    environment?: string;
 }
 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,KAA0B,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAC,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,SAAS,CAAC;AAGtD,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;CAC/D;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,sBAqE9C,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;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;CACxB;AAED,eAAO,MAAM,aAAa,GAAI,OAAO,UAAU,sBA8N9C,CAAA"}

package/dist/MyopComponent.js

@@ -37,66 +37,214 @@ exports.MyopComponent = void 0;
 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_1 = require("./componentHost.html");
+const componentHost_html_js_1 = require("./componentHost.html.js");
+const MyopLoader_1 = require("./MyopLoader");
+const MyopFallback_1 = require("./MyopFallback");
 const MyopComponent = (props) => {
+    var _a, _b;
     const webviewRef = (0, react_1.useRef)(null);
+    const loaderRef = (0, react_1.useRef)(null);
+    const [showLoader, setShowLoader] = (0, react_1.useState)(true);
+    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;
+    // Function to call myop_init_interface in the WebView
+    const callInitInterface = (0, react_1.useCallback)((data) => {
+        if (!webviewRef.current || !isComponentLoaded)
+            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}')));
+            }
+            true;
+        `);
+    }, [isComponentLoaded]);
+    // Call myop_init_interface when data prop changes (after component is loaded)
+    (0, react_1.useEffect)(() => {
+        if (isComponentLoaded && props.data !== undefined) {
+            callInitInterface(props.data);
+        }
+    }, [props.data, isComponentLoaded, callInitInterface]);
+    const hideLoader = (0, react_1.useCallback)(() => {
+        var _a;
+        if ((_a = loaderRef.current) === null || _a === void 0 ? void 0 : _a.fadeOut) {
+            loaderRef.current.fadeOut(fadeDuration);
+            setTimeout(() => {
+                setShowLoader(false);
+            }, fadeDuration);
+        }
+        else {
+            setShowLoader(false);
+        }
+    }, [fadeDuration]);
     const myopComponent = (command) => {
         var _a;
-        //TODO : return promise to data?
         (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`
                 window.myopComponent${command}
              `);
     };
-    const onMessage = (event) => {
-        if (event.nativeEvent.data === 'COMPONENT_LOADED') {
-            if (props.onLoad) {
-                props.onLoad(myopComponent);
-            }
-            // webviewRef.current?.injectJavaScript(`
-            //     window.myopComponent.props.showPopupWOW();
-            //  `);
+    const handleError = (0, react_1.useCallback)((errorMsg) => {
+        console.error('[MyopComponent] Error:', errorMsg);
+        hideLoader();
+        setShowFallback(true);
+        if (props.onError) {
+            props.onError(errorMsg);
         }
-        //  Alert.alert('Received from WebView', event.nativeEvent.data);
-    };
-    const fetchFromReactNative = async () => {
-        var _a;
+    }, [hideLoader, props.onError]);
+    const loadComponent = (0, react_1.useCallback)(async () => {
+        var _a, _b, _c;
         try {
             let componentConfig = null;
             if (props.componentConfig) {
                 componentConfig = props.componentConfig;
             }
             else if (props.componentId) {
-                const res = await fetch(`https://cloud.myop.dev/flow?id=${props.componentId}&auto=true`);
-                componentConfig = await res.json();
-                componentConfig = componentConfig.item.components[0];
+                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';
+                    const res = await fetch(`https://cloud.myop.dev/consume?id=${props.componentId}&env=${env}`);
+                    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
+                    };
+                }
+            }
+            if (!componentConfig) {
+                handleError('No component configuration provided');
+                return;
             }
             const encoded = encodeURIComponent(JSON.stringify(componentConfig));
-            //send it into the webview
-            (_a = webviewRef.current) === null || _a === void 0 ? void 0 : _a.injectJavaScript(`
+            (_c = webviewRef.current) === null || _c === void 0 ? void 0 : _c.injectJavaScript(`
                 loadMyopComponent(\`${encoded}\`);
+                true;
             `);
         }
         catch (err) {
-            console.error('Fetch failed:', err);
+            handleError((err === null || err === void 0 ? void 0 : err.message) || 'Unknown error');
         }
-    };
-    (0, react_1.useEffect)(() => {
-        if (webviewRef.current)
-            fetchFromReactNative().then();
-    }, [webviewRef]);
+    }, [props.componentConfig, props.componentId, props.v1Mode, props.environment, handleError]);
+    const onMessage = (0, react_1.useCallback)((event) => {
+        var _a, _b, _c, _d;
+        const message = event.nativeEvent.data;
+        console.log('[MyopComponent] Message from WebView:', message);
+        if (message === 'WEBVIEW_READY') {
+            // WebView is ready, now inject the component loading code
+            loadComponent();
+        }
+        else if (message === 'COMPONENT_LOADED') {
+            setIsComponentLoaded(true);
+            hideLoader();
+            // Call myop_init_interface immediately with initial data if provided
+            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}')));
+                    }
+                    true;
+                `);
+            }
+            if (props.onLoad) {
+                props.onLoad(myopComponent);
+            }
+        }
+        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:'))) {
+            const errorMsg = message.replace('COMPONENT_ERROR:', '').replace('SDK_INIT_ERROR:', '');
+            console.error('[MyopComponent] Error loading component:', errorMsg);
+            hideLoader();
+            setShowFallback(true);
+            if (props.onError) {
+                props.onError(errorMsg);
+            }
+        }
+        else if ((_d = message === null || message === void 0 ? void 0 : message.startsWith) === null || _d === void 0 ? void 0 : _d.call(message, 'CTA:')) {
+            // Handle myop_cta_handler calls
+            try {
+                const ctaData = JSON.parse(message.substring(4));
+                if (props.on) {
+                    props.on(ctaData.action, ctaData.payload);
+                }
+            }
+            catch (e) {
+                console.error('[MyopComponent] Failed to parse CTA message:', e);
+            }
+        }
+    }, [loadComponent, props.onLoad, props.onError, props.on, hideLoader]);
     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_1.HTML }, onMessage: onMessage, style: styles.webview, javaScriptEnabled: true, domStorageEnabled: true, mixedContentMode: "always" // allows HTTPS + HTTP content
-            , allowFileAccess: true, allowUniversalAccessFromFileURLs: true })));
+        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 }),
+        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)))));
 };
 exports.MyopComponent = MyopComponent;
 const styles = react_native_1.StyleSheet.create({
     root: {
-        flex: 1,
-        //  backgroundColor: 'red', // visible background
+        width: '100%',
+        height: '100%',
     },
     webview: {
         flex: 1,
-        //backgroundColor: 'blue', // visible background behind HTML
-    }
+    },
+    loaderContainer: Object.assign(Object.assign({}, react_native_1.StyleSheet.absoluteFillObject), { zIndex: 1 }),
 });
 //# sourceMappingURL=MyopComponent.js.map

package/dist/MyopComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"MyopComponent.js","sourceRoot":"","sources":["../src/MyopComponent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MyopComponent.js","sourceRoot":"","sources":["../src/MyopComponent.tsx"],"names":[],"mappings":"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"}

package/dist/MyopFallback.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const MyopFallback: () => React.JSX.Element;
+//# sourceMappingURL=MyopFallback.d.ts.map

package/dist/MyopFallback.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyopFallback.d.ts","sourceRoot":"","sources":["../src/MyopFallback.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AA8D1B,eAAO,MAAM,YAAY,yBAWxB,CAAC"}