diff --git a/leaflet/d1/index.html b/leaflet/d1/index.html index df17e8db3bbcc02c7e294779e16ab76a943db38a..691117f56370cbe51974daad59d3f5b796677e56 100644 --- a/leaflet/d1/index.html +++ b/leaflet/d1/index.html @@ -1,14 +1,15 @@ - - - - - - - Document - - -
- - + + Document + + +
diff --git a/leaflet/d1/index.js b/leaflet/d1/index.js index b33245a1934d7aea3f37397005e5cb53a69bcdf7..41ae5112e0d5ed270ba72889da95b646ce4348df 100644 --- a/leaflet/d1/index.js +++ b/leaflet/d1/index.js @@ -1,7 +1,6 @@ // Import stylesheets -console.log('===') -import './style.css'; -import { Map, TileLayer } from 'leaflet'; +// import './style.css'; +import { Map, TileLayer } from '../lib/leaflet/leaflet-src.esm.js'; // Write Javascript code! const map = new Map('map'); diff --git a/leaflet/d1/style.css b/leaflet/d1/style.css index 565dead9de2d3d879265975acde5a10b32624cdf..b226f83ba77b35c5b8f562eefee45995f3844794 100644 --- a/leaflet/d1/style.css +++ b/leaflet/d1/style.css @@ -1,4 +1,4 @@ -@import '~leaflet/dist/leaflet.css'; +/* @import './leaflet/leaflet.css'; */ html, body { diff --git a/leaflet/lib/inline-module/index.js b/leaflet/lib/inline-module/index.js new file mode 100644 index 0000000000000000000000000000000000000000..c9666bbc10815351c0fd9aa46821f56e5372a925 --- /dev/null +++ b/leaflet/lib/inline-module/index.js @@ -0,0 +1,146 @@ +const loaderMap = window['inline-module-loaders']; + +const currentScript = document.currentScript || document.querySelector('script'); + +// https://github.com/WICG/import-maps +const map = {imports: {}, scopes: {}}; +const installed = new Set(); + +function toBase64(str) { + return btoa(unescape(encodeURIComponent(str))); +} + +function loadContent(url) { + const request = new XMLHttpRequest(); + request.open('GET', url, false); // `false` makes the request synchronous + request.send(null); + + if(request.status === 200) { + return request.responseText; + } + throw new Error(request.statusText); +} + +// replace code +function replaceImport(code, map) { + const importExp = /^(\s*import\s+[\s\S]*?from\s*['"`])([\s\S]*?)(['"`])/img; + return code.replace(importExp, (a, b, c, d) => { + const url = map[c]; + if(url) { + return `${b}${url}${d}`; + } + return `${b}${c}${d}`; + }); +} + +function getBlobURL(module, replaceImportURL = false, map = {}) { + let jsCode = module.textContent; + if(module.hasAttribute('src')) { + const url = module.getAttribute('src'); + jsCode = loadContent(url); + module.textContent = jsCode; + } + if(replaceImportURL) { + jsCode = replaceImport(jsCode, map); + } + let loaders = module.getAttribute('loader'); + if(loaders) { + loaders = loaders.split(/\s*>\s*/); + jsCode = loaders.reduce((code, loader) => { + const {transform, imports} = loaderMap[loader]; + const {code: resolved, map: sourceMap} = transform(code, {sourceMap: true, filename: module.getAttribute('name') || module.id || 'anonymous'}); + if(sourceMap) code = `${resolved}\n\n//# sourceMappingURL=data:application/json;base64,${toBase64(JSON.stringify(sourceMap))}`; + else code = resolved; + Object.assign(map.imports, imports); + return code; + }, jsCode); + } + return createBlob(jsCode, 'text/javascript'); +} + +function createBlob(code, type = 'text/plain') { + const blob = new Blob([code], {type}); + const blobURL = URL.createObjectURL(blob); + return blobURL; +} + +function setup() { + const modules = document.querySelectorAll('script[type="inline-module"]'); + const importMap = {}; + const loadModules = []; + + const importMapEl = document.querySelector('script[type="importmap"]'); + if(importMapEl) { + console.warn('Cannot update importmap after