├── LICENSE
├── README.md
├── index.html
├── index.js
└── package.json
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright © 2024-today, Andrea Giammarchi, @WebReflection
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the “Software”), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software
10 | is furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included
13 | in all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
21 | IN THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # data-imports
2 |
3 | **Social Media Photo by [Chris Lawton](https://unsplash.com/@chrislawton) on [Unsplash](https://unsplash.com/)**
4 |
5 | An easy way to use modules without needing tools, published on `npm` to make it even simpler without needing *copy & paste*.
6 |
7 | ### Example
8 | ```html
9 |
10 |
11 |
12 |
13 |
14 |
18 |
19 |
26 |
27 |
28 | ```
29 |
30 | The `data-imports` field accepts comma, spaces, new lines or semicolon separated entries that represent the module name.
31 |
32 | By default the generated `importmap` will use the lovely [esm.run](https://esm.run/) service but if you need to directly serve some file it is possible to use a specialized syntax that will point directly to `cdn.jsdelivr.net/npm` instead:
33 |
34 | ```html
35 |
39 |
43 | ```
44 |
45 | Any item with a `!` char will explicitly point at the specified path after such `!`, lovely handled by *jsdelivr* CDN.
46 |
47 | ## Production
48 |
49 | There's nothing bad in using this module in production too but if that's the case every `https://esm.run/data-imports` as script source should rather point explicitly at `https://cdn.jsdelivr.net/npm/data-imports/index.js` to be sure no extra bytes are ever added to the original script, in here created ad-hoc as "*semantically minified*" [code](./index.js).
50 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | data-imports
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
33 |
37 |
58 |
59 |
60 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | ((i,m,p,o,r,t,s)=>{for(r of i.dataset.imports.split(/[,; \n\r]/)){if(r=r.trim()){[t,...s]=r.split('!');m[t]=`https://${s.length?o:p}/`+t+s.join('!')}}i.replaceWith(Object.assign(document.createElement('script'),{type:'importmap',textContent:JSON.stringify({imports:m})}))})(document.currentScript,{},'esm.run','cdn.jsdelivr.net/npm')
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "data-imports",
3 | "version": "0.1.2",
4 | "type": "module",
5 | "main": "./index.js",
6 | "module": "./index.js",
7 | "exports": {
8 | ".": "./index.js"
9 | },
10 | "keywords": [
11 | "importmap",
12 | "automatic",
13 | "vanilla"
14 | ],
15 | "files": [
16 | "index.js",
17 | "LICENSE",
18 | "README.md"
19 | ],
20 | "author": "Andrea Giammarchi",
21 | "license": "MIT",
22 | "description": "Automatically create an importmap script",
23 | "repository": {
24 | "type": "git",
25 | "url": "git+https://github.com/WebReflection/data-imports.git"
26 | },
27 | "bugs": {
28 | "url": "https://github.com/WebReflection/data-imports/issues"
29 | },
30 | "homepage": "https://github.com/WebReflection/data-imports#readme"
31 | }
32 |
--------------------------------------------------------------------------------