Update documentation

knowler · Feb 5, 2025 · 5d30f41 · 5d30f41
1 parent d4cb2a3
commit 5d30f41
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -2,15 +2,38 @@
 
 [![JSR](https://jsr.io/badges/@knowler/log-form-element)](https://jsr.io/@knowler/log-form-element)
 
-Wrap a `<form>` element with this `<log-form-element>` and it’ll prevent the
-default submission and log the form data to the console instead. [See the demo on CodePen](https://codepen.io/knowler/pen/zYembKY).
+Wrap a `<form>` element with this `<log-form>` and it’ll prevent the
+default submission and log the form data to the console instead.
 
-```js
-import { LogFormElement } from "https://esm.sh/gh/knowler/log-form-element/log-form-element.js?raw";
+[See the demo](https://knowler.github.io/log-form-element/demo).
+
+## Usage
+
+The element is published on JSR (which can be used as an NPM registry) or you
+can use a CDN like esm.sh to import the module.
+
+By default, the module exports the class for you to define yourself. The class
+has a `define()` method which can be used to easily define the element either
+using a default tag name of `log-form` or whatever one you pass it.
+
+```javascript
+import { LogFormElement } from "https://esm.sh/jsr/@knowler/log-form-element";
 
 LogFormElement.define();
 ```
 
+You can also add a `?define` search param to the module’s URL which it’ll use to
+automatically register the custom element using the default tag name. If you are
+using a CDN, you might need to add a `?raw` param so that the `define` param
+applies to module URL itself.
+
+```html
+<script type=module src="https://esm.sh/jsr/@knowler/log-form-element?raw&define"></script>
+```
+
+Once the element is registered. You can wrap `<form>` elements with it and then
+open your console to debug submission.
+
 ```html
 <log-form>
 	<form>

diff --git a/demo-define-api.html b/demo-define-api.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="dark light">
-    <script type="module" src="./log-form-element.js?define"></script>
+    <script type="module" src="https://esm.sh/jsr/@knowler/log-form-element?raw&define"></script>
   </head>
   <body>
 		<h1><code>&lt;log-form&gt;</code> element demonstration</h1>

diff --git a/demo.html b/demo.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="color-scheme" content="dark light">
     <script type="module">
-      import { LogFormElement } from "./log-form-element.js";
+			import { LogFormElement } from "https://esm.sh/jsr/@knowler/log-form-element?raw";
 
       LogFormElement.define();
     </script>

diff --git a/jsr.json b/jsr.json
@@ -1,6 +1,6 @@
 {
 	"name": "@knowler/log-form-element",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"exports": "./log-form-element.js",
 	"license": "Unlicense",
 	"publish": {