dev flag used by Rollup/webpack configs seems reversed

[jarrodldavis]

It appears that source maps are not enabled for sapper dev but are enabled for sapper build. I'm using the sapper/svelte v3 rollup template, and the issue appears to be at the call sites of create_compilers in the CLI command implementations.

Here's some relevant code from some GitHub spelunking:

sapper dev:

sapper/src/api/dev.ts

Line 7 in 411e259

import { create_manifest_data, create_app, create_compilers, create_serviceworker_manifest } from '../core';

sapper/src/api/dev.ts

Line 220 in 411e259

const compilers: Compilers = await create_compilers(this.bundler, cwd, src, dest, false);

sapper build:

sapper/src/api/build.ts

Line 4 in e0de230

import { create_compilers, create_app, create_manifest_data, create_serviceworker_manifest } from '../core';

sapper/src/api/build.ts

Line 85 in e0de230

const { client, server, serviceworker } = await create_compilers(bundler, cwd, src, dest, true);

create_compilers:

sapper/src/core/create_compilers/index.ts

Line 4 in 411e259

import { set_dev, set_src, set_dest } from '../../config/env';

sapper/src/core/create_compilers/index.ts

Lines 14 to 23 in 411e259

	export default async function create_compilers(
	bundler: 'rollup' | 'webpack',
	cwd: string,
	src: string,
	dest: string,
	dev: boolean
	): Promise<Compilers> {
	set_dev(dev);
	set_src(src);
	set_dest(dest);

env.ts:

sapper/src/config/env.ts

Lines 1 to 7 in 411e259

	export let dev: boolean;
	export let src: string;
	export let dest: string;
	export const set_dev = (_: boolean) => dev = _;
	export const set_src = (_: string) => src = _;
	export const set_dest = (_: string) => dest = _;

Rollup Config (sapper/config/rollup.js):

sapper/src/config/rollup.ts

Line 1 in 411e259

import { dev, src, dest } from './env';

sapper/src/config/rollup.ts

Line 20 in 411e259

sourcemap: dev

sapper/src/config/rollup.ts

Line 36 in 411e259

sourcemap: dev

Should I go ahead and submit a pull request to reverse the values passed into create_compilers, or is there something I'm not understanding?

[thgh]

JS client sourcemaps seem to be useful:

Dev js without sourcemap (current)

chunk.d6bddd73.js:71 Uncaught (in promise) Error: client js error
    at onMount (chunk.d6bddd73.js:71)
    at run (chunk.666eb2d2.js:15)
    at Array.map (<anonymous>)
    at add_render_callback (chunk.666eb2d2.js:260)
    at flush (chunk.666eb2d2.js:191)
    at init (chunk.666eb2d2.js:354)
    at new App (client.d3c9d90e.js:851)
    at render (client.d3c9d90e.js:1182)

Dev js with sourcemap

about.svelte:13 Uncaught (in promise) Error: client js error
    at onMount (about.svelte:13)
    at run (internal.mjs:21)
    at Array.map (<anonymous>)
    at add_render_callback (internal.mjs:1290)
    at flush (internal.mjs:936)
    at init (internal.mjs:1384)
    at new App (App.svelte:15)
    at render (app.mjs:195)

What tool can read server.js.map?

CSS sourcemaps are generated in both build & dev. And never working.

• In build, the style tags don't have a link to the sourcemap. (intentionally?)
• In dev, Extracted CSS sourcemaps don't work #421

[jarrodldavis]

I actually found this issue because I was wondering why the server.js sourcemap wasn't present in dev. VS Code's node.js debugger can use source maps so that breakpoints work e.g. in server routes.

[Seb35]

I also remarked this. I have no opinion about build mode (it could be argumented that it could be useful even in prod) but it should be enabled in dev mode. See also #537 about CSS sourcemaps.

I push two distinct PRs: one in dev, one in build.

[Seb35]

Thinking about this, I can see the initial reasoning:

• in dev mode, JS source files are not minified, hence sourcemaps are useless,
• in build mode, JS source files are minified, hence sourcemaps are useful.

Possibly this issue is wontfix, but in this case the variables names should be changed to improve readability and/or comments could be added.

[jarrodldavis]

As I mentioned earlier, source maps are still useful in development when debugging server routes:

I actually found this issue because I was wondering why the server.js sourcemap wasn't present in dev. VS Code's node.js debugger can use source maps so that breakpoints work e.g. in server routes.

Additionally, source maps also map (as their name imply) back to the original source file; since both server- and client-side code is transformed (by Svelte) and bundled (by Rollup) even in development, it is useful to see the original per-component/per-route source, especially when setting breakpoints.