diff --git a/template/CONTRIBUTING.md b/template/CONTRIBUTING.md index f9ee4cf..3c3db19 100644 --- a/template/CONTRIBUTING.md +++ b/template/CONTRIBUTING.md @@ -27,6 +27,23 @@ For the final build: npm run build ``` + +## Development loader + +For development, you shold load from `dist`: + +```js +mappable.import.loaders.unshift(async (pkg) => { + if (!pkg.startsWith('%PACKAGE_NAME%')) return; + + // Load script from dev server + await mappable.import.script(`./dist/index.js`); + + return window['%PACKAGE_NAME%']; +}); +``` + + ## GitHub actions After you create a new tag, or just push changes to the server, ci will be launched diff --git a/template/README.md b/template/README.md index 9a22efa..75cd811 100644 --- a/template/README.md +++ b/template/README.md @@ -16,7 +16,7 @@ The package is located in the `dist` folder: - `dist/esm` es6 modules for direct connection in your project - `dist/index.js` Mappable JS Module -Recommended use `MMapEntityTileLoader` as usual npm package: +Recommended use `MMapButtonExample` as usual npm package: ```sh npm i %PACKAGE_NAME% @@ -25,42 +25,40 @@ npm i %PACKAGE_NAME% and dynamic import ```js -const {MMapEntityTileLoader} = await import('%PACKAGE_NAME%/dist/esm/index'); -``` - -But you can use CDN with module loading handler in JS API: +await mappable.ready; -### Development +// ... -```js -mappable.import.loaders.unshift(async (pkg) => { - if (!pkg.startsWith('%PACKAGE_NAME%')) { - return; - } +const {MMapButtonExample} = await import('%PACKAGE_NAME%'); - await mappable.import.script(`./node_modules/%PACKAGE_NAME%/dist/index.js`); +// ... - return window['%PACKAGE_NAME%']; -}); +map.addChild(new MMapButtonExample(props)); ``` -### Production +### Usage without npm -```js -mappable.import.loaders.unshift(async (pkg) => { - if (!pkg.includes('%PACKAGE_NAME%')) { - return; - } +You can use CDN with module loading handler in JS API on your page. - // You can use another CDN - await mappable.import.script(`https://unpkg.com/${pkg}/dist/index.js`); +Just use `mappable.import`: - return window[`${pkg}`]; -}); +```js +const pkg = await mappable.import('%PACKAGE_NAME%') ``` -and in your final code just use `mappable.import` +By default `mappable.import` can load self modules. +If you want also load your package, should add `loader`: ```js -const pkg = await mappable.import('%PACKAGE_NAME%') +// Add loader at start loaders array +mappable.import.loaders.unshift(async (pkg) => { + // Process only your package + if (!pkg.includes('%PACKAGE_NAME%')) return; + + // Load script directly. You can use another CDN + await mappable.import.script(`https://unpkg.com/${pkg}/dist/index.js`); + + // Return result object + return window['%PACKAGE_NAME%']; +}); ```