brace

brace copied to clipboard

Vanilla ace manages loading in syntax modes on demand whenever they're set, without having to specify them all up front. Our editor has a drop down to choose syntax from all the available modes and we don't want to include all the modes in our webpack bundle.

Is there a way to do this that doesn't involve something like this?

require('brace/mode/a');
require('brace/mode/b');
...
require('brace/mode/z');

You could create this logic on your own using import()/require.ensure and then change Ace mode in callback.

// pseudocode solution
select.on('change', () => {
  import('brace/mode/javascript').then(() => editor.getSession().setMode('ace/mode/javascript'))
})

You could get fancy with chunk names etc.

Thanks, I've tried at various points to get webpack dynamic import working but I can't get my head around it alongside our existing CommonsChunkPlugin setup. I switched back to using vanilla ace outside webpack.