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

File tree

18 files changed

+126
-81
lines changed

18 files changed

+126
-81
lines changed

‎.gitignore‎

Lines changed: 7 additions & 7 deletions
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*

‎.vscode/launch.json‎

Lines changed: 10 additions & 0 deletions
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
}

‎.vscode/tasks.json‎

Lines changed: 13 additions & 0 deletions
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+
}

‎bundle-config-loader.js‎ renamed to ‎bundle-config-loader.ts‎

Lines changed: 18 additions & 4 deletions
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;

‎demo/AngularApp/webpack.config.js‎

Lines changed: 0 additions & 1 deletion
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

‎demo/JavaScriptApp/webpack.config.js‎

Lines changed: 5 additions & 15 deletions
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

‎demo/TypeScriptApp/webpack.config.js‎

Lines changed: 4 additions & 14 deletions
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

‎hmr/hmr-update.js‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎hmr/hmr-update.ts‎

Lines changed: 10 additions & 0 deletions
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+
}

‎hmr/hot-loader.ts‎

Lines changed: 44 additions & 0 deletions
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+

0 commit comments

Comments
 (0)