feat: add introspector (#57)

src/examples/purity-todo/app.ts

@@ -1,4 +1,5 @@
 import {init, makeAsync} from '../../index.js'
+import {makeIntrospector} from '../../introspector.js'
 import {get} from './services/storage.js'
 import type {QueryType} from './services/google-api.js'
 
@@ -59,3 +60,8 @@ window.visualViewport?.addEventListener('resize', () => {
 	document.body.style.maxHeight = height + 'px'
 	document.body.scrollIntoView()
 })
+
+export const theIntrospector = makeIntrospector(
+	rerender,
+	new URLSearchParams(location.search).has('introspect')
+)

src/examples/purity-todo/components/root.ts

@@ -1,5 +1,5 @@
 import {render} from '../../../index.js'
-import {state} from '../app.js'
+import {state, theIntrospector} from '../app.js'
 import {closeSettings} from '../services/settings.js'
 import {closeTaskDetails} from '../services/task-details.js'
 import {appStyle} from './app-style.js'
@@ -38,5 +38,6 @@ export const root = (): string => render`
 			}
     </div>
     ${modalStyle()}
+		${theIntrospector({state, localStorage: window.localStorage})}
   </div>
 `

src/examples/purity-todo/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "Purity Todo 2.10",
+  "name": "Purity Todo 2.11",
   "short_name": "ToDo",
   "description": "Todo list written with purity.js",
   "icons": [

src/examples/purity-todo/purity-todo.sw.js

@@ -1,6 +1,6 @@
 const appScope = self.registration.scope
 
-const cacheName = `${appScope}@2.10`
+const cacheName = `${appScope}@2.11`
 const contentToCache = [
   './',
   './index.html',

src/introspector.ts

@@ -0,0 +1,50 @@
+import {makeOnce} from './once.js'
+import {render} from './purity.js'
+import type {Rerender} from './purity.js'
+
+const makeState = <T>(rerender: Rerender) => {
+	let state: T
+
+	const get = () => state
+
+	const set = (callback: (s: T) => T) => {
+		state = callback(state)
+		rerender()
+	}
+
+	return {set, get}
+}
+
+const once = makeOnce()
+
+export const makeIntrospector = (rerender: Rerender, isVisible = false) => {
+	if (!isVisible) return () => ''
+	const theState = makeState<boolean>(rerender)
+	return (data: Record<string, unknown>) => {
+		once('init-introspector', () => {
+			theState.set(() => true)
+		})
+		const size = theState.get() ? 'calc(100% - 20px)' : '30px'
+		return render`
+			<pre id="the-introspector" ::click=${() => {
+				theState.set(s => !s)
+			}}>
+					${JSON.stringify(data, null, 2)}
+			</pre>
+			<style id="introspector-style">
+				#the-introspector {
+					position: fixed;
+					bottom: 10px;
+					right: 10px;
+					width: ${size};
+					height: ${size};
+					overflow: auto;
+					background: rgba(0, 0, 0, 0.75);
+					color: white;
+					z-index: 1000;
+					border: 1px solid red;
+				}
+			</style>
+		`
+	}
+}