@streamlayer/react 0.1.0

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@streamlayer/react",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/main.js",
+  "typings": "./src/main.d.ts",
+  "files": [
+    "src/",
+    "package.json"
+  ],
+  "dependencies": {
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
+    "@nanostores/react": "^0.7.1",
+    "@streamlayer/sdk-web": "workspace:^",
+    "@streamlayer/react-ui": "workspace:^",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-router-dom": "6.16.0"
+  },
+  "devDependencies": {
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.23.0",
+    "@emotion/babel-plugin": "11.11.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
+    "@svgr/webpack": "^8.0.1",
+    "@testing-library/react": "14.0.0",
+    "@types/react": "18.2.28",
+    "@types/react-dom": "18.2.13",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "react-refresh": "^0.14.0",
+    "url-loader": "^4.1.1"
+  },
+  "module": "./src/main.js"
+}

package/src/app/app.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const StreamLayerSDKReact: React.FC;

package/src/app/app.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { Demo } from '@streamlayer/react-ui';
+import { useContext } from 'react';
+import { StreamLayerContext, StreamLayerStatus } from './provider';
+export const StreamLayerSDKReact = () => {
+    const { sdk, status } = useContext(StreamLayerContext);
+    if (status === StreamLayerStatus.UNSET) {
+        throw new Error('Wrap app in `StreamLayerProvider`');
+    }
+    if (status === StreamLayerStatus.CONNECTED) {
+        return _jsx("div", { children: "wait" });
+    }
+    if (sdk === undefined) {
+        return _jsx("div", { children: "sdk not initialized" });
+    }
+    return _jsx(Demo, { sdk: sdk });
+};
+//# sourceMappingURL=app.js.map

package/src/app/app.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../../../../packages/react/src/app/app.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAElE,MAAM,CAAC,MAAM,mBAAmB,GAAa,GAAG,EAAE;IAChD,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAA;IAEtD,IAAI,MAAM,KAAK,iBAAiB,CAAC,KAAK,EAAE;QACtC,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAA;KACrD;IAED,IAAI,MAAM,KAAK,iBAAiB,CAAC,SAAS,EAAE;QAC1C,OAAO,iCAAe,CAAA;KACvB;IAED,IAAI,GAAG,KAAK,SAAS,EAAE;QACrB,OAAO,gDAA8B,CAAA;KACtC;IAED,OAAO,KAAC,IAAI,IAAC,GAAG,EAAE,GAAG,GAAI,CAAA;AAC3B,CAAC,CAAA"}

package/src/app/provider.d.ts

@@ -0,0 +1,19 @@
+import type { StreamLayerSDK, StreamLayerPlugin } from '@streamlayer/sdk-web-interfaces';
+import React from 'react';
+export declare enum StreamLayerStatus {
+    UNSET = 0,
+    CONNECTED = 1,
+    READY = 2
+}
+export declare const StreamLayerContext: React.Context<{
+    status: StreamLayerStatus;
+    sdk?: StreamLayerSDK | undefined;
+}>;
+type StreamLayerProps = {
+    sdkKey: string;
+    plugins?: Set<StreamLayerPlugin>;
+};
+export declare const StreamLayerProvider: React.FC<StreamLayerProps & {
+    children: React.ReactNode;
+}>;
+export {};

package/src/app/provider.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
+import { createContext, useMemo } from 'react';
+import { useStreamLayer } from './useStreamLayer';
+export var StreamLayerStatus;
+(function (StreamLayerStatus) {
+    StreamLayerStatus[StreamLayerStatus["UNSET"] = 0] = "UNSET";
+    StreamLayerStatus[StreamLayerStatus["CONNECTED"] = 1] = "CONNECTED";
+    StreamLayerStatus[StreamLayerStatus["READY"] = 2] = "READY";
+})(StreamLayerStatus || (StreamLayerStatus = {}));
+export const StreamLayerContext = createContext({
+    status: StreamLayerStatus.UNSET,
+});
+if (process.env.NODE_ENV !== 'production') {
+    StreamLayerContext.displayName = 'StreamLayerProvider';
+}
+export const StreamLayerProvider = ({ sdkKey, plugins, children, }) => {
+    const streamLayer = useStreamLayer(sdkKey, plugins);
+    const value = useMemo(() => {
+        if (!streamLayer) {
+            return { status: StreamLayerStatus.CONNECTED };
+        }
+        return { sdk: streamLayer, status: StreamLayerStatus.READY };
+    }, [streamLayer]);
+    return _jsx(StreamLayerContext.Provider, { value: value, children: children });
+};
+//# sourceMappingURL=provider.js.map

package/src/app/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","sourceRoot":"","sources":["../../../../../packages/react/src/app/provider.tsx"],"names":[],"mappings":";AAEA,OAAc,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAEjD,MAAM,CAAN,IAAY,iBAIX;AAJD,WAAY,iBAAiB;IAC3B,2DAAS,CAAA;IACT,mEAAa,CAAA;IACb,2DAAS,CAAA;AACX,CAAC,EAJW,iBAAiB,KAAjB,iBAAiB,QAI5B;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,aAAa,CAAsD;IACnG,MAAM,EAAE,iBAAiB,CAAC,KAAK;CAChC,CAAC,CAAA;AAEF,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;IACzC,kBAAkB,CAAC,WAAW,GAAG,qBAAqB,CAAA;CACvD;AAID,MAAM,CAAC,MAAM,mBAAmB,GAA+D,CAAC,EAC9F,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAG,cAAc,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACnD,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO,EAAE,MAAM,EAAE,iBAAiB,CAAC,SAAS,EAAE,CAAA;SAC/C;QAED,OAAO,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,EAAE,iBAAiB,CAAC,KAAK,EAAE,CAAA;IAC9D,CAAC,EAAE,CAAC,WAAW,CAAC,CAAC,CAAA;IAEjB,OAAO,KAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA+B,CAAA;AAC5F,CAAC,CAAA"}

