use new app-demo.ts for testing UI without access to remote API

assets/js/app-demo.ts

@@ -0,0 +1,96 @@
+// app-demo.ts - petite-vue application using dummy localStorage backend
+
+import { createApp } from 'petite-vue'
+import { Config, register, handle, createRandString, sleep} from './common'
+
+export const pvapp = {
+	run(conf: Config, components: any[]) {
+		appdata.conf = conf
+		for (const comp of components) {
+			appdata[comp.name] = comp
+		}
+		initData()
+		createApp(appdata).mount()
+	}
+}
+
+const appdata = {
+	$delimiters: ['{|', '|}'],
+	conf: {} as Config,
+	components: {},
+	register,
+	sendMsg
+}
+
+const store_prefix = 'api.storage'
+
+// methods
+
+async function sendMsg(basemsg: string[], data: any) {
+	await sleep(50)
+	const [ domain, action, class_, item ] = basemsg
+	switch (action) {
+		case 'data':
+			handle(this, store(domain, class_, item, data))
+			break
+		case 'delete':
+			handle(this, remove(domain, class_, item))
+			break
+		case 'query':
+			handle(this, query(domain, class_, item))
+	}
+}
+
+// functions
+
+function initData() {
+	const data = { firstname: 'John', lastname: 'Doe', email: 'jd@example.org' }
+	store('demo', 'person', 'wrdlpr', data)
+}
+
+function store(domain, class_, item: string, data: any) {
+	if (!item) {
+		item = createRandString(1)
+	}
+	console.log('store - item: ', item, ', data: ', data)
+	const key = [store_prefix, domain, class_].join('.')
+	const rawdata = localStorage.getItem(key) 
+	const alldata = rawdata ? JSON.parse(rawdata) : {}
+	const exists = alldata[item]
+	alldata[item] = data
+	localStorage.setItem(key, JSON.stringify(alldata))
+	const response = { RC: exists ? 3 : 2 }
+	const path = [domain, 'response', class_, item].join('/')
+	return { path: path, payload: JSON.stringify(response) }
+}
+
+function remove(domain, class_, item: string) {
+	const key = [store_prefix, domain, class_].join('.')
+	const rawdata = localStorage.getItem(key) 
+	const alldata = rawdata ? JSON.parse(rawdata) : {}
+	delete alldata[item]
+	localStorage.setItem(key, JSON.stringify(alldata))
+	const response = { RC: 3, action: 'delete' }
+	const path = [domain, 'response', class_, item].join('/')
+	return { path: path, payload: JSON.stringify(response) }
+}
+
+function query(domain, class_, item: string) {
+	const key = [store_prefix, domain, class_].join('.')
+	const rawdata = localStorage.getItem(key) 
+	const alldata = rawdata ? JSON.parse(rawdata) : {}
+	if (!item) {
+		const res = []
+		for (const key in alldata) {
+			const data = alldata[key]
+			data._item = key
+			res.push(JSON.stringify(data))
+		}
+		const path = [domain, 'list', class_].join('/')
+		return { path: path, payload: res.join('\n') }
+	}
+	const path = [domain, 'data', class_, item].join('/')
+	const payload = alldata[item] || {}
+	console.log('query - key: ', key, ', payload: ', payload)
+	return { path: path, payload: JSON.stringify(payload) }
+}

assets/js/common.ts

@@ -34,7 +34,7 @@ export function register(name: string, comp: any) {
 export function handle(app, msg) {
 	const [ domain, action, class_, item ] = msg.path.split('/')
 	const comp = app.components[class_ || 'data']
-	if (domain && domain != comp.domain) {
+	if (domain && domain !== comp.domain) {
 		return
 	}
 	if (comp) {
@@ -42,7 +42,7 @@ export function handle(app, msg) {
 	}
 }
 
-function createRandString(size: number): string {
+export function createRandString(size: number): string {
 	const arr = new Uint32Array(size)
 	crypto.getRandomValues(arr)
 	const result: string[] = []

assets/js/comp-data.ts

@@ -29,6 +29,7 @@ export function Data(name: string, conf: any): object {
 
 function handle(domain, action, class_, item, payload: string) {
 	const data = JSON.parse(payload)
+	console.log('handle - action: ', action, ', data: ', data)
 	if (action === 'data') { // && this.state.id == item) {
 		Object.assign(this.data, data)
 		this.state.mode = 'view'

assets/js/comp-list.ts

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

assets/js/main-demo.ts

@@ -0,0 +1,10 @@
+import { api } from './settings'
+import { pvapp } from './app-demo'
+
+import { config } from './common'
+import { Data } from './comp-data'
+import { List } from './comp-list'
+
+pvapp.run(config(api), [Data, List])
+
+

exampleSite/config.yaml

@@ -27,7 +27,7 @@ params:
 
   api:
     domain: demo
-    module: main-ig.ts
+    module: main-demo.ts
 
 taxonomies:
   domain: domains