Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings
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)

AltStyle によって変換されたページ (->オリジナル) /