wirejs-components 0.1.0

package/README.md

@@ -0,0 +1,3 @@
+Experimental.
+
+If this package interests you, contact the author.

package/dist/components/account-menu.d.ts

@@ -0,0 +1,148 @@
+import type { AuthenticationApi, AuthenticationMachineState, AuthenticationState } from 'wirejs-resources';
+export declare const AccountMenu: ({ api, initialState, topItems, bottomItems }: {
+    api: AuthenticationApi;
+    initialState?: AuthenticationMachineState;
+    topItems?: (HTMLElement | ((state: AuthenticationState | undefined) => HTMLElement))[];
+    bottomItems?: (HTMLElement | ((state: AuthenticationState | undefined) => HTMLElement))[];
+}) => HTMLElement & {
+    data: {
+        user: string;
+        menu: HTMLDivElement;
+        topSubmenu: HTMLElement[];
+        authenticator: HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        }> & import("wirejs-dom/v2").Extend<HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        }>;
+        bottomSubmenu: HTMLElement[];
+    };
+} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+    data: {
+        user: string;
+        menu: HTMLDivElement;
+        topSubmenu: HTMLElement[];
+        authenticator: HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        }> & import("wirejs-dom/v2").Extend<HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        }>;
+        bottomSubmenu: HTMLElement[];
+    };
+}> & import("wirejs-dom/v2").Extend<HTMLElement & {
+    data: {
+        user: string;
+        menu: HTMLDivElement;
+        topSubmenu: HTMLElement[];
+        authenticator: HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        }> & import("wirejs-dom/v2").Extend<HTMLElement & {
+            data: {
+                state: HTMLElement;
+            };
+        } & {
+            renderState(state: AuthenticationMachineState | {
+                errors: any[];
+            }): void;
+        } & {
+            data: {
+                setState: (state: AuthenticationMachineState) => void;
+                focus: () => void;
+            };
+        }>;
+        bottomSubmenu: HTMLElement[];
+    };
+}>;

package/dist/components/account-menu.js

@@ -0,0 +1,105 @@
+import { html, node, id, list, css } from 'wirejs-dom/v2';
+import { Authenticator } from './authenticator.js';
+import { AuthMonitor } from '../utils/auth-monitor.js';
+const style = css `
+	accountmenu {
+		display: inline-block;
+	}
+
+	accountmenu > .label {
+		display: inline-block;
+	}
+
+	.handle {
+		display: inline-block;
+		border: 1px solid silver;
+		border-radius: 0.25rem;
+		cursor: pointer;
+		padding: 0 0.25em;
+	}
+
+	.menu {
+		display: none;
+		position: absolute;
+		border: 1px solid gray;
+		border-radius: 0.25rem;
+		background-color: white;
+		padding: 0.5rem;
+		box-shadow: -0.125rem 0.125rem 0.25rem lightgray;
+	}
+`;
+export const AccountMenu = ({ api, initialState, topItems, bottomItems }) => {
+    const uiState = {
+        expanded: false
+    };
+    let lastKnownState = initialState;
+    const listenForClose = (event) => {
+        if ((event.type === 'click' && !self.data.menu.contains(event.target))
+            || (event.type === 'keyup' && event.key === 'Escape')) {
+            close();
+        }
+    };
+    const close = () => {
+        uiState.expanded = false;
+        updateStyleToMatchState();
+        document.removeEventListener('click', listenForClose);
+        document.removeEventListener('keyup', listenForClose);
+    };
+    const removeListenForClose = () => {
+        document.removeEventListener('click', listenForClose);
+        document.removeEventListener('keyup', listenForClose);
+    };
+    const updateStyleToMatchState = () => {
+        self.data.menu.style.display = uiState.expanded ? 'block' : 'none';
+        const position = self.getBoundingClientRect();
+        self.data.menu.style.top = `${position.bottom + 1}px`;
+        self.data.menu.style.right = `${document.body.clientWidth - position.right + 16}px`;
+    };
+    const authenticator = Authenticator(api, initialState);
+    AuthMonitor.subscribe(state => {
+        const isSameState = lastKnownState && lastKnownState.state === state?.state;
+        const hasMessage = state?.message;
+        lastKnownState = state;
+        self.data.user = state?.user?.username || '';
+        if (!isSameState && !hasMessage)
+            close();
+        if (!isSameState) {
+            self.data.topSubmenu = getTopMenu();
+            self.data.bottomSubmenu = getBottomMenu();
+            AuthMonitor.signal(state);
+        }
+    });
+    const handleMenuClick = () => {
+        uiState.expanded = !uiState.expanded;
+        updateStyleToMatchState();
+        if (uiState.expanded) {
+            authenticator.data.focus();
+            setTimeout(() => {
+                document.addEventListener('click', listenForClose);
+                document.addEventListener('keyup', listenForClose);
+            }, 1);
+        }
+        else {
+            removeListenForClose();
+        }
+    };
+    const getTopMenu = () => (topItems || []).map(item => typeof item === 'function' ? item(lastKnownState) : item);
+    const getBottomMenu = () => (bottomItems || []).map(item => typeof item === 'function' ? item(lastKnownState) : item);
+    const self = html `<accountmenu>
+		${style}
+		<div class='label'>${node('user', initialState?.user?.username || '', name => name ? html `<b>${name}</b>` : html `<i>Anonymous</i>`)}</div>
+		<div class='handle' onclick=${handleMenuClick}>☰</div>
+		<div class='menu' ${id('menu', HTMLDivElement)}>
+			${list('topSubmenu', getTopMenu())}
+			${node('authenticator', authenticator)}
+			${list('bottomSubmenu', getBottomMenu())}
+		</div>
+	</accountmenu>`.onadd(async (self) => {
+        if (!initialState) {
+            const state = await api.getState(null);
+            authenticator.data.setState(state);
+            self.data.user = state.user?.username || '';
+        }
+    });
+    return self;
+};

