fix: update version to 1.1.0 and upgrade TypeScript to ^5.8.3 in package.json and package-lock.json

source/package-lock.json

@@ -1,14 +1,14 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@funky-flask-test/funky-flask-test",
-      "version": "1.0.1",
+      "version": "1.1.0",
       "devDependencies": {
-        "typescript": "^5.0.0",
+        "typescript": "^5.8.3",
         "vite": "^5.0.0"
       }
     },

source/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@funky-flask-test/funky-flask-test",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "main": "./dist/index.js",
   "exports": {
@@ -19,7 +19,7 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "vite": "^5.0.0",
-    "typescript": "^5.0.0"
+    "typescript": "^5.8.3",
+    "vite": "^5.0.0"
   }
 }

source/src/index.ts

@@ -1,60 +1,27 @@
-let clickCount = 0
+import { h, render, Component } from 'nano-jsx'
 
-export function insertRickLabel(target: HTMLElement | string = document.body): void {
-  const label = document.createElement('div')
-  label.textContent = `Rickroll Me (0)`
-  Object.assign(label.style, {
-    background: 'white',
-    color: 'black',
-    fontFamily: 'sans-serif',
-    padding: '8px 12px',
-    borderRadius: '6px',
-    cursor: 'pointer',
-    boxShadow: '0 0 5px rgba(0,0,0,0.1)',
-    width: 'fit-content',
-    userSelect: 'none',
-    transition: 'all 0.3s ease'
-  })
+class RickLabel extends Component {
+  count = 0
 
-  label.onclick = () => {
-    clickCount++
-    label.textContent = `Rickroll Me (${clickCount})`
-
-    const url =
-      clickCount >= 69
-        ? 'https://youtu.be/soKTQx0p7_Q?list=RDsoKTQx0p7_Q'
-        : 'https://www.youtube.com/watch?v=dQw4w9WgXcQ'
-
-    if (clickCount === 69) {
-      // Activate rainbow effect via CSS animation
-      label.style.animation = 'rainbowBackground 3s linear infinite'
-      label.style.color = 'white'
-    }
-
-    window.open(url, '_blank')
+  handleClick = () => {
+    this.count++
+    window.open('https://www.youtube.com/watch?v=dQw4w9WgXcQ', '_blank')
+    this.update()
   }
 
-  if (typeof target === 'string') {
-    document.querySelector(target)?.appendChild(label)
-  } else {
-    target.appendChild(label)
-  }
-
-  // Inject rainbow animation into page if not already there
-  if (!document.getElementById('rainbow-style')) {
-    const style = document.createElement('style')
-    style.id = 'rainbow-style'
-    style.textContent = `
-      @keyframes rainbowBackground {
-        0% { background: red; }
-        16% { background: orange; }
-        32% { background: yellow; }
-        48% { background: green; }
-        64% { background: blue; }
-        80% { background: indigo; }
-        100% { background: violet; }
-      }
-    `
-    document.head.appendChild(style)
+  render() {
+    return (
+      <div
+        style="background:white; padding:8px 12px; border-radius:6px; cursor:pointer; font-family:sans-serif;"
+        onclick={this.handleClick}
+      >
+        Rickroll Me ({this.count})
+      </div>
+    )
   }
 }
+
+export function insertRickLabel(target: HTMLElement | string = document.body) {
+  const container = typeof target === 'string' ? document.querySelector(target) : target
+  if (container) render(<RickLabel />, container)
+}