@vyckr/tachyon 1.1.9 → 1.1.10

package/bun.lock

@@ -8,7 +8,7 @@
         "jsdom": "^26.0.0",
       },
       "devDependencies": {
-        "@types/bun": "^1.2.4",
+        "@types/bun": "~1.2.8",
         "@types/deno": "^2.0.0",
         "@types/jsdom": "^21.1.7",
         "@types/node": "^20.4.2",
@@ -28,7 +28,7 @@
 
     "@csstools/css-tokenizer": ["@csstools/css-tokenizer@3.0.3", "", {}, "sha512-UJnjoFsmxfKUdNYdWgOB0mWUypuLvAfQPH1+pyvRJs6euowbFkFC6P13w1l8mJyi3vxYMxc9kld5jZEGRQs6bw=="],
 
-    "@types/bun": ["@types/bun@1.2.4", "", { "dependencies": { "bun-types": "1.2.4" } }, "sha512-QtuV5OMR8/rdKJs213iwXDpfVvnskPXY/S0ZiFbsTjQZycuqPbMW8Gf/XhLfwE5njW8sxI2WjISURXPlHypMFA=="],
+    "@types/bun": ["@types/bun@1.2.8", "", { "dependencies": { "bun-types": "1.2.7" } }, "sha512-t8L1RvJVUghW5V+M/fL3Thbxcs0HwNsXsnTEBEfEVqGteiJToOlZ/fyOEaR1kZsNqnu+3XA4RI/qmnX4w6+S+w=="],
 
     "@types/deno": ["@types/deno@2.0.0", "", {}, "sha512-O9/jRVlq93kqfkl4sYR5N7+Pz4ukzXVIbMnE/VgvpauNHsvjQ9iBVnJ3X0gAvMa2khcoFD8DSO7mQVCuiuDMPg=="],
 
@@ -44,7 +44,7 @@
 
     "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
 
-    "bun-types": ["bun-types@1.2.4", "", { "dependencies": { "@types/node": "*", "@types/ws": "~8.5.10" } }, "sha512-nDPymR207ZZEoWD4AavvEaa/KZe/qlrbMSchqpQwovPZCKc7pwMoENjEtHgMKaAjJhy+x6vfqSBA1QU3bJgs0Q=="],
+    "bun-types": ["bun-types@1.2.7", "", { "dependencies": { "@types/node": "*", "@types/ws": "*" } }, "sha512-P4hHhk7kjF99acXqKvltyuMQ2kf/rzIw3ylEDpCxDS9Xa0X0Yp/gJu/vDCucmWpiur5qJ0lwB2bWzOXa2GlHqA=="],
 
     "combined-stream": ["combined-stream@1.0.8", "", { "dependencies": { "delayed-stream": "~1.0.0" } }, "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg=="],
 

package/components/clicker.html

@@ -0,0 +1,30 @@
+<script>
+    let title = "Default Title"
+    let description = "Default description for this component"
+    let clicks = 0
+</script>
+
+<div class="card component-card">
+    <h3 class="component-title">{title}</h3>
+    <p>{description}</p>
+    <button @click="clicks++">Clicked {clicks} times</button>
+</div>
+
+<style>
+    .component-card {
+        border-left: 4px solid #2563eb;
+        background-color: #f0f7ff;
+    }
+    .component-title {
+        color: #2563eb;
+        margin-top: 0;
+    }
+
+    .card {
+      background-color: white;
+      border-radius: 8px;
+      padding: 1.5rem;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      margin-bottom: 1rem;
+    }
+</style>

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@vyckr/tachyon",
-  "version": "1.1.9",
+  "version": "1.1.10",
   "author": "Chidelma",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Chidelma/Tachyon.git"
   },
   "devDependencies": {
-    "@types/bun": "^1.2.4",
+    "@types/bun": "~1.2.8",
     "@types/deno": "^2.0.0",
     "@types/jsdom": "^21.1.7",
     "@types/node": "^20.4.2"

package/routes/HTML

@@ -1,28 +1,131 @@
 <script>
-    const { default: dayjs } = await import('/modules/dayjs.js')
-
-    console.log(dayjs().format())
     document.title = "Home"
- 
-    console.log("Hello from JavaScript")
 
-    let greeting = "Hello from HTML!"
+    let count = 0
+    let showInfo = false
+    let newTodo = ''
+    let todos = [
+        { text: "Learn Yon framework", completed: false },
+        { text: "Build an application", completed: false }
+    ]
+
+    let componentTitle = "Component Test"
+    let componentDesc = "This tests custom components in Yon"
+
+    function addTodo() {
+        if (newTodo) {
+            todos = [...todos, { text: newTodo, completed: false }]
+            newTodo = ''
+        }
+    }
 
-    const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
+    function toggleTodo(index) {
+        todos = todos.map((todo, i) => 
+            i === index ? { ...todo, completed: !todo.completed } : todo
+        )
+    }
 
-    const start = 5
+    function removeTodo(index) {
+        todos = todos.filter((_, i) => i !== index)
+    }
 </script>
 
-<h1>${greeting}</h1>
-<input type="text" placeholder="Write Something" :value="greeting" @input="(value) => greeting = value" />
-<br/>
-<ty-counter :count="start" />
-<ty-loop :for="const num of arr">
-    <ty-logic :if="num % 5 === 0">
-        <p>Half way there! Number ${num}</p>
-    </ty-logic>
-    <ty-logic :else>
-        <p>Number ${num}</p>
-    </ty-logic>
+<h1>Yon Framework Test</h1>
+
+<ty-clicker :clicks="count"/>
+  
+<div class="card">
+    <h2>Counter Example</h2>
+    <p>Count: <span>{count}</span></p>
+    <button @click="count++">Increment</button>
+    <button @click="count--">Decrement</button>
+</div>
+
+<h2>Todo List</h2>
+<input type="text" placeholder="Add new todo" :value="newTodo" />
+<button @click="addTodo()">Add</button>
+
+<ty-loop :for="let i = 0; i < todos.length; i++">
+    <div class="todo-item">
+        <input type="checkbox" :checked="todos[i].completed" @change="toggleTodo(i)" />
+        <span :class="todos[i].completed ? 'completed' : ''">{todos[i].text}</span>
+        <button @click="removeTodo(i)" style="margin-left: auto; background-color: #ef4444;">Remove</button>
+    </div>
 </ty-loop>
-<ty-counter :count="start" />
+
+<ty-logic :if="showInfo">
+    <div class="card">
+        <h2>Framework Info</h2>
+        <p>This is testing the conditional rendering feature of the Yon framework.</p>
+        <button @click="showInfo = false">Hide Info</button>
+    </div>
+</ty-logic>
+<ty-logic :else>
+    <div class="card">
+        <button @click="showInfo = true">Show Info</button>
+    </div>
+</ty-logic>
+
+<ty-clicker :clicks="count"/>
+
+<style>
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      line-height: 1.5;
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 1rem;
+      color: #333;
+      background-color: #f5f5f5;
+    }
+
+    .card {
+      background-color: white;
+      border-radius: 8px;
+      padding: 1.5rem;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+      margin-bottom: 1rem;
+    }
+
+    h1 {
+      color: #2563eb;
+    }
+
+    button {
+      background-color: #2563eb;
+      color: white;
+      border: none;
+      border-radius: 4px;
+      padding: 0.5rem 1rem;
+      cursor: pointer;
+      font-size: 1rem;
+    }
+
+    button:hover {
+      background-color: #1d4ed8;
+    }
+
+    input {
+      padding: 0.5rem;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      margin-right: 0.5rem;
+      font-size: 1rem;
+    }
+
+    .todo-item {
+      display: flex;
+      align-items: center;
+      padding: 0.5rem;
+      border-bottom: 1px solid #eee;
+    }
+
+    .todo-item:last-child {
+      border-bottom: none;
+    }
+
+    .completed {
+      text-decoration: line-through;
+      opacity: 0.7;
+    }
+</style>