package/dist/components/authenticated-content.d.ts

@@ -0,0 +1,18 @@
+import type { User } from "wirejs-resources";
+export declare function AuthenticatedContent(options: {
+    authenticated: (user: User) => HTMLElement | Promise<HTMLElement>;
+    unauthenticated: () => HTMLElement | Promise<HTMLElement>;
+    containerElement?: string;
+}): Promise<HTMLElement & {
+    data: {
+        content: HTMLElement;
+    };
+} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+    data: {
+        content: HTMLElement;
+    };
+}> & import("wirejs-dom/v2").Extend<HTMLElement & {
+    data: {
+        content: HTMLElement;
+    };
+}>>;

package/dist/components/authenticated-content.js

@@ -0,0 +1,26 @@
+import { html, node } from 'wirejs-dom/v2';
+import { AuthMonitor } from "../utils/auth-monitor.js";
+export async function AuthenticatedContent(options) {
+    const container = options.containerElement || 'authenticatedcontent';
+    const fieldSelector = (state) => {
+        return state.state;
+    };
+    const getContent = async (state) => {
+        return state?.state === 'authenticated'
+            ? await options.authenticated(state.user)
+            : await options.unauthenticated();
+    };
+    const initialContent = await getContent(AuthMonitor.lastKnownState);
+    const render = async (state) => {
+        self.data.content = await getContent(state);
+    };
+    const self = html `<${container}>
+		${node('content', initialContent)}
+	</${container}>`.onadd(() => {
+        AuthMonitor.subscribe(render, fieldSelector);
+    }).onremove(() => {
+        AuthMonitor.unsubscribe(render, fieldSelector);
+    });
+    return self;
+}
+;

package/dist/components/authenticator.d.ts

@@ -0,0 +1,48 @@
+import type { AuthenticationApi, AuthenticationMachineState, AuthenticationMachineAction, AuthenticationMachineInput } from 'wirejs-resources';
+export declare const authenticatoraction: (action: AuthenticationMachineAction, act: (input: AuthenticationMachineInput) => void) => HTMLElement & {
+    data: unknown;
+} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+    data: unknown;
+}> & import("wirejs-dom/v2").Extend<HTMLElement & {
+    data: unknown;
+}>;
+export declare const Authenticator: (stateManager: AuthenticationApi, initialState?: AuthenticationMachineState) => HTMLElement & {
+    data: {
+        state: HTMLElement;
+    };
+} & {
+    renderState(state: AuthenticationMachineState | {
+        errors: any[];
+    }): void;
+} & {
+    data: {
+        setState: (state: AuthenticationMachineState) => void;
+        focus: () => void;
+    };
+} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+    data: {
+        state: HTMLElement;
+    };
+} & {
+    renderState(state: AuthenticationMachineState | {
+        errors: any[];
+    }): void;
+} & {
+    data: {
+        setState: (state: AuthenticationMachineState) => void;
+        focus: () => void;
+    };
+}> & import("wirejs-dom/v2").Extend<HTMLElement & {
+    data: {
+        state: HTMLElement;
+    };
+} & {
+    renderState(state: AuthenticationMachineState | {
+        errors: any[];
+    }): void;
+} & {
+    data: {
+        setState: (state: AuthenticationMachineState) => void;
+        focus: () => void;
+    };
+}>;

