After Custom transformer, typescript still uses reference to old import - typescript-compiler-api

Question

I'm using a CustomTransformer to update imports from:
import { global_spacer_form_element } from '#patternfly/react-tokens';
export const disabledLabelClassNameEx = global_spacer_form_element.var;
to
import global_spacer_form_element from '#patternfly/react-tokens/dist/js/global_spacer_form_element';
export const disabledLabelClassNameEx = global_spacer_form_element.var;
However, when using with ts-loader I get the following output (directly from ts-loader):
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.disabledLabelClassNameEx = void 0;
const global_spacer_form_element_1 = __importDefault(require("#patternfly/react-tokens/dist/js/global_spacer_form_element"));
exports.disabledLabelClassNameEx = react_tokens_1.global_spacer_form_element.var;
//# sourceMappingURL=Recipient2.js.map
Instead of using global_spacer_form_element directly, it is using react_tokens_1.global_spacer_form_element.
I suppose there is something missing in the transformer that the typescript compiler is using to build that react_tokens_1 variable.
The transformer is doing the following in its visitor (I'm simplifying the transformer code for the sake of showing the path it takes, full code can be see here):
const visitor: ts.Visitor = (node) => {
if (ts.isSourceFile(node)) {
return ts.visitEachChild(node, visitor, context)
}
if (!ts.isImportDeclaration(node) /* or if the lib name is not '#patternfly/react-tokens' */) {
return node
}
// for simplicity assume we take all NamedImports and the only found is...
const elements = ['global_spacer_form_element']
const importPath = '#patternfly/react-tokens/dist/js/global_spacer_form_element'
return elements.map((e) => {
return ts.factory.createImportDeclaration(
undefined,
undefined,
ts.factory.createImportClause(
false,
ts.factory.createIdentifier(e),
undefined,
),
ts.factory.createStringLiteral(importPath),
)
})
}
My tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"allowJs": true,
"checkJs": false,
"jsx": "react",
"outDir": "./build",
"removeComments": true,
"pretty": true,
"skipLibCheck": true,
"strict": true,
"moduleResolution": "node",
"esModuleInterop": true,
"noImplicitAny": false,
"sourceMap": true,
"resolveJsonModule" : true
},
"include": [
"./src/**/*"
],
"exclude": [
"./node_modules/*",
"**/*.js"
]
}
and finally the ts-loader config:
{
test: /src\/.*\.tsx?$/,
loader: 'ts-loader',
exclude: /(node_modules)/i,
options: {
getCustomTransformers: () => ({
before: [
tsImportPluginFactory({
libraryName: '#patternfly/react-tokens',
libraryDirectory: 'dist/js',
camel2DashComponentName: false
})
]
})
}
Any idea of what else I need to update or what I could check to ensure this transformer works as I am expecting?
edit: Reference to old import is gone, but I didn't notice before that the new import also gets transformed: e.g. from foobar to foobar_1.

Answer 1

The TypeScript compiler has four main phases—parsing, binding, type checking, and emitting. Binding is where the relationships between identifiers are resolved, but transformation happens during the "emitting" phase. So by the time you're transforming it's too late and the compiler has already figured out what identifiers it's going to transform.
One way to do what you want to do, is to traverse all the nodes in the file, find the identifiers that match one of the ones in your import, then recreate those identifiers by returning context.factory.createIdentifier(node.escapedText) in the visitor for that node. That will make the compiler leave the node as-is when emitting.
The trouble though may be figuring out which identifiers in a file reference the named import identifier. Generally I don't recommend using the type checker in transforms because it can lead to unexpected results when there are multiple transformations happening on a file, but you might be able to get away with first checking if the identifier's escapeText matches, then checking if typeChecker.getSymbolAtLocation(node)?.declarations[0] equals the named export identifier found in the original import declaration. Alternatively, I think you would have to implement your own scope analysis.