chore: Update CDN script URL in README and index.html

pin705 · Jul 15, 2024 · 6262b5c · 6262b5c
1 parent 4c42ded
commit 6262b5c
Show file tree

Hide file tree

Showing 7 changed files with 259 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -53,7 +53,7 @@ class MyCounterChild extends Cona {}
 #### using `CDN`
 First, add `script` to the `html` file
 ```html
-<script src="https://unpkg.com/cona"></script>
+<script src="https://unpkg.com/@pinjs/cona"></script>
 ```
 
 then, add `script` to the `html` file

diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
   ],
   "scripts": {
     "build": "unbuild",
-    "dev": "vitest dev",
+    "dev": "vite serve ./playground",
     "lint": "eslint . && biome check .",
     "lint:fix": "automd && eslint . --fix && biome check --apply .",
     "prepack": "pnpm build",
@@ -44,6 +44,7 @@
     "jiti": "^1.21.0",
     "typescript": "^5.4.5",
     "unbuild": "^2.0.0",
+    "vite": "^5.3.3",
     "vitest": "^1.5.3"
   },
   "packageManager": "pnpm@9.0.6",

diff --git a/playground/index.html b/playground/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Nho Example</title>
+  </head>
+  <body>
+    <album-list></album-list>
+    <script type="module" src="./main.js"></script>
+  </body>
+</html>
diff --git a/playground/index.ts b/playground/index.ts
diff --git a/playground/main.js b/playground/main.js
@@ -0,0 +1,201 @@
+import { Cona } from "../dist/index.mjs";
+
+Cona.style = `
+  * {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    font-family: system-ui, sans-serif;
+  }
+
+  h1 {
+    margin-bottom: 20px;
+  }
+
+  input {
+    width: 100%;
+    margin-bottom: 20px;
+    border-radius: 0;
+    outline: none;
+    padding: 8px;
+    border: 1px solid black;
+  }
+
+  button {
+    cursor: pointer;
+    border: none;
+    padding: 8px;
+  }
+
+  .selected {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: PaleTurquoise;
+    align-items: center;
+    overflow: auto;
+    padding: 16px;
+  }
+
+  .selected-title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 20px;
+  }
+
+  .selected-close {
+    background: black;
+    color: white;
+  }
+
+  .selected .images, .albums {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+  }
+
+  .selected .image-item {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+
+  .selected .image-item img {
+    height: 48px;
+    width: 48px;
+  }
+
+  .album-item {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+  }
+
+  .album-item button {
+    background: PaleTurquoise;
+    color: blue;
+  }
+`;
+
+class SelectedAlbum extends Cona {
+  render(h) {
+    return h`
+      <div class="selected">
+        <div>
+          <div class="selected-title">
+            <h1>Album ${this.props.album[0].albumId} images</h1>
+            <button onclick=${this.props.hide} class="selected-close">Close</button>
+          </div>
+          <div class="images">
+            ${this.props.album.map(
+              (img) => h`
+              <div class="image-item">
+                <img src=${img.thumbnailUrl} />
+                <div>${img.title}</div>
+              </div>
+            `,
+            )}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+class AlbumItem extends Cona {
+  render(h) {
+    return h`
+      <div class="album-item">
+        <button onclick=${this.props.view}>View album images</button>
+        <div>${this.props.title}</div>
+      </div>
+    `;
+  }
+}
+
+class AlbumList extends Cona {
+  setup() {
+    this.state = this.reactive({
+      albums: [],
+      isFetched: false,
+      selectedAlbum: undefined,
+      search: "",
+    });
+    this.h1Ref = this.ref();
+
+    this.effect(
+      () => this.state.search,
+      (oldValue, newValue) => console.log(oldValue, newValue),
+    );
+  }
+
+  matchedAlbums() {
+    if (!this.state.search) return this.state.albums;
+    return this.state.albums.filter((v) =>
+      v.title.toLowerCase().includes(this.state.search.toLowerCase()),
+    );
+  }
+
+  async onMounted() {
+    const response = await fetch("https://jsonplaceholder.typicode.com/albums");
+    this.state.albums = (await response.json()) || [];
+    this.state.isFetched = true;
+  }
+
+  onUpdated() {
+    console.log("H1 Ref", this.h1Ref?.current);
+  }
+
+  async viewAlbum(id) {
+    const response = await fetch(
+      `https://jsonplaceholder.typicode.com/albums/${id}/photos`,
+    );
+    this.state.selectedAlbum = (await response.json()) || [];
+    document.body.style.overflow = "hidden";
+  }
+
+  hideAlbum() {
+    this.state.selectedAlbum = undefined;
+    document.body.style.overflow = "initial";
+  }
+
+  searchValue(e) {
+    this.state.search = e.target.value;
+  }
+
+  render(h) {
+    if (!this.state.isFetched)
+      return h`<div class="loading">fetching albums...</div>`;
+    if (this.state.albums.length === 0) return h`<div>no albums found</div>`;
+
+    return h`
+      <div>
+        <h1 ref=${this.h1Ref}>Albums</h1>
+        <input
+          placeholder="Search album"
+          value=${this.state.search}
+          oninput=${this.searchValue}
+        />
+        <div class="albums">
+          ${this.matchedAlbums().map(
+            (album) =>
+              h`<album-item p:title=${album.title} p:view=${() =>
+                this.viewAlbum(album.id)}></album-item>`,
+          )}
+        </div>
+        ${
+          this.state.selectedAlbum
+            ? h`<selected-album p:album=${this.state.selectedAlbum} p:hide=${this.hideAlbum}></selected-album>`
+            : ""
+        }
+      </div>
+    `;
+  }
+}
+
+customElements.define("album-list", AlbumList);
+customElements.define("album-item", AlbumItem);
+customElements.define("selected-album", SelectedAlbum);
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/index.ts b/src/index.ts
@@ -114,7 +114,7 @@ export class Cona extends HTMLElement {
         (c as any)._update(true);
       } else if (c.textContent !== n.textContent) replace();
 
-      if (c.attributes) {
+      if (c?.attributes) {
         while (c.attributes.length > 0) c.removeAttribute(c.attributes[0].name);
 
         for (const { name, value } of this._nodeMap(n?.attributes)) {