ng-vdom - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #llm #go #android #machine-learning #deep-learning #nodejs #windows #pytorch #security #ios #mcp

ng-vdom

(★ 257)

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

파일 탐색기

최종 버전 다운로드 (.zip)

- config.yml
- - bug_report.md
  - feature_request.md
- - app.e2e-spec.ts
  - app.po.ts
- protractor.conf.js
- tsconfig.e2e.json
- - package.json
  - tsconfig.lib.json
- - karma.conf.js
  - ng-package.json
  - ng-package.prod.json
  - package.json
  - tsconfig.lib.json
  - tsconfig.spec.json
  - tslint.json
- - index.html
  - index.ts
  - package.json
  - tsconfig.json
  - webpack.config.js
- - app.component.css
  - app.component.spec.ts
  - app.component.tsx
  - app.module.ts
  - hello.component.ts
- - .gitkeep
- - environment.prod.ts
  - environment.ts
- browserslist
- favicon.ico
- index.html
- karma.conf.js
- main.ts
- polyfills.ts
- styles.css
- test.ts
- tsconfig.app.json
- tsconfig.spec.json
- tslint.json
.editorconfig
.gitignore
angular.json
build_bootstrap.sh
build_react_demo.sh
package.json
README.md
rollup.config.js
tsconfig.json
tslint.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 (
      <h1>Hello World!</h1>
    )
  }
}
```

Embedding Virtual DOM contents inside template

```tsx
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;