Skip to content

[RFR] Bootstrap TypeScript migration - #2426

Merged
djhi merged 15 commits into
nextfrom
typescript2
Oct 17, 2018
Merged

djhi merged 15 commits into
nextfrom
typescript2

Conversation

@fzaninotto

@fzaninotto fzaninotto commented Oct 12, 2018 •

Copy link
Copy Markdown
Member

We've decided to gradually migrate react-admin to TypeScript. Explaining why isn't the purpose of this description, but we expect more stability and a better developper experience.

Our strategy is:

  • Switch transpiler from Babel to TypeScript (both for CJS and ESM builds)
  • Change the minimum code in the packages to make it work (mostly export *)
  • Change one file from the core to TypeScript to make sure the whole chain works
  • Check that the simple example still works
  • Migrate the simple example to Babel 7
  • Replace ESLint by TSLint
  • Check that the demo example still works
  • Check that tests still pass
  • Document the new standard(it will only be a standard for packages we've migrated)

Then, we'll rename files from .js to .ts/.tsx and add types little by little (outside of the scope of this PR)

Comments are welcome!

@djhi djhi left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Comment thread tsconfig.json Outdated
"compilerOptions": {
/* Basic Options */
"target":
"ES3" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Es3 ?

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In fact there is no compilation done by type script, just typechecking babel still does the job with ts-preset

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't it tsc which is used to build now according to the package.json files ?

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yes indeed

@brikou brikou left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great 1st step!

Comment thread tsconfig.json Outdated
"compilerOptions": {
/* Basic Options */
"target":
"ES3" /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */,

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In fact there is no compilation done by type script, just typechecking babel still does the job with ts-preset

Comment thread tsconfig.json Outdated
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */

/* Strict Type-Checking Options */
"strict": true /* Enable all strict type-checking options. */,

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be commented for now

Comment thread tsconfig.json
"allowJs": true /* Allow javascript files to be compiled. */,
// "checkJs": true, /* Report errors in .js files. */
"jsx":
"react" /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */,

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be preserve, otherwise some babel plugins may not work anymore

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

forget about that, because of --noEmit :)

Comment thread tsconfig.json
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should be noEmit, ... Babel does the emit job

@fzaninotto

Copy link
Copy Markdown
Member Author

@brikou we use babel to test react-admin with the simple example, but we'll use Typescript to compile the ES6/TS code to ES5 for packaging, so we need both the jsx:react and the emit.

@eknowles

Copy link
Copy Markdown

Great plan! I'd love to contribute to this migration

@fzaninotto

Copy link
Copy Markdown
Member Author

@eknowles you could help by explaining me why the unit tests fail... Apparently, transpiling js components with TypeScript messes up some of the component displayName, which appears as 'Component rather than e.g. ChipInput or ArrayField

@fzaninotto fzaninotto changed the title [WIP] Bootstrap TypeScript migration [RFR] Bootstrap TypeScript migration Oct 17, 2018
@fzaninotto

Copy link
Copy Markdown
Member Author

Green, and Ready for Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants