Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Rewrite node module handling (npm plugin) #874

Draft
wants to merge 41 commits into
base: main
Choose a base branch
from
Draft

Rewrite node module handling (npm plugin) #874

Changes from 1 commit
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
f3fbb1b
Add foundation for a new npm plugin
marvinhagemeister Sep 11, 2021
fde2f51
Acorn: Add missing exportDefaultDeclaration
marvinhagemeister Sep 11, 2021
5908aed
Add support for commonjs default exports
marvinhagemeister Sep 11, 2021
4682b9e
Add support for legacy sub packages
marvinhagemeister Sep 12, 2021
f1dee81
Add support for auto installing npm dependencies
marvinhagemeister Sep 12, 2021
46bb3f2
Add basic support for "exports" field
marvinhagemeister Sep 12, 2021
bd516a1
Fix unable to resolve scoped packages
marvinhagemeister Sep 12, 2021
7624518
Watcher: Ignore `.cache/` folder
marvinhagemeister Sep 12, 2021
34c4f08
Cleanup npm-plugin logging
marvinhagemeister Sep 12, 2021
4f153e8
Experiment with npm autoInstall
marvinhagemeister Sep 12, 2021
7b52e2c
Fix incorrect npm auto-install cache directory
marvinhagemeister Sep 12, 2021
da3bb3b
Fix commonjs rewriting non "module.exports" assginments
marvinhagemeister Sep 12, 2021
ad65d49
Add support for commonjs proxy modules
marvinhagemeister Sep 12, 2021
2139c51
Fix duplicate download requeusts
marvinhagemeister Sep 12, 2021
ac47f47
Drop if-statement if it's unreachable
marvinhagemeister Sep 12, 2021
cea027b
Remove single top level IIFE in CommonJS bundles
marvinhagemeister Sep 12, 2021
121c772
Switch to a non-string based transpiler for commonjs
marvinhagemeister Sep 16, 2021
560c362
Fix CommonJS file not being detected
marvinhagemeister Sep 16, 2021
86ce5cb
Include json in npm bundles
marvinhagemeister Sep 19, 2021
a0aa34a
Improve npm module bundling
marvinhagemeister Sep 19, 2021
9b1d76e
NPM: Bring back disk cache
marvinhagemeister Sep 19, 2021
31419e6
Update to zecorn 0.8.1
marvinhagemeister Sep 19, 2021
d5b5a2a
Use `writeFile` helper
marvinhagemeister Sep 19, 2021
7aa7999
Remove `setCwd` hack
marvinhagemeister Sep 19, 2021
1862bbf
Fix unable to load json in commonjs package
marvinhagemeister Sep 16, 2021
65104d9
NPM: Remove file dependencies on old plugin
marvinhagemeister Sep 29, 2021
b8dd4ac
NPM: Support loading assets from node modules
marvinhagemeister Sep 29, 2021
944d74e
NPM: Add back size warning plugin
marvinhagemeister Sep 29, 2021
4a13701
NPM: Remove old npm plugin
marvinhagemeister Sep 29, 2021
c2adc8a
Bring back etag caching for npm packages
marvinhagemeister Sep 29, 2021
b791f9b
Upgrade zecorn to fix codegen issues
marvinhagemeister Oct 4, 2021
300d7fc
Allow loading assets from auto-installed packages
marvinhagemeister Oct 6, 2021
755826e
NPM: Use already extracted package if available
marvinhagemeister Oct 6, 2021
ee489af
Support auto installing versioned packages
marvinhagemeister Oct 6, 2021
151def0
Fix incorrect CLI argument casing
marvinhagemeister Oct 6, 2021
a9e22b7
Specify custom npm registry via `--registry`
marvinhagemeister Oct 6, 2021
efe3a9e
Add changeset
marvinhagemeister Oct 6, 2021
bedc4da
NPM: Default to `index.js` if no entry point is found
marvinhagemeister Oct 6, 2021
52950ec
Update zecorn to 0.9.5
marvinhagemeister Oct 6, 2021
bbe841c
Reduce test CLI noise
marvinhagemeister Oct 6, 2021
3043967
WIP
marvinhagemeister Oct 7, 2021
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Reduce test CLI noise
  • Loading branch information
