feat(livesync): enable webpack with watch #433

Mitko-Kerezov · 2018-02-01T12:46:54Z

Plug into NativeScript CLI's LiveSync pipeline in order to enable incremental webpacking with watch.
Includes:

Instruct CLI to watch App_Resources directory only
Launch webpack with --watch on before-watch hook
Do not launch multiple webpack processes

Merge after NativeScript/nativescript-cli#3350
Implements NativeScript/nativescript-cli#3349

Ping @sis0k0 @rosen-vladimirov @KristianDD

sis0k0 · 2018-02-08T11:56:46Z

lib/before-watchPatterns.js

+
+				if (originalPatterns.indexOf(appResourcesDirectoryLocation) === -1) {
+					originalPatterns.push(appResourcesDirectoryLocation);
+				}


I think it would be better to keep the appResourcesDirectory in the original watch patterns, instead of adding it manually in the bundler.

sis0k0 · 2018-02-08T11:57:35Z

lib/before-prepareJS.js

@@ -8,7 +8,7 @@ module.exports = function ($mobileHelper, $projectData, hookArgs) {
 		env,
 		platform,
 		bundle: appFilesUpdaterOptions.bundle,
-		watch: false // TODO: Read from CLI options...
+		watch: false


We can drop this line since watch is false by default.

sis0k0 · 2018-02-08T12:00:33Z

lib/compiler.js

@@ -4,6 +4,7 @@ const { join, resolve: pathResolve } = require("path");
 const { existsSync } = require("fs");
 const readline = require("readline");
 const { messages } = require("../plugins/WatchStateLoggerPlugin");
+const ProjectSnapshotGenerator = require("../snapshot/android/project-snapshot-generator");


Unused import

sis0k0 · 2018-02-08T12:02:14Z

lib/compiler.js

+                    }
+
+                    if (hookArgs.filesToSync && hookArgs.startSyncFilesTimeout) {
+                        // TODO: Might need to get the "app" constant from config file in the future


Let's remove the 'TODO's and create a separate issue, tracking all the changes that may be needed in the plugin after NativeScript/android#944 is merged.

Mitko-Kerezov · 2018-02-09T10:05:18Z

Ping @sis0k0 with fixed comments and a follow up issue #436

SvetoslavTsenov · 2018-02-13T15:03:09Z

test

Plug into NativeScript CLI's LiveSync pipeline in order to enable incremental webpacking with watch. Includes: * Instruct CLI to watch `App_Resources` directory only * Launch `webpack` with `--watch` on before-watch hook * Do not launch multiple `webpack` processes

Mitko-Kerezov · 2018-02-15T12:52:23Z

Ping @sis0k0, rebased and addressed some issues found off line

sis0k0

Just an idea -
since we have access to all watch patterns from the CLI, can we use them as follows:

patterns that webpack should use for watching -> initialize the webpack compiler (and watcher) with them.
patterns that webpack should ignore -> add them to the 'ignore' options when starting the webpack compiler. That way we can remove the ignore option (./app/App_Resources) from the webpack config.

dtopuzov · 2018-02-16T09:38:28Z

run ci

sis0k0

Great work!

SvetoslavTsenov · 2018-02-19T11:53:33Z

test branch_cli#kerezov/webpack+livesync

dtopuzov · 2018-02-19T13:54:18Z

test branch_cli#kerezov/webpack+livesync

dtopuzov · 2018-02-19T15:39:35Z

test branch_cli#kerezov/webpack+livesync

lambourn · 2018-02-28T15:15:52Z

nice - do we need to pass --watch to the tns run --bundle call now or is watch active by default?

Mitko-Kerezov · 2018-02-28T15:23:09Z

@lambourn watch is active by default - you only need execute
tns run <platform> --bundle.

As prerequisites for this to work, though, you would need the @next versions of both nativescript and nativescript-dev-webpack

lambourn · 2018-02-28T15:32:18Z

@Mitko-Kerezov thanmks. The nativescript-dev-webpack is at 0.9.2 at npmjs.org, is this identical to @next?

lambourn · 2018-02-28T15:35:33Z

ah, nevermind. Got it.

Mitko-Kerezov · 2018-02-28T15:39:28Z

As a reference here:
On every commit in the master branch of this plugin a new version is published to npm.
You can use the latest of these versions by executing npm install nativescript-dev-webpack@next

lambourn · 2018-02-28T15:59:05Z

@Mitko-Kerezov yep, thanks. I Installed @next versions of nativescript and nativescript-dev-webpack and got it running successfully. Very nice.

However, my vendor.ts file gets recompiled every time, even though nothing changed on that file. It merely lists all 3rd party imports, e.g. angular etc.

Is that the expected behaviour?

Mitko-Kerezov · 2018-02-28T16:33:33Z

@lambourn first off, thank you for testing this functionality - this feedback is very valuable to us.
As to your question - it is expected the vendor chunk be recompiled whenever you make changes to .css or .scss files or to app/vendor.ts itself. This is caused by the fact that css contents are embedded into the vendor chunk.

What kind of files do you modify to cause this behavior?

darkyelox · 2018-02-28T21:10:30Z

I can test this with a project already created using Nativescript CLI 3.4.2? it's an Angular project; i updated the webpack package and the Nativescript CLI to @next but when i try to run using tns run android --bundle i get the error:

Executing before-watchPatterns hook from /home/diego/Documents/development/mobile/bridge/NativeScript/Modules/shared-module/hooks/before-watchPatterns/nativescript-dev-webpack.js Cannot read property 'getAppDirectoryRelativePath' of undefined

darkyelox · 2018-02-28T21:32:52Z

I test installing the latest nativescript cli @next and creating an empty project with latest nativescript-dev-webpack @next plugin installed and running gives me the same error, the app compiles and runs in the emulator but the cli crashes when trying to watch.

lambourn · 2018-03-01T09:38:16Z

@Mitko-Kerezov I'll recheck. Presumably, it was either just a component.html or a component.ts file, for sure it was not a .css. The component is part of the bundle.js

In this case, recompilation of the vendor.ts should not happen, right?

btw, is it ok to hijack this PR comment thread or should I create an issue for it?

Mitko-Kerezov · 2018-03-01T15:23:38Z

@darkyelox as I said earlier @next versions are published on every commit in the master branch - the issue you are describing is already resolved in the current @next of nativescript-dev-webpack. You can safely try updating the plugin and giving it another go.

@lambourn I tried changing component.ts as well as component.html and only my bundle chunk got recompiled. If you still experience have trouble could you create an issue in this repository for this and list the steps to reproduce as detailed as possible and we'll look into it. Providing a demo for reproduction purposes would be even better.

Tronix117 · 2018-04-04T21:07:55Z

Is this expected behavior than the app is entirely reloaded only when css change ?

I see data transfering from webpack (app.css.js, package.json, starter.js, tns-java-classes.js), then I see the CSS changes immediately in the app, and after that the app restart.

I'd like to prevent last step, any solution ?

Note: I added app.scss to the entry in webpack, if I don't do that, the css is not in the app.

Mitko-Kerezov self-assigned this Feb 1, 2018

Mitko-Kerezov force-pushed the kerezov/watch+livesync branch 4 times, most recently from d30bd90 to a6b98b3 Compare February 7, 2018 14:49

sis0k0 reviewed Feb 8, 2018

View reviewed changes

Mitko-Kerezov mentioned this pull request Feb 9, 2018

Get app directory location from CLI #436

Closed

Mitko-Kerezov force-pushed the kerezov/watch+livesync branch from 06fe266 to 79e274f Compare February 15, 2018 12:39

Dimitar Kerezov added 4 commits February 15, 2018 14:51

refactor(livesync): extract app as constant

e56de67

chore(livesync): make code synchronous

b726388

fix: do not rebuild every time

4fc6deb

Mitko-Kerezov force-pushed the kerezov/watch+livesync branch from 79e274f to 4fc6deb Compare February 15, 2018 12:51

sis0k0 reviewed Feb 16, 2018

View reviewed changes

fix: emit absolute paths

3919f61

sis0k0 approved these changes Feb 19, 2018

View reviewed changes

Mitko-Kerezov merged commit 847a56f into master Feb 22, 2018

Mitko-Kerezov deleted the kerezov/watch+livesync branch February 22, 2018 15:19

NickIliev mentioned this pull request Apr 25, 2018

Console logs not working #414

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(livesync): enable webpack with watch #433

feat(livesync): enable webpack with watch #433

Mitko-Kerezov commented Feb 1, 2018

sis0k0 Feb 8, 2018

sis0k0 Feb 8, 2018

sis0k0 Feb 8, 2018

sis0k0 Feb 8, 2018

Mitko-Kerezov commented Feb 9, 2018

SvetoslavTsenov commented Feb 13, 2018

Mitko-Kerezov commented Feb 15, 2018

sis0k0 left a comment

dtopuzov commented Feb 16, 2018

sis0k0 left a comment

SvetoslavTsenov commented Feb 19, 2018

dtopuzov commented Feb 19, 2018

dtopuzov commented Feb 19, 2018

lambourn commented Feb 28, 2018

Mitko-Kerezov commented Feb 28, 2018

lambourn commented Feb 28, 2018

lambourn commented Feb 28, 2018

Mitko-Kerezov commented Feb 28, 2018

lambourn commented Feb 28, 2018

Mitko-Kerezov commented Feb 28, 2018

darkyelox commented Feb 28, 2018 •

edited

Loading

darkyelox commented Feb 28, 2018

lambourn commented Mar 1, 2018

Mitko-Kerezov commented Mar 1, 2018 •

edited

Loading

Tronix117 commented Apr 4, 2018 •

edited

Loading

feat(livesync): enable webpack with watch #433

feat(livesync): enable webpack with watch #433

Conversation

Mitko-Kerezov commented Feb 1, 2018

sis0k0 Feb 8, 2018

Choose a reason for hiding this comment

sis0k0 Feb 8, 2018

Choose a reason for hiding this comment

sis0k0 Feb 8, 2018

Choose a reason for hiding this comment

sis0k0 Feb 8, 2018

Choose a reason for hiding this comment

Mitko-Kerezov commented Feb 9, 2018

SvetoslavTsenov commented Feb 13, 2018

Mitko-Kerezov commented Feb 15, 2018

sis0k0 left a comment

Choose a reason for hiding this comment

dtopuzov commented Feb 16, 2018

sis0k0 left a comment

Choose a reason for hiding this comment

SvetoslavTsenov commented Feb 19, 2018

dtopuzov commented Feb 19, 2018

dtopuzov commented Feb 19, 2018

lambourn commented Feb 28, 2018

Mitko-Kerezov commented Feb 28, 2018

lambourn commented Feb 28, 2018

lambourn commented Feb 28, 2018

Mitko-Kerezov commented Feb 28, 2018

lambourn commented Feb 28, 2018

Mitko-Kerezov commented Feb 28, 2018

darkyelox commented Feb 28, 2018 • edited Loading

darkyelox commented Feb 28, 2018

lambourn commented Mar 1, 2018

Mitko-Kerezov commented Mar 1, 2018 • edited Loading

Tronix117 commented Apr 4, 2018 • edited Loading

darkyelox commented Feb 28, 2018 •

edited

Loading

Mitko-Kerezov commented Mar 1, 2018 •

edited

Loading

Tronix117 commented Apr 4, 2018 •

edited

Loading