22b92ae043
A new writer's first copy used to draw a coloured box. template-map-a.vue now draws the points in data/places.geojson on a basemap with one translated title, through the library's own pieces (useMapInstance, resolveMapProvider, labelFont, emissivePaint). It follows the page's engine, locale (right-to-left included) and token, and with no token it runs on keyless MapLibre, so it works with no account. template-map-b.vue stays as the second-screen example, so the README, the tutorial and the plugin-designer skill (rename a, delete b) stay true. The README gains the map's pieces table and the dx-maps paths. Library change: library/i18n/locales/<11>/template.json (key template.title) is eagerly globbed into every bundle, so consumers need rebuilding (rule 5B).
67 lines
3.5 KiB
JavaScript
67 lines
3.5 KiB
JavaScript
/**
|
|
* plugin-designs/template-bundle/index.js
|
|
*
|
|
* Bundle entry — the minimal, copy-me reference for a MULTI-PROFILE bundle.
|
|
*
|
|
* Folder name = bundle name. This folder builds to exactly one output file:
|
|
* ../../../public/js/template-bundle.js
|
|
*
|
|
* Both profiles in this bundle live as FLAT .vue files DIRECTLY in this folder
|
|
* (template-map-a.vue, template-map-b.vue) — there is NO profiles/ subfolder.
|
|
* That is the whole convention: one folder = one bundle, each `*.vue` in it = one
|
|
* profile, all compiled into the single template-bundle.js.
|
|
*
|
|
* Usage from a host page:
|
|
* <script src="/dx-maps/template-bundle/template-bundle.js"></script>
|
|
* <template-bundle profile-config='{"profile":"template-map-a"}'></template-bundle>
|
|
* <template-bundle profile-config='{"profile":"template-map-b"}'></template-bundle>
|
|
*
|
|
* `profile` must match a .vue filename in THIS folder (without the .vue).
|
|
*/
|
|
|
|
import { defineCustomElement } from 'vue'
|
|
import { createPinia } from 'pinia'
|
|
import ProfileLoader from '@map/ProfileLoader.vue'
|
|
import { createAppI18n } from '@map/i18n/index.js'
|
|
import { registerStrategies } from '@map/colors/_registry.js'
|
|
|
|
// ─── Bundle-private profile registry ─────────────────────────────────────────
|
|
// import.meta.glob is evaluated by Vite at build time relative to THIS file, so
|
|
// it captures only THIS bundle's profiles. The glob is './*.vue' (flat) — it
|
|
// matches template-map-a.vue and template-map-b.vue sitting right here. A
|
|
// profiles/ subfolder would NOT be picked up by this glob; the design is flat.
|
|
// ProfileLoader (in @map) cannot run this glob itself — it lives in a different
|
|
// folder — so the bundle hands the result over via app.provide('profileModules').
|
|
const profileModules = import.meta.glob('./*.vue')
|
|
|
|
// ─── Bundle-private color strategies (the copy-me reference) ─────────────────
|
|
// The SAME seam as profileModules, for colors. Any `<name>.js` in this bundle's
|
|
// `src/colors/` folder is merged OVER the shared library set at init: a file
|
|
// whose derived mode matches a shared one OVERRIDES it; a new mode ADDS a private
|
|
// strategy. This bundle inlines its own registry copy (IIFE build), so this affects
|
|
// THIS bundle only — it can't leak into another map. This template ships
|
|
// `src/colors/example-mode.js` so you have a working pattern to copy. The glob is
|
|
// `*.js`, so `src/colors/colors.json` (plain color VALUES) is ignored by design.
|
|
registerStrategies(import.meta.glob('./src/colors/*.js', { eager: true }))
|
|
|
|
// ─── Register the custom element ─────────────────────────────────────────────
|
|
// One tag per bundle, named after the bundle. The guard prevents an
|
|
// "already registered" error if the IIFE is ever loaded twice on one page.
|
|
const TemplateBundleElement = defineCustomElement(ProfileLoader, {
|
|
configureApp(app) {
|
|
app.use(createPinia())
|
|
// Install i18n AND hand the instance to ProfileLoader by reference. The
|
|
// defineCustomElement root cannot use useI18n() (see ProfileLoader.vue);
|
|
// it drives locale through this provided instance instead.
|
|
const i18n = createAppI18n()
|
|
app.use(i18n)
|
|
app.provide('appI18n', i18n)
|
|
app.provide('profileModules', profileModules)
|
|
}
|
|
})
|
|
|
|
if (typeof customElements !== 'undefined' && !customElements.get('template-bundle')) {
|
|
customElements.define('template-bundle', TemplateBundleElement)
|
|
}
|
|
|
|
export default TemplateBundleElement
|