Bendik Aagaard LynghaugandClaude Fable 5
ce1ec9e4a9
Packages renamed to the @uhhm scope (@uhhm/buuh, @uhhm/buuh-html, @uhhm/buuh-component, @uhhm/buuh-devtools, @uhhm/buuh-migrate, @uhhm/bankai). Scoping is load-bearing twice over: npm routes registries per scope so @uhhm/* resolves against project.uhhm.no while everything else stays on npmjs, and it means this fork never squats upstream's names anywhere. The codemod now migrates choo v7 apps to the @uhhm names. README rewritten with the fork framing and full upstream credit; the choojs RFC moves to docs/upstream-rfc-draft.md, in the drawer for if this work ever goes home. API unchanged — choo() is still choo(). Also: Gitea Actions CI + release workflows (npm publish to the uhhm registry on tag push, CDN bundle uploaded as a generic package), npm run bundle producing dist-cdn/buuh.js (the whole framework as one minified ES module for import-map use), docs/publishing.md explaining what Gitea Packages is (a real npm registry) and is not (a CDN — serve the bundle from a static host with module-safe MIME instead), and onload.js constructing window.MutationObserver to match its own guard (surfaced by smoke-testing the bundle outside a full browser). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014NgfSjHE11oFpoSnLVKLXd
73 lines
2.4 KiB
JavaScript
73 lines
2.4 KiB
JavaScript
// Component behavior in both worlds: plain string rendering without a DOM,
|
|
// and mount/update/morph/proxy semantics inside happy-dom.
|
|
|
|
import { test, before } from 'node:test'
|
|
import assert from 'node:assert'
|
|
import { Window } from 'happy-dom'
|
|
|
|
import serverHtml from '@uhhm/buuh-html/server'
|
|
|
|
test('renders via createElement on the server (no window)', async () => {
|
|
const { default: Component } = await import('../index.js')
|
|
|
|
class Title extends Component {
|
|
createElement (text) {
|
|
return serverHtml`<h1>${text}</h1>`
|
|
}
|
|
|
|
update () { return false }
|
|
}
|
|
|
|
const res = new Title().render('hello')
|
|
assert.strictEqual(res.toString(), '<h1>hello</h1>')
|
|
})
|
|
|
|
test('browser: render, mount, update morphs in place, proxy stands in', async () => {
|
|
const win = new Window()
|
|
globalThis.window = win
|
|
globalThis.document = win.document
|
|
// module registry caches per specifier; component/index.js re-evaluates
|
|
// _hasWindow per instance, so importing after globals are set is enough
|
|
const { default: Component } = await import('../index.js?browser')
|
|
const { default: html } = await import('@uhhm/buuh-html/browser')
|
|
const { default: morph } = await import('@uhhm/buuh-html/morph')
|
|
|
|
class Counter extends Component {
|
|
createElement (n) {
|
|
this.n = n
|
|
return html`<div>count ${n}</div>`
|
|
}
|
|
|
|
update (n) {
|
|
return n !== this.n
|
|
}
|
|
}
|
|
|
|
const counter = new Counter('counter')
|
|
|
|
const el = counter.render(0)
|
|
assert.ok(el.getAttribute('data-nanocomponent'), 'root node branded')
|
|
document.body.appendChild(el)
|
|
assert.strictEqual(counter.element, el, 'element getter finds mounted node')
|
|
|
|
// unchanged args: update() false, no morph, proxy returned
|
|
const proxy = counter.render(0)
|
|
assert.ok(proxy.hasAttribute('data-proxy'), 'returns proxy while mounted')
|
|
assert.ok(proxy.isSameNode(el), 'proxy claims identity of the mounted node')
|
|
|
|
// changed args: update() true, mounted node morphs in place
|
|
counter.render(1)
|
|
assert.strictEqual(el.textContent, 'count 1', 'mounted node updated in place')
|
|
|
|
// and the proxy plays correctly with nanomorph in a parent view
|
|
const parent = (n) => {
|
|
const inner = counter.render(n)
|
|
return html`<main>${inner}</main>`
|
|
}
|
|
const treeA = parent(1)
|
|
// simulate first full-page render: mounted component moves into the tree
|
|
assert.ok(treeA.querySelector('[data-proxy]') || treeA.contains(el))
|
|
|
|
document.body.removeChild(el)
|
|
})
|