build --watch mode #782

FredKSchott · 2020-08-11T06:43:17Z

Resolves #376

Changes

$ snowpack build --watch

Adds a build --watch mode, our most requested feature! (snowpack build --watch mode #376)
Use Snowpack with your own dev server, Snowpack will watch the file system and rebuild files.
All bundling and other production optimizations supported.

Testing

Covered by existing tests.

vercel · 2020-08-11T06:43:21Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/pikapkg/snowpack/3e6arx1mg
✅ Preview: https://snowpack-git-wip-build-watch.pikapkg.vercel.app

FredKSchott · 2020-08-11T06:45:59Z

packages/snowpack/src/commands/build.ts

@@ -52,25 +49,203 @@ async function installOptimizedDependencies(
  return installResult;
 }

+class BuildPipelineFile {


Still needs docs, but this is the meat of the refactor: each step of the build was moved from a "full batch effort" to a "single file effort". This way, when a single file was changed we could re-run the entire build on that one file.

Very +1 for this improvement. I’d love for this to be a stepping stone to every file being handled async, and building / watching everything in parallel.

FredKSchott · 2020-08-11T06:46:36Z

packages/snowpack/src/commands/build.ts

+
+  async buildProxy() {
+    for (const importProxyFileLoc of this.allImportProxyFiles) {
+      if (existsSync(importProxyFileLoc)) {


this is especially hacky, and doesn't really work without --clean. Will need to be cleaned up

What is the scenario where overwriting is bad (and should it be a comment here)?

already gone :)

francislavoie · 2020-08-11T12:14:18Z

Is there an easy-ish way to pull this branch in as a yarn dependency to give it a shot? I'd like to try it out and give some feedback. Not sure what the best approach is to do that though.

FredKSchott · 2020-08-11T17:57:15Z

Great call, I just published this PR to snowpack@next so that you can install locally, easily

francislavoie · 2020-08-12T13:54:41Z

Mildly unrelated but this version and 2.7.7 seem to be copying over my .scss files to dist now, I don't see an option to configure/ignore those files from being tracked. How would I do that?

Anyways, seems to work for me! Obviously a bit noisy right now with the writeToDisk logs, but that's to be expected with a WIP build 😅

Noticed a problem - if I put a syntax error in my code, then it'll write my .tsx file to the dist output, and once I've fixed the issue it continues to write the .js version of the file out but doesn't clear out the .tsx file (that it should never have written to the output in the first place).

Example (missing type for props, yielding an "Unexpected token" error):

export const Foo = (props: ) => {
	return true;
}

It also doesn't seem to warn/error on typescript errors, not sure if it should? But it would with webpack for example.

FredKSchott · 2020-08-13T05:47:23Z

@francislavoie thanks for the feedback! We're doing some work in #762 which should address those output issues before the next release goes out.

@drwpow any idea why those .scss files would be copied over to dist?

FredKSchott · 2020-08-13T07:03:24Z

Update: the PR has been cleaned up, and is ready for review!

A lot of the PR is moving around existing code, so I tried my best to draw the line between refactoring only what was needed and refactoring every line in the build file.

Updated release available at snowpack@next

francislavoie · 2020-08-13T15:13:27Z

Latest build still works 👍

Previous comments still apply - .ts files are written to dist if a syntax error is made, .scss is still copied over, I think only TS fatals are printed (should that be configurable? I dunno.)

Tangential question - is it possible at all to have HMR work with build --watch? Or does that actually require the files to be served from a dev server to work?

drwpow · 2020-08-13T18:54:33Z

packages/snowpack/src/commands/build.ts

+  filesToResolve: Record<string, SnowpackSourceFile> = {};
+  filesToProxy: string[] = [];
+
+  constructor(


nit: should these be an object instead? I’d be worried about accidentally mixing up a string type def on a new instantiation

I'm game 👍

drwpow · 2020-08-13T18:54:49Z

packages/snowpack/src/commands/build.ts

+ * individual stages so that the entire application build process can be tackled
+ * in stages (build -> resolve -> write to disk).
+ */
+class FileBuilder {


drwpow · 2020-08-13T18:56:11Z

packages/snowpack/src/commands/build.ts

+      const buildPipelineFile = new FileBuilder(locOnDisk, outDir, buildDirectoryLoc, config);
+      buildPipelineFiles[locOnDisk] = buildPipelineFile;
+      await buildPipelineFile.buildFile();
+    }


not important, but could anything be gained here from running the file builders in parallel?

100%, we'd talked about this a bit but if there are no objections I wanted to implement the feature in one PR and then optimize it in another.

Oh yeah agreed; don’t mess with child processes in this PR but my comment was specifically: should we replace the for (const … + await … with a Promise.all(… here?

drwpow · 2020-08-13T18:56:51Z

packages/snowpack/src/commands/build.ts

-    sourceMaps: config.buildOptions.sourceMaps,
-  });
+  // "--watch" mode - Start watching the file system.
+  // Defer "chokidar" loading to here, to reduce impact on overall startup time


drwpow · 2020-08-13T18:57:43Z

packages/snowpack/tsconfig.json

@@ -6,8 +6,6 @@
    "esModuleInterop": true,
    "strict": true,
    "noImplicitAny": false,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,


Why were these removed?

not meant to be committed, but did want to run this idea by you in a separate PR, will follow up

drwpow

This is so fast!!! But for me the display doesn’t change on rebuild, so I wasn’t sure if it was working or not (it was; just didn’t log). Maybe adding an update like Rebuilt App.tsx [0.01s]?

francislavoie · 2020-08-13T19:06:15Z

Webpack's --watch uses ncurses or whatever to update the terminal display every time a change happens. I think that sort of output might be nice as well, to show when things are happening as @drwpow said. But I don't mind how it is now, just a suggestion 👍

drwpow · 2020-08-13T19:13:02Z

Tangential question - is it possible at all to have HMR work with build --watch? Or does that actually require the files to be served from a dev server to work?

It could probably work, but it’d be a bit tricky. There’s basically HMR code that’s added to your JS in order to get this to work, so we’d have to make that even possible to write to disk (currently that only exists in memory in the dev server). But even if we got that to work, the particular HMR code we send may not work with every dev server (there’s no standard yet, but it’s something that @FredKSchott and others are working on). All that to say, it’s possible, but very tricky without controlling both build & dev server.

FredKSchott · 2020-08-13T21:28:05Z

yup, HMR is directly tied to the dev server, and the people who want this want to own their own dev server. So unfortunately we can't support HMR by default, out of the box.

But... there are definitely some interesting things that you could do. For example, our HMR engine on the client connects to an HMR server via WebSocket, could we continue to host the Websocket connection in build --watch mode without hosting the entire dev server?

It would be fun to explore a bit more (happy to help anyone who wants to!) but ultimately out of scope for this PR / near term release.

francislavoie · 2020-08-13T21:35:11Z

Yeah, that's the sort I think I had in mind - I wouldn't expect it to work by default, I'd definitely expect HMR to be opt-in for build --watch. Feel free to @ me if you need a tester for that later on 👍

FredKSchott requested a review from a team as a code owner August 11, 2020 06:43

FredKSchott mentioned this pull request Aug 11, 2020

snowpack build --watch mode #376

Closed

FredKSchott commented Aug 11, 2020

View reviewed changes

refactor

a187e70

FredKSchott force-pushed the wip-build-watch branch from 8432bd4 to ffe8cdb Compare August 13, 2020 06:55

vercel bot deployed to Preview August 13, 2020 06:55 View deployment

FredKSchott force-pushed the wip-build-watch branch from ffe8cdb to 69f58a7 Compare August 13, 2020 06:59

vercel bot deployed to Preview August 13, 2020 06:59 View deployment

FredKSchott changed the title ~~[WIP] build --watch mode~~ build --watch mode Aug 13, 2020

clean up

f88399f

FredKSchott force-pushed the wip-build-watch branch from 69f58a7 to f88399f Compare August 13, 2020 07:14

vercel bot deployed to Preview August 13, 2020 07:14 View deployment

fix node v10

5f32eed

vercel bot deployed to Preview August 13, 2020 16:22 View deployment

drwpow reviewed Aug 13, 2020

View reviewed changes

drwpow approved these changes Aug 13, 2020

View reviewed changes

updates

7aa1857

vercel bot deployed to Preview August 13, 2020 21:37 View deployment

FredKSchott merged commit b77ddad into master Aug 13, 2020

FredKSchott deleted the wip-build-watch branch August 13, 2020 21:43

jeberly mentioned this pull request Sep 5, 2020

Dev server middleware? #970

Closed

FredKSchott mentioned this pull request Sep 6, 2020

Build --watch HMR Support #1002

Closed

This was referenced Nov 1, 2020

build --watch mode vitejs/vite#995

Closed

Better SSR support [watch build] vitejs/vite#972

Closed

This was referenced Feb 2, 2021

Development WATCH (build to dist on changes) without local server or hot reloading. nuxt/nuxt#7296

Closed

Build --watch mode nuxt/nuxt#8754

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

build --watch mode #782

build --watch mode #782

FredKSchott commented Aug 11, 2020 •

edited

Loading

vercel bot commented Aug 11, 2020 •

edited

Loading

FredKSchott Aug 11, 2020

drwpow Aug 12, 2020

FredKSchott Aug 11, 2020

drwpow Aug 12, 2020

FredKSchott Aug 13, 2020

francislavoie commented Aug 11, 2020

FredKSchott commented Aug 11, 2020

francislavoie commented Aug 12, 2020 •

edited

Loading

FredKSchott commented Aug 13, 2020

FredKSchott commented Aug 13, 2020 •

edited

Loading

francislavoie commented Aug 13, 2020 •

edited

Loading

drwpow Aug 13, 2020

FredKSchott Aug 13, 2020

drwpow Aug 13, 2020

drwpow Aug 13, 2020

FredKSchott Aug 13, 2020

drwpow Aug 13, 2020

drwpow Aug 13, 2020

drwpow Aug 13, 2020

FredKSchott Aug 13, 2020

drwpow left a comment

francislavoie commented Aug 13, 2020

drwpow commented Aug 13, 2020

FredKSchott commented Aug 13, 2020

francislavoie commented Aug 13, 2020

build --watch mode #782

build --watch mode #782

Conversation

FredKSchott commented Aug 11, 2020 • edited Loading

Changes

Testing

vercel bot commented Aug 11, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

francislavoie commented Aug 11, 2020

FredKSchott commented Aug 11, 2020

francislavoie commented Aug 12, 2020 • edited Loading

FredKSchott commented Aug 13, 2020

FredKSchott commented Aug 13, 2020 • edited Loading

francislavoie commented Aug 13, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drwpow left a comment

Choose a reason for hiding this comment

francislavoie commented Aug 13, 2020

drwpow commented Aug 13, 2020

FredKSchott commented Aug 13, 2020

francislavoie commented Aug 13, 2020

FredKSchott commented Aug 11, 2020 •

edited

Loading

vercel bot commented Aug 11, 2020 •

edited

Loading

francislavoie commented Aug 12, 2020 •

edited

Loading

FredKSchott commented Aug 13, 2020 •

edited

Loading

francislavoie commented Aug 13, 2020 •

edited

Loading