diff --git a/lib.docs/.gitignore b/lib.docs/.gitignore new file mode 100644 index 0000000..f9ad2ea --- /dev/null +++ b/lib.docs/.gitignore @@ -0,0 +1 @@ +static/js/ \ No newline at end of file diff --git a/lib.docs/src/app/main.ts b/lib.docs/src/app/main.ts index e4c6783..2caa6a3 100644 --- a/lib.docs/src/app/main.ts +++ b/lib.docs/src/app/main.ts @@ -24,28 +24,22 @@ const hpAppMetaData = { name: "hStrato", }; -// Set this upfront for naive handling of race conditions (at least docs won't crash) -window["StratoOperator"] = { - accountId: 'unknown', - network: 'unknown', -}; - -async function fetchDocsOperator() { +async function injectStrato() { try { const docsOperatorResponse = await fetch('https://eu2.contabostorage.com/963797152a304f4bb7f75cc0af884bd7:buidler-labs/projects/hedera-strato-js/docs-operator.json'); const { value: uint8ArrayDocsOperator } = await docsOperatorResponse.body.getReader().read(); const rawDocsOperator = new TextDecoder().decode(uint8ArrayDocsOperator); const docsOperator = JSON.parse(rawDocsOperator); - const githubOperatorContext = { - client: { - hedera: { + const s3OperatorContext = { + network: { + name: docsOperator.network, + }, + wallet: { + sdk: { operatorId: docsOperator.accountId, operatorKey: docsOperator.privateKey, }, }, - network: { - name: docsOperator.network, - }, }; const originalApiSessionDefault = ApiSession.default; @@ -55,22 +49,17 @@ async function fetchDocsOperator() { let operatorCoordsProvided = false; if (args.length > 0 && args[0] instanceof Object) { - if (args[0].client !== undefined && args[0].client.hedera !== undefined) { - operatorCoordsProvided = args[0].client.hedera.operatorId !== undefined || args[0].client.hedera.operatorKey !== undefined; + if (args[0].wallet !== undefined && args[0].wallet.hedera !== undefined) { + operatorCoordsProvided = args[0].wallet.sdk.operatorId !== undefined || args[0].wallet.sdk.operatorKey !== undefined; } operatorCoordsProvided ||= (args[0].network !== undefined && args[0].network.name !== undefined); } // eslint-disable-next-line no-undef - return originalApiSessionDefault(merge(operatorCoordsProvided ? {} : githubOperatorContext, ...args)); + return originalApiSessionDefault(merge(operatorCoordsProvided ? {} : s3OperatorContext, ...args)); }, ... ApiSession, }; - - return { - accountId: docsOperator.accountId, - network: docsOperator.network, - }; } catch(e) { console.error('There was an error while fetching the docs-client operator. Falling back to the bundled operator.', e); window["ApiSession"] = ApiSession; @@ -87,31 +76,27 @@ async function fetchDocsOperator() { } (async function () { - const stratoOperator = await fetchDocsOperator(); - - if (stratoOperator) { - window["StratoOperator"] = stratoOperator; - - window["connectWallet"] = async (networkName) => { - const wallet = await HashPackWallet.newConnection({ - appMetadata: hpAppMetaData, - debug: false, - networkName, - }); - - setWallet(wallet); - return wallet; - }; - - window['disconnectWallet'] = () => { - if(window['hedera']) { - window['hedera'].wipePairingData(); - window['hedera'] = null; - } + await injectStrato(); + + window["connectWallet"] = async (networkName) => { + const wallet = await HashPackWallet.newConnection({ + appMetadata: hpAppMetaData, + debug: false, + networkName, + }); + + setWallet(wallet); + return wallet; + }; + + window['disconnectWallet'] = () => { + if(window['hedera']) { + window['hedera'].wipePairingData(); + window['hedera'] = null; } - - setWallet(await HashPackWallet.getConnection(false)); } + + setWallet(await HashPackWallet.getConnection(false)); })(); function setWallet(wallet) { diff --git a/lib.docs/src/components/OperatorCoordinates.js b/lib.docs/src/components/OperatorCoordinates.js index 8f3f70a..f048438 100644 --- a/lib.docs/src/components/OperatorCoordinates.js +++ b/lib.docs/src/components/OperatorCoordinates.js @@ -3,25 +3,49 @@ import BrowserOnly from '@docusaurus/BrowserOnly'; import React from 'react'; -export const OperatorId = () => ( - unknown}> +let promisedS3OperatorInfo = null; + +async function getS3Operator() { + if (!promisedS3OperatorInfo) { + promisedS3OperatorInfo = fetch('https://eu2.contabostorage.com/963797152a304f4bb7f75cc0af884bd7:buidler-labs/projects/hedera-strato-js/docs-operator.json') + .then(docsOperatorResponse => docsOperatorResponse.body.getReader().read()) + .then(({ value }) => new TextDecoder().decode(value)) + .then(rawDocsOperator => JSON.parse(rawDocsOperator)); + } + return promisedS3OperatorInfo; +} + +export const OperatorId = () => { + const [operator, setOperator] = React.useState({ accountId: 'unknown', network: 'unknown' }); + + React.useEffect(() => { + getS3Operator().then(docsOperator => setOperator(docsOperator)); + }, []); + + return unknown}> {() => - window.StratoOperator.network === 'testnet' ? - + operator.network === 'testnet' ? + - {window.StratoOperator.accountId} + {operator.accountId} : - {window.StratoOperator.accountId} + {operator.accountId} } -); +}; + +export const OperatorNetwork = () => { + const [operator, setOperator] = React.useState({ accountId: 'unknown', network: 'unknown' }); + + React.useEffect(() => { + getS3Operator().then(docsOperator => setOperator(docsOperator)); + }, []); -export const OperatorNetwork = () => ( - unknown}> - {() => {window.StratoOperator.network} } + return unknown}> + {() => {operator.network} } -); +}; diff --git a/lib.docs/src/theme/ReactLive/Components/LiveContainer.js b/lib.docs/src/theme/ReactLive/Components/LiveContainer.js index a0cb77b..d090e4e 100644 --- a/lib.docs/src/theme/ReactLive/Components/LiveContainer.js +++ b/lib.docs/src/theme/ReactLive/Components/LiveContainer.js @@ -1,30 +1,27 @@ -import LiveResultContainer from "./LiveResultContainer"; -import LiveEditorContainer from "./LiveEditorContainer"; import * as React from "react"; +import LiveEditorContainer from "./LiveEditorContainer"; +import LiveResultContainer from "./LiveResultContainer"; const LiveContainer = ({hasTopPosition, ...props}) => { - const contaienerElements = [ - { - name: 'editor', - Component: LiveEditorContainer, - props - }, - { - name: 'result', - Component: LiveResultContainer, - props - } - ] + const containerElements = [{ + Component: LiveEditorContainer, + name: 'editor', + props, + }, { + Component: LiveResultContainer, + name: 'result', + props, + }]; - const toRender = hasTopPosition - ? contaienerElements.reverse() - : contaienerElements + const toRender = hasTopPosition + ? containerElements.reverse() + : containerElements - return toRender.map(element => { - const {Component, props, name} = element; + return toRender.map(element => { + const {Component, props, name} = element; - return - }) + return + }) } -export default LiveContainer; \ No newline at end of file +export default LiveContainer; diff --git a/lib.docs/src/theme/ReactLive/Components/LiveEditorContainer.js b/lib.docs/src/theme/ReactLive/Components/LiveEditorContainer.js index 8341cf7..e9bc0de 100644 --- a/lib.docs/src/theme/ReactLive/Components/LiveEditorContainer.js +++ b/lib.docs/src/theme/ReactLive/Components/LiveEditorContainer.js @@ -1,48 +1,46 @@ import * as React from "react"; -import Translate from "@docusaurus/core/lib/client/exports/Translate"; -import useIsBrowser from "@docusaurus/core/lib/client/exports/useIsBrowser"; import {LiveEditor} from "react-live"; -import styles from "../../Playground/styles.module.css"; +import Translate from "@docusaurus/core/lib/client/exports/Translate"; import clsx from "clsx"; +import styles from "../../Playground/styles.module.css"; +import useIsBrowser from "@docusaurus/core/lib/client/exports/useIsBrowser"; const LiveEditorContainer = ({isRunning, onRunAction, onChange, disabled}) => { - return ( - <> -
- + return ( + <> +
+ Live Editor - -
- -
-
+ +
+ -
- - ); + +
+ + ); } function ThemedLiveEditor({onChange, disabled}) { - const isBrowser = useIsBrowser(); - return ( - - ); + const isBrowser = useIsBrowser(); + return ( + + ); } function Header({children}) { - return
{children}
; + return
{children}
; } - - -export default LiveEditorContainer; \ No newline at end of file +export default LiveEditorContainer; diff --git a/lib.docs/src/theme/ReactLive/Components/LiveResultContainer.js b/lib.docs/src/theme/ReactLive/Components/LiveResultContainer.js index ecbcced..a0ed0ba 100644 --- a/lib.docs/src/theme/ReactLive/Components/LiveResultContainer.js +++ b/lib.docs/src/theme/ReactLive/Components/LiveResultContainer.js @@ -1,59 +1,58 @@ -import styles from "../../Playground/styles.module.css"; +import * as React from "react"; import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly"; import {LiveContext} from "react-live"; -import * as React from "react"; import {renderToString} from "react-dom/server"; +import styles from "../../Playground/styles.module.css"; function LivePreviewLoader() { - return
Loading...
; + return
Loading...
; } const LiveResultContainer = ({isRunning, error, errorCallback}) => { - return
- }> - {() => ( - <> - - - - )} - -
+ return
+ }> + {() => ( + <> + + + + )} + +
} const LogsResult = ({isRunning}) => { - const context = React.useContext(LiveContext) - const [logs, setLogs] = React.useState(); - const {element: Element} = context; + const context = React.useContext(LiveContext) + const [logs, setLogs] = React.useState(); + const {element: Element} = context; - React.useEffect(() => { - const logsHTML = Element ? renderToString() : null; + React.useEffect(() => { + const logsHTML = Element ? renderToString() : null; - if (logsHTML) { - setLogs(logsHTML); - } - }, [context]) + if (logsHTML) { + setLogs(logsHTML); + } + }, [context]) - const LiveLogsContainer = Element ?
: null - const LogsResultContainer = logs ?
-
-
: null; + const LiveLogsContainer = Element ?
: null + const LogsResultContainer = logs ?
+
+
: null; - return isRunning ? LiveLogsContainer : LogsResultContainer + return isRunning ? LiveLogsContainer : LogsResultContainer } const ErrorResult = ({error, errorCallback}) => { - const context = React.useContext(LiveContext) - - React.useEffect(() => { - if(context.error) { - errorCallback(context.error) - } + const context = React.useContext(LiveContext) - }, [context]) + React.useEffect(() => { + if(context.error) { + errorCallback(context.error) + } + }, [context]) - return error ?
{error}
: null; + return error ?
{error}
: null; } -export default LiveResultContainer; \ No newline at end of file +export default LiveResultContainer; diff --git a/lib.docs/src/theme/ReactLive/Components/LoadingSpinner.js b/lib.docs/src/theme/ReactLive/Components/LoadingSpinner.js index 3cacf3e..6ed5415 100644 --- a/lib.docs/src/theme/ReactLive/Components/LoadingSpinner.js +++ b/lib.docs/src/theme/ReactLive/Components/LoadingSpinner.js @@ -2,11 +2,11 @@ import * as React from 'react'; import styles from './styles.module.css'; const LoadingSpinner = () => { - return
-
-
-
-
+ return
+
+
+
+
} export default LoadingSpinner; diff --git a/lib.docs/src/theme/ReactLive/LiveEventEmitter.js b/lib.docs/src/theme/ReactLive/LiveEventEmitter.js index 77db9ff..d495f68 100644 --- a/lib.docs/src/theme/ReactLive/LiveEventEmitter.js +++ b/lib.docs/src/theme/ReactLive/LiveEventEmitter.js @@ -1,31 +1,31 @@ class LiveEventEmitter { - constructor() { - this._events = {}; + constructor() { + this._events = {}; + } + + on(name, listener) { + if (!this._events[name]) { + this._events[name] = []; } - on(name, listener) { - if (!this._events[name]) { - this._events[name] = []; - } + this._events[name].push(listener); + } - this._events[name].push(listener); - } + removeListener(name) { + this._events[name] = null; + } - removeListener(name) { - this._events[name] = null; + emit(name, data) { + if (!this._events[name]) { + throw new Error(`Can't emit an event. Event "${name}" doesn't exits.`); } - emit(name, data) { - if (!this._events[name]) { - throw new Error(`Can't emit an event. Event "${name}" doesn't exits.`); - } + const fireCallbacks = (callback) => { + callback(data); + }; - const fireCallbacks = (callback) => { - callback(data); - }; - - this._events[name].forEach(fireCallbacks); - } + this._events[name].forEach(fireCallbacks); + } } export default LiveEventEmitter; \ No newline at end of file diff --git a/lib.docs/src/theme/ReactLive/ReactLive.js b/lib.docs/src/theme/ReactLive/ReactLive.js index ad52d33..bb18922 100644 --- a/lib.docs/src/theme/ReactLive/ReactLive.js +++ b/lib.docs/src/theme/ReactLive/ReactLive.js @@ -1,14 +1,14 @@ import * as React from "react"; -import {LiveProvider} from "react-live"; -import {usePrismTheme} from "@docusaurus/theme-common"; import LiveContainer from "./Components/LiveContainer"; -import LoadingSpinner from "./Components/LoadingSpinner"; import LiveEventEmitter from "../ReactLive/LiveEventEmitter"; -import styles from "../Playground/styles.module.css"; +import {LiveProvider} from "react-live"; +import LoadingSpinner from "./Components/LoadingSpinner"; import clsx from "clsx"; +import styles from "../Playground/styles.module.css"; +import {usePrismTheme} from "@docusaurus/theme-common"; const wrapAsync = (code, containerKey) => { - return ` + return ` const originalApiSession = ApiSession.default; const originalLogger = console.log; @@ -143,104 +143,104 @@ const wrapAsync = (code, containerKey) => { const liveEventEmitter = new LiveEventEmitter(); const ReactLive = ({children: code, playgroundPosition, ...props}) => { - const [disabled, setDisabled] = React.useState(true); - const [updatedCode, setUpdatedCode] = React.useState(code); - const [running, setRunning] = React.useState(false); - const [error, setError] = React.useState(null); - const isMounted = React.useRef(false); - - const prismTheme = usePrismTheme(); - const scope = { - Loader: LoadingSpinner, - liveEventEmitter - }; - - const onRunHandler = (emitterKey) => { - if (emitterKey === props.containerKey) { - setError(null) - } - - setRunning(emitterKey === props.containerKey) - setDisabled(emitterKey !== props.containerKey) + const [disabled, setDisabled] = React.useState(true); + const [updatedCode, setUpdatedCode] = React.useState(code); + const [running, setRunning] = React.useState(false); + const [error, setError] = React.useState(null); + const isMounted = React.useRef(false); + + const prismTheme = usePrismTheme(); + const scope = { + Loader: LoadingSpinner, + liveEventEmitter, + }; + + const onRunHandler = (emitterKey) => { + if (emitterKey === props.containerKey) { + setError(null) } - const onDoneHandler = () => { - setRunning(false) - setDisabled(false) - } + setRunning(emitterKey === props.containerKey) + setDisabled(emitterKey !== props.containerKey) + } - const onErrorHandler = (error) => { - setError(error) - liveEventEmitter.emit(`done`); - } + const onDoneHandler = () => { + setRunning(false) + setDisabled(false) + } - const executionErrorHandler = ({error, emitterKey}) => { - if (emitterKey === props.containerKey) { - setRunning(false); - onErrorHandler(error.toString()) - } - } + const onErrorHandler = (error) => { + setError(error) + liveEventEmitter.emit(`done`); + } - React.useEffect(() => { - isMounted.current = true; - - const waitFor = function (property, callback) { - if (window[property]) { - callback(); - } else { - setTimeout(() => { - waitFor(property, callback); - }, 500); - } - }; + const executionErrorHandler = ({error, emitterKey}) => { + if (emitterKey === props.containerKey) { + setRunning(false); + onErrorHandler(error.toString()) + } + } + + React.useEffect(() => { + isMounted.current = true; + + const waitFor = function (property, callback) { + if (window[property]) { + callback(); + } else { + setTimeout(() => { + waitFor(property, callback); + }, 500); + } + }; - const bindEventListeners = async () => { - waitFor('ApiSession', () => { - if (isMounted.current) { - liveEventEmitter.on(`running`, onRunHandler); - liveEventEmitter.on(`done`, onDoneHandler); - liveEventEmitter.on('executionError', executionErrorHandler) + const bindEventListeners = async () => { + waitFor('ApiSession', () => { + if (isMounted.current) { + liveEventEmitter.on(`running`, onRunHandler); + liveEventEmitter.on(`done`, onDoneHandler); + liveEventEmitter.on('executionError', executionErrorHandler) - setDisabled(false); - } - }) + setDisabled(false); } + }) + } - const unbindEventListeners = () => { - liveEventEmitter.removeListener('running', onRunHandler); - liveEventEmitter.removeListener('done', onDoneHandler); - liveEventEmitter.removeListener('executionError', executionErrorHandler) - } + const unbindEventListeners = () => { + liveEventEmitter.removeListener('running', onRunHandler); + liveEventEmitter.removeListener('done', onDoneHandler); + liveEventEmitter.removeListener('executionError', executionErrorHandler) + } - bindEventListeners(); + bindEventListeners(); - return () => { - isMounted.current = false; - unbindEventListeners(); - }; - }, [props.categoryKey]) - - return - running ? wrapAsync(_code, props.containerKey) : 'render(null)'} - theme={prismTheme} - noInline={true} - disabled={disabled}> - - liveEventEmitter.emit('running', props.containerKey)} - onChange={setUpdatedCode} - disabled={disabled} - error={error} - errorCallback={onErrorHandler} - {...props} - /> - - + return () => { + isMounted.current = false; + unbindEventListeners(); + }; + }, [props.categoryKey]) + + return + running ? wrapAsync(_code, props.containerKey) : 'render(null)'} + theme={prismTheme} + noInline={true} + disabled={disabled}> + + liveEventEmitter.emit('running', props.containerKey)} + onChange={setUpdatedCode} + disabled={disabled} + error={error} + errorCallback={onErrorHandler} + {...props} + /> + + } diff --git a/lib.docs/static/.gitignore b/lib.docs/static/.gitignore deleted file mode 100644 index 0b2fbe6..0000000 --- a/lib.docs/static/.gitignore +++ /dev/null @@ -1 +0,0 @@ -js/ \ No newline at end of file diff --git a/package.json b/package.json index 62b9796..35ad72b 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ "build:bundle-test-rollup": "rollup -c ./test/rollup/rollup.config.js", "build:declarations": "tsc", "build:docs": "run-s build:docs-install-wallet build:bundle-docs build:docs-docusaurus", - "build:docs-docusaurus": "docusaurus build --out-dir=docs lib.docs", + "build:docs-docusaurus": "docusaurus build --out-dir=../docs lib.docs", "build:docs-install-wallet": "cd ./lib.docs/src/hashconnect && npm i", "clean": "run-s clean:bundle-test-rollup clean:cjs clean:esm clean:declarations && docusaurus clear lib.docs", "clean:bundle-test-rollup": "rm -fr test/rollup/lib.esm",