| 1 | <div align="center">
|
| 2 | <img src="https://github.com/marshallcb/skypin/raw/main/meta/skypin.png" alt="Skypin Logo" width="300" />
|
| 3 | </div>
|
| 4 |
|
| 5 | <h1 align="center">skypin</h1>
|
| 6 |
|
| 7 | <h3 align="center">Convert NPM imports into Skypack Pinned URL's</h3>
|
| 8 |
|
| 9 | <div align="center">
|
| 10 | <a href="https://npmjs.org/package/skypin">
|
| 11 | <img src="https://badgen.now.sh/npm/v/skypin" alt="version" />
|
| 12 | </a>
|
| 13 | <a href="https://packagephobia.com/result?p=skypin">
|
| 14 | <img src="https://badgen.net/packagephobia/install/skypin" alt="install size" />
|
| 15 | </a>
|
| 16 | <a href="https://bundlephobia.com/result?p=skypin">
|
| 17 | <img src="https://img.badgesize.io/MarshallCB/skypin/main/es.js?compression=brotli" alt="browser size" />
|
| 18 | </a>
|
| 19 | </div>
|
| 20 |
|
| 21 |
|
| 22 | ## About
|
| 23 |
|
| 24 | Skypack is a CDN built for browser modules. This module converts npm module id's into the optimized Skypack URL for optimal performance. Read more [here](https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized). This could be used in build tools (like [rollup](https://github.com/MarshallCB/rollup-plugin-skypin)) to convert source code into browser-optimized modules.
|
| 25 |
|
| 26 | ## Usage
|
| 27 |
|
| 28 | **NodeJS**
|
| 29 | ```js
|
| 30 | import { skypin } from 'skypin';
|
| 31 |
|
| 32 | // Uses version of package found in node_modules (if it exists - otherwise 'latest')
|
| 33 | await skypin('hueman')
|
| 34 | // ~> https://cdn.skypack.dev/pin/hueman@v2.1.1-ElNqhC8YFxLlgRtjjL9o/min/hueman.js
|
| 35 |
|
| 36 | await skypin('hueman', { pin: false })
|
| 37 | // ~> https://cdn.skypack.dev/hueman@2.1.1
|
| 38 |
|
| 39 | await skypin('hueman', { min: false })
|
| 40 | // ~> https://cdn.skypack.dev/hueman@2.1.1
|
| 41 |
|
| 42 | // Specify version directly
|
| 43 | await skypin('hueman@2.0.0')
|
| 44 | // ~> https://cdn.skypack.dev/pin/hueman@v2.0.0-Eh8v1x3dV0iEyJ9rG915/min/hueman.js
|
| 45 |
|
| 46 | ```
|
| 47 |
|
| 48 | **Browser** [Codepen](https://codepen.io/marshallcb/pen/qBaaJRY?editors=0011)
|
| 49 | ```js
|
| 50 | import { skypin } from 'https://cdn.skypack.dev/skypin'
|
| 51 |
|
| 52 | await skypin('hueman')
|
| 53 | ```
|
| 54 |
|
| 55 | ## API
|
| 56 |
|
| 57 | #### `skypin(module_id, options)` -> `URL`
|
| 58 | - `module_id`: String that identifies the package in npm (`hueman`, `uhtml@latest`, `themepark@1.0.0`, etc.) (version number optional)
|
| 59 | - `options`:
|
| 60 | - `pin`: Boolean (default `true`). Read more [here](https://docs.skypack.dev/skypack-cdn/api-reference/pinned-urls-optimized)
|
| 61 | - `min`: Boolean (default `true`). Based on normal vs. minified in skypack lookup page
|
| 62 | - **Returns**: Promise that resolves to URL that can be used as an import statement in the browser
|
| 63 |
|
| 64 | Uses the version of the package found in `node_modules`. Requires that the module has been installed to the current working directory. May take a few seconds if the package has not been "pinned" on skypack before.
|
| 65 |
|
| 66 | ## References
|
| 67 |
|
| 68 | - [Skypack](https://skypack.dev/)
|
| 69 |
|
| 70 | ## License
|
| 71 |
|
| 72 | MIT © [Marshall Brandt](https://m4r.sh)
|