Skip to content

Commit 04fb830

Browse files
rwaskiewiczrwaskiewicz
authored
fix(types): generate types for dist-custom-elements (#3270)
this commit introduces a new experimental flag, `generateTypeDeclarations` on the `dist-custom-elements` output target. when enabled, it allows a user to generate type declaration files for their stencil project (that uses `dist-custom-elements`) without also specifying the `dist` output target. this experimental flag generates types in the `dist/types` directory. this destination is not configurable at this time to better understand the needs of users for generating these types this commit also adds jsdoc, clarifying comments, and minor type updates to the codebase.
1 parent d164dba commit 04fb830

12 files changed

+428
-43
lines changed

‎src/compiler/config/outputs/validate-custom-element.ts

+41-10
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,63 @@
1-
import type { Config, OutputTarget, OutputTargetDistCustomElements, OutputTargetCopy } from '../../../declarations';
1+
import type {
2+
Config,
3+
OutputTarget,
4+
OutputTargetDistCustomElements,
5+
OutputTargetDistTypes,
6+
OutputTargetCopy,
7+
} from '../../../declarations';
28
import { getAbsolutePath } from '../config-utils';
3-
import { isBoolean } from '@utils';
4-
import { COPY, isOutputTargetDistCustomElements } from '../../output-targets/output-utils';
9+
import { COPY, DIST_TYPES, isOutputTargetDistCustomElements } from '../../output-targets/output-utils';
510
import { validateCopy } from '../validate-copy';
11+
import { isBoolean } from '@utils';
12+
import { join } from 'path';
613

7-
export const validateCustomElement = (config: Config, userOutputs: OutputTarget[]) => {
8-
return userOutputs.filter(isOutputTargetDistCustomElements).reduce((arr, o) => {
14+
/**
15+
* Validate one or more `dist-custom-elements` output targets. Validation of an output target may involve back-filling
16+
* fields that are omitted with sensible defaults and/or creating additional supporting output targets that were not
17+
* explicitly defined by the user
18+
* @param config the Stencil configuration associated with the project being compiled
19+
* @param userOutputs the output target(s) specified by the user
20+
* @returns the validated output target(s)
21+
*/
22+
export const validateCustomElement = (
23+
config: Config,
24+
userOutputs: ReadonlyArray<OutputTarget>
25+
): ReadonlyArray<OutputTargetDistCustomElements | OutputTargetDistTypes | OutputTargetCopy> => {
26+
const defaultDir = 'dist';
27+
28+
return userOutputs.filter(isOutputTargetDistCustomElements).reduce((outputs, o) => {
929
const outputTarget = {
1030
...o,
11-
dir: getAbsolutePath(config, o.dir || 'dist/components'),
31+
dir: getAbsolutePath(config, o.dir || join(defaultDir, 'components')),
1232
};
1333
if (!isBoolean(outputTarget.empty)) {
1434
outputTarget.empty = true;
1535
}
1636
if (!isBoolean(outputTarget.externalRuntime)) {
1737
outputTarget.externalRuntime = true;
1838
}
39+
40+
// unlike other output targets, Stencil does not allow users to define the output location of types at this time
41+
if (outputTarget.generateTypeDeclarations) {
42+
const typesDirectory = getAbsolutePath(config, join(defaultDir, 'types'));
43+
outputs.push({
44+
type: DIST_TYPES,
45+
dir: outputTarget.dir,
46+
typesDir: typesDirectory,
47+
});
48+
}
49+
1950
outputTarget.copy = validateCopy(outputTarget.copy, []);
2051

2152
if (outputTarget.copy.length > 0) {
22-
arr.push({
53+
outputs.push({
2354
type: COPY,
2455
dir: config.rootDir,
2556
copy: [...outputTarget.copy],
2657
});
2758
}
28-
arr.push(outputTarget);
59+
outputs.push(outputTarget);
2960

30-
return arr;
31-
}, [] as (OutputTargetDistCustomElements | OutputTargetCopy)[]);
61+
return outputs;
62+
}, [] as (OutputTargetDistCustomElements | OutputTargetCopy | OutputTargetDistTypes)[]);
3263
};

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

+254
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
import type * as d from '@stencil/core/declarations';
2+
import { mockConfig } from '@stencil/core/testing';
3+
import { COPY, DIST_CUSTOM_ELEMENTS, DIST_TYPES } from '../../output-targets/output-utils';
4+
import { validateConfig } from '../validate-config';
5+
import path from 'path';
6+
7+
describe('validate-output-dist-custom-element', () => {
8+
describe('validateCustomElement', () => {
9+
const rootDir = path.resolve('/');
10+
const defaultDistDir = path.join(rootDir, 'dist', 'components');
11+
const distCustomElementsDir = 'my-dist-custom-elements';
12+
let userConfig: d.Config;
13+
14+
beforeEach(() => {
15+
userConfig = mockConfig();
16+
});
17+
18+
it('generates a default dist-custom-elements output target', () => {
19+
const outputTarget: d.OutputTargetDistCustomElements = {
20+
type: DIST_CUSTOM_ELEMENTS,
21+
};
22+
userConfig.outputTargets = [outputTarget];
23+
24+
const { config } = validateConfig(userConfig);
25+
expect(config.outputTargets).toEqual([
26+
{
27+
type: DIST_CUSTOM_ELEMENTS,
28+
copy: [],
29+
dir: defaultDistDir,
30+
empty: true,
31+
externalRuntime: true,
32+
},
33+
]);
34+
});
35+
36+
it('uses a provided dir field over a default directory', () => {
37+
const outputTarget: d.OutputTargetDistCustomElements = {
38+
type: DIST_CUSTOM_ELEMENTS,
39+
dir: distCustomElementsDir,
40+
};
41+
userConfig.outputTargets = [outputTarget];
42+
43+
const { config } = validateConfig(userConfig);
44+
expect(config.outputTargets).toEqual([
45+
{
46+
type: DIST_CUSTOM_ELEMENTS,
47+
copy: [],
48+
dir: path.join(rootDir, distCustomElementsDir),
49+
empty: true,
50+
externalRuntime: true,
51+
},
52+
]);
53+
});
54+
55+
describe('"empty" field', () => {
56+
it('defaults the "empty" field to true if not provided', () => {
57+
const outputTarget: d.OutputTargetDistCustomElements = {
58+
type: DIST_CUSTOM_ELEMENTS,
59+
externalRuntime: false,
60+
};
61+
userConfig.outputTargets = [outputTarget];
62+
63+
const { config } = validateConfig(userConfig);
64+
expect(config.outputTargets).toEqual([
65+
{
66+
type: DIST_CUSTOM_ELEMENTS,
67+
copy: [],
68+
dir: defaultDistDir,
69+
empty: true,
70+
externalRuntime: false,
71+
},
72+
]);
73+
});
74+
75+
it('defaults the "empty" field to true it\'s not a boolean', () => {
76+
const outputTarget: d.OutputTargetDistCustomElements = {
77+
type: DIST_CUSTOM_ELEMENTS,
78+
empty: undefined,
79+
externalRuntime: false,
80+
};
81+
userConfig.outputTargets = [outputTarget];
82+
83+
const { config } = validateConfig(userConfig);
84+
expect(config.outputTargets).toEqual([
85+
{
86+
type: DIST_CUSTOM_ELEMENTS,
87+
copy: [],
88+
dir: defaultDistDir,
89+
empty: true,
90+
externalRuntime: false,
91+
},
92+
]);
93+
});
94+
});
95+
96+
describe('"externalRuntime" field', () => {
97+
it('defaults the "externalRuntime" field to true if not provided', () => {
98+
const outputTarget: d.OutputTargetDistCustomElements = {
99+
type: DIST_CUSTOM_ELEMENTS,
100+
empty: false,
101+
};
102+
userConfig.outputTargets = [outputTarget];
103+
104+
const { config } = validateConfig(userConfig);
105+
expect(config.outputTargets).toEqual([
106+
{
107+
type: DIST_CUSTOM_ELEMENTS,
108+
copy: [],
109+
dir: defaultDistDir,
110+
empty: false,
111+
externalRuntime: true,
112+
},
113+
]);
114+
});
115+
116+
it('defaults the "externalRuntime" field to true it\'s not a boolean', () => {
117+
const outputTarget: d.OutputTargetDistCustomElements = {
118+
type: DIST_CUSTOM_ELEMENTS,
119+
empty: false,
120+
externalRuntime: undefined,
121+
};
122+
userConfig.outputTargets = [outputTarget];
123+
124+
const { config } = validateConfig(userConfig);
125+
expect(config.outputTargets).toEqual([
126+
{
127+
type: DIST_CUSTOM_ELEMENTS,
128+
copy: [],
129+
dir: defaultDistDir,
130+
empty: false,
131+
externalRuntime: true,
132+
},
133+
]);
134+
});
135+
});
136+
137+
describe('"generateTypeDeclarations" field', () => {
138+
it('creates a types directory when "generateTypeDeclarations" is true', () => {
139+
const outputTarget: d.OutputTargetDistCustomElements = {
140+
type: DIST_CUSTOM_ELEMENTS,
141+
empty: false,
142+
externalRuntime: false,
143+
generateTypeDeclarations: true,
144+
};
145+
userConfig.outputTargets = [outputTarget];
146+
147+
const { config } = validateConfig(userConfig);
148+
expect(config.outputTargets).toEqual([
149+
{
150+
type: DIST_TYPES,
151+
dir: defaultDistDir,
152+
typesDir: path.join(rootDir, 'dist', 'types'),
153+
},
154+
{
155+
type: DIST_CUSTOM_ELEMENTS,
156+
copy: [],
157+
dir: defaultDistDir,
158+
empty: false,
159+
externalRuntime: false,
160+
generateTypeDeclarations: true,
161+
},
162+
]);
163+
});
164+
165+
it('creates a types directory for a custom directory', () => {
166+
const outputTarget: d.OutputTargetDistCustomElements = {
167+
type: DIST_CUSTOM_ELEMENTS,
168+
dir: distCustomElementsDir,
169+
empty: false,
170+
externalRuntime: false,
171+
generateTypeDeclarations: true,
172+
};
173+
userConfig.outputTargets = [outputTarget];
174+
175+
const { config } = validateConfig(userConfig);
176+
expect(config.outputTargets).toEqual([
177+
{
178+
type: DIST_TYPES,
179+
dir: path.join(rootDir, distCustomElementsDir),
180+
typesDir: path.join(rootDir, 'dist', 'types'),
181+
},
182+
{
183+
type: DIST_CUSTOM_ELEMENTS,
184+
copy: [],
185+
dir: path.join(rootDir, distCustomElementsDir),
186+
empty: false,
187+
externalRuntime: false,
188+
generateTypeDeclarations: true,
189+
},
190+
]);
191+
});
192+
193+
it('doesn\'t create a types directory when "generateTypeDeclarations" is false', () => {
194+
const outputTarget: d.OutputTargetDistCustomElements = {
195+
type: DIST_CUSTOM_ELEMENTS,
196+
empty: false,
197+
externalRuntime: false,
198+
generateTypeDeclarations: false,
199+
};
200+
userConfig.outputTargets = [outputTarget];
201+
202+
const { config } = validateConfig(userConfig);
203+
expect(config.outputTargets).toEqual([
204+
{
205+
type: DIST_CUSTOM_ELEMENTS,
206+
copy: [],
207+
dir: defaultDistDir,
208+
empty: false,
209+
externalRuntime: false,
210+
generateTypeDeclarations: false,
211+
},
212+
]);
213+
});
214+
});
215+
216+
describe('copy tasks', () => {
217+
it('copies existing copy tasks over to the output target', () => {
218+
const copyOutputTarget: d.CopyTask = {
219+
src: 'mock/src',
220+
dest: 'mock/dest',
221+
};
222+
const copyOutputTarget2: d.CopyTask = {
223+
src: 'mock/src2',
224+
dest: 'mock/dest2',
225+
};
226+
227+
const outputTarget: d.OutputTargetDistCustomElements = {
228+
type: DIST_CUSTOM_ELEMENTS,
229+
copy: [copyOutputTarget, copyOutputTarget2],
230+
dir: distCustomElementsDir,
231+
empty: false,
232+
externalRuntime: false,
233+
};
234+
userConfig.outputTargets = [outputTarget];
235+
236+
const { config } = validateConfig(userConfig);
237+
expect(config.outputTargets).toEqual([
238+
{
239+
type: COPY,
240+
dir: rootDir,
241+
copy: [copyOutputTarget, copyOutputTarget2],
242+
},
243+
{
244+
type: DIST_CUSTOM_ELEMENTS,
245+
copy: [copyOutputTarget, copyOutputTarget2],
246+
dir: path.join(rootDir, distCustomElementsDir),
247+
empty: false,
248+
externalRuntime: false,
249+
},
250+
]);
251+
});
252+
});
253+
});
254+
});

0 commit comments

Comments
 (0)