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) {
+function Data() {
-	console.log(text)
+	return {
-}
+		data: '',
-
+		save(txt: string) {
-const s: string = 'test-string'
+			this.data += '\n' + txt
-save(s)
+		}
-
+	}
-for (let i = 0; i < 10; i++) {
-	  setTimeout(function () {
-		      console.log(i);
-	  }, 100 * i);
 }
 
 // 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 }">
+{{- $initval := default 0 (.Get "init") -}}
-	  {| count |}
+{{- $expr := .Get "expr" | default "count++" -}}
-	    <button @click="count++">inc</button>
+{{- $label := or (.Get "label") "inc" -}}
+<div v-scope="{ count: {{ $initval }} }">
+  {| count |}
+  <button @click="{{ $expr }}">{{ $label }}</button>
 </div>