Throw one error when I try to achieve a pluggable app which can load third party library at runtime

[xiaohulu]

Enhancement

Maybe it's a minority requirement, But I try to use it to achieve a pluggable app.

I am writing a page designer which is a wysiwyg ui editor, I want the designer can load and render third party custom widgets at runtime.

Have two dojo app:

1. first is the app1 which was built with dojo build --mode dist
2. second is the library1 which is also a dojo app, but was built with dojo build --mode dist --single-bundle

app1 is the main app which need to load the third party library by extension(at runtime, not use npm install).

library1 is the third party dojo app which contains custom dojo widgets. library1 has a function to export it's widgets called getWidget(widgetPath: string) which return a widget type.

class Foo extends WidgetBase{}

const map = {"foo": Foo};

function getWidget(widgetPath){
    return map[widgetPath];
}

I try to use <script src=""></script> inject library1 to app1's index.html, then app1 can use library1's widgets to render them, I call the app1 is the pluggable app.

All is fine, but only one thing when app1 renders library1's widgets. I debug it and fount that

framework/src/core/vdom.ts

framework/src/core/vdom.ts

Line 799 in 8334cbe

export const widgetInstanceMap = new WeakMap<WidgetBaseInterface, WidgetData>();

Here use a app scope variable export const widgetInstanceMap

so when library1 called below code to instance a widget, it was stored in the widgetInstanceMap which was in library1 scope, and app1's widgetInstanceMap do not found third party library's widgets

// app1 found a widget which in libaray1's widgetInstanceMap
// so instanceData is null
const instanceData = widgetInstanceMap.get(instance)!;

...

instanceData.invalidate = invalidate;

because instanceData is null, so throw a null error.

Then I override library1's widgetInstanceMap's set method

In library1

import { widgetInstanceMap } from "@dojo/framework/core/vdom";

function watching(func: (key:any, value: any)=> void) {
    widgetInstanceMap .set = function(key: any, value: any) {
        func(key, value);
	return this;
    }
}

Then watching library1's widgetInstanceMap in app1

In app1

import { widgetInstanceMap } from "@dojo/framework/core/vdom";
import library1 from "library1";

library1.watching((key: any, value: any)=>{
    widgetInstanceMap.set(key, value);
});

The app1 found library1's widgets now, and app1 render library1's widget correctly.

Package Version: v6.0

Expected behavior:

The app1's widgetInstanceMap can store the library1's widgetInstanceMap, because in pluggable app, library1 not need to dependent dojo framework, and library1's widgetInstanceMap not need to store the widget instances.

maybe define the widgetInstanceMap like widgetMetaMap(I'm not sure)

// not contains `export`
const widgetMetaMap = new Map<string, WidgetMeta>();

May be need to export widgetMetaMap

maybe then pass widgetInstanceMap to Constructor, so the WidgetBase can use it.

Actual behavior:

app1 and library1 have it's own widgetInstanceMap.

Thanks!

[xiaohulu]

If use function-based widgets, node middleware always return null, because widgetMetaMap in third party library is empty.

[xiaohulu]

May be have some relations dojo/cli-build-widget#54