Skip to content
TSX/JSX support for ember templates
Branch: master
Clone or download
Latest commit ffb2adc Jul 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
addon Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
app Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
blueprints/jsx-template-to-hbs ci tests fix Jun 28, 2019
config Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
tests ci tests fix Jun 28, 2019
vendor Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
.editorconfig Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
.ember-cli Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
.eslintignore Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
.eslintrc.js
.gitignore Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
.npmignore Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
.template-lintrc.js Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
.travis.yml ci fix Jun 28, 2019
.watchmanconfig Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
CONTRIBUTING.md Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
LICENSE.md Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
README.md subtemplates declaration Jun 27, 2019
broccoli-jsx.js ci tests fix Jun 28, 2019
ember-cli-build.js Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
index.js hello world Jun 24, 2019
package.json 0.0.14 Jul 10, 2019
testem.js Initial Commit from Ember CLI v3.10.0 Jun 24, 2019
yarn.lock syntax bump Jul 10, 2019

README.md

ember-cli-jsx-templates

Greenkeeper badge

This addon allow use .jsx/.tsx syntaxis for templates.


q: Why?

a: If you came from React, or want to "touch" JSX in Ember with an easy way, this is for you!


q: Can I use typings? Component types for autocomplete?

a: Yes! You can create .tsx template and import any typings into it.


q: How it's working?

a: Addon perform .jsx to JSX-AST transform, after we transform JSX-AST into HBS-AST and after we compile template from valid handlebars AST.


q: Is it Turing complete transpilation?

a: Nope, and never planned to be, all supported cases described in jsx-caster tests and jsx-extractor tests


q: If I spend some time, playing this addon, can I revert created jsx into hbs?

a: Yes, if you played enough with jsx you able to convert template to hbs using ember-meta-explorer extractJSXComponents method.


Compatibility

  • Ember.js v2.18 or above
  • Ember CLI v2.13 or above

Installation

ember install ember-cli-jsx-templates

Usage

template-only usecase

// app/templates/components/my-functional-component
export default function MyFunctionalComponent({name, onChange}) {
 const inputPrefix = 'New name:';
 return (
   <>
   <h1>JSX templates for Ember!</h1>
   <p>Hello, {name}!</p><br />
   {inputPrefix}: <input class="my-input" value={name} onkeyup={onChange}/>
   </>
 )
}

any ember component + template usecase (with this):

// app/components/my-functional-component
import Component from '@ember/component';
export default class MyComponent extends Component {
    inputPrefix = "Nemo";
    onChange(e) {
        this.set('inputPrefix', e.target.value);
    }    
}

and

// app/templates/components/my-functional-component
export default function MyFunctionalComponent() {
    return (
      <>
      <h1>JSX templates for Ember!</h1>
      <p>Hello, {this.inputPrefix}!</p><br />
      Update: <input class="my-input" value={name} onkeyup={action(this.onChange)}/>
      </>
    )
}

basic usage:

// app/templates/components/my-component.jsx
<div attributes>{3 + 2} { props.children } { name } { props.external }</div>

will be compiled into:

<div ...attributes> {{add 3 2}} {{yield}} {{this.name}} {{@external}}></div>

jsx for ember components:

<MyComponent attr-name="foo" value={42} data-test-name="item" onChange={action("update")} />

will be compiled into:

<MyComponent name="foo" @value={{42}} data-test-name="item" @onChange={{action "update"}} />

jsx having modifier:

<div mod-style={{color:"#face8d", ["font-size"]: "12px"}}></div>
// named arguments for modifiers not supported

will be compiled into:

<div {{style (hash color="#face8d" font-size= "12px")}}></div>

access to component's yielded context:

<MyComponent as={ctx, param}>{ctx.name} {param}</MyComponent>

will be compiled into:

<MyComponent as |ctx param|>{{ctx.name}} {{param}}</MyComponent>

yield with params:

<div>{yield(name, {foo:1})}</div>

will be compiled into:

<div>{{yield name (hash foo=1)}}</div>

.tsx template, with typings & autocomplete:

import { FooProp } from "./../../typings";
export default function TypedHello(props: FooProp) {
    return <h1>This is typed template! And name is: {props.name}</h1>
}

will be compiled into:

<h1>This is typed template! And name is: {{@name}}</h1>

subtemplates declaration:

export function MyComponent() {
  const localTemplate = <h1>Hello!</h1>
  return <div>{localTemplate}</div>
}

will be compiled into:

<div><h1>Hello!</h1></div>

How convert JSX back to HBS and save it?

Following blueprint created to convert any .jsx/.tsx file into .hbs template.

ember g jsx-template-to-hbs app/templates/components/hello-world.jsx

options:
   no-remove - no remove jsx/tsx source
   no-write  - no wite converted output
   no-rewrite - no rewrite template file if already exists
   new-path:"app/templates/components/original.hbs" - new template file name

Can I convert HBS back to JSX? - nope


All supported cases: lifeart/ember-meta-explorer/test/utils/jsx-caster.test.js

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.

You can’t perform that action at this time.