diff --git a/devtools/client/BUILD b/devtools/client/BUILD index c8db5b6c..bdfd55dc 100644 --- a/devtools/client/BUILD +++ b/devtools/client/BUILD @@ -18,8 +18,9 @@ js_pipeline( "//:node_modules/@player-ui/react", "//:node_modules/@devtools-ui/plugin", "//:node_modules/@types/react", - "//:node_modules/dset", "//:node_modules/immer", + "//:node_modules/lodash.set", + "//:node_modules/@types/lodash.set", "//:node_modules/react", "//:node_modules/react-error-boundary", "//:node_modules/dequal", diff --git a/devtools/client/src/state/reducer.ts b/devtools/client/src/state/reducer.ts index 84380ba3..81373831 100644 --- a/devtools/client/src/state/reducer.ts +++ b/devtools/client/src/state/reducer.ts @@ -3,7 +3,7 @@ import type { ExtensionSupportedEvents, Transaction, } from "@player-tools/devtools-types"; -import { dset } from "dset/merge"; +import set from "lodash.set"; import { produce } from "immer"; /** Extension state reducer */ @@ -18,15 +18,15 @@ export const reducer = ( sender, payload: { plugins }, } = transaction; - dset(draft, ["current", "player"], sender); - dset( + set(draft, ["current", "player"], sender); + set( draft, ["current", "plugin"], draft.current.plugin || plugins[Object.keys(plugins)[0]].id ); - dset(draft, ["players", sender, "plugins"], plugins); - dset(draft, ["players", sender, "active"], true); + set(draft, ["players", sender, "plugins"], plugins); + set(draft, ["players", sender, "active"], true); }); case "PLAYER_DEVTOOLS_PLUGIN_FLOW_CHANGE": return produce(state, (draft) => { @@ -35,7 +35,7 @@ export const reducer = ( payload: { flow, pluginID }, } = transaction; - dset(draft, ["players", sender, "plugins", pluginID, "flow"], flow); + set(draft, ["players", sender, "plugins", pluginID, "flow"], flow); }); case "PLAYER_DEVTOOLS_PLUGIN_DATA_CHANGE": return produce(state, (draft) => { @@ -43,7 +43,7 @@ export const reducer = ( sender, payload: { data, pluginID }, } = transaction; - dset( + set( draft, ["players", sender, "plugins", pluginID, "flow", "data"], data @@ -57,17 +57,17 @@ export const reducer = ( return produce(state, (draft) => { const { sender } = transaction; - dset(draft, ["players", sender, "active"], false); + set(draft, ["players", sender, "active"], false); }); case "PLAYER_DEVTOOLS_PLAYER_SELECTED": return produce(state, (draft) => { const { playerID } = transaction.payload; - dset(draft, ["current", "player"], playerID); + set(draft, ["current", "player"], playerID); }); case "PLAYER_DEVTOOLS_PLUGIN_SELECTED": return produce(state, (draft) => { const { pluginID } = transaction.payload; - dset(draft, ["current", "plugin"], pluginID); + set(draft, ["current", "plugin"], pluginID); }); default: return state; diff --git a/devtools/plugins/desktop/basic/BUILD b/devtools/plugins/desktop/basic/BUILD index 201fcfd6..a867e8bf 100644 --- a/devtools/plugins/desktop/basic/BUILD +++ b/devtools/plugins/desktop/basic/BUILD @@ -20,8 +20,9 @@ dependencies = [ "//:node_modules/react", "//:node_modules/immer", "//:node_modules/uuid", + "//:node_modules/lodash.set", + "//:node_modules/@types/lodash.set", "//:node_modules/@types/uuid", - "//:node_modules/dset", "//:node_modules/dequal", ] diff --git a/devtools/plugins/desktop/basic/package.json b/devtools/plugins/desktop/basic/package.json index b513b8a7..b3853d6e 100644 --- a/devtools/plugins/desktop/basic/package.json +++ b/devtools/plugins/desktop/basic/package.json @@ -3,9 +3,9 @@ "version": "0.0.0-PLACEHOLDER", "main": "src/index.tsx", "dependencies": { - "@player-tools/devtools-types": "workspace:*", + "@player-tools/cli": "workspace:*", "@player-tools/devtools-desktop-plugins-common": "workspace:*", - "@player-tools/dsl": "workspace:*", - "@player-tools/cli": "workspace:*" + "@player-tools/devtools-types": "workspace:*", + "@player-tools/dsl": "workspace:*" } } diff --git a/devtools/plugins/desktop/basic/src/WrapperComponent.tsx b/devtools/plugins/desktop/basic/src/WrapperComponent.tsx index 9ef209dd..5dbd7da9 100644 --- a/devtools/plugins/desktop/basic/src/WrapperComponent.tsx +++ b/devtools/plugins/desktop/basic/src/WrapperComponent.tsx @@ -7,8 +7,8 @@ import type { } from "@player-tools/devtools-types"; import type { Flow } from "@player-ui/react"; import { dequal } from "dequal"; -import { dset } from "dset/merge"; import { produce } from "immer"; +import set from "lodash.set"; import React, { useCallback, useEffect } from "react"; import { BASE_PLUGIN_DATA, INTERACTIONS } from "./constants"; import type { Evaluation, WrapperComponentProps } from "./types"; @@ -49,12 +49,11 @@ export const WrapperComponent = ({ payload ) { const result = expEvaluator(payload); - const newState = produce(state, (draft) => { const current: Array = (state?.plugins?.[id]?.flow?.data?.history as Array) || []; - dset( + set( draft, ["plugins", id, "flow", "data", "history"], [...current, result] @@ -95,7 +94,7 @@ export const WrapperComponent = ({ // inject playerConfig into the plugin data const pluginDataWithPlayerConfig = produce(pluginData, (draft) => { - dset(draft, ["flow", "data", "playerConfig"], playerConfig); + set(draft, ["flow", "data", "playerConfig"], playerConfig); }); // Initial plugin content @@ -132,7 +131,7 @@ export const WrapperComponent = ({ if (dequal(state.plugins[id]?.flow?.data?.data, data)) return; const newState = produce(state, (draft) => { - dset(draft, ["plugins", id, "flow", "data", "data"], data); + set(draft, ["plugins", id, "flow", "data", "data"], data); }); const transaction = genDataChangeTransaction({ @@ -149,7 +148,7 @@ export const WrapperComponent = ({ if (dequal(state.plugins[id]?.flow?.data?.logs, logs)) return; const newState = produce(state, (draft) => { - dset(draft, ["plugins", id, "flow", "data", "logs"], logs); + set(draft, ["plugins", id, "flow", "data", "logs"], logs); }); const transaction = genDataChangeTransaction({ @@ -166,7 +165,7 @@ export const WrapperComponent = ({ if (dequal(state.plugins[id]?.flow?.data?.flow, flow)) return; const newState = produce(state, (draft) => { - dset(draft, ["plugins", id, "flow", "data", "flow"], flow); + set(draft, ["plugins", id, "flow", "data", "flow"], flow); }); const transaction = genDataChangeTransaction({ diff --git a/devtools/plugins/desktop/basic/src/index.tsx b/devtools/plugins/desktop/basic/src/index.tsx index e792e3f3..272c49c2 100644 --- a/devtools/plugins/desktop/basic/src/index.tsx +++ b/devtools/plugins/desktop/basic/src/index.tsx @@ -7,7 +7,7 @@ import type { ReactPlayerPlugin, ViewInstance, } from "@player-ui/react"; -import { dset } from "dset/merge"; +import set from "lodash.set"; import { produce } from "immer"; import React from "react"; import { WrapperComponent } from "./WrapperComponent"; @@ -58,7 +58,7 @@ export class BasicWevDevtoolsPlugin implements ReactPlayerPlugin { dataController.hooks.onUpdate.tap(this.name, (updates) => { const newPlayerState = produce(this.data, (draft) => { updates.forEach(({ binding, newValue }) => { - dset(draft, ["data", ...binding.asArray()], newValue); + set(draft, ["data", ...binding.asArray()], newValue); }); }); this.data = newPlayerState; diff --git a/devtools/plugins/desktop/common/BUILD b/devtools/plugins/desktop/common/BUILD index 0e68ad50..8e4ceced 100644 --- a/devtools/plugins/desktop/common/BUILD +++ b/devtools/plugins/desktop/common/BUILD @@ -17,9 +17,10 @@ js_pipeline( deps = [ ":node_modules/@player-tools/devtools-messenger", ":node_modules/@player-tools/devtools-types", - "//:node_modules/dset", "//:node_modules/dequal", "//:node_modules/immer", + "//:node_modules/lodash.set", + "//:node_modules/@types/lodash.set", "//:node_modules/js-flipper", "//:node_modules/tiny-uid", ], diff --git a/devtools/plugins/desktop/common/src/state/reducer.ts b/devtools/plugins/desktop/common/src/state/reducer.ts index 207e4e3d..e1c533ae 100644 --- a/devtools/plugins/desktop/common/src/state/reducer.ts +++ b/devtools/plugins/desktop/common/src/state/reducer.ts @@ -1,5 +1,4 @@ import { produce } from "immer"; -import { dset } from "dset/merge"; import { dequal } from "dequal"; import type { DevtoolsDataChangeEvent, @@ -8,6 +7,7 @@ import type { PlayerInitEvent, Transaction, } from "@player-tools/devtools-types"; +import set from "lodash.set"; const containsInteraction = ( interactions: DevtoolsPluginsStore["interactions"], @@ -25,7 +25,7 @@ export const reducer = ( case "PLAYER_DEVTOOLS_PLAYER_INIT": return produce(state, (draft) => { const { payload } = transaction; - dset(draft, "plugins", payload.plugins); + set(draft, "plugins", payload.plugins); const message: PlayerInitEvent = { type: "PLAYER_DEVTOOLS_PLAYER_INIT", @@ -40,7 +40,7 @@ export const reducer = ( if (!payload.data) return state; - dset( + set( draft.plugins, [transaction.payload.pluginID, "flow", "data"], transaction.payload.data @@ -57,7 +57,7 @@ export const reducer = ( return produce(state, (draft) => { if (containsInteraction(draft.interactions, transaction)) return state; - dset(draft, ["interactions"], [...draft.interactions, transaction]); + set(draft, ["interactions"], [...draft.interactions, transaction]); }); default: return state; diff --git a/devtools/plugins/desktop/profiler/BUILD b/devtools/plugins/desktop/profiler/BUILD index 1dd0437d..193c146a 100644 --- a/devtools/plugins/desktop/profiler/BUILD +++ b/devtools/plugins/desktop/profiler/BUILD @@ -22,8 +22,9 @@ dependencies = [ "//:node_modules/immer", "//:node_modules/uuid", "//:node_modules/@types/uuid", - "//:node_modules/dset", "//:node_modules/dequal", + "//:node_modules/lodash.set", + "//:node_modules/@types/lodash.set", ] dsl_input = "src/content/index.ts" diff --git a/devtools/plugins/desktop/profiler/src/WrapperComponent.tsx b/devtools/plugins/desktop/profiler/src/WrapperComponent.tsx index f3a45395..083b4521 100644 --- a/devtools/plugins/desktop/profiler/src/WrapperComponent.tsx +++ b/devtools/plugins/desktop/profiler/src/WrapperComponent.tsx @@ -6,8 +6,8 @@ import type { Transaction, } from "@player-tools/devtools-types"; import type { Flow } from "@player-ui/react"; -import { dset } from "dset/merge"; import { produce } from "immer"; +import set from "lodash.set"; import React, { useCallback, useEffect } from "react"; import { BASE_PLUGIN_DATA, INTERACTIONS } from "./constants"; import type { WrapperComponentProps } from "./types"; @@ -59,13 +59,13 @@ export const WrapperComponent = ({ lastProcessedInteraction.current += 1; const newState = produce(state, (draft) => { - dset(draft, ["plugins", id, "flow", "data", "rootNode"], { + set(draft, ["plugins", id, "flow", "data", "rootNode"], { name: "root", children: [], }); - dset(draft, ["plugins", id, "flow", "data", "durations"], []); - dset(draft, ["plugins", id, "flow", "data", "profiling"], true); - dset( + set(draft, ["plugins", id, "flow", "data", "durations"], []); + set(draft, ["plugins", id, "flow", "data", "profiling"], true); + set( draft, ["plugins", id, "flow", "data", "displayFlameGraph"], false @@ -86,10 +86,10 @@ export const WrapperComponent = ({ lastProcessedInteraction.current += 1; const newState = produce(state, (draft) => { - dset(draft, ["plugins", id, "flow", "data", "rootNode"], rootNode); - dset(draft, ["plugins", id, "flow", "data", "durations"], durations); - dset(draft, ["plugins", id, "flow", "data", "profiling"], false); - dset( + set(draft, ["plugins", id, "flow", "data", "rootNode"], rootNode); + set(draft, ["plugins", id, "flow", "data", "durations"], durations); + set(draft, ["plugins", id, "flow", "data", "profiling"], false); + set( draft, ["plugins", id, "flow", "data", "displayFlameGraph"], true diff --git a/devtools/plugins/desktop/template/BUILD.hbs b/devtools/plugins/desktop/template/BUILD.hbs index 0e7a2ffa..e073aa6c 100644 --- a/devtools/plugins/desktop/template/BUILD.hbs +++ b/devtools/plugins/desktop/template/BUILD.hbs @@ -21,7 +21,8 @@ dependencies = [ "//:node_modules/immer", "//:node_modules/uuid", "//:node_modules/@types/uuid", - "//:node_modules/dset", + "//:node_modules/lodash.set", + "//:node_modules/@types/lodash.set", "//:node_modules/dequal", ] diff --git a/devtools/plugins/desktop/template/src/WrapperComponent.tsx.hbs b/devtools/plugins/desktop/template/src/WrapperComponent.tsx.hbs index 3161bbd4..c6619091 100644 --- a/devtools/plugins/desktop/template/src/WrapperComponent.tsx.hbs +++ b/devtools/plugins/desktop/template/src/WrapperComponent.tsx.hbs @@ -7,7 +7,7 @@ import type { } from "@player-tools/devtools-types"; import type { Flow } from "@player-ui/react"; import { dequal } from "dequal"; -import { dset } from "dset/merge"; +import set from "lodash.set"; import { produce } from "immer"; import React, { useCallback, useEffect } from "react"; import { BASE_PLUGIN_DATA, INTERACTIONS } from "./constants"; @@ -120,7 +120,7 @@ export const WrapperComponent = ({ if (dequal(state.plugins[id]?.flow?.data?.logs, logs)) return; const newState = produce(state, (draft) => { - dset(draft, ["plugins", id, "flow", "data", "logs"], logs); + set(draft, ["plugins", id, "flow", "data", "logs"], logs); }); const transaction = genDataChangeTransaction({ diff --git a/package.json b/package.json index a948ffeb..f5ac0715 100644 --- a/package.json +++ b/package.json @@ -62,6 +62,7 @@ "@testing-library/user-event": "^14.5.2", "@types/babel__register": "^7.17.0", "@types/fs-extra": "^9.0.13", + "@types/lodash.set": "^4.3.9", "@types/micromatch": "^4.0.2", "@types/mkdirp": "^1.0.2", "@types/node": "^18.18.0", @@ -92,7 +93,6 @@ "dequal": "^2.0.2", "detect-indent": "^6.0.0", "dlv": "^1.1.3", - "dset": "^3.1.3", "duplicate-package-checker-webpack-plugin": "^3.0.0", "easy-table": "1.2.0", "elegant-spinner": "^2.0.0", @@ -117,6 +117,7 @@ "jsonc-parser": "^2.3.1", "lcov-result-merger": "^3.1.0", "lint-staged": "^11.2.3", + "lodash.set": "^4.3.2", "log-symbols": "^4.0.0", "log-update": "^4.0.0", "micromatch": "^4.0.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e9aeeb57..c7ceb181 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,6 +132,9 @@ importers: '@types/fs-extra': specifier: ^9.0.13 version: 9.0.13 + '@types/lodash.set': + specifier: ^4.3.9 + version: 4.3.9 '@types/micromatch': specifier: ^4.0.2 version: 4.0.7 @@ -222,9 +225,6 @@ importers: dlv: specifier: ^1.1.3 version: 1.1.3 - dset: - specifier: ^3.1.3 - version: 3.1.3 duplicate-package-checker-webpack-plugin: specifier: ^3.0.0 version: 3.0.0 @@ -297,6 +297,9 @@ importers: lint-staged: specifier: ^11.2.3 version: 11.2.6 + lodash.set: + specifier: ^4.3.2 + version: 4.3.2 log-symbols: specifier: ^4.0.0 version: 4.1.0 @@ -8720,6 +8723,12 @@ packages: '@types/lodash': 4.17.5 dev: false + /@types/lodash.set@4.3.9: + resolution: {integrity: sha512-KOxyNkZpbaggVmqbpr82N2tDVTx05/3/j0f50Es1prxrWB0XYf9p3QNxqcbWb7P1Q9wlvsUSlCFnwlPCIJ46PQ==, tarball: https://registry.npmjs.org/@types/lodash.set/-/lodash.set-4.3.9.tgz} + dependencies: + '@types/lodash': 4.17.5 + dev: false + /@types/lodash@4.17.5: resolution: {integrity: sha512-MBIOHVZqVqgfro1euRDWX7OO0fBVUUMrN6Pwm8LQsz8cWhEpihlvR70ENj3f40j58TNxZaWv2ndSkInykNBBJw==, tarball: https://registry.npmjs.org/@types/lodash/-/lodash-4.17.5.tgz} dev: false @@ -12154,11 +12163,6 @@ packages: moment: 2.30.1 dev: false - /dset@3.1.3: - resolution: {integrity: sha512-20TuZZHCEZ2O71q9/+8BwKwZ0QtD9D8ObhrihJPr+vLLYlSuAU3/zL4cSlgbfeoGHTjCSJBa7NGcrF9/Bx/WJQ==, tarball: https://registry.npmjs.org/dset/-/dset-3.1.3.tgz} - engines: {node: '>=4'} - dev: false - /duplexify@3.7.1: resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==, tarball: https://registry.npmjs.org/duplexify/-/duplexify-3.7.1.tgz} dependencies: @@ -16008,6 +16012,10 @@ packages: resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==, tarball: https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz} dev: false + /lodash.set@4.3.2: + resolution: {integrity: sha512-4hNPN5jlm/N/HLMCO43v8BXKq9Z7QdAGc/VGrRD61w8gN9g/6jF9A4L1pbUgBLCffi0w9VsXfTOij5x8iTyFvg==, tarball: https://registry.npmjs.org/lodash.set/-/lodash.set-4.3.2.tgz} + dev: false + /lodash.sortby@4.7.0: resolution: {integrity: sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==, tarball: https://registry.npmjs.org/lodash.sortby/-/lodash.sortby-4.7.0.tgz} dev: false