Now in master: ES6 Modules + Text Rendering


(Robin Ward) #1

Approximately 2 years ago we started down the long path to ES6 modules. 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 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 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

Revisiting moving to TypeScript
Future Thoughts: Discourse's Javascript (Ember) App
Retort - a reaction-style plugin for Discourse
Separating the forum software into API and static website
Support RTL blocks for LTR-layout website and vice versa
(Robin Ward) #2

(Gerhard Schlager) #5

I believe this broke the highlighting of keyboard shortcuts.

:bulb: 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:

It works on

(Sam Saffron) #6

Site Customization area is SUPER flakey.

(Sam Saffron) #7

Staff notes does not appear to be working

(Robin Ward) #8

Just deploying fixes for:

  • Staff Notes not working
  • kbd was not whitelisted
  • ace editor was broken

(cpradio) #9

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.

(Robin Ward) #10

Done, thanks for the suggestion :slight_smile:

(cpradio) #11

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

Plugin that stopped working (no apparent errors)

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

(Robin Ward) #12

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.

(cpradio) #13

Also, what is the appropriate replacement to Discourse.Dialect.inlineBetween? I don’t see it in the deprecated.js

I was using inlineBetween at

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. :slight_smile:

Details Tags Bold/Italics
(cpradio) #14

Okay, so I’m trying to mimic

But for whatever reason, it doesn’t act like it is getting called.

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

(Sam Saffron) #15

My poor little theme is dead :frowning:

301 Moved Permanently Uncaught ReferenceError: RawHandlebars is not defined

(cpradio) #16

And for those also wondering, it is now at discourse/lib/text :slight_smile:

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).

(Régis Hanol) #17

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


Some text before

Here’s a quote

Some text after

(Robin Ward) #18

Here’s a fix for the customization not working:

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

(Robin Ward) #19

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!

(Sam Saffron) #20

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

(Robin Ward) #21

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

(Allen - Watchman Monitoring) #23

I think </strike> is broken too. (I’d tried to add it to my comment here )