package/dist/components/authenticator.js

@@ -0,0 +1,127 @@
+import { attribute, html, node, css } from 'wirejs-dom/v2';
+import { AuthMonitor } from '../utils/auth-monitor.js';
+const style = css `
+	authenticator input {
+		width: calc(100% - 1rem);
+		margin-bottom: 0.5rem;
+	}
+
+	authenticator .error {
+		color: darkred;
+	}
+
+	authenticator {
+		display: block;
+		min-width: 15em;
+		color: var(--default-color, black);
+	}
+
+	authenticatoraction > h4 {
+		margin-top: 1rem;
+		margin-bottom: 0.5rem;
+	}
+
+	authenticatoraction > hr {
+		width: 33%;
+		height: 1px;
+		border: none;
+		background: var(--color-muted);
+	}
+`;
+export const authenticatoraction = (action, act) => {
+    const inputs = Object.entries(action.fields || []).map(([name, { label, type }]) => {
+        const id = `input_${Math.floor(Math.random() * 1_000_000)}`;
+        const input = html `<div>
+			<label for=${id}>${label}</label>
+			<br />
+			<input
+				id=${id}
+				name=${name}
+				type=${type}
+				value=${attribute('value', '')}
+			/>
+		</div>`.extend(() => ({ data: { name } }));
+        return input;
+    });
+    const buttons = action.buttons?.map(b => html `<p>
+		<button type='submit' value='${b}'>${b}</button>
+	</p>`);
+    const link = buttons ? undefined : [
+        html `<menu><li><a
+			onclick=${() => act({ key: action.key })}
+		>${action.name}</a></li></menu>`
+    ];
+    const actors = link ?? buttons;
+    if (action.fields && Object.keys(action.fields).length > 0) {
+        return html `<authenticatoraction>
+			<div>
+				<h4>${action.name}</h4>
+				<form
+					class='standard'
+					onsubmit=${(evt) => {
+            evt.preventDefault();
+            act({
+                key: action.key,
+                verb: evt.submitter?.value,
+                inputs: Object.fromEntries(inputs.map(input => ([
+                    input.data.name,
+                    input.data.value
+                ])))
+            });
+        }}
+				>
+					${inputs}
+					${actors}
+				</form>
+				<hr />
+			</div>
+		</authenticatoraction>`;
+    }
+    else {
+        return html `<authenticatoraction>
+			${actors}
+		</authenticatoraction>`;
+    }
+};
+export const Authenticator = (stateManager, initialState) => {
+    let lastKnownState = undefined;
+    const self = html `<authenticator>
+		${style}
+		${node('state', html `<span>Loading ...</span>`)}
+	</authenticator>`.extend(() => ({
+        renderState(state) {
+            let message;
+            if ('errors' in state && state.errors) {
+                message = `<span class='error'>` + state.errors
+                    .map((e) => e.message)
+                    .join("\n\n") + `</span>`;
+            }
+            else {
+                lastKnownState = state;
+                message = lastKnownState.message;
+            }
+            self.data.state = html `<div>
+				<div>${message || ''}</div>
+				<div>${Object.entries(lastKnownState?.actions || []).map(([_key, action]) => {
+                return authenticatoraction({ ...action }, async (act) => {
+                    self.renderState(await stateManager.setState(null, act));
+                });
+            })}</div>
+			</div>`;
+            AuthMonitor.signal(lastKnownState);
+        }
+    })).onadd(async (self) => {
+        if (initialState) {
+            console.log('authenticator render state');
+            self.renderState(initialState);
+        }
+    }).extend(self => ({
+        data: {
+            setState: (state) => self.renderState(state),
+            focus: () => {
+                [...self.getElementsByTagName('input')].shift()?.focus();
+            }
+        }
+    }));
+    return self;
+};

