# Now in master: ES6 Modules + Text Rendering

**URL:** https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815
**Category:** Development
**Created:** [2016年七月4日 18:29 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815 "2016-07-04T18:29:40Z")
**Posts on this page:** 20
**Page:** 1

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月4日 18:29 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/1 "2016-07-04T18:29:40Z")

</div>

Approximately 2 years ago we [started down the long path to ES6 modules](https://meta.discourse.org/t/future-thoughts-discourses-javascript-ember-app/16715). For a long time, I’d spent 30 minutes a day working on converting files, which eventually got replaced with my strategy of converting a file every time I had to open it.

Over time we got most of the way there, but with one big holdout: our text rendering engine. It was in standard ES5 modules because we used the same text rendering code on the server and client side of Discourse, and the server side didn’t have a way to parse the new module syntax.

### New Markdown Bindings

In our latest release, we set aside some time to refactor the old markdown engine to ES6. While in there, I removed all of our dependencies on global state, so that when you render text you can just pass in all the options for various rendering features. This is a massive help in multi site environments where some features couldn’t be turned off when initialized on the server side.

This allows us a path forward to integrating [commonmark](http://commonmark.org/) in a future release of Discourse.

### 100% ES6 Modules

Once the markdown code was refactored to use ES6 modules, it turned out there were only a dozen outliers left over. I went in and upgraded all those files, so the next Discourse release will be 100% ES6 modules, which feels awesome after so many years of slowly working towards it.

> N.B. there are still many references to modules like `Discourse.XYZ` which need to be replaced, but that should be pretty smooth sailing now that all the modules are hooked up and working.)

This new branch has **MANY MANY** changes, so we are very likely to experience some regressions over the next short while. I am only deploying [meta.discourse.org](http://meta.discourse.org) to the branch right now, until we are sure it’s more or less stable. Then I’ll merge it into master.

Now is a good time to help us poke around the site and let us know if anything at all seems broken or weird. Please post your bugs in this topic, which I will update as issues get fixed!

If you are a plugin author, please try out your plugins with the branch and let me know if anything has broken. I will work quickly with you to fix issues before this ends up in a `beta` branch of ours.

The branch with all the new ES6 fixes is called `prettyes6`

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月4日 18:30 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/2 "2016-07-04T18:30:09Z")

</div>



---

<div class="post-metadata">

### Author: ![gerhard](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/gerhard/32/119479_2.png) [@gerhard](https://meta.discourse.org/u/gerhard)
#### Post date: [2016年七月4日 22:23 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/5 "2016-07-04T22:23:36Z")

</div>

I believe this broke the highlighting of keyboard shortcuts.

> 💡 **Tip** : You can abort the import anytime you want by pressing Ctrl+C  
> When you restart the import it will continue where it left off.

Here’s the raw text that doesn’t work anymore:  
`<kbd>Ctrl</kbd>+<kbd>C</kbd>`

It works on [try.discourse.org](http://try.discourse.org):  
 ![](https://global.discourse-cdn.com/meta/original/3X/d/7/d755c0fddcf0887ad5701d0824877901d134ab65.png)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2016年七月4日 23:58 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/6 "2016-07-04T23:58:57Z")

</div>

Site Customization area is SUPER flakey.

 ![](https://global.discourse-cdn.com/meta/original/3X/1/f/1f2b3929f37c8bce12d47f7378fb85bee96bcc0c.png)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2016年七月5日 09:58 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/7 "2016-07-05T09:58:47Z")

</div>

Staff notes does not appear to be working

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月5日 15:13 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/8 "2016-07-05T15:13:24Z")

</div>

Just deploying fixes for:

- Staff Notes not working
- `kbd` was not whitelisted
- ace editor was broken

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年七月5日 15:45 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/9 "2016-07-05T15:45:39Z")

</div>

I’m assuming that `prettyes6` is the branch containing these changes. It may be a good idea to reference that in the original post. Hoping I can get to testing against it in the next day or two.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月5日 16:06 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/10 "2016-07-05T16:06:40Z")

</div>

Done, thanks for the suggestion 🙂

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年七月5日 19:40 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/11 "2016-07-05T19:40:44Z")

</div>

Not sure why, but registering emoji’s broke in this branch. It works fine running on tests-passed, but fails on the prettyes6 branch

Reference to feature  
[https://meta.discourse.org/t/emojis-not-appearing-in-the-published-message/35200/11?u=cpradio](https://meta.discourse.org/t/emojis-not-appearing-in-the-published-message/35200/11)

Plugin that stopped working (no apparent errors)  
[https://github.com/cpradio/discourse-plugin-vb-emoticons](https://github.com/cpradio/discourse-plugin-vb-emoticons)

I deleted the cache on my dev machine to make sure that wasn’t the problem.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月5日 20:56 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/12 "2016-07-05T20:56:04Z")

</div>

Ah, I was a little concerned this might happen. There was an old API for adding emoji plugins that we hadn’t used in a while, since now users can upload whatever emoji they want via the admin interface.

It was easier to remove it going forward, but I didn’t think of someone adding an entire set this way. I’ll look into restoring that functionality.

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年七月5日 21:23 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/13 "2016-07-05T21:23:49Z")

</div>

