From 5a6e44ca7a38fe4d49f6bccd53e8405e77d9d466 Mon Sep 17 00:00:00 2001 From: Ahmed Alnaami Date: Tue, 13 Feb 2024 17:31:16 +0800 Subject: [PATCH 1/3] [FIX] Support context for appetize sdk session --- .../src/renderers/EmulatorRenderer.tsx | 54 ++++++++++--------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/packages/native-components/src/renderers/EmulatorRenderer.tsx b/packages/native-components/src/renderers/EmulatorRenderer.tsx index 694331c..2da6908 100644 --- a/packages/native-components/src/renderers/EmulatorRenderer.tsx +++ b/packages/native-components/src/renderers/EmulatorRenderer.tsx @@ -10,11 +10,11 @@ import { useAppDispatch } from "@storybook/native-controllers"; import { useLogs, useNetworkLogs } from "@storybook/native-devices"; -import { RendererProps } from "../types"; +import { DeepLinkRendererProps } from "../types"; import LaunchParamsRenderer from "./LaunchParamsRenderer"; import DeepLinkRenderer from "./DeepLinkRenderer"; -const WithStore = (props: RendererProps): React.ReactElement => { +const WithStore = (props: DeepLinkRendererProps): React.ReactElement => { const dispatch = useAppDispatch(); const networkLogs = useNetworkLogs(); const logs = useLogs(); @@ -26,32 +26,36 @@ const WithStore = (props: RendererProps): React.ReactElement => { addons.getChannel().emit(EmulatorEvents.onMissingClient, null); return; } - window.appetize.getClient("#appetize-iframe").then((client: Client) => { - addons.getChannel().emit(EmulatorEvents.onClient, client); + window.appetize + .getClient( + `#appetize-iframe${props.context ? `-${props.context}` : ""}` + ) + .then((client: Client) => { + addons.getChannel().emit(EmulatorEvents.onClient, client); - client.on("session", (newSession: Session) => { - setSession(newSession); - resetNetworkLogs(dispatch); - addons.getChannel().emit(EmulatorEvents.onRestNetworkLogs); - if (networkLogs) { - newSession.on("network", (log: Record) => { - addons - .getChannel() - .emit(EmulatorEvents.onNetworkLog, log); - addNetworkLog(dispatch, log); - }); - } + client.on("session", (newSession: Session) => { + setSession(newSession); + resetNetworkLogs(dispatch); + addons.getChannel().emit(EmulatorEvents.onRestNetworkLogs); + if (networkLogs) { + newSession.on("network", (log: Record) => { + addons + .getChannel() + .emit(EmulatorEvents.onNetworkLog, log); + addNetworkLog(dispatch, log); + }); + } - if (logs) { - newSession.on("log", (log: Log) => { - addons.getChannel().emit(EmulatorEvents.onLog, log); - addLog(dispatch, log); - }); - } + if (logs) { + newSession.on("log", (log: Log) => { + addons.getChannel().emit(EmulatorEvents.onLog, log); + addLog(dispatch, log); + }); + } - addons.getChannel().emit(EmulatorEvents.onSession, session); + addons.getChannel().emit(EmulatorEvents.onSession, session); + }); }); - }); }, [networkLogs, logs]); return ( @@ -64,7 +68,7 @@ const WithStore = (props: RendererProps): React.ReactElement => { ); }; -export default (props: RendererProps): React.ReactElement => { +export default (props: DeepLinkRendererProps): React.ReactElement => { return ( From 236b90122039f7c4dc327c30d85c79cd9edb088f Mon Sep 17 00:00:00 2001 From: Ahmed Alnaami Date: Tue, 13 Feb 2024 18:07:16 +0800 Subject: [PATCH 2/3] [FIX] Support context for appetize sdk session --- packages/native-components/src/renderers/EmulatorRenderer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/native-components/src/renderers/EmulatorRenderer.tsx b/packages/native-components/src/renderers/EmulatorRenderer.tsx index 2da6908..ba981b8 100644 --- a/packages/native-components/src/renderers/EmulatorRenderer.tsx +++ b/packages/native-components/src/renderers/EmulatorRenderer.tsx @@ -56,7 +56,7 @@ const WithStore = (props: DeepLinkRendererProps): React.ReactElement => { addons.getChannel().emit(EmulatorEvents.onSession, session); }); }); - }, [networkLogs, logs]); + }, [networkLogs, logs, props.context]); return ( <> From 7ea6df10c0e665889b5fbc63c533bf0257da8d82 Mon Sep 17 00:00:00 2001 From: Ahmed Alnaami Date: Wed, 14 Feb 2024 09:02:59 +0800 Subject: [PATCH 3/3] [FIX] Support context for appetize sdk session --- .../android-material-ui/.storybook/main.js | 9 ++- examples/cross-platform/.storybook/main.js | 13 ++-- .../cross-platform/src/android.stories.jsx | 4 +- .../cross-platform/src/comparison.stories.jsx | 6 +- examples/cross-platform/src/ios.stories.jsx | 4 +- packages/addon/README.md | 2 +- .../src/renderers/EmulatorRenderer.tsx | 68 ++++++++++++------- 7 files changed, 63 insertions(+), 43 deletions(-) diff --git a/examples/android-material-ui/.storybook/main.js b/examples/android-material-ui/.storybook/main.js index 122c5f0..dd3d6d2 100644 --- a/examples/android-material-ui/.storybook/main.js +++ b/examples/android-material-ui/.storybook/main.js @@ -1,10 +1,10 @@ -import { nativePreviewHead } from "@storybook/native/dist/previewHeader"; +import { nativePreviewHead } from "@storybook/native"; -const config = { +const config = { stories: ["../stories/*.stories.jsx"], framework: { name: "@storybook/react-webpack5", - options: {}, + options: {} }, addons: [ "@storybook/addon-docs", @@ -14,8 +14,7 @@ const config = { docs: { autodocs: true }, - previewHead: nativePreviewHead, - + previewHead: nativePreviewHead }; export default config; diff --git a/examples/cross-platform/.storybook/main.js b/examples/cross-platform/.storybook/main.js index 4bcac6d..724e976 100644 --- a/examples/cross-platform/.storybook/main.js +++ b/examples/cross-platform/.storybook/main.js @@ -1,8 +1,12 @@ -const config = { - stories: [{ directory: '../src', files: '**/*.stories.@(mdx|tsx|ts|jsx|js)' }], +import { nativePreviewHead } from "@storybook/native"; + +const config = { + stories: [ + { directory: "../src", files: "**/*.stories.@(mdx|tsx|ts|jsx|js)" } + ], framework: { name: "@storybook/react-webpack5", - options: {}, + options: {} }, addons: [ "@storybook/addon-docs", @@ -11,7 +15,8 @@ const config = { ], docs: { autodocs: true - } + }, + previewHead: nativePreviewHead }; export default config; diff --git a/examples/cross-platform/src/android.stories.jsx b/examples/cross-platform/src/android.stories.jsx index 7040281..c7d65d3 100644 --- a/examples/cross-platform/src/android.stories.jsx +++ b/examples/cross-platform/src/android.stories.jsx @@ -1,10 +1,10 @@ import React from "react"; import rgbHex from "rgb-hex"; -import { DeepLinkRenderer } from "@storybook/native-components"; +import { EmulatorRenderer } from "@storybook/native-components"; const AndroidRenderer = ({ extraParams, component }) => { return ( - { return ( - { const IosRenderer = ({ extraParams, component }) => { return ( - { return ( - (); + const WithStore = (props: DeepLinkRendererProps): React.ReactElement => { const dispatch = useAppDispatch(); const networkLogs = useNetworkLogs(); @@ -21,41 +23,55 @@ const WithStore = (props: DeepLinkRendererProps): React.ReactElement => { const [session, setSession] = React.useState(); + const sessionKey = props.context ?? props.platform; useEffect(() => { if (!window.appetize) { addons.getChannel().emit(EmulatorEvents.onMissingClient, null); return; } - window.appetize - .getClient( - `#appetize-iframe${props.context ? `-${props.context}` : ""}` - ) - .then((client: Client) => { - addons.getChannel().emit(EmulatorEvents.onClient, client); - client.on("session", (newSession: Session) => { - setSession(newSession); - resetNetworkLogs(dispatch); - addons.getChannel().emit(EmulatorEvents.onRestNetworkLogs); - if (networkLogs) { - newSession.on("network", (log: Record) => { - addons - .getChannel() - .emit(EmulatorEvents.onNetworkLog, log); - addNetworkLog(dispatch, log); - }); - } + if (sessionKey && appetizeSessionMap.has(sessionKey)) { + setSession(appetizeSessionMap.get(sessionKey)); + resetNetworkLogs(dispatch); + addons.getChannel().emit(EmulatorEvents.onRestNetworkLogs); + return; + } + + const frameId = `#appetize-iframe${ + props.context ? `-${props.context}` : "" + }`; + window.appetize.getClient(frameId).then((client: Client) => { + addons.getChannel().emit(EmulatorEvents.onClient, client); + + client.on("error", (error: string) => { + console.error(error); + appetizeSessionMap.delete(sessionKey); + }); + + client.on("session", (newSession: Session) => { + if (sessionKey) appetizeSessionMap.set(sessionKey, newSession); + setSession(newSession); + resetNetworkLogs(dispatch); + addons.getChannel().emit(EmulatorEvents.onRestNetworkLogs); + if (networkLogs) { + newSession.on("network", (log: Record) => { + addons + .getChannel() + .emit(EmulatorEvents.onNetworkLog, log); + addNetworkLog(dispatch, log); + }); + } - if (logs) { - newSession.on("log", (log: Log) => { - addons.getChannel().emit(EmulatorEvents.onLog, log); - addLog(dispatch, log); - }); - } + if (logs) { + newSession.on("log", (log: Log) => { + addons.getChannel().emit(EmulatorEvents.onLog, log); + addLog(dispatch, log); + }); + } - addons.getChannel().emit(EmulatorEvents.onSession, session); - }); + addons.getChannel().emit(EmulatorEvents.onSession, session); }); + }); }, [networkLogs, logs, props.context]); return (