trotyl / Ng Vdom
(Developer Preview) A virtual-DOM extension for Angular, also work as React bridge.
Stars: ✭ 249
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ng Vdom
Muve
Muve is a micro library for building interactive javascript applications.
Stars: ✭ 11 (-95.58%)
Mutual labels: virtual-dom, vdom, jsx
Wonders
🌈 Declarative JavaScript framework to build command-line applications.
Stars: ✭ 34 (-86.35%)
Mutual labels: virtual-dom, vdom, jsx
Vhtml
Render JSX/Hyperscript to HTML strings, without VDOM 🌈
Stars: ✭ 556 (+123.29%)
Mutual labels: virtual-dom, vdom, jsx
Preact
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Stars: ✭ 30,527 (+12159.84%)
Mutual labels: virtual-dom, vdom, jsx
Omi
Front End Cross-Frameworks Framework - 前端跨框架跨平台框架
Stars: ✭ 12,153 (+4780.72%)
Mutual labels: virtual-dom, vdom, jsx
Remark Vdom
plugin to compile Markdown to Virtual DOM
Stars: ✭ 44 (-82.33%)
Mutual labels: virtual-dom, vdom
Asm Dom Boilerplate
A simple boilerplate to start using asm-dom without configuration.
Stars: ✭ 49 (-80.32%)
Mutual labels: virtual-dom, vdom
Neo
Create blazing fast multithreaded Web Apps
Stars: ✭ 1,219 (+389.56%)
Mutual labels: virtual-dom, vdom
Puddles
Tiny vdom app framework. Pure Redux. No boilerplate.
Stars: ✭ 24 (-90.36%)
Mutual labels: virtual-dom, vdom
Karet
Karet is a library that allows you to embed Kefir observables into React VDOM
Stars: ✭ 81 (-67.47%)
Mutual labels: vdom, jsx
Gantt
Gantt chart library using jsx support SVG, Canvas and SSR
Stars: ✭ 148 (-40.56%)
Mutual labels: virtual-dom, jsx
Val
VirtualDOM abstraction layer - give yourself better integration and full control over the DOM with any virtual DOM library that uses a Hyperscript-like API such as React and Preact.
Stars: ✭ 181 (-27.31%)
Mutual labels: virtual-dom, vdom
Cascade
A modern library for creating user interfaces.
Stars: ✭ 50 (-79.92%)
Mutual labels: virtual-dom, jsx
Preact Render Spy
Render preact components with access to the produced virtual dom for testing.
Stars: ✭ 178 (-28.51%)
Mutual labels: vdom, jsx
Mithril.js
A JavaScript Framework for Building Brilliant Applications
Stars: ✭ 13,062 (+5145.78%)
Mutual labels: virtual-dom, vdom
Redux React Starter
DEPRECATED use the new https://github.com/didierfranc/react-webpack-4
Stars: ✭ 137 (-44.98%)
Mutual labels: virtual-dom, jsx
Htm
Hyperscript Tagged Markup: JSX alternative using standard tagged templates, with compiler support.
Stars: ✭ 7,299 (+2831.33%)
Mutual labels: virtual-dom, jsx
Backbone.vdomview
VirtualDOM-aware Backbone View
Stars: ✭ 23 (-90.76%)
Mutual labels: virtual-dom, vdom
Asm Dom
A minimal WebAssembly virtual DOM to build C++ SPA (Single page applications)
Stars: ✭ 2,604 (+945.78%)
Mutual labels: virtual-dom, vdom
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
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;
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].