package/dist/components/index.d.ts

@@ -0,0 +1,3 @@
+export { AccountMenu } from './account-menu.js';
+export { AuthenticatedContent } from './authenticated-content.js';
+export { Authenticator } from './authenticator.js';

package/dist/components/index.js

@@ -0,0 +1,3 @@
+export { AccountMenu } from './account-menu.js';
+export { AuthenticatedContent } from './authenticated-content.js';
+export { Authenticator } from './authenticator.js';

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/index.js

@@ -0,0 +1 @@
+export * from './components/index.js';

package/dist/layouts/default.d.ts

@@ -0,0 +1,60 @@
+import type { AuthenticationState } from 'wirejs-resources';
+export declare function Main(slots: {
+    /**
+     * Replaces the default prefix in the final page title.
+     */
+    siteTitle?: string | ((state: AuthenticationState) => string);
+    /**
+     * Appears on the page under the site title.
+     *
+     * Set to empty-string explicitly to omit the default.
+     */
+    siteSubTitle?: string | ((state: AuthenticationState) => string);
+    /**
+     * The page title. Appears below the site title and subtitle when given.
+     */
+    pageTitle?: string | ((state: AuthenticationState) => string);
+    /**
+     * Author for this page. Appears next to the title in lighter font and
+     * in the address bar.
+     */
+    pageAuthor?: string | ((state: AuthenticationState) => string);
+    /**
+     * The main content for the page.
+     */
+    content: HTMLElement | ((state: AuthenticationState) => HTMLElement);
+    /**
+     * Appears in the top of the footer.
+     */
+    disclaimer?: string | HTMLElement | ((state: AuthenticationState) => string | HTMLElement);
+}): Promise<HTMLElement & {
+    data: {
+        account: HTMLElement & {
+            data: unknown;
+        } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+            data: unknown;
+        }> & import("wirejs-dom/v2").Extend<HTMLElement & {
+            data: unknown;
+        }>;
+    };
+} & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+    data: {
+        account: HTMLElement & {
+            data: unknown;
+        } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+            data: unknown;
+        }> & import("wirejs-dom/v2").Extend<HTMLElement & {
+            data: unknown;
+        }>;
+    };
+}> & import("wirejs-dom/v2").Extend<HTMLElement & {
+    data: {
+        account: HTMLElement & {
+            data: unknown;
+        } & import("wirejs-dom/v2").DomEvents<HTMLElement & {
+            data: unknown;
+        }> & import("wirejs-dom/v2").Extend<HTMLElement & {
+            data: unknown;
+        }>;
+    };
+}>>;

package/dist/layouts/default.js

