Coder Social home page Coder Social logo

syranide / surgical Goto Github PK

View Code? Open in Web Editor NEW
7.0 4.0 1.0 127 KB

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

License: MIT License

JavaScript 95.51% HTML 0.77% CSS 3.72%
javascript declarative library frontend ui

surgical's Introduction

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.


Source/NPM files are in ES6 syntax and also uses import, export. Depends on Object.assign,, 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!'});
instance.update({label: 'Click me! Now!'});
// instance.destroy();

surgical's People


gudorian avatar syranide avatar


 avatar  avatar  avatar  avatar  avatar  avatar  avatar


 avatar  avatar  avatar  avatar



Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.