@marvinhagemeister
marvinhagemeister committed Oct 6, 2021
commit bbe841cdda32496f38423b1aff6db78ff0562c59
176 changes: 96 additions & 80 deletions packages/wmr/test/production.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,36 +60,37 @@ describe('production', () => {
it('should allow overwriting url loader', async () => {
await loadFixture('overwrite-loader-url', env);
instance = await runWmr(env.tmp.path, 'build');
const code = await instance.done;
const output = instance.output.join('\n');
console.log(output);

expect(code).toEqual(0);
await withLog(instance.output, async () => {
const code = await instance.done;
expect(code).toEqual(0);

const { address, stop } = serveStatic(path.join(env.tmp.path, 'dist'));
cleanup.push(stop);
const { address, stop } = serveStatic(path.join(env.tmp.path, 'dist'));
cleanup.push(stop);

await env.page.goto(address, {
waitUntil: ['networkidle0', 'load']
});
await env.page.goto(address, {
waitUntil: ['networkidle0', 'load']
});

const text = await env.page.content();
expect(text).toMatch(/my-url: \/assets\/foo\..*\.svg/);
expect(text).toMatch(/url: \/assets\/foo\..*\.svg/);
expect(text).toMatch(/fallback: \/assets\/foo\..*\.svg/);
const text = await env.page.content();
expect(text).toMatch(/my-url: \/assets\/foo\..*\.svg/);
expect(text).toMatch(/url: \/assets\/foo\..*\.svg/);
expect(text).toMatch(/fallback: \/assets\/foo\..*\.svg/);
});
});

it('should show all generated files in cli output', async () => {
await loadFixture('file-import', env);
instance = await runWmr(env.tmp.path, 'build');
const code = await instance.done;
const output = instance.output;
console.log(output);

expect(code).toEqual(0);
await withLog(instance.output, async () => {
const output = instance.output;
expect(code).toEqual(0);

const stats = output.slice(output.findIndex(line => /Wrote.*to disk/.test(line)));
expect(stats.join('\n')).toMatch(/img\..*\.jpg/);
const stats = output.slice(output.findIndex(line => /Wrote.*to disk/.test(line)));
expect(stats.join('\n')).toMatch(/img\..*\.jpg/);
});
});

it('should support base64 in HTML', async () => {
Expand Down Expand Up @@ -663,9 +664,9 @@ describe('production', () => {
it('should hoist entry CSS into HTML <link> tag', async () => {
await loadFixture('css-entry', env);
instance = await runWmr(env.tmp.path, 'build');
const code = await instance.done;

await withLog(instance.output, async () => {
const code = await instance.done;
expect(code).toBe(0);

const files = (await fs.readdir(path.join(env.tmp.path, 'dist', 'assets'))).filter(f => f[0] !== '.');
Expand All @@ -687,75 +688,84 @@ describe('production', () => {
it('should respect `config.publicPath` value', async () => {
await loadFixture('publicpath', env);
instance = await runWmr(env.tmp.path, 'build');
const code = await instance.done;
console.info(instance.output.join('\n'));
expect(code).toBe(0);
await withLog(instance.output, async () => {
const code = await instance.done;
expect(code).toBe(0);

const readdir = async f => (await fs.readdir(path.join(env.tmp.path, f))).filter(f => f[0] !== '.');
const readdir = async f => (await fs.readdir(path.join(env.tmp.path, f))).filter(f => f[0] !== '.');

const assets = await readdir('dist/assets');
const chunks = await readdir('dist/chunks');
const roots = await readdir('dist');
const assets = await readdir('dist/assets');
const chunks = await readdir('dist/chunks');
const roots = await readdir('dist');

expect(assets).toEqual([expect.stringMatching(/^index\.\w+\.css$/), expect.stringMatching(/^math\.\w+\.css$/)]);
expect(assets).toEqual([expect.stringMatching(/^index\.\w+\.css$/), expect.stringMatching(/^math\.\w+\.css$/)]);

expect(chunks).toEqual([expect.stringMatching(/^constants\.\w+\.js$/), expect.stringMatching(/^math\.\w+\.js$/)]);
expect(chunks).toEqual([
expect.stringMatching(/^constants\.\w+\.js$/),
expect.stringMatching(/^math\.\w+\.js$/)
]);

expect(roots).toEqual(['assets', 'chunks', expect.stringMatching(/^index\.\w+\.js$/), 'index.html']);
expect(roots).toEqual(['assets', 'chunks', expect.stringMatching(/^index\.\w+\.js$/), 'index.html']);

const html = await fs.readFile(path.join(env.tmp.path, 'dist', 'index.html'), 'utf8');
const math = await fs.readFile(path.join(env.tmp.path, 'dist', 'chunks', chunks[1]), 'utf8');
const main = await fs.readFile(path.join(env.tmp.path, 'dist', roots[2]), 'utf8');
const html = await fs.readFile(path.join(env.tmp.path, 'dist', 'index.html'), 'utf8');
const math = await fs.readFile(path.join(env.tmp.path, 'dist', 'chunks', chunks[1]), 'utf8');
const main = await fs.readFile(path.join(env.tmp.path, 'dist', roots[2]), 'utf8');

// https://cdn.example.com/assets/math.d41e7373.css
expect(math).toMatch(`("https://cdn.example.com/assets/${assets[1]}")`);
expect(math).toMatch(`import("./${chunks[0]}")`);
// https://cdn.example.com/assets/math.d41e7373.css
expect(math).toMatch(`("https://cdn.example.com/assets/${assets[1]}")`);
expect(math).toMatch(`import("./${chunks[0]}")`);

// (preload) https://cdn.example.com/assets/math.d41e7373.css
expect(main).toMatch(`$w_s$("https://cdn.example.com/assets/${assets[1]}")`);
// (preload) https://cdn.example.com/assets/math.d41e7373.css
expect(main).toMatch(`$w_s$("https://cdn.example.com/assets/${assets[1]}")`);

// HTML stylesheet: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`href="https://cdn.example.com/assets/${assets[0]}"`);
// HTML stylesheet: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`href="https://cdn.example.com/assets/${assets[0]}"`);

// HTML script: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`src="https://cdn.example.com/${roots[2]}"`);
// HTML script: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`src="https://cdn.example.com/${roots[2]}"`);
});
});

it('should respect `config.publicPath` value (ts)', async () => {
await loadFixture('publicpath-typescript', env);
instance = await runWmr(env.tmp.path, 'build');
const code = await instance.done;
console.info(instance.output.join('\n'));
expect(code).toBe(0);

const readdir = async f => (await fs.readdir(path.join(env.tmp.path, f))).filter(f => f[0] !== '.');
await withLog(instance.output, async () => {
const code = await instance.done;
expect(code).toBe(0);

const assets = await readdir('dist/assets');
const chunks = await readdir('dist/chunks');
const roots = await readdir('dist');
const readdir = async f => (await fs.readdir(path.join(env.tmp.path, f))).filter(f => f[0] !== '.');

const assets = await readdir('dist/assets');
const chunks = await readdir('dist/chunks');
const roots = await readdir('dist');

expect(assets).toEqual([expect.stringMatching(/^index\.\w+\.css$/), expect.stringMatching(/^math\.\w+\.css$/)]);
expect(assets).toEqual([expect.stringMatching(/^index\.\w+\.css$/), expect.stringMatching(/^math\.\w+\.css$/)]);

expect(chunks).toEqual([expect.stringMatching(/^constants\.\w+\.js$/), expect.stringMatching(/^math\.\w+\.js$/)]);
expect(chunks).toEqual([
expect.stringMatching(/^constants\.\w+\.js$/),
expect.stringMatching(/^math\.\w+\.js$/)
]);

expect(roots).toEqual(['assets', 'chunks', expect.stringMatching(/^index\.\w+\.js$/), 'index.html']);
expect(roots).toEqual(['assets', 'chunks', expect.stringMatching(/^index\.\w+\.js$/), 'index.html']);

const html = await fs.readFile(path.join(env.tmp.path, 'dist', 'index.html'), 'utf8');
const math = await fs.readFile(path.join(env.tmp.path, 'dist', 'chunks', chunks[1]), 'utf8');
const main = await fs.readFile(path.join(env.tmp.path, 'dist', roots[2]), 'utf8');
const html = await fs.readFile(path.join(env.tmp.path, 'dist', 'index.html'), 'utf8');
const math = await fs.readFile(path.join(env.tmp.path, 'dist', 'chunks', chunks[1]), 'utf8');
const main = await fs.readFile(path.join(env.tmp.path, 'dist', roots[2]), 'utf8');

// https://cdn.example.com/assets/math.d41e7373.css
expect(math).toMatch(`("https://cdn.example.com/assets/${assets[1]}")`);
expect(math).toMatch(`import("./${chunks[0]}")`);
// https://cdn.example.com/assets/math.d41e7373.css
expect(math).toMatch(`("https://cdn.example.com/assets/${assets[1]}")`);
expect(math).toMatch(`import("./${chunks[0]}")`);

// (preload) https://cdn.example.com/assets/math.d41e7373.css
expect(main).toMatch(`$w_s$("https://cdn.example.com/assets/${assets[1]}")`);
// (preload) https://cdn.example.com/assets/math.d41e7373.css
expect(main).toMatch(`$w_s$("https://cdn.example.com/assets/${assets[1]}")`);

// HTML stylesheet: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`href="https://cdn.example.com/assets/${assets[0]}"`);
// HTML stylesheet: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`href="https://cdn.example.com/assets/${assets[0]}"`);

// HTML script: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`src="https://cdn.example.com/${roots[2]}"`);
// HTML script: https://cdn.example.com/assets/index.0544f0a6.css
expect(html).toMatch(`src="https://cdn.example.com/${roots[2]}"`);
});
});
});

Expand Down Expand Up @@ -826,35 +836,41 @@ describe('production', () => {
it('should support prerendering json', async () => {
await loadFixture('prod-prerender-json', env);
instance = await runWmr(env.tmp.path, 'build', '--prerender');
const code = await instance.done;
console.info(instance.output.join('\n'));
expect(code).toBe(0);

const indexHtml = path.join(env.tmp.path, 'dist', 'index.html');
const index = await fs.readFile(indexHtml, 'utf8');
expect(index).toMatch(/{"foo":42,"bar":"bar"}/);
await withLog(instance.output, async () => {
const code = await instance.done;
expect(code).toBe(0);

const indexHtml = path.join(env.tmp.path, 'dist', 'index.html');
const index = await fs.readFile(indexHtml, 'utf8');
expect(index).toMatch(/{"foo":42,"bar":"bar"}/);
});
});

it('should not crash during prerendering', async () => {
await loadFixture('prerender-crash', env);
instance = await runWmr(env.tmp.path, 'build', '--prerender');
const code = await instance.done;
console.info(instance.output.join('\n'));
expect(instance.output.join('\n')).toMatch(/Error: fail/);
// Check if stack trace is present
expect(instance.output.join('\n')).toMatch(/^\s+at\s\w+/gm);
expect(code).toBe(1);

await withLog(instance.output, async () => {
const code = await instance.done;
expect(instance.output.join('\n')).toMatch(/Error: fail/);
// Check if stack trace is present
expect(instance.output.join('\n')).toMatch(/^\s+at\s\w+/gm);
expect(code).toBe(1);
});
});

it('config should support supplying additional links to prerender', async () => {
await loadFixture('prerender-additional-links', env);
instance = await runWmr(env.tmp.path, 'build', '--prerender');
const code = await instance.done;
console.info(instance.output.join('\n'));
expect(instance.output.join('\n')).toMatch(/Prerendered 2 pages/i);
expect(code).toBe(0);

expect(await fs.access(path.join(env.tmp.path, 'dist', 'non-existent-link', 'index.html'))).toBeUndefined();
await withLog(instance.output, async () => {
const code = await instance.done;
expect(instance.output.join('\n')).toMatch(/Prerendered 2 pages/i);
expect(code).toBe(0);

expect(await fs.access(path.join(env.tmp.path, 'dist', 'non-existent-link', 'index.html'))).toBeUndefined();
});
});

it('config should throw if no prerender function is exported', async () => {
Expand Down