first step of refactoring: separate backend- (API-) specific stuff from generic one

assets/js/common.ts

@@ -3,30 +3,26 @@
 import { createApp } from 'petite-vue'
 import { Data } from './comp-data'
 
-import { domain, nopoll } from '@params'
+import { domain } from '@params'
 
 type Config = {
-	apiurl: string
-	pollurl: string
 	domain: string
 	itemid: string
 	sid: string
 	iid: string
-	nopoll: boolean
+	apiurl: string
+	pollurl: string
 }
 
-export function config (api, polling): Config {
-	const pu = polling ? `${api.path}/${polling.msgbase.join('/')}` : ''
-	//const urlparams = new URL(location.href).searchParams
+export function config (api): Config {
+	const pu = api.polling ? `${api.path}/${api.polling.msgbase.join('/')}` : ''
 	return { 
-		apiurl: api.path, 
-		pollurl: pu, 
 		domain: domain,
-		//itemid: urlparams.get('id'),
 		itemid: location.hash.substring(1),
 		sid: getSid(),
 		iid: createRandString(1),
-		nopoll: nopoll
+		apiurl: api.path, 
+		pollurl: pu, 
 	}
 }
 
@@ -36,8 +32,8 @@ export const pvapp = {
 		for (const comp of components) {
 			appdata[comp.name] = comp
 		}
-		if (appdata.conf.pollurl && !appdata.conf.nopoll) {
-			appdata.poll()
+		if (appdata.conf.pollurl) {
+			poll(appdata)
 		}
 		createApp(appdata).mount()
 	}
@@ -47,22 +43,28 @@ const appdata = {
 	$delimiters: ['{|', '|}'],
 	conf: {} as Config,
 	components: {},
-	output: '', // debug output space
 	register,
-	handle,
-	poll,
-	Data
+	sendMsg
 }
 
-// App (appdata) methods
+// generic App (appdata) methods
 
 function register(name: string, comp: any) {
 	this.components[name] = comp
 }
 
-function handle(msg) {
+// specific App (appdata) methods
+
+export async function sendMsg(basemsg: string[], data: any) {
+	const url = `${this.conf.apiurl}/${basemsg.join('/')}`
+	await send(url, this.conf, data)
+}
+
+// common functions
+
+function handle(app, msg) {
 	const [ domain, action, class_, item ] = msg.path.split('/')
-	const comp = this.components[class_ || 'data']
+	const comp = app.components[class_ || 'data']
 	if (domain && domain != comp.domain) {
 		return
 	}
@@ -71,16 +73,7 @@ function handle(msg) {
 	}
 }
 
-function poll() {
-	dopoll(this)
-}
-
-// basic functions - move to api.ts
-
-export async function sendMsg(conf: Config, basemsg: string[], data: any) {
-	const url = `${conf.apiurl}/${basemsg.join('/')}`
-	await send(url, conf, data)
-}
+// app-specific functions
 
 async function send(url: string, conf: Config, data: any) {
 	data._interaction = conf.iid
@@ -116,21 +109,21 @@ function getSid(): string {
 // TODO: clear sid - when?
 //localStorage.setItem('api.sessionid', '')
 
-async function dopoll(app: typeof appdata) {
+async function poll(app: typeof appdata) {
 	const wait_time = 10000
 	while (true) {
 		try {
 			const res = await(send(app.conf.pollurl, app.conf, {}))
 			const msg = await res.json()
-			console.log(msg)
 			switch (msg.status) {
 				case 'idle':
 					break
 				case 'data':
-					app.handle(msg)
+					console.log('--- poll', msg)
+					handle(app, msg)
 					break
 				default:
-					console.log('poll response: ', msg)
+					console.log('**** poll', msg)
 					await sleep(wait_time)
 			}
 		} catch (error) {

assets/js/comp-data.ts

@@ -25,7 +25,7 @@ export function Data(name: string, conf: any): object {
 	}
 	//this.components[name] = comp
 	if (comp.state.id) {
-		sendMsg(this.conf, [domain, 'query', name, comp.state.id], {})
+		this.sendMsg([domain, 'query', name, comp.state.id], {})
 	}
 	return comp
 }
@@ -40,14 +40,13 @@ function handle(domain, action, class_, item, payload: string) {
 	} else if (action === 'response') { // && data.rc == 3) {
 		this.state.id = item
 		window.location.hash = item
-		sendMsg(this.conf, [this.domain, 'query', this.name, item], {})
+		this.sendMsg([this.domain, 'query', this.name, item], {})
 	}
 }
 
 function exec(action: string) {
 	action = action || this.action
 	const data = this.data
-	const conf = this.conf
 	let value = ''
 	for (const k of Object.keys(data)) {
 		value += `${k}: ${data[k]}, `
@@ -58,7 +57,7 @@ function exec(action: string) {
 	if (this.state.mode !== 'new') {
 		msgbase.push(this.state.id)
 	}
-	sendMsg(conf, msgbase, data)
+	this.sendMsg(msgbase, data)
 }
 
 function initField(name: string, meta: any) {
@@ -98,10 +97,12 @@ function setQuery(obj) {
 
 function setNew(obj) {
 	for (const key in obj.data) {
-		obj.data[key] = ''
+		//obj.data[key] = ''
 		const meta = obj.meta[key]
 		if (meta) {
 			obj.data[key] = meta.default || ''
+		} else {
+			delete obj.data[key]
 		}
 	}
 }

assets/js/comp-list.ts

@@ -21,7 +21,7 @@ export function List(name: string, conf: any): object {
 		initField	// initialize field (= @mounted)
 	}
 	this.components[name] = comp
-	sendMsg(this.conf, [domain, 'query', name], {})
+	this.sendMsg([domain, 'query', name], {})
 	return comp
 }
 

assets/js/main-xp-bootstrap.ts

@@ -1,7 +1,7 @@
 import * as bootstrap from 'bootstrap'
 export { bootstrap }
-import { api, polling } from './settings'
+import { api } from './settings'
 import { config, pvapp } from './common'
 
-pvapp.run(config(api, polling), [])
+pvapp.run(config(api), [])
 

assets/js/main-xp-mermaid.ts

@@ -1,7 +1,7 @@
 import mermaid from 'mermaid'
-import { api, polling } from './settings'
+import { api } from './settings'
 import { config, pvapp } from './common'
 
 mermaid.initialize({ startOnLoad: true })
-pvapp.run(config(api, polling), [])
+pvapp.run(config(api), [])
 

assets/js/main.ts

@@ -1,6 +1,7 @@
-import { api, polling } from './settings'
+import { api } from './settings'
 import { config, pvapp } from './common'
+import { Data } from './comp-data'
 import { List } from './comp-list'
 
-pvapp.run(config(api, polling), [List])
+pvapp.run(config(api), [Data, List])
 

assets/js/settings.ts

@@ -1,12 +1,9 @@
 export const api = {
-	path: '/api'
-}
-
-//export const polling = null // suppress polling
-
-export const polling = {
+	path: '/api',
+	polling: {
 		//msgbase: ['system', 'poll', 'service', 'pclt-0001']
 		msgbase: ['system', 'poll', 'session']
 		//msgbase: ['system', 'poll', 'interaction']
 	}
+}
 

exampleSite/config.yaml

@@ -28,7 +28,6 @@ params:
   api:
     domain: demo
     module: main.ts
-    nopoll: false
 
 taxonomies:
   domain: domains

layouts/partials/js.html

@@ -1,6 +1,5 @@
 {{- if $jsmod := $.Param "api.module" -}}
-  {{- $params := dict "domain" .Site.Params.api.domain
-					  "nopoll" .Site.Params.api.nopoll | default false -}}
+{{- $params := dict "domain" .Site.Params.api.domain -}}
   {{- $js := resources.Get (printf "js/%s" $jsmod) | js.Build (
   		dict "minify" false "params" $params) -}}
   <script src="{{ $js.Permalink }}" defer></script>

layouts/shortcodes/pv/debug.html

@@ -8,8 +8,4 @@
   <div>interaction id: {| conf.iid |}</div>
 </div>
 
-<div>
-  <pre v-text="output"></pre>
-</div>
-
 </div>