@vyckr/tachyon 1.1.10 → 1.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vyckr/tachyon",
-  "version": "1.1.10",
+  "version": "1.1.11",
   "author": "Chidelma",
   "repository": {
     "type": "git",

package/routes/HTML

@@ -28,6 +28,10 @@
     function removeTodo(index) {
         todos = todos.filter((_, i) => i !== index)
     }
+
+    function propEvent() {
+      console.log('prop event')
+    }
 </script>
 
 <h1>Yon Framework Test</h1>
@@ -66,7 +70,7 @@
     </div>
 </ty-logic>
 
-<ty-clicker :clicks="count"/>
+<ty-clicker :clicks="count" @click="propEvent()"/>
 
 <style>
     body {

package/src/client/yon.ts

@@ -186,21 +186,25 @@ export default class Yon {
                         .replaceAll(/`<\/ty-(\w+)\s*>`/g, '')
                         .replaceAll(/`<ty-([a-zA-Z0-9-]+)(?:\s+([^>]*))>`/g, (match, component, atrributes) => {
                          
-                            const matches = atrributes.matchAll(/([a-zA-Z0-9-]+)="([^"]*)"/g)
+                            const matches = atrributes.matchAll(/([a-zA-Z0-9-@]+)="([^"]*)"/g)
 
-                            const exports: string[] = []
+                            const props: string[] = []
+                            const events: string[] = []
+
+                            const hash = Bun.randomUUIDv7().split('-')[3]
                             
                             for(const [_, key, value] of matches) {
-                                exports.push(`${key}=${value}`)
+                                if(key.startsWith('@')) events.push(`${key}="${value.replace(/(ty_invokeEvent\(')([^"]+)(',[^)]+\))/g, `$1${hash}$3`)}"`)
+                                else props.push(`${key}=${value}`)
                             }
-                            
-                            const hash = Bun.randomUUIDv7().split('-')[3]
+
+                            const genId = "${ty_generateId('" + hash + "', 'id')}"
                             
                             return `
-                                elements += '<div>'
+                                elements += \`<div id="${genId}" ${events.join(' ')}>\`
 
                                 if(!compRenders.has('${hash}')) {
-                                    render = await ${component}(\`${exports.join(';')}\`)
+                                    render = await ${component}(\`${props.join(';')}\`)
                                     elements += await render(elemId, event, '${hash}')
                                     compRenders.set('${hash}', render)
                                 } else {