getting on with petite vue <-> Hugo shortcodes

assets/js/main.ts

@@ -3,20 +3,16 @@ import { createApp } from './lib/petite-vue.es.js'
 createApp({
 	$delimiters: ['{|', '|}'],
 	urlParams: new URL(location.href).searchParams,
-	save
+	mydata: Data(),
 }).mount()
 
-function save(text: string) {
-	console.log(text)
-}
-
-const s: string = 'test-string'
-save(s)
-
-for (let i = 0; i < 10; i++) {
-	  setTimeout(function () {
-		      console.log(i);
-	  }, 100 * i);
+function Data() {
+	return {
+		data: '',
+		save(txt: string) {
+			this.data += '\n' + txt
+		}
+	}
 }
 
 // p = new URL(location.href).searchParams

layouts/shortcodes/input.html

@@ -0,0 +1,11 @@
+<div v-scope>
+  <input type="text" name="txt"
+ 		 @change="mydata.save($el.value)" />
+</div>
+
+<div v-scope>
+  <pre>id = {| urlParams.get('id') |}</pre>
+  <pre v-effect="$el.textContent = mydata.data" ></pre>
+</div>
+
+

layouts/shortcodes/pv-count.html

@@ -1,4 +1,7 @@
-<div v-scope="{ count: 0 }">
-	  {| count |}
-	    <button @click="count++">inc</button>
+{{- $initval := default 0 (.Get "init") -}}
+{{- $expr := .Get "expr" | default "count++" -}}
+{{- $label := or (.Get "label") "inc" -}}
+<div v-scope="{ count: {{ $initval }} }">
+  {| count |}
+  <button @click="{{ $expr }}">{{ $label }}</button>
 </div>