GithubHelp home page GithubHelp logo

require-ts's Introduction



Typescript Compiler

In memory Typescript compiler for Node.js with support for caching and custom transformers


gh-workflow-image npm-image license-image synk-image

Introduction

Require ts is a module similar to ts-node with a handful of differences.

The idea is to hook into the lifecycle of Node.js require calls and compile Typescript on the fly (in memory)

In case, if you are not aware, Node.js has first class support for registering custom require extensions to resolve and compile files with a certain extension. For example:

require.extenstions['.ts'] = function (module, filename) {
  var content = fs.readFileSync(filename, 'utf8')
  module._compile(content, filename)
}

If we replace the function body of the example with the Typescript compiler API, the we basically get in-memory typescript compilation. However, there are many other things to manage.

  • Making source-maps to work, so that the error points to the Typescript code and not the compiled in memory Javascript.
  • Support for typescript extensions
  • Introducing some sort of caching to avoid re-compiling the unchanged files. Typescript compiler is not one of the fastest compilers, so caching is required.

Goals

Following are the goals for writing this module

  • Able to work with Typescript without setting up a on-disk compiler
  • Keeping the in-memory compilation fast. For this, we do not perform type checking. Your IDE or text editor should do it.
  • Cache the compiled output on disk so that we can avoid re-compiling the unchanged files. A decent project has 100s of source files and we usually don't change all of them together. Also compiled cache is not same as the compiled output.
  • Expose helper functions for watchers to clear the cache. Most of the Node.js apps use some kind of a watcher to watch for file changes and then restart the process. The helpers exposed by this package, allows the watcher to cleanup cache of the changed file.
  • Add support for custom transformers.

Usage

This module is pre-configured with all the AdonisJS applications and ideally you won't have to dig into the setup process yourself. However, if you are using it outside of AdonisJS, then follow the following setup process.

npm i -D @adonisjs/require-ts

And then require it as a Node.js require hook

node -r @adonisjs/require-ts/build/register app.ts

I have personally created a bash alias for the above command.

alias tsnode="node -r @adonisjs/require-ts/build/register"

and then run it as follows

tsnode app.ts

Programmatic usage

The main goal of this package is to expose a programmatic API that others can use to create their own build tools or commands.

register

const { register } = require('@adonisjs/require-ts')

/**
 * Require ts will resolve the "tsconfig.json" file from this
 * path. tsconfig.json file is required to compile the code as * per the project requirements
 */
const appRoot = __dirname

const options = {
  cache: true,
  cachePath: join(require.resolve('node_modules'), '.cache/your-app-name'),
  transformers: {
    before: [],
    after: [],
    afterDeclarations: [],
  },
}

register(appRoot, options)

/**
 * From here on you can import the typescript code
 */
require('./typescript-app-entrypoint.ts')

The register method accepts an optional object for configuring the cache and executing transformers.

  • cache: Whether or not to configure the cache
  • cachePath: Where to write the cached output
  • transformers: An object with transformers to be executed at different lifecycles. Read transformers section.

The register method adds two global properties to the Node.js global namespace.

  • compiler: Reference to the compiler, that is compiling the source code. You can access it as follows:
    const { symbols } = require('@adonisjs/require-ts')
    console.log(global[symbols.compiler])
  • config: Reference to the config parser, that parses the tsconfig.json file. You can access it as follows:
    const { symbols } = require('@adonisjs/require-ts')
    console.log(global[symbols.config])

getWatcherHelpers

The watcher helpers allows the watchers to cleanup the cache at different events. Here's how you can use it

const { getWatcherHelpers } = require('@adonisjs/require-ts')

/**
 * Require ts will resolve the "tsconfig.json" file from this
 * path. tsconfig.json file is required to compile the code as * per the project requirements
 */
const appRoot = __dirname

/**
 * Same as what you passed to the `register` method
 */
const cachePath = join(require.resolve('node_modules'), '.cache/your-app-name')

const helpers = getWatcherHelpers(appRoot, cachePath)

helpers.clear('./relative/path/from/app/root')

This is how you should set up the flow

  • Clean the entire cache when you start the watcher for the first time. helpers.clear(). No arguments means, clear everything

  • Clean the cache for the file that just changed. helpers.clear('./file/path')

  • Check if the config file has changed in a way that will impact the compiled output. If yes, then clear all the cached files.

    if (helpers.isConfigStale()) {
      helpers.clear() // clear all files from cache
    }

Caching