@@ -0,0 +1,100 @@
+import { html, node, hydrate } from 'wirejs-dom/v2';
+import { auth } from 'my-api';
+import { AccountMenu } from '../components/index.js';
+const TITLE = 'My New Site';
+const SUBTITLE = 'Made with wirejs';
+const MENU_ID = 'account-menu';
+const DISCLAIMER = html `<div>
+	<p>Everything here is awesome.</p>
+</div>`;
+async function Account() {
+    return html `<div id='${MENU_ID}'>
+		${AccountMenu({ api: auth })}
+	</div>`;
+}
+export async function Main(slots) {
+    const pageAuthorElement = slots.pageAuthor ? html `
+		<span style='color: var(--color-muted);'>
+			: according to <a href='/wiki/view/~${slots.pageAuthor}'>${slots.pageAuthor}</a>
+		</span>
+	` : '';
+    const pageTitle = slots.pageTitle ? html `
+		<h2 style='font-variant: small-caps;'>
+			${slots.pageTitle} ${pageAuthorElement}
+		</h2>
+	` : '';
+    const browserBarTitle = [
+        slots.pageTitle,
+        slots.pageAuthor,
+        slots.siteTitle || TITLE,
+        slots.siteSubTitle || SUBTITLE,
+    ].filter(Boolean).slice(0, 3).join(' - ');
+    const page = html `
+		<!doctype html>
+		<html id='root'>
+			<head>
+				<meta name="viewport" content="width=device-width, initial-scale=1" />
+				<title>${browserBarTitle}</title>
+				<link rel='icon' type='image/svg+xml' href='/images/logo.svg' />
+				<link rel='stylesheet' type='text/css' href='/default.css' />
+			</head>
+			<body>
+				<div style='
+					border-width: 0 1px;
+					border-color: silver;
+					border-style: solid;
+					max-width: 1200px;
+					min-height: 100vh;
+					padding: 0 1rem;
+					margin: 0 auto;
+					overflow: hidden;
+				'>
+					<div style='
+						display: flex;
+						width: 100%;
+						padding-bottom: 0.5rem;
+						border-bottom: 1px solid var(--border-color-muted, #777);
+						margin-bottom: 1rem;
+					'>
+						<!-- source: https://www.svgrepo.com/svg/322460/greek-temple -->
+						<svg
+							style='
+								margin-top: 1.4rem;
+								margin-right: 0.5rem;
+							'
+							height='4rem'
+							viewBox="0 0 512 512"
+							xmlns="http://www.w3.org/2000/svg"
+						><path fill="#000000" d="M256 26.2L52 135h408L256 26.2zM73 153v14h366v-14H73zm16 32v206h30V185H89zm101.334 0v206h30V185h-30zm101.332 0v206h30V185h-30zM393 185v206h30V185h-30zM73 409v30h366v-30H73zm-32 48v30h430v-30H41z"/></svg>
+						
+						<div style='flex-basis: 0; flex-grow: 5;'>
+							<h1 style='font-variant: small-caps; text-shadow: silver 2px 2px 2px;'>
+								<a href='/' style='color: var(--color-strong, #000);'>${slots.siteTitle || TITLE}</a>
+							</h1>
+
+							<div style='
+								margin-top: -1rem;
+								color: var(--color-muted, #888);
+							'>${slots.siteSubTitle ?? SUBTITLE}</div>
+						</div>
+
+						<div style='margin-top: 3.5rem; flex-grow: 0;'>
+							${node('account', await Account())}
+						</div>
+					</div>
+
+					${pageTitle}
+
+					<div id='content'>${slots.content}</div>
+					
+					<footer>
+						${slots.disclaimer ?? DISCLAIMER}
+					</footer>
+				</div>
+			</body>
+		</html>
+	`;
+    return page;
+}
+// TODO: fix wirejs requiring ... whatever it is here that it requires that breaks the type!
+hydrate(MENU_ID, Account);

package/dist/layouts/index.d.ts

@@ -0,0 +1 @@
+export { default as defaultLayout } from './default.js';

package/dist/layouts/index.js

@@ -0,0 +1 @@
+export { default as defaultLayout } from './default.js';

package/dist/themes/default.d.ts

@@ -0,0 +1,2 @@
+declare const _default: HTMLStyleElement;
+export default _default;

package/dist/themes/default.js

@@ -0,0 +1,106 @@
+import { css } from 'wirejs-dom/v2';
+export default css `
+	:root {
+		--color-muted: #888;
+		--color-error: #c33;
+		--color-action: #533;
+		--border-color-muted: #777;
+		--border-color-subtle: #aaa;
+	}
+
+	html {
+		padding: 0;
+		margin: 0
+	}
+
+	body {
+		font-family: math;
+		padding: 0;
+		margin: 0;
+		color: #333;
+	}
+
+	a {
+		font-weight: bold;
+		color: var(--color-action);
+		cursor: pointer;
+	}
+
+	menu {
+		padding-inline-start: 0;
+	}
+
+	li {
+		margin: 1rem;
+	}
+
+	menu li {
+		list-style: none;
+		margin: 1rem;
+	}
+
+	menu li a {
+		text-decoration: underline;
+	}
+
+	form.standard {
+		margin: 1rem;
+	}
+
+	form.standard div {
+		margin-bottom: 1rem;
+	}
+
+	form.standard label, form.standard input, form.standard button {
+		display: inline-block;
+		width: 9rem;
+		margin: 0.25rem;
+		border-radius: 0.125rem;
+	}
+
+	form.standard label {
+		font-weight: bold;
+		color: var(--color-muted);
+	}
+
+	form.standard input {
+		width: 20rem;
+		border: 1px solid var(--border-color-muted);
+		margin-bottom: 0.5rem;
+		padding: 0.5rem;
+	}
+
+	form.standard textarea {
+		width: calc(100% - 2rem);
+		height: 15rem;
+	}
+
+	form.standard button {
+		font-family: math;
+		font-size: medium;
+		border: 1px solid var(--border-color-muted);
+		padding: 0.5rem;
+	}
+
+	form.standard span.status {
+		display: inline-block;
+		color: var(--color-muted);
+		margin-left: 0.5rem;
+	}
+
+	.error form.standard span.status {
+		color: var(--color-error);
+	}
+
+	.section {
+		border-bottom: 1px dashed var(--border-color-subtle);
+		margin-bottom: 1.5rem;
+		padding-bottom: 1.5rem;
+	}
+
+	footer {
+		margin-top: 4rem;
+		border-top: 1px solid var(--border-color-muted);
+		color: var(--color-muted);
+	}
+`;

