This means any hooks that plugins might add are added too late , and none is e

Another thing I noticed is that here <div

[Regression] Plugins are loaded too late: after the init process is done about inspire.js HOT 2 CLOSED

DmitrySharabin commented on July 27, 2024

[Regression] Plugins are loaded too late: after the init process is done

from inspire.js.

Comments (2)

DmitrySharabin commented on July 27, 2024

Another thing I noticed is that here

inspire.js/src/inspire.js

Line 54 in f50e735

await Promise.allSettled(this.dependencies);

is expected that this.dependencies is an iterable of promises. However, even though this.dependencies is an iterable (an array), its elements are not promises—they are objects whose properties are promises:

inspire.js/src/plugins.js

Lines 19 to 41 in f50e735

 let plugin = loaded[id] = {}; 

 plugin.loading = pluginURL; 

 plugin.loadedJS = import(pluginURL).then(module => plugin.module = module); 

 plugin.loaded = plugin.loadedJS.then(module => { 

 if (!noCSS && module.hasCSS) { 

 let pluginCSS = new URL(`${path}/${id}/plugin.css`, import.meta.url); 

 plugin.loading = pluginCSS; 

 let link = util.create.in(document.head, `<link rel="stylesheet" href="${pluginCSS}">`); 

 return new Promise((res, rej) => { 

 link.onload = e => res(module); 

 link.onerror = rej; 

 }); 

 } 

 return module; 

 }); 

 // Resolves to the JS module, but only after CSS has also loaded 

 plugin.module = plugin.loaded; 

 plugin.done = plugin.loaded.finally(_ => { 

 plugin.loading = ""; 

 }); 

 return plugin;

Does Promise.allSettled() work in this case?

from inspire.js.

DmitrySharabin commented on July 27, 2024

If we fix the code so that this.dependencies will be an array of promises, the code execution will freeze on this line—the promise corresponding to the live-demo plugin will never be resolved because on this line:

inspire.js/plugins/live-demo/plugin.js

Line 126 in f50e735

await Inspire.slideshowCreated;

The plugin awaits slideshowCreated to be resolved. However, it happens in init() which is called in setup()

inspire.js/src/inspire.js

Line 62 in f50e735

this.init();

after all the plugins should be loaded (and the corresponding promises should be resolved):

This is the line where the slideshowCreated resolves:

inspire.js/src/inspire.js

Line 295 in f50e735

_.slideshowCreated.resolve();

I submitted a PR with a possible fix: #162

@LeaVerou, could you please take a look?

from inspire.js.

Recommend Projects

[Regression] Plugins are loaded too late: after the init process is done about inspire.js HOT 2 CLOSED

Comments (2)

Related Issues (20)

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

	let plugin = loaded[id] = {};
	plugin.loading = pluginURL;
	plugin.loadedJS = import(pluginURL).then(module => plugin.module = module);
	plugin.loaded = plugin.loadedJS.then(module => {
	if (!noCSS && module.hasCSS) {
	let pluginCSS = new URL(`${path}/${id}/plugin.css`, import.meta.url);
	plugin.loading = pluginCSS;
	let link = util.create.in(document.head, `<link rel="stylesheet" href="${pluginCSS}">`);
	return new Promise((res, rej) => {
	link.onload = e => res(module);
	link.onerror = rej;
	});
	}

	return module;
	});
	// Resolves to the JS module, but only after CSS has also loaded
	plugin.module = plugin.loaded;
	plugin.done = plugin.loaded.finally(_ => {
	plugin.loading = "";
	});

	return plugin;