A Bug Fixed in One Domain Copy Does Not Reach the Other Copies
TLDR
A canvas bug fixed in one domain's HTML copy silently persists in the other three copies. There is no automated way to propagate the fix because the copies share no code. The structural fix is establishing one canonical source and making domain pages thin wrappers around it.
Symptom
A bug is fixed in electrical/index.html. The same bug is reported three weeks later in floorplan/index.html. Diffing the two files shows the fix in the electrical copy and its absence in the floorplan copy. The commits confirm the fix was never applied to floorplan.
Checking all four domain files against each other reveals multiple fixes and features that exist in some copies but not others. The copies have diverged.
Why It Happens
When domain pages are separate HTML files with duplicated implementation code, every change to the shared logic must be manually applied to every copy. There is no mechanism that enforces this. Code review does not catch it because each file change looks like a single-file fix. CI does not catch it because there are no cross-file consistency tests.
The fix in one copy is not propagated because the developer reasonably assumed the fix was domain-specific. Or they planned to apply it to the other copies and it slipped. Or the change was made by a different developer who did not know about the other copies.
All three situations are normal in a real team. The problem is structural, not behavioral.
The Fix
Establish a single canonical source. Web components are one approach:
// canonical: schema-editor.js (one file)
class SchemaEditor extends HTMLElement {
connectedCallback() {
const domain = this.getAttribute('domain') || 'general';
this._init(domain);
}
// ... all shared logic here
}
customElements.define('schema-editor', SchemaEditor);Domain pages import the component and pass the domain as an attribute:
<!-- floorplan/index.html (15 lines) -->
<!DOCTYPE html>
<html>
<head>
<title>Floor Plan Editor</title>
<script src="/tools/schema-editor/schema-editor.js" type="module"></script>
</head>
<body>
<schema-editor domain="floorplan"></schema-editor>
</body>
</html>A fix applied to schema-editor.js applies to all domains automatically. There is nothing to propagate.
Alternatively, if web components are not available or not appropriate, extract the shared logic to a JS module that all pages import:
// shared: canvas-engine.js
export function initCanvas(container, config) { / ... / }<!-- any domain page -->
<script type="module">
import { initCanvas } from '/tools/schema-editor/canvas-engine.js';
initCanvas(document.getElementById('canvas'), { domain: 'floorplan' });
</script>How to Prevent It
The moment you create a second page that shares logic with the first, create a shared module or component. Do not wait for the second fix to fail to propagate. The structural problem starts at copy creation, not at the first missed propagation.
If you already have N copies, write a script that diffs them against the most recently updated copy and reports lines that exist in some but not others. This identifies the current divergence. Then consolidate into a shared canonical source before the divergence grows.
The Generalizable Lesson
Manually propagated changes are unreliable at any frequency. If a change must be applied to N places to take effect everywhere, it will eventually be applied to fewer than N places. The solution is always structural: make the change apply to one place that all N targets depend on.