diff --git a/index.js b/index.js index b249066..41edc8b 100644 --- a/index.js +++ b/index.js @@ -17,5 +17,6 @@ import selectors from "./plugin-autoload.js"; const base = new URL("./", import.meta.url); for (let id in selectors) { - registry[id] = { test: selectors[id], base }; + let { test, load } = selectors[id]; + registry[id] = { test, load, base }; } diff --git a/plugin-autoload.js b/plugin-autoload.js index aef7e11..186e1ae 100644 --- a/plugin-autoload.js +++ b/plugin-autoload.js @@ -1,30 +1,54 @@ /** * Plugin registry that maps plugins to selectors that will auto-load them. + * Each entry's loader imports the plugin's `plugin.js` as a static string literal + * (not `import(`./${id}/plugin.js`)`), so import-map/bundler tooling can trace the + * plugin's dependencies; it runs only on a selector match, so nothing loads eagerly. * Any dependencies are managed by the plugin itself. */ export default { - timer: "[data-duration]", - presenter: "details.notes", - "lazy-load": "[data-src]:not(.slide)", - "slide-style": "style[type~='slide'], style[data-slide]", - "slide-script": "script[type~='slide']", - overview: "*", - iframe: ".slide[data-src], .iframe.slide, iframe[data-src]", - prism: "[class*='lang-'], [class*='language-']", - media: "[data-video]", - "live-demo": ".demo.slide", - resolution: "[data-resolution]", - docs: `code.property, .property code, - code.css, .css code, - code.function, .function code, - code.element, .element code, - code.attribute, .attribute code, - code[data-mdn], [data-mdn] code`, - mavo: "[mv-app]", - "visible-keys": "[data-visible-keys]", - "grid-layouts": "[class*='heading-']", - "details-notes": "details.notes", - markdown: "[data-markdown-elements]", - "delayed-actions": "inspire-action", - clone: "[data-clone]", + timer: { test: "[data-duration]", load: () => import("./timer/plugin.js") }, + presenter: { test: "details.notes", load: () => import("./presenter/plugin.js") }, + "lazy-load": { test: "[data-src]:not(.slide)", load: () => import("./lazy-load/plugin.js") }, + "slide-style": { + test: "style[type~='slide'], style[data-slide]", + load: () => import("./slide-style/plugin.js"), + }, + "slide-script": { + test: "script[type~='slide']", + load: () => import("./slide-script/plugin.js"), + }, + overview: { test: "*", load: () => import("./overview/plugin.js") }, + iframe: { + test: ".slide[data-src], .iframe.slide, iframe[data-src]", + load: () => import("./iframe/plugin.js"), + }, + prism: { + test: "[class*='lang-'], [class*='language-']", + load: () => import("./prism/plugin.js"), + }, + media: { test: "[data-video]", load: () => import("./media/plugin.js") }, + "live-demo": { test: ".demo.slide", load: () => import("./live-demo/plugin.js") }, + resolution: { test: "[data-resolution]", load: () => import("./resolution/plugin.js") }, + docs: { + test: `code.property, .property code, + code.css, .css code, + code.function, .function code, + code.element, .element code, + code.attribute, .attribute code, + code[data-mdn], [data-mdn] code`, + load: () => import("./docs/plugin.js"), + }, + mavo: { test: "[mv-app]", load: () => import("./mavo/plugin.js") }, + "visible-keys": { + test: "[data-visible-keys]", + load: () => import("./visible-keys/plugin.js"), + }, + "grid-layouts": { test: "[class*='heading-']", load: () => import("./grid-layouts/plugin.js") }, + "details-notes": { test: "details.notes", load: () => import("./details-notes/plugin.js") }, + markdown: { test: "[data-markdown-elements]", load: () => import("./markdown/plugin.js") }, + "delayed-actions": { + test: "inspire-action", + load: () => import("./delayed-actions/plugin.js"), + }, + clone: { test: "[data-clone]", load: () => import("./clone/plugin.js") }, };