Caching is really important for us. Reading the compiled output from the disk is way faster than re-compiling the same file with Typescript.

This is how we perform caching.

  • Create a md5 hash of the file contents using the rev-hash package.
  • Checking the cache output with the same name as the hash.
  • If the file exists, pass its output to Node.js module._compile method.
  • Otherwise, compile the file using the Typescript compiler API and cache it on the disk

The module itself doesn't bother itself with clearing the stale cached files. Meaning, the cache grows like grass.

However, we expose helper functions to cleanup the cache. Usually, you will be using them with a file watcher like nodemon to clear the cache for the changed file.

Differences from ts-node

ts-node and require-ts has a few but important differences.

  • ts-node also type checks the Typescript code. They do allow configuring ts-node without type checking. But overall, they pay extra setup cost just by even considering type checking.
  • ts-node has no concept of on-disk caching. This is a deal breaker for us. Then why not contribute this feature to ts-node?. Well, we can. But in order for caching to work properly, the module need to expose the helpers for watchers to cleanup the cache and I don't think, ts-node will bother itself with this.
  • ts-node ships with inbuilt REPL. We don't want to bother ourselves with this. Again, keeping the codebase focused on a single use case. You can use @adonisjs/repl for the REPL support.

These are small differences, but has biggest impact overall.

Transformers

Typescript compiler API supports transformers to transform/mutate the AST during the compile phase. Here you can learn about transformers in general.

With require-ts, you can register the transformers with in the tsconfig.json file or pass them inline, when using the programmatic API.

Following is an example of the tsconfig.json file

{
  "compilerOptions": {},
  "transformers": {
    "before": ["./transformer-before"],
    "after": ["./transformer-after"],
    "afterDeclarations": ["./transformer-after-declarations"]
  }
}

The transformer array accepts the relative file name from the appRoot. The transformer module must export a function as follows:

export default transformerBefore(ts: typescript, appRoot: string) {
  return function transformerFactory (context) {}
}

require-ts's People

Contributors

julien-r44 avatar snyk-bot avatar targos avatar thetutlage avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

require-ts's Issues

Stack Trace not relevant

Package version

@adonisjs/require-ts: 1.0.4

Node.js and npm version

Node: 12.18.2
Npm: 6.14.5

Problem

Actually, if i got an Syntax Error the stack trace send this in my console (for example):

[ info ]  building project...
[ info ]  starting http server...

SyntaxError: Unexpected token '.'


1 Module._compile
  C:\project\node_modules\pirates\lib\index.js:99

2 Object.newLoader [as .ts]
  C:\project\node_modules\pirates\lib\index.js:104

3 anonymous
  C:\project\node_modules\require-all\index.js:56

[ warn ]  Underlying HTTP server died with "0 code"
[ info ]  shutting down

Its really hard to debug with this style of error ...

SyntaxError on attempt to run

Package version

1.0.0

Node.js and npm version

10.17.0 and 6.12.1 (yarn version 1.19.1)

BONUS (a sample repo to reproduce the issue)

https://github.com/cboden/require-ts-test

I get an error when attempting to try this on an existing project. I broke out the fundamental issue for replication purposes in a new repository. I receive the following error:

/Users/cboden/Repositories/request-ts-test/src/node_modules/MyPackage/index.ts:1
import {format} from 'util';
       ^

SyntaxError: Unexpected token {
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Object.newLoader [as .ts] (/Users/cboden/Repositories/request-ts-test/node_modules/pirates/lib/index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:692:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/Users/cboden/Repositories/request-ts-test/src/index.ts:1:1)
    at Module._compile (internal/modules/cjs/loader.js:778:30)

Symlink not resolve relative path

Package version

@adonisjs/require-ts: 2.0.11

Node.js and npm version

Node: 18.0.0
NPM: 8.6.0

Sample Code (to reproduce the issue)

I'm creating a project with microservices, and these services share a folder where they have some libs and types in common.

I use windows and I join this "shared" folder to the main directory of each project (mklink /j "shared" "../shared").
In other projects I can add the property "preserveSymlinks": true in the tsconfig.json file, but in adonis it is not working. I get error TS6059, only in watch mode.

In build mode it works normally without warning TS6059.

image

The typescript compiler is fetching the file by the absolute path, not the relative path using symlink.

I tried to use the rootDirs, symlink, noResolve option, among others, but without success.
Apparently it's just a warning and the development server works normally, but this warning for each file is annoying all the time.

image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.