add handling of events

Author: barelyhuman

src/index.js

@@ -1,9 +1,13 @@
 // https://github.com/justin-schroeder/arrow-js/blob/31c1861075aabe29b67620b58a33c7fecb209c8f/src/html.ts#L166C1-L166C23
 const delimiter = '➳❍'
-const bookend = '❍⇚'
 const delimiterComment = `<!--${delimiter}-->`
+
+//FIXME: Don't really need to handle
+const bookend = '❍⇚'
 const bookendComment = `<!--${bookend}-->`
 
+const eventRegex = /(@)(\w+)=["']$/
+
 export function renderToString(template) {
   const isT = 'isT' in template
 
@@ -17,41 +21,55 @@ export function renderToString(template) {
 
   let htmlString = renderResult[0]
   const expressions = renderResult[1]
-  if (expressions.length > 0) {
-    expressions.forEach(expressionInstance => {
-      const isExpressionReactive = expressionInstance && expressionInstance.e
-      const isExpressionPartial = isExpressionReactive.isT
-
-      if (!isExpressionReactive) {
-        htmlString = htmlString.replace(delimiterComment, expressionInstance())
-        return
-      }
+  const evntsOnIndex = []
+  let index = -1
 
-      if (isExpressionPartial) {
-        htmlString = htmlString.replace(
-          delimiterComment,
-          renderToString(expressionInstance.e)
-        )
-        return
-      }
+  if (!expressions.length) return htmlString
 
-      const watcherReturn = expressionInstance.e()
+  return htmlString.replace(
+    new RegExp(delimiterComment, 'g'),
+    (...matchers) => {
+      const str = matchers[0]
+      const matchedAt = matchers[1]
+      const matchedString = matchers[2]
+      index += 1
 
-      if (
-        typeof watcherReturn !== 'object' &&
-        typeof watcherReturn !== 'function'
-      ) {
-        htmlString = htmlString.replace(delimiterComment, watcherReturn)
-        return
+      const beforeDelim = matchedString.slice(0, matchedAt)
+      const immediatelyFollowed = eventRegex.test(beforeDelim)
+      if (immediatelyFollowed) {
+        return str
       }
+      return interpolateExpressions(str, expressions[index])
+    }
+  )
+}
 
-      if (watcherReturn && watcherReturn.isT) {
-        const _nestedHtmlString = renderToString(watcherReturn)
-        htmlString = htmlString.replace(delimiterComment, _nestedHtmlString)
-        return
-      }
-    })
+function interpolateExpressions(htmlString, expressionInstance) {
+  const isExpressionReactive = expressionInstance && expressionInstance.e
+  const isExpressionPartial = isExpressionReactive.isT
+
+  if (!isExpressionReactive) {
+    return htmlString.replace(delimiterComment, expressionInstance())
+  }
+
+  if (isExpressionPartial) {
+    return htmlString.replace(
+      delimiterComment,
+      renderToString(expressionInstance.e)
+    )
   }
 
-  return htmlString
+  const watcherReturn = expressionInstance.e()
+
+  if (
+    typeof watcherReturn !== 'object' &&
+    typeof watcherReturn !== 'function'
+  ) {
+    return htmlString.replace(delimiterComment, watcherReturn)
+  }
+
+  if (watcherReturn && watcherReturn.isT) {
+    const _nestedHtmlString = renderToString(watcherReturn)
+    return htmlString.replace(delimiterComment, _nestedHtmlString)
+  }
 }

tests/basic.test.js

@@ -23,14 +23,14 @@ test('variable', async () => {
   assert.is(out, '<p>hello world</p>')
 })
 
-test('reactive variable', async () => {
+test('reactive variable type string', async () => {
   const rVar = reactive({ message: 'hello world' })
   const tmp = html`<p>${rVar.message}</p>`
   const out = renderToString(tmp)
   assert.is(out, '<p>hello world</p>')
 })
 
-test('reactive variable nested', async () => {
+test('reactive variable type number', async () => {
   const pageState = reactive({
     count: 0,
   })
@@ -120,4 +120,77 @@ test('Mix match partials and', async () => {
   )
 })
 
+test('events', async () => {
+  const rVar = reactive({ count: 0 })
+  const final = html`<button @click="${() => rVar.count + 1}">
+    ${rVar.count}
+  </button>`
+
+  const out = renderToString(final)
+
+  await inlineSnapshot(
+    out,
+    `<button @click="<!--➳❍-->">
+    0
+  </button>`
+  )
+})
+
+test('multiple events', async () => {
+  const rVar = reactive({ count: 0 })
+  const final = html`<button
+    @click="${() => rVar.count + 1}"
+    @focus="${() => console.log('focus!')}"
+  >
+    ${rVar.count}
+  </button>`
+
+  const out = renderToString(final)
+
+  await inlineSnapshot(
+    out,
+    `<button
+    @click="<!--➳❍-->"
+    @focus="<!--➳❍-->"
+  >
+    0
+  </button>`
+  )
+})
+
+test('nested events', async () => {
+  const rVar = reactive({ count: 0 })
+  const partial = html`
+    <input
+      @focus="${() => {
+        console.log('input focused')
+      }}"
+    />
+  `
+  const final = html`<button
+    value="${() => rVar.count + 1}"
+    @click="${() => rVar.count + 1}"
+    @focus="${() => console.log('focus!')}"
+  >
+    ${rVar.count} ${partial}
+  </button>`
+
+  const out = renderToString(final)
+
+  await inlineSnapshot(
+    out,
+    `<button
+    value="1"
+    @click="<!--➳❍-->"
+    @focus="<!--➳❍-->"
+  >
+    0 
+    <input
+      @focus="<!--➳❍-->"
+    />
+  
+  </button>`
+  )
+})
+
 test.run()