trotyl / ng-vdom

(Developer Preview) A virtual-DOM extension for Angular, also work as React bridge.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

NG-VDOM

Virtual DOM extension for Angular, heavily inspired by Inferno.

Installation

Install from NPM or Yarn:

npm install ng-vdom --save

Add to NgModule imports:

import { VDomModule } from 'ng-vdom';

@NgModule({
  imports: [
    VDomModule
  ]
})
export class SomeModule {}

Edit tsconfig JSX options:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "createElement"
  }
}

Usage

Online Demo.

Make an Angular Component extends Renderable with a render method:

import { Component } from '@angular/core'
import { createElement, Renderable } from 'ng-vdom'

@Component({
  template: ``
})
export class AppComponent extends Renderable {
  render() {
    return (
      <h1>Hello World!</h1>
    )
  }
}

Embedding Virtual DOM contents inside template

import { Component, NgModule } from '@angular/core'
import { VDomModule } from 'ng-vdom'

@Component({
  template: `
    <v-outlet [def]="element"></v-outlet>
  `
})
export class AppComponent {
  element = <h1>Hello World</h1>
}

@NgModule({
  imports: [ VDomModule ],
})
export class AppModule { }

What can be rendered?

  • Intrinsic elements (DOM element in browser);
  • Class component (not fully react compatible);
  • Function component;
  • Angular component (need to be in entryComponents);

Roadmap

  • Global boostrap without Angular code;
  • Fragment render support;
  • Array render support;
  • React-compatible class component support;
  • HTML Attribute support;

About

(Developer Preview) A virtual-DOM extension for Angular, also work as React bridge.


Languages

Language:TypeScript 93.6%Language:JavaScript 4.2%Language:Shell 1.6%Language:HTML 0.6%Language:CSS 0.1%