diff --git a/packages/react/src/client.js b/packages/react/src/client.js index e9941e6..6ef8544 100644 --- a/packages/react/src/client.js +++ b/packages/react/src/client.js @@ -11,10 +11,8 @@ const debug = D('@flecks/react/client'); export {FlecksContext}; export const hooks = { - '@flecks/web/client.up': async (flecks) => { + '@flecks/web/client.up': async (container, flecks) => { const {ssr} = flecks.get('@flecks/react'); - const {appMountId} = flecks.get('@flecks/web'); - const container = window.document.getElementById(appMountId); debug('%sing...', ssr ? 'hydrat' : 'render'); const RootComponent = React.createElement( React.StrictMode, diff --git a/packages/redux/src/client/index.js b/packages/redux/src/client/index.js index 6ee1e22..93f79f0 100644 --- a/packages/redux/src/client/index.js +++ b/packages/redux/src/client/index.js @@ -5,7 +5,7 @@ import localStorageEnhancer from './local-storage'; export const hooks = { '@flecks/web/client.up': Flecks.priority( - async (flecks) => { + async (container, flecks) => { const slices = await flecks.invokeMergeUniqueAsync('@flecks/redux.slices'); const reducer = await createReducer(flecks, slices); // Hydrate from server. diff --git a/packages/socket/src/client/index.js b/packages/socket/src/client/index.js index 99ceb8e..ac2d6d2 100644 --- a/packages/socket/src/client/index.js +++ b/packages/socket/src/client/index.js @@ -1,7 +1,7 @@ import SocketClient from './socket'; export const hooks = { - '@flecks/web/client.up': async (flecks) => { + '@flecks/web/client.up': async (container, flecks) => { const socket = new SocketClient(flecks); flecks.socket.client = socket; await socket.connect(); diff --git a/packages/web/build/flecks.hooks.js b/packages/web/build/flecks.hooks.js index 5aada99..efcaebe 100644 --- a/packages/web/build/flecks.hooks.js +++ b/packages/web/build/flecks.hooks.js @@ -1,9 +1,12 @@ export const hooks = { /** * Define sequential actions to run when the client comes up. + * + * @param {Element} container The root DOM element of the application. + * * @invoke SequentialAsync */ - '@flecks/web/client.up': async () => { + '@flecks/web/client.up': async (container) => { await youCanDoAsyncThingsHere(); }, /** diff --git a/packages/web/src/server/build/entry.js b/packages/web/src/server/build/entry.js index 86cf56d..a1e10e2 100644 --- a/packages/web/src/server/build/entry.js +++ b/packages/web/src/server/build/entry.js @@ -56,8 +56,10 @@ const {version} = require('@flecks/web/package.json'); try { const flecks = await Flecks.from(runtime); window.flecks = flecks; - await flecks.invokeSequentialAsync('@flecks/web/client.up'); - const appMountContainerId = `#${config['@flecks/web'].appMountId}-container`; + const containerId = `#${config['@flecks/web'].appMountId}`; + const container = window.document.querySelector(containerId); + await flecks.invokeSequentialAsync('@flecks/web/client.up', container); + const appMountContainerId = `${containerId}-container`; window.document.querySelector(appMountContainerId).style.display = 'block'; debug('up!'); }