Skip to content
This repository was archived by the owner on Aug 7, 2021. It is now read-only.

Commit d4a8dec

Browse files
author
Alexander Vakrilov
authored
refactor: HMR and webpack improvements (#966)
* feat: support for file qualifiers * refactor: convert bundle-config-loader to TS * chore: vs code tasks * chore: convert hmr folder to TS * feat: universal hmr loader * feat: no need of "page" suffix for HMR to work * chore: add tns-core-modules as dev dep * fix: filter d.ts files * refactor: don't include native app/activity in bundle * refactor: review changes
1 parent d3b5cab commit d4a8dec

18 files changed

+126
-81
lines changed

Diff for: ‎.gitignore

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,34 +2,34 @@
22
node_modules
33
*.tgz
44
package-lock.json
5+
*.js.map
56

67
plugins/NativeScriptAngularCompilerPlugin.d.ts
78
plugins/NativeScriptAngularCompilerPlugin.js
8-
plugins/NativeScriptAngularCompilerPlugin.js.map
99

1010
transformers/*.d.ts
1111
transformers/*.js
12-
transformers/*.js.map
1312

1413
utils/*.d.ts
1514
utils/*.js
16-
utils/*.js.map
15+
16+
hmr/*.d.ts
17+
hmr/*.js
1718

1819
plugins/PlatformFSPlugin.d.ts
1920
plugins/PlatformFSPlugin.js
20-
plugins/PlatformFSPlugin.js.map
2121

2222
plugins/WatchStateLoggerPlugin.d.ts
2323
plugins/WatchStateLoggerPlugin.js
24-
plugins/WatchStateLoggerPlugin.js.map
2524

2625
host/resolver.d.ts
2726
host/resolver.js
28-
host/resolver.js.map
2927

3028
jasmine-config/reporter.d.ts
3129
jasmine-config/reporter.js
32-
jasmine-config/reporter.js.map
30+
31+
bundle-config-loader.d.ts
32+
bundle-config-loader.js
3333

3434
**/*.spec.js*
3535
**/*.spec.d.ts*

Diff for: ‎.vscode/launch.json

+10
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,16 @@
1919
"args": [ "--env.android", "--env.aot" ],
2020
"runtimeArgs": [ "--preserve-symlinks" ],
2121
"stopOnEntry": true,
22+
},
23+
{
24+
"type": "node",
25+
"request": "launch",
26+
"name": "TypeScriptApp Webpack",
27+
"cwd": "${workspaceFolder}/demo/TypeScriptApp",
28+
"program": "${workspaceFolder}/demo/TypeScriptApp/node_modules/.bin/webpack",
29+
"args": [ "--env.android" ],
30+
"stopOnEntry": true,
31+
"preLaunchTask": "npm:tsc"
2232
}
2333
]
2434
}

Diff for: ‎.vscode/tasks.json

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
{
2+
// See https://go.microsoft.com/fwlink/?LinkId=733558
3+
// for the documentation about the tasks.json format
4+
"version": "2.0.0",
5+
"tasks": [
6+
{
7+
"label":"npm:tsc",
8+
"type": "npm",
9+
"script": "tsc",
10+
"problemMatcher": []
11+
}
12+
]
13+
}

Diff for: ‎bundle-config-loader.js renamed to ‎bundle-config-loader.ts

+18-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,19 @@
1-
const unitTestingConfigLoader = require("./unit-testing-config-loader");
1+
import unitTestingConfigLoader from "./unit-testing-config-loader";
2+
import { loader } from "webpack";
3+
import { getOptions } from "loader-utils";
24

3-
module.exports = function (source, map) {
4-
this.cacheable();
5-
const { angular = false, loadCss = true, unitTesting, projectRoot, appFullPath, registerModules = /(root|page)\.(xml|css|js|ts|scss)$/ } = this.query;
5+
// Matches all source, markup and style files that are not in App_Resources
6+
const defaultMatch = /(?<!App_Resources.*)\.(xml|css|js|(?<!d\.)ts|scss)$/;
7+
8+
const loader: loader.Loader = function (source, map) {
9+
const {
10+
angular = false,
11+
loadCss = true,
12+
unitTesting,
13+
projectRoot,
14+
appFullPath,
15+
registerModules = defaultMatch,
16+
} = getOptions(this);
617

718
if (unitTesting) {
819
source = unitTestingConfigLoader({ appFullPath, projectRoot, angular, rootPagesRegExp: registerModules });
@@ -68,3 +79,6 @@ module.exports = function (source, map) {
6879

6980
this.callback(null, source, map);
7081
};
82+
83+
84+
export default loader;

Diff for: ‎demo/AngularApp/webpack.config.js

-1
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ module.exports = env => {
3333

3434
// Default destination inside platforms/<platform>/...
3535
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
36-
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
3736

3837
const {
3938
// The 'appPath' and 'appResourcesPath' values are fetched from

Diff for: ‎demo/JavaScriptApp/webpack.config.js

+5-15
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ module.exports = env => {
2828

2929
// Default destination inside platforms/<platform>/...
3030
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
31-
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
3231

3332
const {
3433
// The 'appPath' and 'appResourcesPath' values are fetched from
@@ -103,7 +102,7 @@ module.exports = env => {
103102
'~': appFullPath
104103
},
105104
// don't resolve symlinks to symlinked modules
106-
symlinks: false
105+
symlinks: true
107106
},
108107
resolveLoader: {
109108
// don't resolve symlinks to symlinked loaders
@@ -174,24 +173,15 @@ module.exports = env => {
174173
unitTesting,
175174
appFullPath,
176175
projectRoot,
176+
registerModules: /(?<!App_Resources.*)(?<!\.\/application)(?<!\.\/activity)\.(xml|css|js|(?<!d\.)ts|scss)$/
177177
}
178178
},
179179
].filter(loader => !!loader)
180180
},
181181

182182
{
183-
test: /-page\.js$/,
184-
use: "nativescript-dev-webpack/script-hot-loader"
185-
},
186-
187-
{
188-
test: /\.(css|scss)$/,
189-
use: "nativescript-dev-webpack/style-hot-loader"
190-
},
191-
192-
{
193-
test: /\.(html|xml)$/,
194-
use: "nativescript-dev-webpack/markup-hot-loader"
183+
test: /\.(js|css|scss|html|xml)$/,
184+
use: "nativescript-dev-webpack/hmr/hot-loader"
195185
},
196186

197187
{ test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
@@ -234,7 +224,7 @@ module.exports = env => {
234224
platforms,
235225
}),
236226
// Does IPC communication with the {N} CLI to notify events when running in watch mode.
237-
new nsWebpack.WatchStateLoggerPlugin(),
227+
new nsWebpack.WatchStateLoggerPlugin()
238228
],
239229
};
240230

Diff for: ‎demo/TypeScriptApp/webpack.config.js

+4-14
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,6 @@ module.exports = env => {
2929

3030
// Default destination inside platforms/<platform>/...
3131
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
32-
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
3332

3433
const {
3534
// The 'appPath' and 'appResourcesPath' values are fetched from
@@ -180,24 +179,15 @@ module.exports = env => {
180179
unitTesting,
181180
appFullPath,
182181
projectRoot,
182+
registerModules: /(?<!App_Resources.*)(?<!\.\/application)(?<!\.\/activity)\.(xml|css|js|(?<!d\.)ts|scss)$/
183183
}
184184
},
185185
].filter(loader => !!loader)
186186
},
187187

188188
{
189-
test: /-page\.ts$/,
190-
use: "nativescript-dev-webpack/script-hot-loader"
191-
},
192-
193-
{
194-
test: /\.(css|scss)$/,
195-
use: "nativescript-dev-webpack/style-hot-loader"
196-
},
197-
198-
{
199-
test: /\.(html|xml)$/,
200-
use: "nativescript-dev-webpack/markup-hot-loader"
189+
test: /\.(ts|css|scss|html|xml)$/,
190+
use: "nativescript-dev-webpack/hmr/hot-loader"
201191
},
202192

203193
{ test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
@@ -265,7 +255,7 @@ module.exports = env => {
265255
async: false,
266256
useTypescriptIncrementalApi: true,
267257
memoryLimit: 4096
268-
}),
258+
})
269259
],
270260
};
271261

Diff for: ‎hmr/hmr-update.js

-7
This file was deleted.

Diff for: ‎hmr/hmr-update.ts

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import update from "../hot";
2+
import { knownFolders } from "tns-core-modules/file-system";
3+
4+
declare const __webpack_require__: any;
5+
6+
export function hmrUpdate() {
7+
const applicationFiles = knownFolders.currentApp();
8+
const latestHash = __webpack_require__["h"]();
9+
return update(latestHash, filename => applicationFiles.getFile(filename));
10+
}

Diff for: ‎hmr/hot-loader.ts

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { loader } from "webpack";
2+
import { convertToUnixPath } from "../lib/utils";
3+
import { extname } from "path";
4+
import { getOptions } from "loader-utils";
5+
6+
const extMap = {
7+
".css": "style",
8+
".scss": "style",
9+
".less": "style",
10+
".js": "script",
11+
".ts": "script",
12+
".xml": "markup",
13+
".html": "markup",
14+
}
15+
16+
const loader: loader.Loader = function (source, map) {
17+
const moduleRelativePath = this.resourcePath.replace(this.rootContext, ".");
18+
const modulePath = convertToUnixPath(moduleRelativePath);
19+
const ext = extname(modulePath).toLowerCase();
20+
const moduleType = extMap[ext] || "unknown";
21+
22+
const options = getOptions(this) || {};
23+
const alwaysSelfAccept = options.alwaysSelfAccept;
24+
const trace = options.trace;
25+
26+
const shouldAutoAcceptCheck = `&& global._isModuleLoadedForUI && global._isModuleLoadedForUI("${modulePath}")`;
27+
const traceCode = `console.log("[hot-loader]: Self-accept module: ${modulePath}");`;
28+
29+
const hotCode = `
30+
if (module.hot ${alwaysSelfAccept ? "" : shouldAutoAcceptCheck} ) {
31+
${trace ? traceCode : ""}
32+
module.hot.accept();
33+
module.hot.dispose(() => {
34+
global.hmrRefresh({ type: "${moduleType}", path: "${modulePath}" });
35+
});
36+
}`;
37+
38+
this.callback(null, `${source}; ${hotCode} `, map);
39+
};
40+
41+
export default loader;
42+
43+
44+

Diff for: ‎hmr/index.js

-1
This file was deleted.

Diff for: ‎hmr/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { hmrUpdate } from "./hmr-update";

Diff for: ‎jasmine-config/jasmine.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
{
22
"spec_dir": ".",
33
"spec_files": [
4-
"./!(node_modules)/**/*.spec.js",
4+
"!node_modules/**/*.spec.js",
5+
"!demo/**/*.spec.js",
56
"./*.spec.js"
67
],
78
"helpers": [

Diff for: ‎package.json

+7-2
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,11 @@
2828
"url": "https://github.com/NativeScript/nativescript-dev-webpack.git"
2929
},
3030
"scripts": {
31+
"tsc": "tsc",
3132
"postinstall": "node postinstall.js",
3233
"preuninstall": "node preuninstall.js",
3334
"postpack": "rm -rf node_modules",
34-
"prepare": "tsc && npm run jasmine",
35+
"prepare": "npm run tsc && npm run jasmine",
3536
"test": "npm run prepare && npm run jasmine",
3637
"jasmine": "jasmine --config=jasmine-config/jasmine.json",
3738
"version": "rm package-lock.json && conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md"
@@ -49,8 +50,8 @@
4950
"clean-webpack-plugin": "~1.0.0",
5051
"copy-webpack-plugin": "~4.6.0",
5152
"css-loader": "~2.1.1",
52-
"fork-ts-checker-webpack-plugin": "1.3.0",
5353
"extra-watch-webpack-plugin": "1.0.3",
54+
"fork-ts-checker-webpack-plugin": "1.3.0",
5455
"global-modules-path": "2.0.0",
5556
"minimatch": "3.0.4",
5657
"nativescript-hook": "0.2.4",
@@ -77,13 +78,17 @@
7778
"@angular/compiler-cli": "8.0.0",
7879
"@ngtools/webpack": "8.0.0",
7980
"@types/jasmine": "^3.3.7",
81+
"@types/loader-utils": "^1.1.3",
8082
"@types/node": "^10.12.12",
8183
"@types/proxyquire": "1.3.28",
8284
"@types/semver": "^6.0.0",
85+
"@types/webpack": "^4.4.34",
8386
"conventional-changelog-cli": "^1.3.22",
8487
"jasmine": "^3.2.0",
8588
"jasmine-spec-reporter": "^4.2.1",
89+
"loader-utils": "^1.2.3",
8690
"proxyquire": "2.1.0",
91+
"tns-core-modules": "next",
8792
"typescript": "~3.4.0"
8893
}
8994
}

Diff for: ‎templates/webpack.angular.js

-1
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ module.exports = env => {
3232

3333
// Default destination inside platforms/<platform>/...
3434
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
35-
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
3635

3736
const {
3837
// The 'appPath' and 'appResourcesPath' values are fetched from

Diff for: ‎templates/webpack.javascript.js

+2-13
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ module.exports = env => {
2727

2828
// Default destination inside platforms/<platform>/...
2929
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
30-
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
3130

3231
const {
3332
// The 'appPath' and 'appResourcesPath' values are fetched from
@@ -179,18 +178,8 @@ module.exports = env => {
179178
},
180179

181180
{
182-
test: /-page\.js$/,
183-
use: "nativescript-dev-webpack/script-hot-loader"
184-
},
185-
186-
{
187-
test: /\.(css|scss)$/,
188-
use: "nativescript-dev-webpack/style-hot-loader"
189-
},
190-
191-
{
192-
test: /\.(html|xml)$/,
193-
use: "nativescript-dev-webpack/markup-hot-loader"
181+
test: /\.(js|css|scss|html|xml)$/,
182+
use: "nativescript-dev-webpack/hmr/hot-loader"
194183
},
195184

196185
{ test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },

0 commit comments

Comments
 (0)