Skip to content

Commit d452863

Browse files
rschristianrschristian
authored
chore: Misc cleaning (#1659)
1 parent 84dba1a commit d452863

File tree

15 files changed

+121
-218
lines changed

15 files changed

+121
-218
lines changed

‎.changeset/few-pears-push.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'preact-cli': patch
3+
---
4+
5+
Corrects `push-manifest.json` generation in non-ESM builds

‎packages/cli/lib/lib/output-hooks.js‎

Lines changed: 0 additions & 41 deletions
This file was deleted.

‎packages/cli/lib/lib/webpack/create-load-manifest.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ module.exports = (assets, isESMBuild = false, namedChunkGroups) => {
88
styles = [];
99
for (let filename in assets) {
1010
if (!/\.map$/.test(filename)) {
11-
if (/route-/.test(filename)) {
11+
if (/^route-.*\.js$/.test(filename)) {
1212
// both ESM & regular match here
1313
isMatch(filename, isESMBuild) && scripts.push(filename);
1414
} else if (/chunk\.(.+)\.css$/.test(filename)) {
@@ -39,8 +39,8 @@ module.exports = (assets, isESMBuild = false, namedChunkGroups) => {
3939
};
4040

4141
let path, css, obj;
42-
scripts.forEach((filename, idx) => {
43-
css = styles[idx];
42+
scripts.forEach(filename => {
43+
css = styles.find(asset => asset.startsWith(filename.replace(/\..*/, '')));
4444
obj = Object.assign({}, defaults);
4545
obj[filename] = { type: 'script', weight: 0.9 };
4646
if (css) obj[css] = { type: 'style', weight: 0.9 };

‎packages/cli/lib/lib/webpack/webpack-client-config.js‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const cleanFilename = name =>
2929
* @returns {Promise<import('webpack').Configuration>}
3030
*/
3131
async function clientConfig(env) {
32-
const { isProd, source, src, cwd /*, port? */ } = env;
32+
const { source, src, cwd } = env;
3333
const IS_SOURCE_PREACT_X_OR_ABOVE = isInstalledVersionPreactXOrAbove(cwd);
3434
const asyncLoader = IS_SOURCE_PREACT_X_OR_ABOVE
3535
? require.resolve('@preact/async-loader')
@@ -84,7 +84,7 @@ async function clientConfig(env) {
8484
// copy any static files
8585
existsSync(source('assets')) && { from: 'assets', to: 'assets' },
8686
// copy sw-debug
87-
!isProd && {
87+
!env.isProd && {
8888
from: resolve(__dirname, '../../resources/sw-debug.js'),
8989
to: 'sw-debug.js',
9090
},
@@ -100,7 +100,7 @@ async function clientConfig(env) {
100100
output: {
101101
path: env.dest,
102102
publicPath: '/',
103-
filename: isProd ? '[name].[chunkhash:5].js' : '[name].js',
103+
filename: env.isProd ? '[name].[chunkhash:5].js' : '[name].js',
104104
chunkFilename: '[name].chunk.[chunkhash:5].js',
105105
},
106106

@@ -143,6 +143,8 @@ async function clientConfig(env) {
143143
plugins: [
144144
new webpack.DefinePlugin({
145145
'process.env.ES_BUILD': false,
146+
'process.env.ADD_SW': env.sw,
147+
'process.env.PRERENDER': env.prerender,
146148
}),
147149
new PushManifestPlugin(env),
148150
...(await renderHTMLPlugin(env)),
@@ -156,14 +158,12 @@ async function clientConfig(env) {
156158
};
157159
}
158160

159-
function getBabelEsmPlugin(config) {
161+
function getBabelEsmPlugin(env) {
160162
const esmPlugins = [];
161-
if (config.esm) {
163+
if (env.esm) {
162164
esmPlugins.push(
163165
new BabelEsmPlugin({
164-
filename: config.isProd
165-
? '[name].[chunkhash:5].esm.js'
166-
: '[name].esm.js',
166+
filename: env.isProd ? '[name].[chunkhash:5].esm.js' : '[name].esm.js',
167167
chunkFilename: '[name].chunk.[chunkhash:5].esm.js',
168168
excludedPlugins: ['BabelEsmPlugin', 'InjectManifest'],
169169
beforeStartExecution: plugins => {
@@ -196,7 +196,7 @@ function getBabelEsmPlugin(config) {
196196
/**
197197
* @returns {import('webpack').Configuration}
198198
*/
199-
function isProd(config) {
199+
function isProd(env) {
200200
let limit = 200 * 1000; // 200kb
201201
const prodConfig = {
202202
performance: Object.assign(
@@ -205,14 +205,12 @@ function isProd(config) {
205205
maxAssetSize: limit,
206206
maxEntrypointSize: limit,
207207
},
208-
config.pkg.performance
208+
env.pkg.performance
209209
),
210210

211211
plugins: [
212212
new webpack.DefinePlugin({
213-
'process.env.ADD_SW': config.sw,
214-
'process.env.ESM': config.esm,
215-
'process.env.PRERENDER': config.prerender,
213+
'process.env.ESM': env.esm,
216214
}),
217215
new SizePlugin(),
218216
],
@@ -252,7 +250,7 @@ function isProd(config) {
252250
},
253251
};
254252

255-
if (config['inline-css']) {
253+
if (env['inline-css']) {
256254
prodConfig.plugins.push(
257255
new CrittersPlugin({
258256
preload: 'media',
@@ -263,11 +261,11 @@ function isProd(config) {
263261
);
264262
}
265263

266-
if (config.analyze) {
264+
if (env.analyze) {
267265
prodConfig.plugins.push(new BundleAnalyzerPlugin());
268266
}
269267

270-
if (config.brotli) {
268+
if (env.brotli) {
271269
prodConfig.plugins.push(
272270
new CompressionPlugin({
273271
filename: '[path].br[query]',
@@ -283,21 +281,17 @@ function isProd(config) {
283281
/**
284282
* @returns {import('webpack').Configuration}
285283
*/
286-
function isDev(config) {
287-
const { cwd, src, refresh } = config;
284+
function isDev(env) {
285+
const { cwd, src } = env;
288286

289287
return {
290288
infrastructureLogging: {
291289
level: 'info',
292290
},
293291
plugins: [
294292
new webpack.NamedModulesPlugin(),
295-
...(refresh ? [new RefreshPlugin()] : []),
296-
new webpack.DefinePlugin({
297-
'process.env.ADD_SW': config.sw,
298-
'process.env.PRERENDER': config.prerender,
299-
}),
300-
],
293+
env.refresh && new RefreshPlugin(),
294+
].filter(Boolean),
301295

302296
devServer: {
303297
hot: true,
@@ -312,9 +306,9 @@ function isDev(config) {
312306
ignored: [resolve(cwd, 'build'), resolve(cwd, 'node_modules')],
313307
},
314308
},
315-
https: config.https,
316-
port: config.port,
317-
host: process.env.HOST || config.host || '0.0.0.0',
309+
https: env.https,
310+
port: env.port,
311+
host: process.env.HOST || env.host || '0.0.0.0',
318312
allowedHosts: 'all',
319313
historyApiFallback: true,
320314
client: {

‎packages/cli/tests/build.test.js‎

Lines changed: 37 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
const { join } = require('path');
2-
const { existsSync } = require('fs');
3-
const { readFile } = require('fs').promises;
2+
const { access, readdir, readFile } = require('fs').promises;
43
const looksLike = require('html-looks-like');
54
const { create, build } = require('./lib/cli');
65
const { snapshot } = require('./lib/utils');
76
const { subject } = require('./lib/output');
87
const images = require('./images/build');
9-
const { promisify } = require('util');
10-
const glob = promisify(require('glob').glob);
118
const minimatch = require('minimatch');
9+
const shell = require('shelljs');
1210

1311
const prerenderUrlFiles = [
1412
'prerender-urls.json',
@@ -69,6 +67,17 @@ describe('preact build', () => {
6967
testMatch(output, images['default-esm']);
7068
});
7169

70+
it(`builds the 'typescript' template`, async () => {
71+
let dir = await create('typescript');
72+
73+
// The tsconfig.json in the template covers the test directory,
74+
// so TS will error out if it can't find even test-only module definitions
75+
shell.cd(dir);
76+
shell.exec('npm i @types/enzyme enzyme-adapter-preact-pure');
77+
78+
expect(() => build(dir)).not.toThrow();
79+
});
80+
7281
it('should use SASS styles', async () => {
7382
let dir = await subject('sass');
7483
await build(dir);
@@ -79,12 +88,17 @@ describe('preact build', () => {
7988

8089
it('should use custom `.babelrc`', async () => {
8190
// app with custom .babelrc enabling async functions
82-
let app = await subject('custom-babelrc');
91+
let dir = await subject('custom-babelrc');
8392

84-
await build(app);
93+
await build(dir);
8594

86-
const bundleFiles = await glob(`${app}/build/bundle.*.js`);
87-
const transpiledChunk = await readFile(bundleFiles[0], 'utf8');
95+
const bundleFile = (await readdir(`${dir}/build`)).find(file =>
96+
/bundle\.\w{5}\.js$/.test(file)
97+
);
98+
const transpiledChunk = await readFile(
99+
`${dir}/build/${bundleFile}`,
100+
'utf8'
101+
);
88102

89103
// when tragetting only last 1 chrome version, babel preserves
90104
// arrow function. So checking for the delay function code from delay function in
@@ -183,8 +197,8 @@ describe('preact build', () => {
183197
let dir = await subject('custom-webpack');
184198
await build(dir);
185199

186-
let file = join(dir, 'build/bundle.js');
187-
expect(existsSync(file)).toBe(true);
200+
let stableOutput = join(dir, 'build/bundle.js');
201+
expect(await access(stableOutput)).toBeUndefined();
188202
});
189203

190204
it('should use custom `template.html`', async () => {
@@ -218,16 +232,26 @@ describe('preact build', () => {
218232
let dir = await subject('static-root');
219233
await build(dir);
220234
let file = join(dir, 'build', '.htaccess');
221-
expect(existsSync(file)).toBe(true);
235+
expect(await access(file)).toBeUndefined();
222236
});
223237

224-
it('should error out for invalid argument', async () => {
238+
it('should error out for invalid CLI argument', async () => {
225239
let dir = await subject('custom-template');
226240
const mockExit = jest.spyOn(process, 'exit').mockImplementation(() => {});
227-
expect(build(dir, { 'service-worker': false })).rejects.toEqual(
241+
await expect(build(dir, { 'service-worker': false })).rejects.toEqual(
228242
new Error('Invalid argument found.')
229243
);
230244
expect(mockExit).toHaveBeenCalledWith(1);
231245
mockExit.mockRestore();
232246
});
247+
248+
it('should produce correct push-manifest', async () => {
249+
let dir = await create('default');
250+
251+
await build(dir);
252+
const manifest = await readFile(`${dir}/build/push-manifest.json`, 'utf8');
253+
expect(manifest).toEqual(
254+
expect.stringMatching(getRegExpFromMarkup(images.pushManifest))
255+
);
256+
});
233257
});

‎packages/cli/tests/client.test.js‎

Lines changed: 0 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -22,31 +22,6 @@ describe('client-side tests', () => {
2222
PORT = await getPort();
2323
});
2424

25-
it.skip('should hydrate routes progressively.', async () => {
26-
let dir = await subject('progressive-hydration');
27-
await build(dir);
28-
const server = getServer(join(dir, 'build'), PORT);
29-
30-
// let page = await loadPage(chrome, `http://127.0.0.1:${PORT}/`);
31-
const page = await chrome.newPage();
32-
33-
page.on('console', consoleMessage => {
34-
// eslint-disable-next-line
35-
console[consoleMessage.type()](consoleMessage.text());
36-
});
37-
38-
await page.goto(`http://127.0.0.1:${PORT}/`);
39-
40-
// await waitUntilExpression(page, `window.booted`);
41-
await sleep(500);
42-
43-
const mutations = await page.evaluate('window.mutations');
44-
45-
expect(mutations).toHaveLength(0);
46-
47-
server.server.close();
48-
});
49-
5025
it('should hydrate routes progressively with preact8.', async () => {
5126
let dir = await subject('progressive-hydration-preact8');
5227
await build(dir, {}, true);

‎packages/cli/tests/images/build.js‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ exports.default = Object.assign({}, common, {
2222
'index.html': 2034,
2323
'manifest.json': 455,
2424
'preact_prerender_data.json': 11,
25-
'push-manifest.json': 812,
25+
'push-manifest.json': 450,
2626
'route-home.chunk.bcb8a.css': 58,
2727
'route-home.chunk.3cec8.js': 327,
2828
'route-home.chunk.3cec8.js.map': 483,
@@ -212,3 +212,44 @@ exports.template = `
212212
</body>
213213
</html>
214214
`;
215+
216+
exports.pushManifest = `
217+
{
218+
"/":{
219+
"bundle.\\w{5}.css":{
220+
"type":"style",
221+
"weight":1
222+
},
223+
"bundle.\\w{5}.js":{
224+
"type":"script",
225+
"weight":1
226+
},
227+
"route-home.chunk.\\w{5}.js":{
228+
"type":"script",
229+
"weight":0.9
230+
},
231+
"route-home.chunk.\\w{5}.css":{
232+
"type":"style",
233+
"weight":0.9
234+
}
235+
},
236+
"/profile":{
237+
"bundle.\\w{5}.css":{
238+
"type":"style",
239+
"weight":1
240+
},
241+
"bundle.\\w{5}.js":{
242+
"type":"script",
243+
"weight":1
244+
},
245+
"route-profile.chunk.\\w{5}.js":{
246+
"type":"script",
247+
"weight":0.9
248+
},
249+
"route-profile.chunk.\\w{5}.css":{
250+
"type":"style",
251+
"weight":0.9
252+
}
253+
}
254+
}
255+
`;

0 commit comments

Comments
 (0)