61 lines
3 KiB
JavaScript
61 lines
3 KiB
JavaScript
/**
|
|
* plugin-studio / index.js — Bundle entry (Capability-5 nested-mfe-spa / app-shell).
|
|
*
|
|
* ONE folder -> ONE bundle -> ONE custom element: <plugin-studio>.
|
|
*
|
|
* <plugin-studio> is the DEVELOPER STUDIO of the whole DX-maps system: a vertical-tab layout whose
|
|
* sidebar is the composability ladder grouped by CAPABILITY (5 -> 1); each row nests that element
|
|
* (token-free elements mounted directly by their real tag; map elements nested as their own SPA in
|
|
* a lazy iframe) with its embed snippet. It is the spot to SEE every plugin element work and review
|
|
* it. See plugin-studio.vue for the full why.
|
|
*
|
|
* ★ WHY AN ELEMENT (not an index.html page): every plugin in this system is a compiled Vue custom
|
|
* element so it supports all five deployment methods and can compose. The studio is a plugin, so
|
|
* it is a real element too. A page could only be iframed and could never be nested as a tab of
|
|
* another cap-5 shell.
|
|
*
|
|
* ★ ONE-SHOT-DEFINE SAFETY: the ONLY tag this bundle registers is <plugin-studio>. It NEVER
|
|
* imports another plugin's components and NEVER re-registers a tag another bundle owns. The
|
|
* nested elements register their own tags when THEIR IIFE loads (direct-mount rows) or run in
|
|
* their own document (iframe rows). So loading this bundle beside any other can never collide.
|
|
*
|
|
* ★ TREE BASE: to find each element's built .js / leaf page + the manifest, the shell needs the
|
|
* built tree's root URL. We derive it HERE, at IIFE load, from this script's own URL
|
|
* (.../doxa-maps/plugin-studio/plugin-studio.js) -> two levels up = the tree root. Provided to
|
|
* the Vue app; a host can override with tree-base="" or profile-config.treeBase.
|
|
*
|
|
* Usage from a host page (direct-JS, deploy-method-3):
|
|
* <script src="/doxa-maps/plugin-studio/plugin-studio.js"></script>
|
|
* <plugin-studio></plugin-studio>
|
|
* <!-- or pin the tree explicitly: -->
|
|
* <plugin-studio tree-base="https://your-host/doxa-maps"></plugin-studio>
|
|
*/
|
|
|
|
import { defineCustomElement } from 'vue'
|
|
import PluginStudio from './plugin-studio.vue'
|
|
|
|
// Capture the running <script>'s own URL synchronously at IIFE load, BEFORE any async runs, so
|
|
// document.currentScript is still this bundle's tag. Derive the tree root = two levels up
|
|
// (.../doxa-maps/plugin-studio/plugin-studio.js -> .../doxa-maps/). Guarded for non-browser.
|
|
function deriveTreeBase() {
|
|
try {
|
|
const cur = (typeof document !== 'undefined' && document.currentScript && document.currentScript.src) || ''
|
|
if (!cur) return ''
|
|
const root = cur.replace(/[^/]+\/[^/]+$/, '')
|
|
return root.replace(/\/+$/, '') + '/'
|
|
} catch { return '' }
|
|
}
|
|
const TREE_BASE = deriveTreeBase()
|
|
|
|
const PluginStudioElement = defineCustomElement(PluginStudio, {
|
|
configureApp(app) {
|
|
// Hand the derived tree root to the component (props/attrs still override it).
|
|
app.provide('psTreeBase', TREE_BASE)
|
|
}
|
|
})
|
|
|
|
if (typeof customElements !== 'undefined' && !customElements.get('plugin-studio')) {
|
|
customElements.define('plugin-studio', PluginStudioElement)
|
|
}
|
|
|
|
export default PluginStudioElement
|