pureact icon indicating copy to clipboard operation
pureact copied to clipboard

Remove snabbdom dependency with minimal pure DOM implementation

Open Copilot opened this issue 3 months ago • 1 comments

Replaces snabbdom with a lightweight (~245 LOC) pure JavaScript DOM manipulation layer. Zero runtime dependencies.

Changes

src/render.mjs - Complete rewrite

  • Custom createElement() for DOM creation from virtual nodes
  • Diffing/patching via updateElement(), updateAttributes(), updateProperties(), updateStyles()
  • Preserves existing API: render(tree, node, oldTree) signature unchanged

package.json

  • Removed snabbdom: 3.5.1 dependency
  • Bundle size: 6KB → 4.3KB (28% smaller)

README.md

  • Updated to reflect zero dependencies

Implementation

The new implementation handles all snabbdom features used by pureact:

// Creates real DOM from virtual nodes
function createElement(vnode) {
  if (typeof vnode === 'string' || typeof vnode === 'number') {
    return document.createTextNode(String(vnode))
  }
  
  const el = document.createElement(vnode.tagName)
  
  // Handles attrs, props (including event listeners), styles
  // Recursively creates children
  // ...
}

// Efficient diffing and patching
function updateElement(parent, newNode, oldNode, index) {
  // Handles additions, removals, replacements, updates
  // Updates attrs/props/styles only when changed
  // Recursively diffs children
  // ...
}

Supports:

  • Event listeners (onclick, etc.)
  • Properties (className, value, checked)
  • Attributes and styles
  • Text and element nodes
  • Nested children

Demo

Working counter demo

Interactive counter showing component rendering, store integration, and event handling working correctly.

[!WARNING]

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • googlechromelabs.github.io
    • Triggering command: node install.mjs (dns block)
  • https://storage.googleapis.com/chrome-for-testing-public/142.0.7444.162/linux64/chrome-linux64.zip
    • Triggering command: node install.mjs (http block)

If you need me to access, download, or install something from one of these locations, you can either:

Original prompt

Try to remove the dependency to snabbdom by implementing the basic dom manipulating techniques in the same style as the rest of the codebase, minimal and pure


💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot avatar Nov 16 '25 15:11 Copilot