refactor(web)!: pass container to @flecks/web/client.up

Fixes: #9
cha0s · Feb 8, 2024 · 1083b41 · 1083b41
1 parent 9a0a028
commit 1083b41
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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!');
   }