# JSX вместо функции h (createElement) в виджетах и других местах

**URL:** https://meta.discourse.org/t/jsx-instead-of-h-createelement-function-in-widgets-and-other-places/150040
**Category:** Development
**Created:** [01.Май.2020 09:46:39 UTC](https://meta.discourse.org/t/jsx-instead-of-h-createelement-function-in-widgets-and-other-places/150040 "2020-05-01T09:46:39Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![merefield](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/merefield/32/176214_2.png) [@merefield](https://meta.discourse.org/u/merefield)
#### Post date: [01.Май.2020 10:09:53 UTC](https://meta.discourse.org/t/jsx-instead-of-h-createelement-function-in-widgets-and-other-places/150040/2 "2020-05-01T10:09:53Z")

</div>

Вы видели это? Теперь вы можете использовать шаблоны, если вам не нравится Hyperscript:

> [@Is it just me, or is Hyperscript hideous?](https://meta.discourse.org/t/is-it-just-me-or-is-hyperscript-hideous/131635/21?u=merefield):
>
> I will give a more detailed example in few days, but I can confirm it works. import hbs from 'discourse/widgets/hbs-compiler'; import { createWidget } from "discourse/widgets/widget"; export default createWidget("foo", { template: hbs` \<p\>MY TEMPLATE\</p\> ` }); Used in a post with [wrap] and WidgetGlue: [02]

> <https://github.com/discourse/discourse/commit/dffb1fc4ee8a4d58f48145decb1590a304e8cf7d>
>
> Widgets can now specify a template which is precompiled using Glimmer's
> AST and …then converted into our virtual dom code.
> 
> Example:
> 
> \`\`\`javascript
> createWidget('post-link-arrow', {
> template: hbs\`
> {{#if attrs.above}}
> \<a class="post-info arrow" title={{i18n "topic.jump\_reply\_up"}}\>
> {{fa-icon "arrow-up"}}
> \</a\>
> {{else}}
> \<a class="post-info arrow" title={{i18n "topic.jump\_reply\_down"}}\>
> {{fa-icon "arrow-down"}}
> \</a\>
> {{/if}}
> \`,
> 
> click() {
> DiscourseURL.routeTo(this.attrs.shareUrl);
> }
> });
> \`\`\`

---

_[View the full topic](https://meta.discourse.org/t/jsx-instead-of-h-createelement-function-in-widgets-and-other-places/150040)._