Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update template readme #5

Merged
merged 1 commit into from
Oct 20, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions template/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
50 changes: 24 additions & 26 deletions template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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%
Expand All @@ -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%'];
});
```