@upscopeio/react 1.0.1 → 1.0.3

package/index.js

@@ -0,0 +1,43 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import UpscopeSDK from '@upscopeio/sdk';
+import { useEffect, useState } from 'react';
+const Upscope = function ({ children, ...props }) {
+    const [initiated, setInitiated] = useState(false);
+    const keys = Object.keys(props).sort((a, b) => a.localeCompare(b));
+    const values = keys.map((key) => props[key]);
+    useEffect(() => {
+        if (initiated) {
+            UpscopeSDK('updateConnection', props);
+        }
+        else {
+            UpscopeSDK('init', props);
+            setInitiated(true);
+        }
+    }, values);
+    return children;
+};
+export default Upscope;
+export function Masked({ children }) {
+    useEffect(() => {
+        if (children) {
+            children.__upscopeMasked = true;
+            // @ts-ignore
+            for (const child of children) {
+                child.__upscopeMasked = true;
+            }
+        }
+    }, [children]);
+    return (_jsx(_Fragment, { children: children }));
+}
+export function NoRemoteControl({ children }) {
+    useEffect(() => {
+        if (children) {
+            children.__upscopeNoRemoteControl = true;
+            // @ts-ignore
+            for (const child of children) {
+                child.__upscopeNoRemoteControl = true;
+            }
+        }
+    }, [children]);
+    return (_jsx(_Fragment, { children: children }));
+}

package/index.tsx

@@ -0,0 +1,68 @@
+import type {CobrowsingSdkConfiguration, Upscope} from '@upscopeio/sdk';
+import type {ReactNode} from 'react';
+import UpscopeSDK from '@upscopeio/sdk';
+import React, {useEffect, useState} from 'react';
+
+type Child = ReactNode & {
+  __upscopeMasked?: boolean;
+  __upscopeNoRemoteControl?: boolean;
+};
+
+type Children = {children: Child};
+
+type Props = Children & Partial<CobrowsingSdkConfiguration>;
+
+
+const Upscope: React.FC<Props> = function({children, ...props}: Props) {
+  const [initiated, setInitiated] = useState(false);
+  const keys = Object.keys(props).sort((a, b) => a.localeCompare(b)) as (keyof CobrowsingSdkConfiguration)[];
+  const values: unknown[] = keys.map((key: keyof CobrowsingSdkConfiguration) => props[key] as unknown);
+
+  useEffect(() => {
+    if (initiated) {
+      (UpscopeSDK as Upscope)('updateConnection', props);
+    } else {
+      (UpscopeSDK as Upscope)('init', props);
+      setInitiated(true);
+    }
+  }, values);
+
+  return children;
+};
+export default Upscope;
+
+
+export function Masked({children}: Children): ReactNode {
+  useEffect(() => {
+    if (children) {
+      children.__upscopeMasked = true;
+      // @ts-ignore
+      for (const child of children) {
+        (child as Child).__upscopeMasked = true;
+      }
+    }
+  }, [children]);
+  return (
+    <>
+      {children}
+    </>
+  );
+}
+
+
+export function NoRemoteControl({children}: Children): ReactNode {
+  useEffect(() => {
+    if (children) {
+      children.__upscopeNoRemoteControl = true;
+      // @ts-ignore
+      for (const child of children) {
+        (child as Child).__upscopeNoRemoteControl = true;
+      }
+    }
+  }, [children]);
+  return (
+    <>
+      {children}
+    </>
+  );
+}

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@upscopeio/react",
-  "main": "react.tsx",
+  "main": "index.js",
   "type": "module",
   "dependencies": {
-    "@upscopeio/sdk": "1.0.1"
+    "@upscopeio/sdk": "1.0.3"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^18.2.0"
   },
-  "version": "1.0.1"
+  "devDependencies": {
+    "@types/react": "^18.2.14",
+    "typescript": "^5.1.6"
+  },
+  "version": "1.0.3"
 }

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "strict": true,
+    "skipLibCheck": true
+  }
+}

package/react.tsx

@@ -1,53 +0,0 @@
-import type {CobrowsingSdkConfiguration} from '@upscopeio/sdk';
-import React, {ReactNode, useEffect, useRef, useState} from 'react';
-import UpscopeSDK from '@upscopeio/sdk';
-
-type Children = {children: ReactNode};
-type Props = Children & Partial<CobrowsingSdkConfiguration>;
-
-
-const UpscopeComponent: React.FC<Props> = ({children, ...props}) => {
-  const [initiated, setInitiated] = useState(false);
-  useEffect(() => {
-    if (initiated) {
-      UpscopeSDK('updateConnection', props);
-    } else {
-      UpscopeSDK('init', props);
-      setInitiated(true);
-    }
-  }, [...Object.values(props)]);
-
-  return children;
-};
-
-export default UpscopeComponent;
-
-
-export function Masked({children}: Children): ReactNode {
-  const fragmentRef = useRef<React.Fragment>(null);
-  useEffect(() => {
-    const children = fragmentRef.current?.children;
-    for (const child of children) {
-      child.__upscopeMasked = true;
-    }
-  }, [children]);
-
-  return <React.Fragment ref={fragmentRef}>
-    {children}
-  </React.Fragment>
-}
-
-
-export function NoRemoteControl({children}: Children): ReactNode {
-  const fragmentRef = useRef<React.Fragment>(null);
-  useEffect(() => {
-    const children = fragmentRef.current?.children;
-    for (const child of children) {
-      child.__upscopeNoRemoteControl = true;
-    }
-  }, [children]);
-
-  return <React.Fragment ref={fragmentRef}>
-    {children}
-  </React.Fragment>
-}