Expose shared code as window.shared in the front end app

Signed-off-by: Axel Boberg <[email protected]>

app/App.jsx

@@ -8,8 +8,6 @@ import { SocketContext } from './socketContext'
 
 import { useWebsocket } from './hooks/useWebsocket'
 
-import { deepApply } from './utils/apply'
-
 import * as shortcuts from './utils/shortcuts'
 import * as browser from './utils/browser'
 import * as api from './api'
@@ -181,7 +179,7 @@ export default function App () {
     be sure to copy the current state
     or React won't treat it as an update
     */
-    const newLocal = deepApply({ ...localRef.current }, data)
+    const newLocal = window?.shared?.merge?.deep({ ...localRef.current }, data)
     setLocal(newLocal)
   }
 

shared/index.js

@@ -0,0 +1,13 @@
+// SPDX-FileCopyrightText: 2024 Sveriges Television AB
+//
+// SPDX-License-Identifier: MIT
+
+/*
+Expose the shared utils as window.bridge
+if we're running in a browser
+*/
+if (typeof window !== 'undefined') {
+  window.shared = {
+    merge: require('./merge')
+  }
+}

shared/merge.js

@@ -144,4 +144,5 @@ function mergeDeep (targetObj, sourceObj) {
   }
   return targetObj
 }
+
 exports.deep = mergeDeep

webpack.common.js

@@ -65,6 +65,35 @@ module.exports = [
       ]
     }
   }),
+
+  merge({ ...DEFAULT_CONFIG }, {
+    name: 'shared',
+    entry: {
+      shared: './shared'
+    },
+    module: {
+      rules: [
+        {
+          test: /\.(js)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-env', '@babel/preset-react'],
+              plugins: [
+                [
+                  '@babel/plugin-transform-runtime',
+                  { regenerator: true }
+                ]
+              ],
+              sourceType: 'script'
+            }
+          }
+        }
+      ]
+    }
+  }),
+
   merge({ ...DEFAULT_CONFIG }, {
     name: 'api',
     entry: {
@@ -78,7 +107,7 @@ module.exports = [
     module: {
       rules: [
         {
-          test: /\.(js|jsx)$/,
+          test: /\.(js)$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',

webpack.prod.js

@@ -35,6 +35,7 @@ const prod = {
         the server to /app/template.js
         */
         assets: [
+          `${hash}.shared.bundle.js`,
           `${hash}.app.bundle.css`,
           `${hash}.app.bundle.js`,
           `${hash}.api.bundle.js`