Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/lifeart/ember-cli-jsx-templates
TSX/JSX support for ember templates
https://github.com/lifeart/ember-cli-jsx-templates
addon ember-cli ember-components ember-templates hbs jsx jsx-compiler
Last synced: 23 days ago
JSON representation
TSX/JSX support for ember templates
- Host: GitHub
- URL: https://github.com/lifeart/ember-cli-jsx-templates
- Owner: lifeart
- License: mit
- Created: 2019-06-24T19:28:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T20:05:16.000Z (almost 2 years ago)
- Last Synced: 2024-10-02T12:20:48.644Z (about 1 month ago)
- Topics: addon, ember-cli, ember-components, ember-templates, hbs, jsx, jsx-compiler
- Language: JavaScript
- Size: 3.25 MB
- Stars: 16
- Watchers: 2
- Forks: 0
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-ember - ember-cli-jsx-templates - TSX/JSX support for ember templates. (Packages / Templating)
README
ember-cli-jsx-templates
==============================================================================
[](https://greenkeeper.io/)
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](https://github.com/lifeart/ember-meta-explorer/blob/master/test/utils/jsx-caster.test.js) and [jsx-extractor tests](https://github.com/lifeart/ember-meta-explorer/blob/master/test/utils/jsx-extractor.test.js)
---
__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 v3.16 or above
* Ember CLI v2.13 or above
* Node.js v10 or above
Installation
------------------------------------------------------------------------------
```
ember install ember-cli-jsx-templates
```
Usage
------------------------------------------------------------------------------
template-only usecase
```jsx
// app/templates/components/my-functional-component
export default function MyFunctionalComponent({name, onChange}) {
const inputPrefix = 'New name:';
return (
<>
JSX templates for Ember!
Hello, {name}!
{inputPrefix}:
>
)
}
```
any ember component + template usecase (with this):
```js
// 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
```jsx
// app/templates/components/my-functional-component
export default function MyFunctionalComponent() {
return (
<>
JSX templates for Ember!
Hello, {this.inputPrefix}!
Update:
>
)
}
```
------------------------------------------------------------------------------
basic usage:
```jsx
// app/templates/components/my-component.jsx
{3 + 2} { props.children } { name } { props.external }
```
will be compiled into:
```hbs
{{add 3 2}} {{yield}} {{this.name}} {{@external}}>
```
---
jsx for ember components:
```jsx
```
will be compiled into:
```hbs
```
---
jsx having modifier:
```jsx
// named arguments for modifiers not supported
```
will be compiled into:
```hbs
```
---
access to component's yielded context:
```jsx
{ctx.name} {param}
```
will be compiled into:
```hbs
{{ctx.name}} {{param}}
```
---
yield with params:
```jsx
{yield(name, {foo:1})}
```
will be compiled into:
```hbs
{{yield name (hash foo=1)}}
```
---
`.tsx` template, with typings & autocomplete:
```tsx
import { FooProp } from "./../../typings";
export default function TypedHello(props: FooProp) {
return This is typed template! And name is: {props.name}
}
```
will be compiled into:
```hbs
This is typed template! And name is: {{@name}}
```
---
subtemplates declaration:
```jsx
export function MyComponent() {
const localTemplate = Hello!
return {localTemplate}
}
```
will be compiled into:
```hbs
Hello!
```
---
### 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](https://github.com/lifeart/ember-meta-explorer/blob/master/test/utils/jsx-caster.test.js)
Contributing
------------------------------------------------------------------------------
See the [Contributing](CONTRIBUTING.md) guide for details.
License
------------------------------------------------------------------------------
This project is licensed under the [MIT License](LICENSE.md).