Features

Here's a quick reference to all the features that are supported by component generators and a quick explanation for the specific implementation in each framework flavor:

React Vue Angular Stencil Preact
Lib Dependencies React, { useState } n/a { Component, Input } { Component, h, Prop, State } { Component }
Import Statements import plugin import plugin import plugin import plugin import plugin
Component Shell Arrow function with hooks export default Vue obj export class + decorator export class + decorator Arrow func or Class with state
Dependencies Decl. n/a components key in Vue obj n/a n/a n/a
Element Node JSX Tag HTML Tag HTML Tag JSX Tag JSX Tag
Static Attr JSX Attr HTML Attr HTML Attr JSX Attr JSX Attr
Static Array Attr JSX Expression key={ value } :key="value" + add on data [key]="value" + add in class JSX Expression key={ value } :key="value" + add on data
Dynamic Attr JSX Expression key={ value } :key="value" [key]="value" JSX Expression key={ value } :key="value"
Event Handler inline handler event={ () => { } } @event="handler" + methods obj (event)="handler" + class prop inline handler event={() => { }} inline handler event={() => { }}
State Change hook call setStateKey(newValue) this.stateKey = newValue this.stateKey = newValue this.stateKey = newValue this.setState()
State Toggle hook call setStateKey(!stateKey) this.stateKey = !this.stateKey this.stateKey = !this.stateKey this.stateKey = !this.stateKey this.setState()
Prop Call props.propKey(args) this.$emit(propKey) work in progress props.propKey(args) props.propKey(args)
Static Style CSS plugin - extract to .css CSS plugin - extract to .css CSS plugin - extract to .css CSS plugin - extract to .css CSS plugin - extract to .css
Dynamic Style InlineStyle with JSX Expression Inline Style - :style="{...}" Inline Style - [ngStyle]="{...}" InlineStyle with JSX Expression InlineStyle with JSX Expression
Static Node JSX Text HTML Text HTML Text JSX Text JSX Text
Dynamic Node JSX Expression { } Template Template JSX Expression { } JSX Expression { }
Conditional Node Conditional Render (cond && value) v-if attr *ngIf attr Conditional Render(cond && value) Conditional Render(cond && value)
Repeat Node array.map with callback v-for attr *ngFor attr array.map with callback array.map with callback
Repeat Key JSX Expression key={ } attr :key="key" attr [attr.key]="key" JSX Expression key={ } JSX Expression key={ }
Basic Slot { props.children } <slot> <slot> <slot> { props.children }
Named Slot n/a <slot name=""> <slot name=""> <slot name=""> n/a
Prop Representation props.propKey propKey / this.propKey propKey / this.propKey this.propKey props.propKey
State Representation stateKey (declared with hooks) stateKey / this.stateKey stateKey / this.stateKey this.stateKey this.state.stateKey
Local Representation localKey localKey / this.localKey localKey / this.localKey this.localKey localKey
Prop Definition PropTypes plugin props object on component class members with types class members with types PropTypes plugin