package/src/client/render.ts

@@ -0,0 +1,417 @@
+let render: Function
+const routes = new Map<string, Record<string, number>>()
+let params: any[] = []
+const slugs: Record<string, any> = {}
+let previousRender: string
+let madeRequest: boolean = false
+let elementId: string | null;
+let selectionStart: number | null;
+const parser = new DOMParser()
+let firstRender = routes.size === 0
+const elementEvents: Record<string, EventListener> = {}
+
+if(firstRender) {
+
+    fetch('/routes.json')
+        .then(res => res.json())
+        .then(data => {
+            for (const [path, slugs] of Object.entries(data)) {
+                routes.set(path, slugs as Record<string, number>)
+            }
+            setPageTemplate(window.location.pathname)
+            firstRender = false
+        })
+}
+
+function mergeBodyHTML(html: string) {
+
+    if(html === previousRender) return
+
+    previousRender = html
+
+    // document.body.innerHTML = html
+
+    if(madeRequest) {
+        document.body.innerHTML = html
+    } else {
+        const nextDom = parser.parseFromString(html, 'text/html')
+        updateDOM(document.body, nextDom.body)
+        deleteDOM(document.body, nextDom.body)
+        insertDOM(document.body, nextDom.body)
+    }
+
+    addEvents()
+
+    if(elementId) {
+
+        const element = document.getElementById(elementId)
+
+        if(element) {
+
+            element.focus()
+
+            if(selectionStart && 'setSelectionRange' in element) {
+
+                (element as HTMLInputElement).setSelectionRange(selectionStart, selectionStart)
+            }
+        }
+
+        elementId = null;
+        selectionStart = null
+    }
+}
+
+function addEvents(elements?: HTMLCollection) {
+
+    if(!elements) elements = document.body.children
+
+    for (const element of elements) {
+        
+        const allEvents: string[] = []
+        
+        for (const attribute of element.attributes) {
+
+            if (attribute.name.startsWith('@')) {
+
+                const event = attribute.name.substring(1)
+
+                allEvents.push(event)
+
+                if(elementEvents[`${element.id}_${event}`]) {
+                    element.removeEventListener(event, elementEvents[`${element.id}_${event}`])
+                }
+
+                elementEvents[`${element.id}_${event}`] = async function(e) {
+
+                    elementId = element.id
+
+                    if (e.target) {
+                      selectionStart = (e.target as HTMLInputElement).selectionStart;
+                    }
+
+                    mergeBodyHTML(await render(elementId))
+                }
+
+                element.addEventListener(event, elementEvents[`${element.id}_${event}`])
+            }
+
+            if(attribute.name.endsWith('ed') && attribute.value === "false") element.removeAttribute(attribute.name)
+        }
+
+        if(element instanceof HTMLSelectElement || element instanceof HTMLInputElement)  {
+
+            element.oninput = async (ev) => {
+                if (ev.target) {
+
+                    elementId = element.id
+                    
+                    if (ev.target) {
+                      selectionStart = (ev.target as HTMLInputElement).selectionStart;
+                    }
+
+                    const evt = { value: (ev.target as any).value, defaultValue: (ev.target as any).defaultValue }
+
+                    mergeBodyHTML(await render(elementId, evt))
+                }
+            }
+        }
+
+        addEvents(element.children)
+    }
+}
+
+async function onClickEvent(ev: MouseEvent) {
+    const target = ev.target as HTMLAnchorElement;
+    if(target?.href) {
+        const url = new URL(target?.href)
+        if(url.origin !== location.origin) return
+        ev.preventDefault()
+        setPageTemplate(url.pathname)
+    } else mergeBodyHTML(await render())
+}
+
+function setPageTemplate(pathname: string) {    
+
+    let url;
+
+    try {
+
+        let handler = getHandler(pathname)
+
+        if(handler === '/') handler = ''
+
+        url = `${handler}/HTML.js`
+    
+    } catch(err) {
+        url = `/404.js`
+    }
+
+    import(`/pages${url}`).then(async module => {
+        window.history.replaceState({}, '', pathname)
+        render = await module.default()
+        madeRequest = true
+        mergeBodyHTML(await render())
+        madeRequest = false
+    })
+}
+
+
+function getHandler(pathname: string) {
+
+    let handler;
+
+    if (pathname === '/') return pathname
+    
+    const paths = pathname.split('/').slice(1);
+
+    let bestMatchKey = '';
+    let bestMatchLength = -1;
+
+    for (const [routeKey] of routes) {
+
+        const routeSegs = routeKey.split('/')
+        
+        const isMatch = pathsMatch(routeSegs, paths.slice(0, routeSegs.length));
+
+        if (isMatch && routeSegs.length > bestMatchLength) {
+            bestMatchKey = routeKey;
+            bestMatchLength = routeSegs.length;
+        }
+    }
+
+    if (bestMatchKey) {
+
+        handler = bestMatchKey
+
+        params = parseParams(paths.slice(bestMatchLength))
+
+        const slugMap = routes.get(bestMatchKey) ?? {}
+
+        Object.entries(slugMap).forEach(([key, idx]) => {
+            key = key.replace(':', '')
+            slugs[key] = paths[idx]
+        })
+    }
+
+    if (!handler) throw new Error(`Route ${pathname} not found`, { cause: 404 });
+
+    return handler
+}
+
+
+function pathsMatch(routeSegs: string[], pathSegs: string[]) {
+
+    if (routeSegs.length !== pathSegs.length) {
+        return false;
+    }
+
+    const slugs = routes.get(routeSegs.join('/')) || {}
+
+    for (let i = 0; i < routeSegs.length; i++) {
+        if (!slugs[routeSegs[i]] && routeSegs[i] !== pathSegs[i]) {
+            return false;
+        }
+    }  
+
+    return true;
+}
+
+
+function parseParams(input: string[]) {
+
+    const params = []
+
+    for(const param of input) {
+
+        const num = Number(param)
+
+        if(!Number.isNaN(num)) params.push(num)
+
+        else if(param === 'true') params.push(true)
+
+        else if(param === 'false') params.push(false)
+
+        else if(param === 'null') params.push(null)
+
+        else if(param === 'undefined') params.push(undefined)
+
+        else params.push(param)
+    }
+
+    return params
+}
+
+Object.keys(window).forEach(key => {
+    if(/^on/.test(key)) {
+        document.addEventListener(key.slice(2), async ev => {
+            
+            switch(ev.type) {
+                case 'click':
+                    await onClickEvent(ev as MouseEvent)
+                    break
+                case 'popstate':
+                    setPageTemplate(window.location.pathname)
+                    break
+                default:
+                    mergeBodyHTML(await render())
+                    break
+            }
+        })
+    }
+})
+
+
+
+/**
+ * Updates existing nodes in oldDOM with properties from newDOM
+ * @param {Node} oldDOM - The current DOM
+ * @param {Node} newDOM - The desired DOM state
+ */
+function updateDOM(oldDOM: Node, newDOM: Node): void {
+  // Skip if nodes are not of the same type
+  if (!areNodesOfSameType(oldDOM, newDOM)) {
+    return;
+  }
+  
+  // If it's a text node, update the content
+  if (oldDOM.nodeType === Node.TEXT_NODE && newDOM.nodeType === Node.TEXT_NODE) {
+    if (oldDOM.textContent !== newDOM.textContent) {
+      oldDOM.textContent = newDOM.textContent;
+    }
+    return;
+  }
+  
+  // If it's an element node, update attributes
+  if (oldDOM.nodeType === Node.ELEMENT_NODE && newDOM.nodeType === Node.ELEMENT_NODE) {
+    // Type assertion since we've already checked nodeType
+    const oldElement = oldDOM as Element;
+    const newElement = newDOM as Element;
+    
+    // Update attributes
+    updateAttributes(oldElement, newElement);
+    
+    // Recursively update children that exist in both DOMs
+    const oldChildren = Array.from(oldDOM.childNodes);
+    const newChildren = Array.from(newDOM.childNodes);
+    
+    const minLength = Math.min(oldChildren.length, newChildren.length);
+    
+    for (let i = 0; i < minLength; i++) {
+      updateDOM(oldChildren[i], newChildren[i]);
+    }
+  }
+}
+
+/**
+ * Deletes nodes from oldDOM that don't exist in newDOM
+ * @param {Node} oldDOM - The current DOM
+ * @param {Node} newDOM - The desired DOM state
+ */
+function deleteDOM(oldDOM: Node, newDOM: Node): void {
+  // If nodes are not of the same type, skip (will be handled by insertDOM)
+  if (!areNodesOfSameType(oldDOM, newDOM)) {
+    return;
+  }
+  
+  // If it's an element node, check children
+  if (oldDOM.nodeType === Node.ELEMENT_NODE && newDOM.nodeType === Node.ELEMENT_NODE) {
+    const oldChildren = Array.from(oldDOM.childNodes);
+    const newChildren = Array.from(newDOM.childNodes);
+    
+    // Remove children that exist in oldDOM but not in newDOM
+    // Start from the end to avoid index shifting issues
+    for (let i = oldChildren.length - 1; i >= newChildren.length; i--) {
+      oldDOM.removeChild(oldChildren[i]);
+    }
+    
+    // Recursively delete for remaining children
+    const minLength = Math.min(oldChildren.length, newChildren.length);
+    for (let i = 0; i < minLength; i++) {
+      deleteDOM(oldChildren[i], newChildren[i]);
+    }
+  }
+}
+
+/**
+ * Inserts nodes from newDOM that don't exist in oldDOM
+ * @param {Node} oldDOM - The current DOM
+ * @param {Node} newDOM - The desired DOM state
+ */
+function insertDOM(oldDOM: Node, newDOM: Node): void {
+  // If nodes are not of the same type, replace the entire node
+  if (!areNodesOfSameType(oldDOM, newDOM)) {
+    if (oldDOM.parentNode) {
+      oldDOM.parentNode.replaceChild(newDOM.cloneNode(true), oldDOM);
+    }
+    return;
+  }
+  
+  // If it's an element node, check children
+  if (oldDOM.nodeType === Node.ELEMENT_NODE && newDOM.nodeType === Node.ELEMENT_NODE) {
+    const oldChildren = Array.from(oldDOM.childNodes);
+    const newChildren = Array.from(newDOM.childNodes);
+    
+    // Add children that exist in newDOM but not in oldDOM
+    for (let i = oldChildren.length; i < newChildren.length; i++) {
+      oldDOM.appendChild(newChildren[i].cloneNode(true));
+    }
+    
+    // Recursively insert for existing children
+    const minLength = Math.min(oldChildren.length, newChildren.length);
+    for (let i = 0; i < minLength; i++) {
+      insertDOM(oldChildren[i], newChildren[i]);
+    }
+  }
+}
+
+/**
+ * Helper function to update attributes of an element
+ * @param {Element} oldElement - The element to update
+ * @param {Element} newElement - The element with the desired attributes
+ */
+function updateAttributes(oldElement: Element, newElement: Element): void {
+  // Remove attributes not in newElement
+  for (const attr of Array.from(oldElement.attributes)) {
+    if (!newElement.hasAttribute(attr.name)) {
+      oldElement.removeAttribute(attr.name);
+    } 
+  }
+  
+  // Add or update attributes from newElement
+  for (const attr of Array.from(newElement.attributes)) {
+    // Use strict equality to ensure empty strings are properly handled
+    if (!attr.name.startsWith('@') && 
+        (oldElement.getAttribute(attr.name) !== attr.value || 
+         (!oldElement.hasAttribute(attr.name) && attr.value === ""))) {
+      if(oldElement.children.length === 0) {
+        oldElement.outerHTML = newElement.outerHTML
+      } else oldElement.setAttribute(attr.name, attr.value)
+    }
+  }
+}
+/**
+ * Helper function to check if two nodes are of the same type
+ * @param {Node} oldNode - The old node
+ * @param {Node} newNode - The new node
+ * @returns {boolean} - Whether the nodes are of the same type
+ */
+function areNodesOfSameType(oldNode: Node, newNode: Node): boolean {
+  // Check if both nodes are defined
+  if (!oldNode || !newNode) {
+    return false;
+  }
+  
+  // Check if node types match
+  if (oldNode.nodeType !== newNode.nodeType) {
+    return false;
+  }
+  
+  // For element nodes, check if tag names match
+  if (oldNode.nodeType === Node.ELEMENT_NODE && newNode.nodeType === Node.ELEMENT_NODE) {
+    const oldElement = oldNode as Element;
+    const newElement = newNode as Element;
+    return oldElement.tagName === newElement.tagName;
+  }
+  
+  return true;
+}