Surgical is a declarative JavaScript library with native DOM flexibility and performance, for building fast UIs.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
npm-build/surgical
packages Stop try-catching errors and augmenting with enhanceError Nov 5, 2018
workspace
LICENSE
README.md

README.md

Surgical  GitHub license npm version

Surgical is a declarative JavaScript library with native DOM flexibility and performance, for building fast UIs.

Surgical is exceptionally modular and highly granular; use it to declaratively update a single attribute of an element or render an entire interactive UI just like you would with React. The Surgical core is unopinionated by design and interoperates seamlessly with the native DOM, other frameworks and even different versions of Surgical. Opinionated and ergonomic behaviors for achieving your specific project goals are trivially layered on-top of Surgical. Surgical is the native DOM, but declarative.

Not much to see here yet. Moving fast and breaking things.

Important

Source/NPM files are in ES6 syntax and also uses import, export. Depends on Object.assign, Object.is, Object.keys and Map. Only IE11+ officially supported at the moment, official IE9 support is planned but it should work with the correct polyfills. Google Closure Compiler ADVANCED support is planned.

Getting started

More information and examples to come, expect things to change.

For a reasonably complete example look at the TodoMVC implementation: workspace/src/todomvc-surgical.js

Below is a minimal example for getting started.

import SurgicalDeclarativeComponent from 'surgical/SurgicalDeclarativeComponent';
import SurgicalElement from 'surgical/SurgicalElement';
import SurgicalText from 'surgical/SurgicalText';
import {declare} from 'surgical/declare';

class MyExample extends SurgicalDeclarativeComponent {
  handleClick() {
    console.log('You clicked me!');
  }
  render() {
    return (
      declare(SurgicalElement, {
        tagName: 'button',
        className: 'my-button-class',
        listeners: {
          'click': this.handleClick.bind(this)},
        children: [
          declare(SurgicalText, this.props.label),
        ],
      })
    );
  }
}

let instance = MyExample.createComponent(document, {label: 'Click me!'});
document.body.appendChild(instance.node);
instance.update({label: 'Click me! Now!'});
// instance.destroy();