package/src/app/useStreamLayer.d.ts

@@ -0,0 +1,7 @@
+import type { StreamLayerSDK, StreamLayerPlugin } from '@streamlayer/sdk-web-interfaces';
+declare global {
+    interface Window {
+        instance: any;
+    }
+}
+export declare const useStreamLayer: (sdkKey: string, plugins?: Set<StreamLayerPlugin>) => StreamLayerSDK | null;

package/src/app/useStreamLayer.js

@@ -0,0 +1,39 @@
+import { StreamLayer } from '@streamlayer/sdk-web';
+import { useState, useEffect } from 'react';
+window.instance = null;
+export const useStreamLayer = (sdkKey, plugins) => {
+    const [sdk, setSdk] = useState(null);
+    useEffect(() => {
+        let ignore = false;
+        if (!sdkKey) {
+            throw new Error('sdk key should be provided');
+        }
+        const instance = StreamLayer(sdkKey);
+        if (plugins) {
+            for (const plugin of plugins) {
+                instance.use(plugin);
+            }
+        }
+        instance
+            .ready()
+            .then((service) => {
+            if (!ignore) {
+                window.instance = service;
+                setSdk(service.sdk);
+            }
+        })
+            .catch((err) => console.log(err));
+        return () => {
+            ignore = true;
+            instance.close(function (err) {
+                if (err)
+                    throw err;
+            });
+        };
+        // ignored because we should skip updating plugins.
+        // this deps should be provided on mount and we have checked this
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sdkKey]);
+    return sdk;
+};
+//# sourceMappingURL=useStreamLayer.js.map

package/src/app/useStreamLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStreamLayer.js","sourceRoot":"","sources":["../../../../../packages/react/src/app/useStreamLayer.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAElD,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAS3C,MAAM,CAAC,QAAQ,GAAG,IAAI,CAAA;AAEtB,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,MAAc,EAAE,OAAgC,EAAE,EAAE;IACjF,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAwB,IAAI,CAAC,CAAA;IAE3D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,GAAG,KAAK,CAAA;QAElB,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,4BAA4B,CAAC,CAAA;SAC9C;QAED,MAAM,QAAQ,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;QAEpC,IAAI,OAAO,EAAE;YACX,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE;gBAC5B,QAAQ,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;aACrB;SACF;QAED,QAAQ;aACL,KAAK,EAAE;aACP,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE;YAChB,IAAI,CAAC,MAAM,EAAE;gBACX,MAAM,CAAC,QAAQ,GAAG,OAAO,CAAA;gBACzB,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;aACpB;QACH,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;QAEnC,OAAO,GAAG,EAAE;YACV,MAAM,GAAG,IAAI,CAAA;YACb,QAAQ,CAAC,KAAK,CAAC,UAAU,GAAG;gBAC1B,IAAI,GAAG;oBAAE,MAAM,GAAG,CAAA;YACpB,CAAC,CAAC,CAAA;QACJ,CAAC,CAAA;QACD,mDAAmD;QACnD,iEAAiE;QACjE,uDAAuD;IACzD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,OAAO,GAAG,CAAA;AACZ,CAAC,CAAA"}

package/src/environments/environment.d.ts

@@ -0,0 +1,3 @@
+export declare const environment: {
+    production: boolean;
+};

package/src/environments/environment.js

@@ -0,0 +1,6 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// When building for production, this file is replaced with `environment.prod.ts`.
+export const environment = {
+    production: false,
+};
+//# sourceMappingURL=environment.js.map

package/src/environments/environment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment.js","sourceRoot":"","sources":["../../../../../packages/react/src/environments/environment.ts"],"names":[],"mappings":"AAAA,gFAAgF;AAChF,kFAAkF;AAElF,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,KAAK;CAClB,CAAA"}

package/src/environments/environment.prod.d.ts

@@ -0,0 +1,3 @@
+export declare const environment: {
+    production: boolean;
+};

package/src/environments/environment.prod.js

@@ -0,0 +1,4 @@
+export const environment = {
+    production: true,
+};
+//# sourceMappingURL=environment.prod.js.map

package/src/environments/environment.prod.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"environment.prod.js","sourceRoot":"","sources":["../../../../../packages/react/src/environments/environment.prod.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,UAAU,EAAE,IAAI;CACjB,CAAA"}

package/src/main.d.ts

@@ -0,0 +1,3 @@
+export { StreamLayerSDKReact } from './app/app';
+export { StreamLayerProvider } from './app/provider';
+export { useStreamLayer } from './app/useStreamLayer';

package/src/main.js

@@ -0,0 +1,4 @@
+export { StreamLayerSDKReact } from './app/app';
+export { StreamLayerProvider } from './app/provider';
+export { useStreamLayer } from './app/useStreamLayer';
+//# sourceMappingURL=main.js.map

package/src/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../../../packages/react/src/main.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA"}