pragmas

[threepointone]

magic pragmas

ratpack supports some magic incantations you can put at the top of your entry file to customize the webpack/babel backends. A simple example would look like this -

/* @ratpack {
  devtool: 'eval',
  alias: {
    react: 'preact-compat',
    react-dom: 'preact-compat'
  }
}
*/
require('react-dom').render(<div>look, preact!</div>, window.root)

(assuming preact-compat is available locally or in ~/.ratpack/node_modules)

Here's a full list of 'somewhat working' pragmas

devtool

devtool: 'source-map' (ref.)

public

public: './my/public/folder' (ref.)

jsx

jsx: 'Inferno.createElement'

This is different from babel's @jsx pragma, in that it will apply to all js files, not just the one

proxy

proxy: { '/api': 'http://localhost:3000' } (ref.)

provide

provide: { 'Glamor': 'glamor/react' } (ref.)

alias

alias: {
  react: 'preact-compat',
  react-dom: 'preact-compat'
}

(ref.)

define

define: { 'process.env.NODE_ENV': 'test' } (ref.)

rules

rules: [ { files: '*.vue', loader: 'vue-loader', options: { some: 'options' } } , ...]

nb: files is a glob, which gets converted to a regex for webpack's test prop

babel presets and plugins

babel: {
  presets: ['vue', [ 'a11y', {...} ],
  plugins: ['./some/path', ... ]
}

---

These don't 'work' yet, but sharing possible syntax

target

target: 'node' (ref.)

offline

offline: <options> (ref.)

autoinstall

autoinstall: true (ref.)

plugins

plugins: [ {<module> <options>}, ... ]

other

reload: true hot: true production: true port: 3999

thoughts/questions/ideas?

[threepointone]

webpack-dev-server doesn't support changing config once it's started, so I'll have to do a file watcher on the entry file, and restart the server if any of the pragmas change. any alternatives?

[threepointone]

can this be made into a webpack plugin? what does that look like?

[threepointone]

another option would be to have it as a json5 object

/* @ratpack
{
  devtool: 'eval',
  ...
} */

[edit: changed above to json from previous syntax]

[threepointone]

I got file watching to work, so it restarts webpack and the dev server whenever the pragmas change. so cool! [pats self on back]

[siddharthkp]

+1 for custom babel config!

[siddharthkp]

Can't help but think of a plugin system - things like auto install and coffeescript support

npm install ratpack-plugin-coffeescript?

Nuance: customizations can make ejecting more difficult

[threepointone]

coffeescript should work with the rules support rules: [{ files: '*.coffee', ... }]

upcoming plugin support should let you hook into webpack's plugin system (including adding npm-install-webpack-plugin by hand, if need be). In general, this + the above should cover 99% of stuff.

I can render the ejected config with stuff pulled out of pragmas, should be ok.

I want to think deeper on native autoinstall though. scary :)

Ideally, this whole thing would be a webpack plugin so it's not so coupled with ratpack, and would work with other tooling. I'm not too familiar with building webpack plugins though, so don't know where to start.

[rreusser]

Tiny nitpick: Is that actually JSON? You've used unquoted keys. Do the keys need to be double-quoted for it to be considered actual JSON? In particular I ran into a weird error once in which valid JSON might not even be valid JavaScript, so just wanted to point out there can be weird and frustrating corner cases hiding in the details here. package.json parsing tends to be similarly (frustratingly?) strict.

Otherwise love it! 😄

[threepointone]

I'm using json5 for parsing, which allows for unquoted keys and inline comments, much like babelrc parsing. All good.