Possibility of tsx support for Typescript views

[hydrotik]

Curious on your thoughts on how easy it might be to add some transpiling middlware to parse .tsx templates in Typescript?

[jedireza]

Thanks for creating an issue. I haven't worked with Typscript yet.

You can define any extention jsx or in your case tsx when setting up the plugin. As long as your transpiler does the converstion I'd expect things to work. Working off of the the example from the readme:

const Hapi = require('hapi');
const Vision = require('vision');
const HapiReactViews = require('hapi-react-views');

// This is where you'd setup your transpiler/preprocessor. I'm
//  unsure if there is a Typescript preset for babel or not.

/*
require('babel-core/register')({
    presets: ['react', 'es2015']
});
*/

const server = new Hapi.Server();

server.register(Vision, (err) => {

    if (err) {
        console.log('Failed to load vision.');
    }

    server.views({
        engines: {
            tsx: HapiReactViews // see how I used tsx instead of jsx here
        },
        compileOptions: {}, // optional
        relativeTo: __dirname,
        path: 'views'
    });
});

I hope this helps. Please update this thread with your learnings.

[hydrotik]

Thanks for the info! I was able to switch the file type, but I'm getting an unexpected token as I was expecting to get. Is there a place to insert Typescript parsing as a middleware of sorts? I was also thinking of using a web pack typescript loader, but that seems overkill.

Right now my manifest looks like:

        'inert': {},
        'vision': {},
        'visionary': {
            engines: {
              tsx: "hapi-react-views"
            },
            compileOptions: {
                useNodeJsx: false
            },
            relativeTo: __dirname,
            path: "./src/global/server/views/"
        }

[jedireza]

Yes, the unexpected token is because there is un-transpiled syntax being parsed. Since I don't know much about Typscript beyond it being a typed superset of JavaScript, I'm not sure how helpful I can be at this stage.

In regards to this plugin, there isn't a middleware hook. It seems like you need two layers of transpilation though. First from TypeScript to JSX and then JSX to JavaScript.

[hydrotik]

Ok understood. seems like this would be outside the scope of the plugin. I'll dig a little deeper and see

[hydrotik]

https://github.com/hydrotik/hapi-typescript-views/