package/dist/themes/index.d.ts

@@ -0,0 +1 @@
+export { default as defaultTheme } from './default.js';

package/dist/themes/index.js

@@ -0,0 +1 @@
+export { default as defaultTheme } from './default.js';

package/dist/util/auth-monitor.d.ts

@@ -0,0 +1,3 @@
+import type { AuthenticationMachineState } from 'wirejs-resources';
+import { Monitor } from './monitor.js';
+export declare const AuthMonitor: Monitor<AuthenticationMachineState>;

package/dist/util/auth-monitor.js

@@ -0,0 +1,2 @@
+import { Monitor } from './monitor.js';
+export const AuthMonitor = new Monitor();

package/dist/util/index.d.ts

@@ -0,0 +1,2 @@
+export { AuthMonitor } from './auth-monitor.js';
+export { Monitor } from './monitor.js';

package/dist/util/index.js

@@ -0,0 +1,2 @@
+export { AuthMonitor } from './auth-monitor.js';
+export { Monitor } from './monitor.js';

package/dist/util/monitor.d.ts

@@ -0,0 +1,22 @@
+type Callback<T> = (state: T | undefined) => void;
+type FieldExtractor<T> = (state: T) => string;
+type MonitorCallback<T> = {
+    field: FieldExtractor<T> | undefined;
+    callback: Callback<T>;
+};
+export declare class Monitor<State> {
+    subscribers: MonitorCallback<State>[];
+    lastKnownState: State | undefined;
+    constructor(initialState?: State);
+    signal(state: State | undefined): void;
+    subscribe(callback: Callback<State>, field?: FieldExtractor<State>): void;
+    /**
+     * Unsubscribes a specific listener from state changes if and only if
+     * the `field` matches the original `subscribe()` field or lack thereof.
+     *
+     * @param callback
+     * @param field
+     */
+    unsubscribe(callback: Callback<State>, field?: FieldExtractor<State>): void;
+}
+export {};

package/dist/util/monitor.js

@@ -0,0 +1,43 @@
+export class Monitor {
+    subscribers = [];
+    lastKnownState;
+    constructor(initialState) {
+        this.lastKnownState = initialState;
+    }
+    signal(state) {
+        if (typeof state === 'undefined'
+            && typeof this.lastKnownState === 'undefined')
+            return;
+        for (const sub of this.subscribers) {
+            try {
+                if (typeof sub.field !== 'function'
+                    || (typeof state === 'undefined'
+                        && typeof this.lastKnownState !== 'undefined')
+                    || (typeof state !== 'undefined'
+                        && typeof this.lastKnownState === 'undefined')
+                    || sub.field(state) !== sub.field(this.lastKnownState)) {
+                    sub.callback(state);
+                }
+            }
+            catch (err) {
+                console.error('Error calling Monitor watcher.', sub, err);
+            }
+        }
+        this.lastKnownState = state;
+    }
+    subscribe(callback, field) {
+        this.subscribers.push({ field, callback });
+    }
+    /**
+     * Unsubscribes a specific listener from state changes if and only if
+     * the `field` matches the original `subscribe()` field or lack thereof.
+     *
+     * @param callback
+     * @param field
+     */
+    unsubscribe(callback, field) {
+        this.subscribers = this.subscribers.filter(sub => {
+            return !(sub.field === field && sub.callback === callback);
+        });
+    }
+}

