luciddom 1.0.0 → 1.0.2

package/README.md

@@ -2,9 +2,17 @@
 
 LucidDOM.js is a lightweight browser-side DOM helper. It wraps a parent element and provides methods for creating elements, selecting descendants, updating content, handling events, applying inline styles, and removing elements.
 
-## Quick start
+## Installation
 
-Copy `lucidDOM.js` into your project and import its default export from a JavaScript module:
+### npm
+
+Install LucidDOM from npm:
+
+```sh
+npm install luciddom
+```
+
+Import the default export in your app. Use a bundler that resolves npm packages:
 
 ```html
 <div id="app"></div>
@@ -13,7 +21,7 @@ Copy `lucidDOM.js` into your project and import its default export from a JavaSc
 
 ```js
 // app.js
-import LucidDOM from './lucidDOM.js';
+import LucidDOM from 'luciddom';
 
 const app = new LucidDOM(document.querySelector('#app'));
 
@@ -26,6 +34,23 @@ const message = app.addElement({
 message.styles({ color: 'darkslateblue', fontWeight: 'bold' });
 ```
 
+### unpkg CDN
+
+For a browser module without an npm install or bundler, import the package directly from unpkg:
+
+```html
+<div id="app"></div>
+<script type="module">
+    import LucidDOM from 'https://unpkg.com/luciddom@1.0.1/lucidDOM.js';
+
+    const app = new LucidDOM(document.querySelector('#app'));
+    app.addElement({
+        tag: 'p',
+        value: 'Hello from LucidDOM!'
+    });
+</script>
+```
+
 The constructor accepts a DOM element and scopes queries and element creation to it. If no parent is passed, it defaults to `document.body`.
 
 ## Common operations
@@ -114,14 +139,14 @@ When nothing matches, `current` is an empty NodeList and helper methods do nothi
 
 ## Build
 
-The package includes an esbuild script to create a minified ES module bundle:
+The package includes an esbuild script to create a minified browser bundle:
 
 ```sh
 npm install
 npm run build
 ```
 
-The output is written to `dist/lucid.min.js`.
+The output is written to `dist/luciddom.min.js`.
 
 ## Documentation