From 87c1c9faca482bd95098539ab2a8d295f5c41a54 Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Sat, 27 Jul 2024 22:38:29 +0200 Subject: [PATCH] chore: update instructions on using CDNs (#48) * 2.1.1 * chore: update readme instructions on using CDNs --- README.md | 9 ++++++--- package.json | 2 +- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index e9bf8e2..c562ea0 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Links: ## Table of Contents 1. [Project Status](#project-status) 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. [Exports](#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 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 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). +### Import via CDN + +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 import { WebComponent } from "https://unpkg.com/web-component-base@latest/index.js" diff --git a/package.json b/package.json index 0235f5d..700b489 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "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", "type": "module", "exports": {