Support code references at any level within extension's properties #9070

vojtechszocs · 2021-05-27T17:44:40Z

With this PR, CodeRef<T> values can appear at any level within extension's properties object.

For example, using the following Console extension declaration

export type Foo = ExtensionDeclaration<'console.foo', {
  bar: CodeRef<VoidFunction>;
  baz: { qux: CodeRef<VoidFunction> };
}>;

both e.properties.bar and e.properties.baz.qux values will be

parsed (EncodedCodeRef to CodeRef) when loading the given plugin
resolved (CodeRef<T> to T) when consumed via useResolvedExtensions hook

Detection of code references (both encoded & executable) relies on a recursive equivalent of _.forOwn function that traverses plain objects and arrays. This means that e.g. CodeRef<VoidFunction>[] (array of code references) properties are supported as well.

cc @bipuladh @christianvogt

vojtechszocs · 2021-05-27T17:54:17Z

frontend/packages/console-dynamic-plugin-sdk/src/utils/store.ts

 export const mergeExtensionProperties = <E extends Extension>(e: E, properties: {}): E =>
  Object.freeze({
    ...e,
-    properties: Object.assign({}, e.properties, properties),
+    properties: _.merge({}, e.properties, properties),


@christianvogt FYI, this change affects translation of strings within extension's properties in useExtensions hook:

mergeExtensionProperties(e, translate(e.properties, t))

There should be no change in above behavior, since the translate function returns the "full" object (except for strings which may get replaced and container arrays & objects having the same content but different referential identity).

@vojtechszocs This is the change which breaks the guided tour! See other comment.

vojtechszocs · 2021-05-27T17:59:40Z

frontend/packages/console-dynamic-plugin-sdk/tsconfig.json

@@ -8,7 +8,8 @@
    "experimentalDecorators": true,
    "sourceMap": true,
    "noUnusedLocals": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "lib": ["es2020", "dom"]


@rawagner @christianvogt FYI, this is a workaround to allow using ES2020 Promise.allSettled types consistently in different modules within the dynamic SDK package.

Based on discussion with @tetchel I think it's best to use "target": "es2020" - I'll post a separate PR for that.

According to Console README

We support the latest versions of the following browsers: - Edge - Chrome - Safari - Firefox IE 11 and earlier is not supported.

Another alternative is to use "target": "es2016" with "lib": ["es2016", "es2020.promise", "dom"] to add specific types we need on top of the existing target spec.

Another alternative is to use "target": "es2016" with "lib": ["es2016", "es2020.promise", "dom"] to add specific types we need on top of the existing target spec.

I've updated the PR to use this approach.

yapei · 2021-06-02T07:53:38Z

Tested with following steps

in one terminal,
$ git clone git@github.com:vojtechszocs/console.git
$ cd console; git checkout nested-coderefs
$ git apply nested-coderefs-plugin-test.diff
$ cd frontend; yarn install
$ cd dynamic-demo-plugin; yarn install; yarn build; yarn http-server

in another terminal,
$ cd /back/to/console/root; ./build.sh
$ ./bin/bridge -plugins console-demo-plugin=http://localhost:9001/

then check browser console logs, we can see

Dynamic plugins: [console-demo-plugin]
Loading plugin manifest from http://localhost:9000/api/plugins/console-demo-plugin/plugin-manifest.json
Loading entry script for plugin console-demo-plugin@0.0.0 from http://localhost:9000/api/plugins/console-demo-plugin/plugin-entry.js
Added plugin console-demo-plugin@0.0.0
main-chunk-7d14ad1bc734ef26df43.min.js:1 Plugin console-demo-plugin@0.0.0 is now enabled
bar.ts:4 testHandler called (e,t)=>{f.b.dispatch(y(e,t))}
bar.ts:8 testing 1
bar.ts:8 testing 2

Both testHandler and testFunc are called and executed

yapei · 2021-06-02T07:55:06Z

/label qe-approved

bipuladh

/lgtm

openshift-bot · 2021-06-03T17:17:44Z

/retest