How to switch Typescript based React project to Nerv

[shunia]

Not just switch, the question starts when creating a new project based on Typescript.

If the original project use libraries like react-router, it will depends on .d.ts file from React. In javascript world this won't be a problem cause there's no strong typed definition force you to follow the right type, but Typescript will not work.

Is there any way to get around this in practice? To gain the benefit both from strong typed language(with better Intellisense and much more) and performance from Nerv.

Thought you guys may have encountered this problem when actually working on Nerv because the source codes are written in Typescript.

[yuche]

Using TypeScript with Nerv is no difference than others library, .d.ts is inevitable since we don't pack the source code to NPM.

There is two article about how to start with preact and TypeScript: https://medium.com/@shakyShane/hello-world-with-preact-jsx-typescript-6d70cf2ebf01] https://dominicstpierre.com/how-to-start-with-typescript-and-preact-a9ea3e0ba4dc

I guess change jsxFactory to createElement will do.

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "jsx": "react",
    "jsxFactory": "Nerv.createElement",
    "target": "es5"
  },
  "include": [
    "src/*.ts",
    "src/*.tsx"
  ]
}

By the way, you can also import module from react or react-dom, and npm i --save-dev @types/react @types/react-dom, then alias react-dom and react to nervjs in your bundler.

[yuche]

There is anther example using Nerv with TypeScript: https://github.com/NervJS/at-ui-nerv

[shunia]

Sorry for my bad description.

What I was going to pointed out is actually the first lines in this file: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/react-router-dom/index.d.ts

Which is: Libraries in the React world are all relies on React.xxx in .d.ts file. If I am going to use a third library with Nerv, the definition file will cause problems.

It's easy to reproduce what I descriped:

1. simple codes after installed all dependencies:

   
   import * as Nerv from "nervjs";
   import { BrowserRouter as Router } from "react-router-dom";

Nerv.render( (

Hello World!

</div>), 
document.getElementById('app')

);

2. `yarn add @types/react-router-dom`.

The first step maybe fine, differs from IDE(how IDEs work with `Typescript`). But the second step will cause `type check fail` by `Typescript`.

[yuche]

Thanks to point that out, that's a problem indeed. We will do some research to figure out how to solve this.

For now, You may import module from 'react' (import React from 'react) and react-dom, then alias react and react-dom to nervjs.

And your description and English is fine, at least better than me. :)