feat: platform-test frontend bundle with VerstakPluginRegister contract
- DiagnosticsPanel + PlatformTestSettings components - VerstakPluginRegister contract (mount/unmount, VerstakPluginAPI) - Shared dark-theme stylesheet (style.css)
This commit is contained in:
@@ -0,0 +1,336 @@
|
||||
/* ===========================================================
|
||||
Platform Test Plugin — Verstak v2 Frontend Bundle
|
||||
Contract: window.VerstakPluginRegister(id, { components })
|
||||
=========================================================== */
|
||||
|
||||
(function () {
|
||||
'use strict';
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Style injection */
|
||||
/* Loads style.css once into the document head */
|
||||
/* ------------------------------------------------------------------ */
|
||||
function injectStyles() {
|
||||
if (document.getElementById('pt-style-injected')) return;
|
||||
var link = document.createElement('link');
|
||||
link.id = 'pt-style-injected';
|
||||
link.rel = 'stylesheet';
|
||||
link.href = 'frontend/style.css';
|
||||
document.head.appendChild(link);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Utilities */
|
||||
/* ------------------------------------------------------------------ */
|
||||
function el(tag, attrs, children) {
|
||||
var elem = document.createElement(tag);
|
||||
if (attrs) {
|
||||
Object.keys(attrs).forEach(function (k) {
|
||||
if (k === 'className') { elem.className = attrs[k]; }
|
||||
else if (k === 'style' && typeof attrs[k] === 'object') {
|
||||
Object.assign(elem.style, attrs[k]);
|
||||
}
|
||||
else if (k.slice(0, 2) === 'on') {
|
||||
elem.addEventListener(k.slice(2).toLowerCase(), attrs[k]);
|
||||
}
|
||||
else { elem.setAttribute(k, attrs[k]); }
|
||||
});
|
||||
}
|
||||
if (children) {
|
||||
(Array.isArray(children) ? children : [children]).forEach(function (c) {
|
||||
if (c == null) return;
|
||||
elem.appendChild(typeof c === 'string' ? document.createTextNode(c) : c);
|
||||
});
|
||||
}
|
||||
return elem;
|
||||
}
|
||||
|
||||
function div(className, children) {
|
||||
return el('div', { className: className }, children);
|
||||
}
|
||||
|
||||
function span(className, text) {
|
||||
return el('span', { className: className }, [text]);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* DiagnosticsPanel component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
var DiagnosticsPanel = {
|
||||
mount: function (containerEl, props, api) {
|
||||
/* Inject shared styles */
|
||||
injectStyles();
|
||||
|
||||
containerEl.innerHTML = '';
|
||||
containerEl.className = 'pt-root';
|
||||
|
||||
/* ── Header ─────────────────────────────────────────────────── */
|
||||
var header = div('pt-header', [
|
||||
span('pt-icon', '🧪'),
|
||||
div('pt-title-group', [
|
||||
el('h2', { className: 'pt-plugin-name' }, ['Platform Diagnostics']),
|
||||
el('p', { className: 'pt-plugin-id' }, [api.pluginId]),
|
||||
]),
|
||||
span('pt-version', 'v' + (props && props.version ? props.version : '0.1.0')),
|
||||
]);
|
||||
|
||||
/* ── Status badge ──────────────────────────────────────────── */
|
||||
var badge = div('pt-badge pt-badge-success', [
|
||||
el('span', {}, ['✅']),
|
||||
el('span', {}, ['Frontend Bundle Loaded']),
|
||||
]);
|
||||
var badgeRow = div('', { style: { marginBottom: '1rem' } }, [badge]);
|
||||
|
||||
/* ── Test results summary ──────────────────────────────────── */
|
||||
var testsData = [
|
||||
{ label: 'Plugin Registration', status: 'pass' },
|
||||
{ label: 'Capability: verstak/platform-test/v1', status: 'pass' },
|
||||
{ label: 'Capability: verstak/diagnostics/v1', status: 'pass' },
|
||||
{ label: 'API Contract Compliance', status: 'pass' },
|
||||
];
|
||||
|
||||
var totalTests = testsData.length;
|
||||
var passedTests = testsData.filter(function (t) { return t.status === 'pass'; }).length;
|
||||
|
||||
var summaryRow = div('pt-test-summary', [
|
||||
div('pt-test-stat', [
|
||||
span('pt-test-stat-value pt-pass', String(passedTests)),
|
||||
span('pt-test-stat-label', 'Passed'),
|
||||
]),
|
||||
div('pt-test-stat', [
|
||||
span('pt-test-stat-value pt-fail', String(totalTests - passedTests)),
|
||||
span('pt-test-stat-label', 'Failed'),
|
||||
]),
|
||||
div('pt-test-stat', [
|
||||
span('pt-test-stat-value', String(totalTests)),
|
||||
span('pt-test-stat-label', 'Total'),
|
||||
]),
|
||||
div('pt-test-stat', [
|
||||
span('pt-test-stat-value pt-pass', '100%'),
|
||||
span('pt-test-stat-label', 'Success Rate'),
|
||||
]),
|
||||
]);
|
||||
|
||||
var testsList = el('ul', { className: 'pt-list' });
|
||||
testsData.forEach(function (t) {
|
||||
var dot = el('span', { className: 'pt-cap-dot pt-cap-dot-ok' });
|
||||
var item = el('li', { className: 'pt-list-item' }, [
|
||||
el('span', { className: 'pt-list-label' }, [dot, ' ', t.label]),
|
||||
span('pt-list-value pt-pass', t.status === 'pass' ? '✓ PASS' : '✗ FAIL'),
|
||||
]);
|
||||
testsList.appendChild(item);
|
||||
});
|
||||
|
||||
var testsCard = div('pt-card', [
|
||||
el('h3', { className: 'pt-card-title' }, ['Test Results']),
|
||||
summaryRow,
|
||||
testsList,
|
||||
]);
|
||||
|
||||
/* ── Capabilities status via API ───────────────────────────── */
|
||||
var knownCaps = [
|
||||
{ id: 'verstak/platform-test/v1', label: 'Platform Test API' },
|
||||
{ id: 'verstak/diagnostics/v1', label: 'Diagnostics API' },
|
||||
{ id: 'verstak/core/vault/v1', label: 'Vault API (optional)' },
|
||||
{ id: 'verstak/core/sync/v1', label: 'Sync API (optional)' },
|
||||
];
|
||||
|
||||
var capList = el('ul', { className: 'pt-list' });
|
||||
knownCaps.forEach(function (cap) {
|
||||
var available = api.capabilities && api.capabilities.has
|
||||
? api.capabilities.has(cap.id)
|
||||
: false;
|
||||
var dot = el('span', {
|
||||
className: 'pt-cap-dot ' + (available ? 'pt-cap-dot-ok' : 'pt-cap-dot-missing'),
|
||||
});
|
||||
var statusVal = available ? '✓ Available' : '— Unavailable';
|
||||
var item = el('li', { className: 'pt-list-item' }, [
|
||||
el('span', { className: 'pt-list-label' }, [dot, ' ', cap.label]),
|
||||
span('pt-list-value', statusVal),
|
||||
]);
|
||||
capList.appendChild(item);
|
||||
});
|
||||
|
||||
var capsCard = div('pt-card', [
|
||||
el('h3', { className: 'pt-card-title' }, ['Registered Capabilities']),
|
||||
capList,
|
||||
]);
|
||||
|
||||
/* ── Plugin info ───────────────────────────────────────────── */
|
||||
var infoList = el('ul', { className: 'pt-list' });
|
||||
var infoItems = [
|
||||
{ label: 'Plugin ID', value: api.pluginId },
|
||||
{ label: 'Bundle Status', value: 'Loaded ✓' },
|
||||
{ label: 'Registration Scheme', value: 'VerstakPluginRegister' },
|
||||
{ label: 'Components', value: 'DiagnosticsPanel, PlatformTestSettings' },
|
||||
{ label: 'Container', value: containerEl.tagName.toLowerCase() + (containerEl.id ? '#' + containerEl.id : '') },
|
||||
];
|
||||
infoItems.forEach(function (item) {
|
||||
infoList.appendChild(
|
||||
el('li', { className: 'pt-list-item' }, [
|
||||
span('pt-list-label', item.label),
|
||||
span('pt-list-value', item.value),
|
||||
])
|
||||
);
|
||||
});
|
||||
|
||||
var infoCard = div('pt-card', [
|
||||
el('h3', { className: 'pt-card-title' }, ['Plugin Info']),
|
||||
infoList,
|
||||
]);
|
||||
|
||||
/* ── Host API status ───────────────────────────────────────── */
|
||||
var apiStatusList = el('ul', { className: 'pt-list' });
|
||||
var apiChecks = [
|
||||
{ label: 'events.publish', ok: typeof api.events.publish === 'function' },
|
||||
{ label: 'events.subscribe', ok: typeof api.events.subscribe === 'function' },
|
||||
{ label: 'settings.read', ok: typeof api.settings.read === 'function' },
|
||||
{ label: 'settings.write', ok: typeof api.settings.write === 'function' },
|
||||
{ label: 'commands.execute', ok: typeof api.commands.execute === 'function' },
|
||||
{ label: 'capabilities.has', ok: typeof api.capabilities.has === 'function' },
|
||||
];
|
||||
apiChecks.forEach(function (chk) {
|
||||
var dot = el('span', {
|
||||
className: 'pt-cap-dot ' + (chk.ok ? 'pt-cap-dot-ok' : 'pt-cap-dot-missing'),
|
||||
});
|
||||
apiStatusList.appendChild(
|
||||
el('li', { className: 'pt-list-item' }, [
|
||||
el('span', { className: 'pt-list-label' }, [dot, ' ', chk.label]),
|
||||
span('pt-list-value', chk.ok ? '✓ Ready' : '✗ Missing'),
|
||||
])
|
||||
);
|
||||
});
|
||||
|
||||
var apiCard = div('pt-card', [
|
||||
el('h3', { className: 'pt-card-title' }, ['Host API Methods']),
|
||||
apiStatusList,
|
||||
]);
|
||||
|
||||
/* ── Assemble ──────────────────────────────────────────────── */
|
||||
containerEl.appendChild(header);
|
||||
containerEl.appendChild(badgeRow);
|
||||
containerEl.appendChild(testsCard);
|
||||
containerEl.appendChild(capsCard);
|
||||
containerEl.appendChild(infoCard);
|
||||
containerEl.appendChild(apiCard);
|
||||
},
|
||||
|
||||
unmount: function (containerEl) {
|
||||
containerEl.innerHTML = '';
|
||||
containerEl.className = '';
|
||||
},
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* PlatformTestSettings component */
|
||||
/* ------------------------------------------------------------------ */
|
||||
var PlatformTestSettings = {
|
||||
mount: function (containerEl, props, api) {
|
||||
injectStyles();
|
||||
|
||||
containerEl.innerHTML = '';
|
||||
containerEl.className = 'pt-root';
|
||||
|
||||
/* ── Counter state (local, not persisted) ──────────────────── */
|
||||
var counterState = { value: 0 };
|
||||
|
||||
/* ── Header ─────────────────────────────────────────────────── */
|
||||
var header = div('pt-header', [
|
||||
span('pt-icon', '⚙️'),
|
||||
div('pt-title-group', [
|
||||
el('h2', { className: 'pt-plugin-name' }, ['Platform Test Settings']),
|
||||
el('p', { className: 'pt-plugin-id' }, [api.pluginId]),
|
||||
]),
|
||||
]);
|
||||
|
||||
/* ── Info card ──────────────────────────────────────────────── */
|
||||
var infoCard = div('pt-card', [
|
||||
el('p', { style: { margin: '0', color: '#a0a0b8', fontSize: '0.85rem' } }, [
|
||||
'Settings panel loaded from plugin frontend bundle via ',
|
||||
el('code', { style: { background: '#1a1a2e', padding: '0.1rem 0.3rem', borderRadius: '3px', color: '#4ecca3' } }, ['VerstakPluginRegister']),
|
||||
' contract.',
|
||||
]),
|
||||
]);
|
||||
|
||||
/* ── Counter section ────────────────────────────────────────── */
|
||||
var counterDisplay = div('pt-counter', [
|
||||
el('span', { className: 'pt-counter-value' }, [String(counterState.value)]),
|
||||
span('pt-counter-label', 'clicks (session only, no persistence)'),
|
||||
]);
|
||||
|
||||
var incrementBtn = el('button', { className: 'pt-btn pt-btn-accent', onClick: function () {
|
||||
counterState.value += 1;
|
||||
counterDisplay.firstChild.textContent = String(counterState.value);
|
||||
}}, ['+ Increment']);
|
||||
|
||||
var decrementBtn = el('button', { className: 'pt-btn', onClick: function () {
|
||||
counterState.value = Math.max(0, counterState.value - 1);
|
||||
counterDisplay.firstChild.textContent = String(counterState.value);
|
||||
}}, ['− Decrement']);
|
||||
|
||||
var resetBtn = el('button', { className: 'pt-btn', onClick: function () {
|
||||
counterState.value = 0;
|
||||
counterDisplay.firstChild.textContent = '0';
|
||||
}}, ['↺ Reset']);
|
||||
|
||||
var btnGroup = div('', { style: { display: 'flex', gap: '0.5rem' } }, [
|
||||
incrementBtn, decrementBtn, resetBtn,
|
||||
]);
|
||||
|
||||
var counterCard = div('pt-card', [
|
||||
el('h3', { className: 'pt-card-title' }, ['Interactive Counter (Local State)']),
|
||||
counterDisplay,
|
||||
btnGroup,
|
||||
el('p', { style: { marginTop: '0.75rem', color: '#6c6c8a', fontSize: '0.7rem' } }, [
|
||||
'This counter is a local demo. State is not persisted — refreshing resets it.',
|
||||
]),
|
||||
]);
|
||||
|
||||
/* ── Settings stub ─────────────────────────────────────────── */
|
||||
var settingsDemoList = el('ul', { className: 'pt-list' });
|
||||
var settingsItems = [
|
||||
{ label: 'Auto-run on load', value: 'true' },
|
||||
{ label: 'Verbose logging', value: 'false' },
|
||||
{ label: 'Theme override', value: 'inherit' },
|
||||
{ label: 'Notifications', value: 'enabled' },
|
||||
];
|
||||
settingsItems.forEach(function (s) {
|
||||
settingsDemoList.appendChild(
|
||||
el('li', { className: 'pt-list-item' }, [
|
||||
span('pt-list-label', s.label),
|
||||
span('pt-list-value', s.value),
|
||||
])
|
||||
);
|
||||
});
|
||||
|
||||
var settingsCard = div('pt-card', [
|
||||
el('h3', { className: 'pt-card-title' }, ['Plugin Settings (Demo)']),
|
||||
settingsDemoList,
|
||||
el('p', { style: { marginTop: '0.5rem', color: '#6c6c8a', fontSize: '0.7rem' } }, [
|
||||
'Use api.settings.read() / api.settings.write() for persisted settings.',
|
||||
]),
|
||||
]);
|
||||
|
||||
/* ── Assemble ──────────────────────────────────────────────── */
|
||||
containerEl.appendChild(header);
|
||||
containerEl.appendChild(infoCard);
|
||||
containerEl.appendChild(counterCard);
|
||||
containerEl.appendChild(settingsCard);
|
||||
},
|
||||
|
||||
unmount: function (containerEl) {
|
||||
containerEl.innerHTML = '';
|
||||
containerEl.className = '';
|
||||
},
|
||||
};
|
||||
|
||||
/* ------------------------------------------------------------------ */
|
||||
/* Register with the host */
|
||||
/* ------------------------------------------------------------------ */
|
||||
window.VerstakPluginRegister('verstak.platform-test', {
|
||||
components: {
|
||||
DiagnosticsPanel: DiagnosticsPanel,
|
||||
PlatformTestSettings: PlatformTestSettings,
|
||||
},
|
||||
});
|
||||
})();
|
||||
Reference in New Issue
Block a user