From 0bb0761ac0e1c8213aa4da5b7f02c3dda780ad33 Mon Sep 17 00:00:00 2001 From: Axel Boberg Date: Sun, 21 Apr 2024 00:45:18 +0200 Subject: [PATCH] Expose shared code as window.shared in the front end app Signed-off-by: Axel Boberg --- app/App.jsx | 4 +- app/utils/apply.js | 120 --------------------------------------------- shared/index.js | 13 +++++ shared/merge.js | 1 + webpack.common.js | 31 +++++++++++- webpack.prod.js | 1 + 6 files changed, 46 insertions(+), 124 deletions(-) delete mode 100644 app/utils/apply.js create mode 100644 shared/index.js diff --git a/app/App.jsx b/app/App.jsx index 200eb9a..43c2933 100644 --- a/app/App.jsx +++ b/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) } diff --git a/app/utils/apply.js b/app/utils/apply.js deleted file mode 100644 index 892ac88..0000000 --- a/app/utils/apply.js +++ /dev/null @@ -1,120 +0,0 @@ -// SPDX-FileCopyrightText: 2022 Sveriges Television AB -// -// SPDX-License-Identifier: MIT - -/** - * Recursively deep merge two objects, - * the source object will be applied - * in place to the target object - * - * @param { any } targetObj - * @param { any } sourceObj - * @returns { any } The target object - */ -export function deepApply (targetObj, sourceObj) { - for (const key of Object.keys(sourceObj)) { - /* - If the $replace keyword is used, - replace the value directly - - { $replace: value } - */ - if (sourceObj[key]?.$replace) { - targetObj[key] = sourceObj[key].$replace - continue - } - - /* - Delete the key if the - $delete keyword is present - - { $delete: true } - */ - if (sourceObj[key]?.$delete) { - if (Array.isArray(targetObj)) { - targetObj.splice(key, 1) - } else { - delete targetObj[key] - } - continue - } - - /* - Insert a value at an index in an array - using a splice operation - - { - $insert: value, - $index: 2, - $delete - } - */ - if ( - Object.prototype.hasOwnProperty.call((sourceObj[key] || {}), '$insert') && - Array.isArray(targetObj[key]) - ) { - targetObj[key].splice(sourceObj[key].$index, 0, sourceObj[key]?.$insert) - continue - } - - /* - If the target object doesn't have - the property, assign it directly - */ - if (!Object.prototype.hasOwnProperty.call(targetObj, key)) { - targetObj[key] = sourceObj[key] - continue - } - - /* - If the current value is primitive, - replace it - */ - if (typeof targetObj[key] !== 'object' && !Array.isArray(targetObj[key])) { - targetObj[key] = sourceObj[key] - continue - } - - /* - Merge arrays by appending the - source array to the target array if the - $push operation is specified - */ - if (Array.isArray(targetObj[key]) && Array.isArray(sourceObj[key].$push)) { - targetObj[key].push(...sourceObj[key].$push) - continue - } - - /* - Merge arrays by using indexes (source[2] will replace target[2] e.t.c.), - this makes arrays behave much like dictionaries - */ - if (Array.isArray(targetObj[key]) && Array.isArray(sourceObj[key])) { - for (let i = 0; i < sourceObj[key].length; i++) { - if ( - targetObj[key][i] && - typeof targetObj[key][i] === 'object' && - sourceObj[key][i] && - typeof sourceObj[key][i] === 'object' - ) { - deepApply(targetObj[key][i], sourceObj[key][i]) - continue - } - targetObj[key][i] = sourceObj[key][i] - } - continue - } - - /* - Assign primitive - values directly - */ - if (typeof sourceObj[key] !== 'object') { - targetObj[key] = sourceObj[key] - continue - } - - deepApply(targetObj[key], sourceObj[key]) - } - return targetObj -} diff --git a/shared/index.js b/shared/index.js new file mode 100644 index 0000000..44dff0c --- /dev/null +++ b/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') + } +} diff --git a/shared/merge.js b/shared/merge.js index 67efdb1..8ce752d 100644 --- a/shared/merge.js +++ b/shared/merge.js @@ -144,4 +144,5 @@ function mergeDeep (targetObj, sourceObj) { } return targetObj } + exports.deep = mergeDeep diff --git a/webpack.common.js b/webpack.common.js index 7dcd9df..737017d 100644 --- a/webpack.common.js +++ b/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', diff --git a/webpack.prod.js b/webpack.prod.js index d30989c..a788bfd 100644 --- a/webpack.prod.js +++ b/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`