From 252a5659d09a19676246e531a920f58b45beb551 Mon Sep 17 00:00:00 2001
From: Maksim Shtyr <sh.maxim97@gmail.com>
Date: Fri, 20 Oct 2023 15:57:06 +0300
Subject: [PATCH] update template readme

---
 template/CONTRIBUTING.md | 17 ++++++++++++++
 template/README.md       | 50 +++++++++++++++++++---------------------
 2 files changed, 41 insertions(+), 26 deletions(-)

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%'];
+});
 ```