Schema Editor

A Bug Fixed in One Domain Copy Does Not Reach the Other Copies

2026-06-04

TLDR

Fixing a canvas rendering bug in electrical/index.html leaves the same bug active in floorplan/index.html when domain pages maintain independent copies of core engine code. Because duplicated files share no runtime code, bug fixes do not propagate automatically. Establishing a single canonical source module (canvas-engine.js or <schema-editor> Web Component) ensures all domain pages inherit fixes simultaneously.

Code Architecture	Bug Fix Scope	Propagation Effort	Risk of Divergence
Duplicated Page Files	Single file only	High (Manual copy required)	High (Guaranteed code drift)
Canonical Module / Web Component	All domain pages	Zero (Automatic inheritance)	Zero (Single source of truth)

Problem statement: the multi-copy bug propagation trap

A bug in grid snapping was resolved inside electrical/index.html.

Three weeks later, the exact same snapping bug was reported in floorplan/index.html.

Inspecting the codebase revealed that the fix was applied strictly to the electrical file, leaving the floorplan copy un-patched.

Technical failure mode: manual maintenance rot

When domain variants maintain independent copies of implementation logic:

Unenforced Parity: Code reviews miss un-updated files because commits touch only single domain pages.
Assumption Gaps: Developers assume a bug fix is domain-specific when it actually applies to core canvas rendering.

The fix: single canonical module architecture

Extract shared canvas logic into a single canonical module (canvas-engine.js or Web Component) imported by all domain pages:

Option A: Web component architecture (`schema-editor.js`))

// Single Canonical Web Component Entry
export class SchemaEditor extends HTMLElement {
  connectedCallback() {
    const domain = this.getAttribute('domain') || 'general';
    initCanvas(this, domain);
  }
}
customElements.define('schema-editor', SchemaEditor);

Option B: native ES module architecture (`canvas-engine.js`))

// Central Canonical Canvas Module
export function initCanvas(containerElement, options = {}) {
  const domain = options.domain || 'general';
  const config = getDomainConfig(domain);
return new CanvasInstance(containerElement, config); }

Domain host page wrapper

Domain pages import the canonical module and pass domain parameters:

<!-- floorplan/index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Floor Plan Editor</title>
  <script type="module">
    import { initCanvas } from '/src/core/canvas-engine.js';
    initCanvas(document.getElementById('canvas-root'), { domain: 'floorplan' });
  </script>
</head>
<body>
  <div id="canvas-root"></div>
</body>
</html>

With this architecture, updating canvas-engine.js fixes bugs across all domain pages automatically.

Rule of thumb: Never duplicate interactive engine code across domain HTML pages. Extract core logic into a canonical ES module or Web Component.

Read this post in the full Engineering Journal →