Bindings & TypeScript Transformers

[LukasMachetanz]

Hi everyone!

First of all I would like to thank @nonara for having this discussion panel and for immediately answering my question at #25 (comment). This discussion should be a follow up for the mentioned topic as I unfortunately need some more clarifications.

1) Transformer Output with target CommonJs

Let's assume having the following source file:

source.ts

import { myFunction } from "./my-dependency";

class MyClass {
  public do() {
    myFunction();
  }
}

Let's assume the following transformation using the following setup:

tsconfig.json (Partial)

{
  ...,
  "compilerOptions": {
    "module": "commonjs",
    "plugins": [{ "transform": "../../dist/libs/angular/src/index.js", "type": "program" }],
    ...
  },
  ...
}

transformer.ts (Partial)

const factory = context.factory;

return ts.updateSourceFileNode(sourceFile, [
  factory.createImportDeclaration(
    undefined,
    undefined,
    factory.createImportClause(
      false,
      undefined,
      factory.createNamedImports([factory.createImportSpecifier(
        undefined,
        factory.createIdentifier("TestDouble")
      )])
    ),
    factory.createStringLiteral("@ttransformer/angular")
  ),
  ...sourceFile.statements,
]);

Running the transformation results in:

Result

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const angular_1 = require("@ttransformer/angular");
const my_dependency_1 = require("./my-dependency");
class MyClass {
    do() {
        my_dependency_1.myFunction();
    }
}
//# sourceMappingURL=ts-playground.spec.js.map

The result is as expected.

Although with a modified source the result is not as I would expect it to be.

source.ts

class MyClass {
  public do() {}
}

Result

import { TestDouble } from "@ttransformer/angular";
class MyClass {
    do() { }
}
//# sourceMappingURL=ts-playground.spec.js.map

Now the added import is not in the expected CommonJs style. Does anybody know why this is the case?

It seems as there is no import statement in the original source something goes wrong...

2) How to use the after transformer by example

Example

• Import a decorator to the source
• Apply this decorator to the class

source.ts

import { myFunction } from "./my-dependency";

class MyClass {
  public do() {
    myFunction();
  }
}

transformer (Partial)

const factory = context.factory;

sourceFile = ts.updateSourceFileNode(sourceFile, [
  factory.createImportDeclaration(
    undefined,
    undefined,
    factory.createImportClause(
      false,
      undefined,
      factory.createNamedImports([factory.createImportSpecifier(
        undefined,
        factory.createIdentifier("TestDouble")
      )])
    ),
    factory.createStringLiteral("@ttransformer/angular")
  ),
  ...sourceFile.statements,
]);

const visitor = (node: ts.Node): ts.Node => {
  if (ts.isClassDeclaration(node)) {
    const decorator = factory.createDecorator(factory.createCallExpression(
      factory.createIdentifier("TestDouble"),
      undefined,
      []
    ));

    return factory.updateClassDeclaration(
      node,
      [decorator, ...node.decorators ?? []],
      node.modifiers,
      node.name,
      node.typeParameters,
      node.heritageClauses,
      node.members,
    );
  }

  return ts.visitEachChild(node, visitor, context);
};

return ts.visitNode(sourceFile, visitor);

Running the transformer in before mode results in:

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const angular_1 = require("@ttransformer/angular");
const my_dependency_1 = require("./my-dependency");
let MyClass = class MyClass {
    do() {
        my_dependency_1.myFunction();
    }
};
MyClass = tslib_1.__decorate([
    TestDouble()
], MyClass);
//# sourceMappingURL=ts-playground.spec.js.map

In the result we see the expected CommonJs binding problem.

Using the transformer in after mode results in:

import { TestDouble } from "@ttransformer/angular";
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const my_dependency_1 = require("./my-dependency");
@TestDouble()
class MyClass {
    do() {
        my_dependency_1.myFunction();
    }
}
//# sourceMappingURL=ts-playground.spec.js.map

Now the import and usage of the decorator do not apply the CommonJs style. How to write the provided transformer correctly using the configuration after: true with ts-patch? What has to be considered using this variant? How would the corresponding code snippet look like?

3) Program Transformer

How would the provided example in 2) look like with a program transformer (https://www.npmjs.com/package/ts-patch#transforming-program)?

The shown example (https://www.npmjs.com/package/ts-patch#example-program-transformer) does not work for me.
E.g. I get the following error:

Cannot destructure property 'ts' of 'undefined' as it is undefined.

Furthermore options does not hold the correct information. It seems that something is wrong here. Can somebody confirm this?

Lastly I do not understand how I would run a transformation with this approach. Therefore, as I said, I would really appreciate a code snippet showing how to solve the example described in 2).

If someone has the time to help me with this I would really really appreciate it, as I am currently a little bit stuck with this.

Thanks in advance.
Lukas

[nonara]

Config should be transformProgram: true.

Also, ensure your transformer.ts code exports a default function (see docs for example entry point), which returns a Program instance

[LukasMachetanz]

I am using transformProgram: true within 3).

I am having a default export in place:

import { program } from "./lib/program";
export default program;

[nonara]

I don't know what program is there but you need to export a function.

Start with the example program transformer in a demo project. It works. Get that working, then change it how you need. You can use the debugger to step through code and inspect the ast, etc. as it runs.

Good luck with it.

[dsmalik]

Hey @LukasMachetanz , were you able to get the correct transformed output using the program transform? I am also trying to write a transformer that will help convert barrel imports to specific full qualified path import. To acheive it, i remove the existing import declaration that are barrel imports with new declarations but also stuck to find where identifiers dont bind when transformed in CommonJS module format.

Thanks @nonara for ts-patch!