Skip to content

Commit

Permalink
Add TypeScript to the build system
Browse files Browse the repository at this point in the history
This commit modifies the build system so that TypeScript files can be
transpiled into ES5 just like JavaScript files.

Note that this commit does not change the build system to run TypeScript
files through TypeScript. This means that no files will be type-checked
at this stage, because we expect type-checking to be handled elsewhere
(live, via your editor integration with `tsserver`, and before a PR is
merged, via `yarn lint`). Rather, we merely instruct Babel to recognize
and strip TypeScript-specific syntax from any files that have it, as if
those files had been written using JavaScript syntax alone.

This approach has an upside: it prevents the build process from being
negatively impacted with respect to performance (as TypeScript takes a
significant amount of time to run).

This approach also has a downside, however. Because Babel's [TypeScript
transform][1], which does the real work here, does not actually run
files through TypeScript, but merely mimics TypeScript's parser, there
are a few syntactical forms that Babel does not recognize, and we may
have to either not use these forms or use another transform to get Babel
to understand them. Also, any settings we place in `tsconfig.json` will
be completely ignored by Babel (although there are some analogs for the
most important settings). These and other caveats are detailed in the
[documentation for the transform][2].

[1]: https://babeljs.io/docs/en/babel-plugin-transform-typescript
[2]: https://babeljs.io/docs/en/babel-plugin-transform-typescript#typescript-compiler-options
  • Loading branch information
mcmire committed Mar 1, 2022
1 parent 93d8f12 commit 9b822d3
Show file tree
Hide file tree
Showing 7 changed files with 186 additions and 136 deletions.
4 changes: 4 additions & 0 deletions babel.config.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,11 @@
module.exports = function (api) {
api.cache(false);
return {
parserOpts: {
strictMode: true,
},
presets: [
'@babel/preset-typescript',
[
'@babel/preset-env',
{
Expand Down
1 change: 1 addition & 0 deletions development/build/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ require('@babel/plugin-proposal-optional-chaining');
require('@babel/plugin-proposal-nullish-coalescing-operator');
require('@babel/preset-env');
require('@babel/preset-react');
require('@babel/preset-typescript');
require('@babel/core');
// ESLint-related
require('@babel/eslint-parser');
Expand Down
9 changes: 8 additions & 1 deletion development/build/scripts.js
Original file line number Diff line number Diff line change
Expand Up @@ -606,17 +606,24 @@ function setupBundlerDefaults(
},
) {
const { bundlerOpts } = buildConfiguration;
const extensions = ['.js', '.ts', '.tsx'];

Object.assign(bundlerOpts, {
// Source transforms
transform: [
// Remove code that should be excluded from builds of the current type
createRemoveFencedCodeTransform(buildType, shouldLintFenceFiles),
// Transpile top-level code
babelify,
[
babelify,
// Run TypeScript files through Babel
{ extensions },
],
// Inline `fs.readFileSync` files
brfs,
],
// Look for TypeScript files when walking the dependency tree
extensions,
// Use entryFilepath for moduleIds, easier to determine origin file
fullPaths: devMode,
// For sourcemaps
Expand Down
9 changes: 5 additions & 4 deletions lavamoat/build-system/policy-override.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,14 @@
"@babel/core": {
"packages": {
"<root>": true,
"@babel/preset-env": true,
"@babel/preset-react": true,
"@babel/plugin-transform-runtime": true,
"@babel/plugin-proposal-class-properties": true,
"@babel/plugin-proposal-nullish-coalescing-operator": true,
"@babel/plugin-proposal-object-rest-spread": true,
"@babel/plugin-proposal-optional-chaining": true,
"@babel/plugin-proposal-nullish-coalescing-operator": true
"@babel/plugin-transform-runtime": true,
"@babel/preset-env": true,
"@babel/preset-react": true,
"@babel/preset-typescript": true
}
},
"@eslint/eslintrc": {
Expand Down
26 changes: 26 additions & 0 deletions lavamoat/build-system/policy.json
Original file line number Diff line number Diff line change
Expand Up @@ -431,6 +431,11 @@
"@babel/helper-plugin-utils": true
}
},
"@babel/plugin-syntax-typescript": {
"packages": {
"@babel/helper-plugin-utils": true
}
},
"@babel/plugin-transform-arrow-functions": {
"packages": {
"@babel/helper-plugin-utils": true
Expand Down Expand Up @@ -679,6 +684,20 @@
"@babel/helper-plugin-utils": true
}
},
"@babel/plugin-transform-typescript": {
"builtin": {
"assert": true
},
"globals": {
"console.warn": true
},
"packages": {
"@babel/core": true,
"@babel/helper-create-class-features-plugin": true,
"@babel/helper-plugin-utils": true,
"@babel/plugin-syntax-typescript": true
}
},
"@babel/plugin-transform-unicode-escapes": {
"packages": {
"@babel/core": true,
Expand Down Expand Up @@ -784,6 +803,13 @@
"@babel/plugin-transform-react-pure-annotations": true
}
},
"@babel/preset-typescript": {
"packages": {
"@babel/helper-plugin-utils": true,
"@babel/helper-validator-option": true,
"@babel/plugin-transform-typescript": true
}
},
"@babel/template": {
"packages": {
"@babel/code-frame": true,
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.16.7",
"@babel/register": "^7.5.5",
"@lavamoat/allow-scripts": "^2.0.0",
"@lavamoat/lavapack": "^2.0.4",
Expand Down
Loading

0 comments on commit 9b822d3

Please sign in to comment.