chore: update instructions on using CDNs (#48)

* 2.1.1

* chore: update  readme instructions on using CDNs
This commit is contained in:
Ayo Ayco 2024-07-27 22:38:29 +02:00 committed by GitHub
parent 4445d04208
commit 87c1c9faca
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 4 deletions

View file

@ -20,7 +20,7 @@ Links:
## Table of Contents ## Table of Contents
1. [Project Status](#project-status) 1. [Project Status](#project-status)
1. [Installation](#installation) 1. [Installation](#installation)
1. [Import via unpkg](#import-via-unpkg) 1. [Import via CDN](#import-via-cdn)
1. [Installation via npm](#installation-via-npm) 1. [Installation via npm](#installation-via-npm)
1. [Exports](#exports) 1. [Exports](#exports)
1. [Main Exports](#main-exports) 1. [Main Exports](#main-exports)
@ -55,8 +55,11 @@ In the mean time, if you have some complex needs, we recommend using the `WebCom
## Installation ## Installation
The library is distributed as complete ECMAScript Modules (ESM) and published on [NPM](https://ayco.io/n/web-component-base). Please file an issue in our [issue tracker](https://ayco.io/gh/web-component-base/issues) for problems or requests regarding our distribution. The library is distributed as complete ECMAScript Modules (ESM) and published on [NPM](https://ayco.io/n/web-component-base). Please file an issue in our [issue tracker](https://ayco.io/gh/web-component-base/issues) for problems or requests regarding our distribution.
### Use on the browser via unpkg (no bundlers needed!) ### Import via CDN
Import using [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component. You can replace the version `@latest` in the URL with specific versions. We will use this in the rest of our [usage examples](#usage).
It is possible to import directly using a CDN like [esm.sh](https://esm.sh/web-component-base) or [unpkg](https://unpkg.com/web-component-base) in your vanilla JS component or HTML files. In all examples in this document, we use `unpkg` but you can find on CodePen examples that `esm.sh` also works well.
Additionally, we use `@latest` in the rest of our [usage examples](#usage) here for simplicity, but take note that this incurs additional resolution steps for CDNs to find the actual latest published version. You may replace the `@latest` in the URL with specific versions as shown in our CodePen examples, and this will typically be better for performance.
```js ```js
import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js" import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js"

View file

@ -1,6 +1,6 @@
{ {
"name": "web-component-base", "name": "web-component-base",
"version": "2.1.0", "version": "2.1.1",
"description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily", "description": "A zero-dependency & tiny JS base class for creating reactive custom elements easily",
"type": "module", "type": "module",
"exports": { "exports": {