Allow interoperability with other require hooks

[rubennorte]

New Feature

Description

Allow interoperatibility with other require hooks (such as Babel).

Context

This is important because we'd be able to transpile code inside Marko templates (my current use case is using Object rest to extract attributes from the input).

Possible Implementation

Use the pirates package as babel-register does to work with Istanbul in a simple way.

[jasonmacdonald]

Are you using a bundler like Webpack? If so, you can still have Babel as a second loader. I do this without issues...

Webpack browser-bundle

{
                test: /\.marko|\.html$/,
                exclude: /node_modules(?!\/marko)/,
                use: [
                    'babel-loader',
                    'marko-loader'
                ]
            }

If you mean on the server side, I would not recommend using Babel Register to runtime compile code. Better off bundling for the server.

Webpack server-bundle

{
                test: /\.marko|\.html$/,
                exclude: /node_modules(?!\/marko)/,
                use: [
                    {
                        loader: 'marko-loader',
                        options: {target: 'server'}
                    }
                ]
            }

[rubennorte]

I'm asking this for the server side. I use babel-register only in development because it's easier to setup (no need for multiple watchers), that's why I need this. In production I don't have this problem because I can use babel to transpile the compiled templates.

Using webpack isn't an option for me because that'd require too many changes in my setup (and it probably won't work as I use some native modules). Also it would require a server restart as it's not compatible with marko hot reload.

[patrick-steele-idem]

@rubennorte Thank you for opening this issue and sorry for being slow to respond. I agree with you that this is an issue and pirate looks promising. Would you be interested in working on a PR? The relevant code that you would need to modify is in the following file: https://github.com/marko-js/marko/blob/master/src/node-require/index.js

Please let us know if you are interested in working on this. Thanks in advance!

[jasonmacdonald]

@rubennorte I see. Just as a heads up though, there is a way to have a single watcher do hot reloading for both the browser and server side that is super fast using the webpack-dev-server. I understand Webpack isn't an option for your current project, but just leaving the comment here in case others eventually find their way with a similar question. Webpack can take an array of configs, one for front-end and one for server, and you can hook into Webpack-dev-servers internal server through the "setup" option, which calls a function. This allows you to run the server side code on route and return any rendered template you want...

If I can find some time, I'll try to put together a sample project that does both server and browser compiling and testing. I also found a way to test Marko components in isolation using Jest and rendering to JSDOM which I really need to document as well. I personally like the workflow much better than the current marko-cli way of testing as it's just like normal JS testing. But I digress :)

[DylanPiercey]

With the modern @marko/webpack plugin it is now really easy to setup the server and browser compiler config like @jasonmacdonald mentioned. That is a path we are exploring for rollup also.

Also the main use case for this (babel) is now built into Marko 5.