Need a TypeScript without babel example of how to use this plugin

[ryardley]

I am working on a system where I have react-router, tsc compiling the backend and webpack compiling the frontend and I need to implement SSR and code splitting. There is no babel in the picture as compilation is done via tsc.

I have read the docs a few times but I am not 100% sure from the docs alone exactly what I need to do to get this plugin to work. You elude to what to do here

https://github.com/faceyspacey/babel-plugin-universal-import#typescript-and-non-babel-environments

however it is not clear exactly what is the minimal hard requirements of using this lib with typescript with no babel and SSR. (Or why we need to include all the properties. Can we create function helpers that expand a simple input to the other things there?) This is only really confusing as I know there are caveats around interpolated paths within import statements. Ie import(someVar) is a problem because there is not static initial path. Do these restrictions carry over to the other configuration options here? How can I abstract this stuff away or must I make the call within the initially loaded module that contains the calls to my lazy routes.

I will need to experiment to work this out but I find the docs are lacking.

A bare bones best practice minimal dependency example with typescript would be amazing and would save me some stress.

Cheers

[ScriptedAlchemy]

I cant write a lick of typescript <3 but look at the universal HOC and its output, if you paste that it should work?

[ScriptedAlchemy]

const UniversalComponent = universal(universalImport({
  chunkName: () => 'Foo',
  path: () => path.join(__dirname, './Foo.js'),
  resolve: () => require.resolveWeak('./Foo.js'),
  load: () => Promise.all([
    import( /* webpackChunkName: 'Foo' */ './Foo.js')
  ]).then(proms => proms[0])
}))