package/dist/utils/auth-monitor.d.ts

@@ -0,0 +1,3 @@
+import type { AuthenticationMachineState } from 'wirejs-resources';
+import { Monitor } from './monitor.js';
+export declare const AuthMonitor: Monitor<AuthenticationMachineState>;

package/dist/utils/auth-monitor.js

@@ -0,0 +1,2 @@
+import { Monitor } from './monitor.js';
+export const AuthMonitor = new Monitor();

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export { AuthMonitor } from './auth-monitor.js';
+export { Monitor } from './monitor.js';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export { AuthMonitor } from './auth-monitor.js';
+export { Monitor } from './monitor.js';

package/dist/utils/monitor.d.ts

@@ -0,0 +1,22 @@
+type Callback<T> = (state: T | undefined) => void;
+type FieldExtractor<T> = (state: T) => string;
+type MonitorCallback<T> = {
+    field: FieldExtractor<T> | undefined;
+    callback: Callback<T>;
+};
+export declare class Monitor<State> {
+    subscribers: MonitorCallback<State>[];
+    lastKnownState: State | undefined;
+    constructor(initialState?: State);
+    signal(state: State | undefined): void;
+    subscribe(callback: Callback<State>, field?: FieldExtractor<State>): void;
+    /**
+     * Unsubscribes a specific listener from state changes if and only if
+     * the `field` matches the original `subscribe()` field or lack thereof.
+     *
+     * @param callback
+     * @param field
+     */
+    unsubscribe(callback: Callback<State>, field?: FieldExtractor<State>): void;
+}
+export {};

package/dist/utils/monitor.js

@@ -0,0 +1,43 @@
+export class Monitor {
+    subscribers = [];
+    lastKnownState;
+    constructor(initialState) {
+        this.lastKnownState = initialState;
+    }
+    signal(state) {
+        if (typeof state === 'undefined'
+            && typeof this.lastKnownState === 'undefined')
+            return;
+        for (const sub of this.subscribers) {
+            try {
+                if (typeof sub.field !== 'function'
+                    || (typeof state === 'undefined'
+                        && typeof this.lastKnownState !== 'undefined')
+                    || (typeof state !== 'undefined'
+                        && typeof this.lastKnownState === 'undefined')
+                    || sub.field(state) !== sub.field(this.lastKnownState)) {
+                    sub.callback(state);
+                }
+            }
+            catch (err) {
+                console.error('Error calling Monitor watcher.', sub, err);
+            }
+        }
+        this.lastKnownState = state;
+    }
+    subscribe(callback, field) {
+        this.subscribers.push({ field, callback });
+    }
+    /**
+     * Unsubscribes a specific listener from state changes if and only if
+     * the `field` matches the original `subscribe()` field or lack thereof.
+     *
+     * @param callback
+     * @param field
+     */
+    unsubscribe(callback, field) {
+        this.subscribers = this.subscribers.filter(sub => {
+            return !(sub.field === field && sub.callback === callback);
+        });
+    }
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+	"name": "wirejs-components",
+	"version": "0.1.0",
+	"description": "Client-side components for wirejs apps, including basic UI and resource-aware components.",
+	"type": "module",
+	"main": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		},
+		"./utils": {
+			"types": "./dist/utils/index.d.ts",
+			"default": "./dist/utils/index.js"
+		}
+	},
+	"scripts": {
+		"build": "tsc"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/svidgen/create-wirejs-app.git",
+		"directory": "packages/wirejs-ui"
+	},
+	"author": "Jon Wire",
+	"license": "AGPL-3.0-only",
+	"bugs": {
+		"url": "https://github.com/svidgen/create-wirejs-app/issues"
+	},
+	"homepage": "https://github.com/svidgen/create-wirejs-app#readme",
+	"dependencies": {
+		"wirejs-dom": "^1.0.41",
+		"wirejs-resources": "^0.1.57"
+	},
+	"devDependencies": {
+		"typescript": "^5.7.3"
+	},
+	"files": [
+		"package.json",
+		"README.md",
+		"dist/*"
+	]
+}