Skip to content

Commit ac2c09e

Browse files
tanner-reitstanner-reits
authoredSep 8, 2022
fix(collection): properly transform imports (#3523)
This commit adds a transformer to the transpilation process to resolve module imports and replace path aliases with auto-generated relative paths for `dist-collection` when `tsconfig.json#paths` is defined. Prior to this, the `dist-collection` output target would not transpile path aliases defined in a project's `tsconfig.json`. Instead, the import paths were left unchanged and thus reference modules that cannot be resolved. STENCIL-437 Output target collection does not transpile ts path config
·
v4.29.0v2-maintenance
1 parent 965323b commit ac2c09e

10 files changed

+608
-11
lines changed
 

‎src/compiler/config/outputs/validate-collection.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ export const validateCollection = (
1717
return userOutputs.filter(isOutputTargetDistCollection).map((outputTarget) => {
1818
return {
1919
...outputTarget,
20-
dir: getAbsolutePath(config, outputTarget.dir || 'dist/collection'),
20+
transformAliasedImportPaths: outputTarget.transformAliasedImportPaths ?? false,
21+
dir: getAbsolutePath(config, outputTarget.dir ?? 'dist/collection'),
2122
};
2223
});
2324
};

‎src/compiler/config/outputs/validate-dist.ts

+2
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ export const validateDist = (config: d.ValidatedConfig, userOutputs: d.OutputTar
6767
dir: distOutputTarget.dir,
6868
collectionDir: distOutputTarget.collectionDir,
6969
empty: distOutputTarget.empty,
70+
transformAliasedImportPaths: distOutputTarget.transformAliasedImportPathsInCollection,
7071
});
7172
outputs.push({
7273
type: COPY,
@@ -134,6 +135,7 @@ const validateOutputTargetDist = (config: d.ValidatedConfig, o: d.OutputTargetDi
134135
copy: validateCopy(o.copy ?? [], []),
135136
polyfills: isBoolean(o.polyfills) ? o.polyfills : undefined,
136137
empty: isBoolean(o.empty) ? o.empty : true,
138+
transformAliasedImportPathsInCollection: o.transformAliasedImportPathsInCollection ?? false,
137139
};
138140

139141
if (!isAbsolute(outputTarget.buildDir)) {

‎src/compiler/config/test/validate-output-dist-collection.spec.ts

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import type * as d from '@stencil/core/declarations';
2+
import { validateConfig } from '../validate-config';
3+
import { mockConfig, mockLoadConfigInit } from '@stencil/core/testing';
4+
import { resolve, join } from 'path';
5+
6+
describe('validateDistCollectionOutputTarget', () => {
7+
let config: d.Config;
8+
9+
const rootDir = resolve('/');
10+
const defaultDir = join(rootDir, 'dist', 'collection');
11+
12+
beforeEach(() => {
13+
config = mockConfig();
14+
});
15+
16+
it('sets correct default values', () => {
17+
const target: d.OutputTargetDistCollection = {
18+
type: 'dist-collection',
19+
empty: false,
20+
dir: null,
21+
collectionDir: null,
22+
};
23+
config.outputTargets = [target];
24+
25+
const { config: validatedConfig } = validateConfig(config, mockLoadConfigInit());
26+
27+
expect(validatedConfig.outputTargets).toEqual([
28+
{
29+
type: 'dist-collection',
30+
empty: false,
31+
dir: defaultDir,
32+
collectionDir: null,
33+
transformAliasedImportPaths: false,
34+
},
35+
]);
36+
});
37+
38+
it('sets specified directory', () => {
39+
const target: d.OutputTargetDistCollection = {
40+
type: 'dist-collection',
41+
empty: false,
42+
dir: '/my-dist',
43+
collectionDir: null,
44+
};
45+
config.outputTargets = [target];
46+
47+
const { config: validatedConfig } = validateConfig(config, mockLoadConfigInit());
48+
49+
expect(validatedConfig.outputTargets).toEqual([
50+
{
51+
type: 'dist-collection',
52+
empty: false,
53+
dir: '/my-dist',
54+
collectionDir: null,
55+
transformAliasedImportPaths: false,
56+
},
57+
]);
58+
});
59+
60+
describe('transformAliasedImportPaths', () => {
61+
it.each([false, true])(
62+
"sets option '%s' when explicitly '%s' in config",
63+
(transformAliasedImportPaths: boolean) => {
64+
const target: d.OutputTargetDistCollection = {
65+
type: 'dist-collection',
66+
empty: false,
67+
dir: null,
68+
collectionDir: null,
69+
transformAliasedImportPaths,
70+
};
71+
config.outputTargets = [target];
72+
73+
const { config: validatedConfig } = validateConfig(config, mockLoadConfigInit());
74+
75+
expect(validatedConfig.outputTargets).toEqual([
76+
{
77+
type: 'dist-collection',
78+
empty: false,
79+
dir: defaultDir,
80+
collectionDir: null,
81+
transformAliasedImportPaths,
82+
},
83+
]);
84+
}
85+
);
86+
});
87+
});

‎src/compiler/config/test/validate-output-dist.spec.ts

+88
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ describe('validateDistOutputTarget', () => {
3232
type: 'dist',
3333
polyfills: undefined,
3434
typesDir: path.join(rootDir, 'my-dist', 'types'),
35+
transformAliasedImportPathsInCollection: false,
3536
},
3637
{
3738
esmDir: path.join(rootDir, 'my-dist', 'my-build', 'testing'),
@@ -62,6 +63,7 @@ describe('validateDistOutputTarget', () => {
6263
collectionDir: path.join(rootDir, 'my-dist', 'collection'),
6364
dir: path.join(rootDir, '/my-dist'),
6465
empty: false,
66+
transformAliasedImportPaths: false,
6567
type: 'dist-collection',
6668
},
6769
{
@@ -107,4 +109,90 @@ describe('validateDistOutputTarget', () => {
107109
const { config } = validateConfig(userConfig, mockLoadConfigInit());
108110
expect(config.outputTargets.some((o) => o.type === 'dist')).toBe(false);
109111
});
112+
113+
it('sets option to transform aliased import paths when enabled', () => {
114+
const outputTarget: d.OutputTargetDist = {
115+
type: 'dist',
116+
dir: 'my-dist',
117+
buildDir: 'my-build',
118+
empty: false,
119+
transformAliasedImportPathsInCollection: true,
120+
};
121+
userConfig.outputTargets = [outputTarget];
122+
userConfig.buildDist = true;
123+
124+
const { config } = validateConfig(userConfig, mockLoadConfigInit());
125+
126+
expect(config.outputTargets).toEqual([
127+
{
128+
buildDir: path.join(rootDir, 'my-dist', 'my-build'),
129+
collectionDir: path.join(rootDir, 'my-dist', 'collection'),
130+
copy: [],
131+
dir: path.join(rootDir, 'my-dist'),
132+
empty: false,
133+
esmLoaderPath: path.join(rootDir, 'my-dist', 'loader'),
134+
type: 'dist',
135+
polyfills: undefined,
136+
typesDir: path.join(rootDir, 'my-dist', 'types'),
137+
transformAliasedImportPathsInCollection: true,
138+
},
139+
{
140+
esmDir: path.join(rootDir, 'my-dist', 'my-build', 'testing'),
141+
empty: false,
142+
isBrowserBuild: true,
143+
legacyLoaderFile: path.join(rootDir, 'my-dist', 'my-build', 'testing.js'),
144+
polyfills: true,
145+
systemDir: undefined,
146+
systemLoaderFile: undefined,
147+
type: 'dist-lazy',
148+
},
149+
{
150+
copyAssets: 'dist',
151+
copy: [],
152+
dir: path.join(rootDir, 'my-dist', 'my-build', 'testing'),
153+
type: 'copy',
154+
},
155+
{
156+
file: path.join(rootDir, 'my-dist', 'my-build', 'testing', 'testing.css'),
157+
type: 'dist-global-styles',
158+
},
159+
{
160+
dir: path.join(rootDir, 'my-dist'),
161+
type: 'dist-types',
162+
typesDir: path.join(rootDir, 'my-dist', 'types'),
163+
},
164+
{
165+
collectionDir: path.join(rootDir, 'my-dist', 'collection'),
166+
dir: path.join(rootDir, '/my-dist'),
167+
empty: false,
168+
transformAliasedImportPaths: true,
169+
type: 'dist-collection',
170+
},
171+
{
172+
copy: [{ src: '**/*.svg' }, { src: '**/*.js' }],
173+
copyAssets: 'collection',
174+
dir: path.join(rootDir, 'my-dist', 'collection'),
175+
type: 'copy',
176+
},
177+
{
178+
type: 'dist-lazy',
179+
cjsDir: path.join(rootDir, 'my-dist', 'cjs'),
180+
cjsIndexFile: path.join(rootDir, 'my-dist', 'index.cjs.js'),
181+
empty: false,
182+
esmDir: path.join(rootDir, 'my-dist', 'esm'),
183+
esmEs5Dir: undefined,
184+
esmIndexFile: path.join(rootDir, 'my-dist', 'index.js'),
185+
polyfills: true,
186+
},
187+
{
188+
cjsDir: path.join(rootDir, 'my-dist', 'cjs'),
189+
componentDts: path.join(rootDir, 'my-dist', 'types', 'components.d.ts'),
190+
dir: path.join(rootDir, 'my-dist', 'loader'),
191+
empty: false,
192+
esmDir: path.join(rootDir, 'my-dist', 'esm'),
193+
esmEs5Dir: undefined,
194+
type: 'dist-lazy-loader',
195+
},
196+
]);
197+
});
110198
});

‎src/compiler/output-targets/dist-collection/index.ts

+34-5
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,20 @@ import { catchError, COLLECTION_MANIFEST_FILE_NAME, flatOne, generatePreamble, n
33
import { isOutputTargetDistCollection } from '../output-utils';
44
import { join, relative } from 'path';
55
import { typescriptVersion, version } from '../../../version';
6+
import ts from 'typescript';
7+
import { mapImportsToPathAliases } from '../../transformers/map-imports-to-path-aliases';
68

9+
/**
10+
* Main output target function for `dist-collection`. This function takes the compiled output from a
11+
* {@link ts.Program}, runs each file through a transformer to transpile import path aliases, and then writes
12+
* the output code and source maps to disk in the specified collection directory.
13+
*
14+
* @param config The validated Stencil config.
15+
* @param compilerCtx The current compiler context.
16+
* @param buildCtx The current build context.
17+
* @param changedModuleFiles The changed modules returned from the TS compiler.
18+
* @returns An empty promise. Resolved once all functions finish.
19+
*/
720
export const outputCollection = async (
821
config: d.ValidatedConfig,
922
compilerCtx: d.CompilerCtx,
@@ -27,15 +40,31 @@ export const outputCollection = async (
2740
const mapCode = mod.sourceMapFileText;
2841

2942
await Promise.all(
30-
outputTargets.map(async (o) => {
43+
outputTargets.map(async (target) => {
3144
const relPath = relative(config.srcDir, mod.jsFilePath);
32-
const filePath = join(o.collectionDir, relPath);
33-
await compilerCtx.fs.writeFile(filePath, code, { outputTargetType: o.type });
45+
const filePath = join(target.collectionDir, relPath);
46+
47+
// Transpile the already transpiled modules to apply
48+
// a transformer to convert aliased import paths to relative paths
49+
// We run this even if the transformer will perform no action
50+
// to avoid race conditions between multiple output targets that
51+
// may be writing to the same location
52+
const { outputText } = ts.transpileModule(code, {
53+
fileName: mod.sourceFilePath,
54+
compilerOptions: {
55+
target: ts.ScriptTarget.Latest,
56+
},
57+
transformers: {
58+
after: [mapImportsToPathAliases(config, filePath, target)],
59+
},
60+
});
61+
62+
await compilerCtx.fs.writeFile(filePath, outputText, { outputTargetType: target.type });
3463

3564
if (mod.sourceMapPath) {
3665
const relativeSourceMapPath = relative(config.srcDir, mod.sourceMapPath);
37-
const sourceMapOutputFilePath = join(o.collectionDir, relativeSourceMapPath);
38-
await compilerCtx.fs.writeFile(sourceMapOutputFilePath, mapCode, { outputTargetType: o.type });
66+
const sourceMapOutputFilePath = join(target.collectionDir, relativeSourceMapPath);
67+
await compilerCtx.fs.writeFile(sourceMapOutputFilePath, mapCode, { outputTargetType: target.type });
3968
}
4069
})
4170
);

‎src/compiler/output-targets/test/output-targets-collection.spec.ts

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { outputCollection } from '../dist-collection';
2+
import type * as d from '../../../declarations';
3+
import { mockValidatedConfig, mockBuildCtx, mockCompilerCtx, mockModule } from '@stencil/core/testing';
4+
import * as test from '../../transformers/map-imports-to-path-aliases';
5+
import { normalize } from 'path';
6+
7+
describe('Dist Collection output target', () => {
8+
let mockConfig: d.ValidatedConfig;
9+
let mockedBuildCtx: d.BuildCtx;
10+
let mockedCompilerCtx: d.CompilerCtx;
11+
let changedModules: d.Module[];
12+
13+
let mapImportPathSpy: jest.SpyInstance;
14+
15+
const mockTraverse = jest.fn().mockImplementation((source: any) => source);
16+
const mockMap = jest.fn().mockImplementation(() => mockTraverse);
17+
const target: d.OutputTargetDistCollection = {
18+
type: 'dist-collection',
19+
dir: '',
20+
collectionDir: '/dist/collection',
21+
};
22+
23+
beforeEach(() => {
24+
mockConfig = mockValidatedConfig({
25+
srcDir: '/src',
26+
});
27+
mockedBuildCtx = mockBuildCtx();
28+
mockedCompilerCtx = mockCompilerCtx();
29+
changedModules = [
30+
mockModule({
31+
staticSourceFileText: '',
32+
jsFilePath: '/src/main.js',
33+
sourceFilePath: '/src/main.ts',
34+
}),
35+
];
36+
37+
jest.spyOn(mockedCompilerCtx.fs, 'writeFile');
38+
39+
mapImportPathSpy = jest.spyOn(test, 'mapImportsToPathAliases');
40+
mapImportPathSpy.mockReturnValue(mockMap);
41+
});
42+
43+
afterEach(() => {
44+
jest.restoreAllMocks();
45+
});
46+
47+
describe('transform aliased import paths', () => {
48+
// These tests ensure that the transformer for import paths is called regardless
49+
// of the config value (the function will decided whether or not to actually do anything) to avoid
50+
// a race condition with duplicate file writes
51+
it.each([true, false])(
52+
'calls function to transform aliased import paths when the output target config flag is `%s`',
53+
async (transformAliasedImportPaths: boolean) => {
54+
mockConfig.outputTargets = [
55+
{
56+
...target,
57+
transformAliasedImportPaths,
58+
},
59+
];
60+
61+
await outputCollection(mockConfig, mockedCompilerCtx, mockedBuildCtx, changedModules);
62+
63+
expect(mapImportPathSpy).toHaveBeenCalledWith(mockConfig, normalize('/dist/collection/main.js'), {
64+
collectionDir: '/dist/collection',
65+
dir: '',
66+
transformAliasedImportPaths,
67+
type: 'dist-collection',
68+
});
69+
expect(mapImportPathSpy).toHaveBeenCalledTimes(1);
70+
}
71+
);
72+
});
73+
});

‎src/compiler/transformers/map-imports-to-path-aliases.ts

+95
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import { normalizePath } from '@utils';
2+
import { dirname, relative } from 'path';
3+
import ts from 'typescript';
4+
import type * as d from '../../declarations';
5+
6+
/**
7+
* This method is responsible for replacing user-defined import path aliases ({@link https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping})
8+
* with generated relative import paths during the transformation step of the TS compilation process.
9+
* This action is taken to prevent issues with import paths not being transpiled at build time resulting in
10+
* unknown imports in output code for some output targets (`dist-collection` for instance). Output targets that do not run through a bundler
11+
* are unable to resolve imports using the aliased path names and TS intentionally does not replace resolved paths as a part of
12+
* their compiler ({@link https://github.com/microsoft/TypeScript/issues/10866})
13+
*
14+
* @param config The Stencil configuration object.
15+
* @param destinationFilePath The location on disk the file will be written to.
16+
* @param outputTarget The configuration for the collection output target.
17+
* @returns A factory for creating a {@link ts.Transformer}.
18+
*/
19+
export const mapImportsToPathAliases = (
20+
config: d.ValidatedConfig,
21+
destinationFilePath: string,
22+
outputTarget: d.OutputTargetDistCollection
23+
): ts.TransformerFactory<ts.SourceFile> => {
24+
return (transformCtx) => {
25+
const compilerHost = ts.createCompilerHost(config.tsCompilerOptions);
26+
27+
const visit =
28+
(sourceFile: string) =>
29+
(node: ts.Node): ts.VisitResult<ts.Node> => {
30+
// Only transform paths when the `transformAliasedImportPaths` flag is
31+
// set on the output target config
32+
//
33+
// We should only attempt to transform standard module imports:
34+
// - import * as ts from 'typescript';
35+
// - import { Foo, Bar } from 'baz';
36+
// - import { Foo as Bar } from 'baz';
37+
// - import Foo from 'bar';
38+
// We should NOT transform other import declaration types:
39+
// - import a = Foo.Bar
40+
if (
41+
outputTarget.transformAliasedImportPaths &&
42+
ts.isImportDeclaration(node) &&
43+
ts.isStringLiteral(node.moduleSpecifier)
44+
) {
45+
let importPath = node.moduleSpecifier.text;
46+
47+
// We will ignore transforming any paths that are already relative paths or
48+
// imports from external modules/packages
49+
if (!importPath.startsWith('.')) {
50+
const module = ts.resolveModuleName(importPath, sourceFile, config.tsCompilerOptions, compilerHost);
51+
52+
const hasResolvedFileName = module.resolvedModule?.resolvedFileName != null;
53+
const isModuleFromNodeModules = module.resolvedModule?.isExternalLibraryImport === true;
54+
const shouldTranspileImportPath = hasResolvedFileName && !isModuleFromNodeModules;
55+
56+
if (shouldTranspileImportPath) {
57+
// Create a regular expression that will be used to remove the last file extension
58+
// from the import path
59+
const extensionRegex = new RegExp(
60+
Object.values(ts.Extension)
61+
.map((extension) => `${extension}$`)
62+
.join('|')
63+
);
64+
65+
// In order to make sure the relative path works when the destination depth is different than the source
66+
// file structure depth, we need to determine where the resolved file exists relative to the destination directory
67+
const resolvePathInDestination = module.resolvedModule.resolvedFileName.replace(
68+
config.srcDir,
69+
outputTarget.collectionDir
70+
);
71+
72+
importPath = normalizePath(
73+
relative(dirname(destinationFilePath), resolvePathInDestination).replace(extensionRegex, '')
74+
);
75+
}
76+
}
77+
78+
return transformCtx.factory.updateImportDeclaration(
79+
node,
80+
node.decorators,
81+
node.modifiers,
82+
node.importClause,
83+
transformCtx.factory.createStringLiteral(importPath),
84+
node.assertClause
85+
);
86+
}
87+
88+
return ts.visitEachChild(node, visit(sourceFile), transformCtx);
89+
};
90+
91+
return (tsSourceFile) => {
92+
return ts.visitEachChild(tsSourceFile, visit(tsSourceFile.fileName), transformCtx);
93+
};
94+
};
95+
};

‎src/compiler/transformers/test/map-imports-to-path-aliases.spec.ts

+180
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
import { mockValidatedConfig } from '@stencil/core/testing';
2+
import type { OutputTargetDistCollection } from '@stencil/core/declarations';
3+
import { ValidatedConfig } from '../../../internal';
4+
import { transpileModule } from './transpile';
5+
import ts, { Extension } from 'typescript';
6+
import { mapImportsToPathAliases } from '../map-imports-to-path-aliases';
7+
8+
describe('mapImportsToPathAliases', () => {
9+
let module: ReturnType<typeof transpileModule>;
10+
let config: ValidatedConfig;
11+
let resolveModuleNameSpy: jest.SpyInstance<
12+
ReturnType<typeof ts.resolveModuleName>,
13+
Parameters<typeof ts.resolveModuleName>
14+
>;
15+
let outputTarget: OutputTargetDistCollection;
16+
17+
beforeEach(() => {
18+
config = mockValidatedConfig({ tsCompilerOptions: {} });
19+
20+
resolveModuleNameSpy = jest.spyOn(ts, 'resolveModuleName');
21+
22+
outputTarget = {
23+
type: 'dist-collection',
24+
dir: 'dist',
25+
collectionDir: 'dist/collection',
26+
transformAliasedImportPaths: true,
27+
};
28+
});
29+
30+
afterEach(() => {
31+
resolveModuleNameSpy.mockReset();
32+
});
33+
34+
it('does nothing if the config flag is `false`', () => {
35+
outputTarget.transformAliasedImportPaths = false;
36+
resolveModuleNameSpy.mockReturnValue({
37+
resolvedModule: {
38+
isExternalLibraryImport: false,
39+
extension: Extension.Ts,
40+
resolvedFileName: 'utils.js',
41+
},
42+
});
43+
const inputText = `
44+
import { utils } from "@utils/utils";
45+
46+
utils.test();
47+
`;
48+
49+
module = transpileModule(inputText, config, null, [], [mapImportsToPathAliases(config, '', outputTarget)]);
50+
51+
expect(module.outputText).toContain('import { utils } from "@utils/utils";');
52+
});
53+
54+
it('ignores relative imports', () => {
55+
resolveModuleNameSpy.mockReturnValue({
56+
resolvedModule: {
57+
isExternalLibraryImport: false,
58+
extension: Extension.Ts,
59+
resolvedFileName: 'utils.js',
60+
},
61+
});
62+
const inputText = `
63+
import * as dateUtils from "../utils";
64+
65+
dateUtils.test();
66+
`;
67+
68+
module = transpileModule(inputText, config, null, [], [mapImportsToPathAliases(config, '', outputTarget)]);
69+
70+
expect(module.outputText).toContain('import * as dateUtils from "../utils";');
71+
});
72+
73+
it('ignores external imports', () => {
74+
resolveModuleNameSpy.mockReturnValue({
75+
resolvedModule: {
76+
isExternalLibraryImport: true,
77+
extension: Extension.Ts,
78+
resolvedFileName: 'utils.js',
79+
},
80+
});
81+
const inputText = `
82+
import { utils } from "@stencil/core";
83+
84+
utils.test();
85+
`;
86+
87+
module = transpileModule(inputText, config, null, [], [mapImportsToPathAliases(config, '', outputTarget)]);
88+
89+
expect(module.outputText).toContain('import { utils } from "@stencil/core";');
90+
});
91+
92+
it('does nothing if there is no resolved module', () => {
93+
resolveModuleNameSpy.mockReturnValue({
94+
resolvedModule: undefined,
95+
});
96+
const inputText = `
97+
import { utils } from "@utils";
98+
99+
utils.test();
100+
`;
101+
102+
module = transpileModule(inputText, config, null, [], [mapImportsToPathAliases(config, '', outputTarget)]);
103+
104+
expect(module.outputText).toContain('import { utils } from "@utils";');
105+
});
106+
107+
// TODO(STENCIL-223): remove spy to test actual resolution behavior
108+
it('replaces the path alias with the generated relative path', () => {
109+
resolveModuleNameSpy.mockReturnValue({
110+
resolvedModule: {
111+
isExternalLibraryImport: false,
112+
extension: Extension.Ts,
113+
resolvedFileName: 'utils.ts',
114+
},
115+
});
116+
const inputText = `
117+
import { utils } from "@utils";
118+
119+
utils.test();
120+
`;
121+
122+
module = transpileModule(inputText, config, null, [], [mapImportsToPathAliases(config, '', outputTarget)]);
123+
124+
expect(module.outputText).toContain('import { utils } from "utils";');
125+
});
126+
127+
// The resolved module is not part of the output directory
128+
it('generates the correct relative path when the resolved module is outside the transpiled project', () => {
129+
config.srcDir = '/test-dir';
130+
resolveModuleNameSpy.mockReturnValue({
131+
resolvedModule: {
132+
isExternalLibraryImport: false,
133+
extension: Extension.Ts,
134+
resolvedFileName: '/some-compiled-dir/utils/utils.ts',
135+
},
136+
});
137+
const inputText = `
138+
import { utils } from "@utils";
139+
140+
utils.test();
141+
`;
142+
143+
module = transpileModule(
144+
inputText,
145+
config,
146+
null,
147+
[],
148+
[mapImportsToPathAliases(config, '/dist/collection/test.js', outputTarget)]
149+
);
150+
151+
expect(module.outputText).toContain(`import { utils } from "../../some-compiled-dir/utils/utils";`);
152+
});
153+
154+
// Source module and resolved module are in the same output directory
155+
it('generates the correct relative path when the resolved module is within the transpiled project', () => {
156+
config.srcDir = '/test-dir';
157+
resolveModuleNameSpy.mockReturnValue({
158+
resolvedModule: {
159+
isExternalLibraryImport: false,
160+
extension: Extension.Ts,
161+
resolvedFileName: '/test-dir/utils/utils.ts',
162+
},
163+
});
164+
const inputText = `
165+
import { utils } from "@utils";
166+
167+
utils.test();
168+
`;
169+
170+
module = transpileModule(
171+
inputText,
172+
config,
173+
null,
174+
[],
175+
[mapImportsToPathAliases(config, 'dist/collection/test.js', outputTarget)]
176+
);
177+
178+
expect(module.outputText).toContain(`import { utils } from "./utils/utils";`);
179+
});
180+
});

‎src/compiler/transformers/test/transpile.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import { getScriptTarget } from '../transform-utils';
1717
*/
1818
export function transpileModule(
1919
input: string,
20-
config?: d.Config,
21-
compilerCtx?: d.CompilerCtx,
20+
config?: d.Config | null,
21+
compilerCtx?: d.CompilerCtx | null,
2222
beforeTransformers: ts.TransformerFactory<ts.SourceFile>[] = [],
2323
afterTransformers: ts.TransformerFactory<ts.SourceFile>[] = []
2424
) {
@@ -154,12 +154,12 @@ export function transpileModule(
154154
}
155155

156156
export function getStaticGetter(output: string, prop: string) {
157-
const toEvaludate = `return ${output.replace('export', '')}`;
157+
const toEvaluate = `return ${output.replace('export', '')}`;
158158
try {
159-
const Obj = new Function(toEvaludate);
159+
const Obj = new Function(toEvaluate);
160160
return Obj()[prop];
161161
} catch (e) {
162162
console.error(e);
163-
console.error(toEvaludate);
163+
console.error(toEvaluate);
164164
}
165165
}

‎src/declarations/stencil-public-compiler.ts

+42
Original file line numberDiff line numberDiff line change
@@ -1846,6 +1846,28 @@ export interface OutputTargetDist extends OutputTargetBase {
18461846
dir?: string;
18471847

18481848
collectionDir?: string | null;
1849+
/**
1850+
* When `true` this flag will transform aliased import paths defined in
1851+
* a project's `tsconfig.json` to relative import paths in the compiled output's
1852+
* `dist-collection` bundle if it is generated (i.e. `collectionDir` is set).
1853+
*
1854+
* Paths will be left in aliased format if `false` or `undefined`.
1855+
*
1856+
* @example
1857+
* // tsconfig.json
1858+
* {
1859+
* paths: {
1860+
* "@utils/*": ['/src/utils/*']
1861+
* }
1862+
* }
1863+
*
1864+
* // Source file
1865+
* import * as dateUtils from '@utils/date-utils';
1866+
* // Output file
1867+
* import * as dateUtils from '../utils/date-utils';
1868+
*/
1869+
transformAliasedImportPathsInCollection?: boolean | null;
1870+
18491871
typesDir?: string;
18501872
esmLoaderPath?: string;
18511873
copy?: CopyTask[];
@@ -1859,6 +1881,26 @@ export interface OutputTargetDistCollection extends OutputTargetBase {
18591881
empty?: boolean;
18601882
dir: string;
18611883
collectionDir: string;
1884+
/**
1885+
* When `true` this flag will transform aliased import paths defined in
1886+
* a project's `tsconfig.json` to relative import paths in the compiled output.
1887+
*
1888+
* Paths will be left in aliased format if `false` or `undefined`.
1889+
*
1890+
* @example
1891+
* // tsconfig.json
1892+
* {
1893+
* paths: {
1894+
* "@utils/*": ['/src/utils/*']
1895+
* }
1896+
* }
1897+
*
1898+
* // Source file
1899+
* import * as dateUtils from '@utils/date-utils';
1900+
* // Output file
1901+
* import * as dateUtils from '../utils/date-utils';
1902+
*/
1903+
transformAliasedImportPaths?: boolean | null;
18621904
}
18631905

18641906
export interface OutputTargetDistTypes extends OutputTargetBase {

0 commit comments

Comments
 (0)
Please sign in to comment.