Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trotyl/ng-vdom
(Developer Preview) A virtual-DOM extension for Angular, also work as React bridge.
https://github.com/trotyl/ng-vdom
angular jsx react tsx vdom virtual-dom
Last synced: about 2 months ago
JSON representation
(Developer Preview) A virtual-DOM extension for Angular, also work as React bridge.
- Host: GitHub
- URL: https://github.com/trotyl/ng-vdom
- Owner: trotyl
- Created: 2017-09-17T05:24:43.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-14T17:13:10.000Z (over 5 years ago)
- Last Synced: 2024-07-19T01:19:53.505Z (2 months ago)
- Topics: angular, jsx, react, tsx, vdom, virtual-dom
- Language: TypeScript
- Homepage:
- Size: 396 KB
- Stars: 260
- Watchers: 11
- Forks: 12
- Open Issues: 47
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NG-VDOM
Virtual DOM extension for Angular, heavily inspired by [Inferno](https://github.com/infernojs/inferno/).
## Installation
Install from NPM or Yarn:
```bash
npm install ng-vdom --save
```
Add to NgModule imports:
```typescript
import { VDomModule } from 'ng-vdom';
@NgModule({
imports: [
VDomModule
]
})
export class SomeModule {}
```
Edit tsconfig JSX options:
```json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "createElement"
}
}
```
## Usage
[Online Demo](https://stackblitz.com/edit/angular-vjj9vt?file=src%2Fapp%2Fclock.component.ts).
Make an Angular Component extends `Renderable` with a `render` method:
```tsx
import { Component } from '@angular/core'
import { createElement, Renderable } from 'ng-vdom'
@Component({
template: ``
})
export class AppComponent extends Renderable {
render() {
return (
Hello World!
)
}
}
```
Embedding Virtual DOM contents inside template
```tsx
import { Component, NgModule } from '@angular/core'
import { VDomModule } from 'ng-vdom'
@Component({
template: `
`
})
export class AppComponent {
element =
Hello World
}
@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;