Also, what is the appropriate replacement to Discourse.Dialect.inlineBetween? I don’t see it in the [deprecated.js](https://github.com/discourse/discourse/blob/prettyes6/app/assets/javascripts/deprecated.js)

I was using `inlineBetween` at  
[https://github.com/cpradio/discourse-plugin-checklist/blob/master/assets/javascripts/discourse/checklist\_dialect.js](https://github.com/cpradio/discourse-plugin-checklist/blob/master/assets/javascripts/discourse/checklist_dialect.js)

Edited: Seems addPreProcessor will also cause me problems.

Another Edit: And what about Discourse.Markdown.whiteListTag? That used to be the way to add custom tags, now it is deprecated.

**Last Edit (hopefully):** Seems a lot of this was moved to discourse-markdown and pretty-text. Trying a couple of things out to see if that holds up. 🙂

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年七月5日 22:18 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/14 "2016-07-05T22:18:28Z")

</div>

Okay, so I’m trying to mimic  
[https://github.com/discourse/discourse-spoiler-alert/blob/master/assets/javascripts/lib/discourse-markdown/spoiler-alert.js.es6](https://github.com/discourse/discourse-spoiler-alert/blob/master/assets/javascripts/lib/discourse-markdown/spoiler-alert.js.es6)

But for whatever reason, it doesn’t act like it is getting called.  
[https://github.com/cpradio/discourse-plugin-checklist/blob/es6-pretty-text/assets/javascripts/lib/discourse-markdown/checklist.js.es6](https://github.com/cpradio/discourse-plugin-checklist/blob/es6-pretty-text/assets/javascripts/lib/discourse-markdown/checklist.js.es6)

**Edit:** Okay, I got this working now 🙂 Now on to figure out what replaces Discourse.Markdown.cook 🙂

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2016年七月5日 22:47 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/15 "2016-07-05T22:47:50Z")

</div>

My poor little theme is dead ☹

`https://meta.discourse.org/?preview-style=589a2b8f-237f-4408-b86b-2d5f158b22b6`

> [meta.discourse.org/:388](http://meta.discourse.org/:388) Uncaught ReferenceError: RawHandlebars is not defined

---

<div class="post-metadata">

### Author: ![cpradio](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/cpradio/32/4970_2.png) [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [2016年七月6日 00:36 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/16 "2016-07-06T00:36:16Z")

</div>

> [@cpradio](#):
>
> Edit: Okay, I got this working now 🙂 Now on to figure out what replaces Discourse.Markdown.cook 🙂

And for those also wondering, it is now at `discourse/lib/text` 🙂

And with that, I think all of my plugins now support the ES6 branch, except for the Emoji one.

The checklist one seems to not really have a way to handle the changes in a backwards compatible way though… Or maybe it does based on plugin version, maybe I can reference 0.4 versus 0.5 and call two different initializers (I’m not sure it is worth the effort).

---

<div class="post-metadata">

### Author: ![zogstrip](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/zogstrip/32/512781_2.png) [@zogstrip](https://meta.discourse.org/u/zogstrip)
#### Post date: [2016年七月6日 08:48 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/17 "2016-07-06T08:48:58Z")

</div>

Details plugin isn’t working as expected (works fine in the composer, not so fine in the cooked version ;))

> **Details**
>
> Some text before
> 
> > Here’s a quote
> 
> Some text after

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月6日 16:30 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/18 "2016-07-06T16:30:27Z")

</div>

Here’s a fix for the customization not working:

[https://github.com/discourse/discourse/commit/494b3054c8c08b7677d380d04a4bc727547147ec](https://github.com/discourse/discourse/commit/494b3054c8c08b7677d380d04a4bc727547147ec)

Is there a way to force customizations to rebake though? It will need to go through the new compiler.

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月6日 16:48 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/19 "2016-07-06T16:48:22Z")

</div>

> [@cpradio](#):
>
> Also, what is the appropriate replacement to Discourse.Dialect.inlineBetween?

It should have been deprecated. I’ve pushed out a new commit that displays a proper message if you use it. It looks like you figured out how to export a `setup()` method though, which is great!

[https://github.com/discourse/discourse/commit/59a5836d3af4b1f93ff1271078b155c5e2b2f007](https://github.com/discourse/discourse/commit/59a5836d3af4b1f93ff1271078b155c5e2b2f007)

---

<div class="post-metadata">

### Author: ![sam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sam/32/102149_2.png) [@sam](https://meta.discourse.org/u/sam)
#### Post date: [2016年七月6日 21:07 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/20 "2016-07-06T21:07:41Z")

</div>

Tricky, perhaps if we null the baked part it can figure out that happened and rebake?

---

<div class="post-metadata">

### Author: ![eviltrout](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/eviltrout/32/5275_2.png) [@eviltrout](https://meta.discourse.org/u/eviltrout)
#### Post date: [2016年七月7日 20:29 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/21 "2016-07-07T20:29:14Z")

</div>

I think this should do it. Would be nice if you could review, thanks!

[https://github.com/discourse/discourse/commit/80bfb983c0ae2291228ad5d4e4b8381958ba966e](https://github.com/discourse/discourse/commit/80bfb983c0ae2291228ad5d4e4b8381958ba966e)

---

<div class="post-metadata">

### Author: ![watchmanmonitor](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/watchmanmonitor/32/430970_2.png) [@watchmanmonitor](https://meta.discourse.org/u/watchmanmonitor)
#### Post date: [2016年七月9日 00:43 UTC](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815/23 "2016-07-09T00:43:13Z")

</div>

I think `</strike>` is broken too. (I’d tried to add it to my comment [here](https://meta.discourse.org/t/make-members-of-a-group-watch-a-category-by-default/22127/50) )

[下一頁](https://meta.discourse.org/t/now-in-master-es6-modules-text-rendering/46815.md?page=2)
