From 129d8998206439d2286bf3a74a2346a584582552 Mon Sep 17 00:00:00 2001 From: vakrilov Date: Fri, 2 Aug 2019 17:04:05 +0300 Subject: [PATCH] docs: add comments about how app.css+snapshot work --- .../module-name-resolver/module-name-resolver.ts | 3 ++- tns-core-modules/ui/styling/style-scope.ts | 5 +++++ 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/tns-core-modules/module-name-resolver/module-name-resolver.ts b/tns-core-modules/module-name-resolver/module-name-resolver.ts index 2871a3c47..a627e98bc 100644 --- a/tns-core-modules/module-name-resolver/module-name-resolver.ts +++ b/tns-core-modules/module-name-resolver/module-name-resolver.ts @@ -81,7 +81,8 @@ function resolveModuleSnapshot(path, ext) { traceWrite(`Resolving module in SNAPSHOT context - path: '${path}' with ext: '${ext}'`, traceCategories.ModuleNameResolver); // Platform module when in snapshot. So resolve modules with default android phone. - // NB: The only module name that should ever be resolved while in snapshot is app.css + // NB: The only module name that should ever be resolved while in snapshot is app.css, because it is + // applied explicitly in the snapshot by [NativeScriptSnapshotPlugin](https://github.com/NativeScript/nativescript-dev-webpack/blob/48b26f412fd70c19dc0b9c7763e08e9505a0ae11/plugins/NativeScriptSnapshotPlugin/index.js#L48-L56) return new ModuleNameResolver({ width: 400, height: 800, diff --git a/tns-core-modules/ui/styling/style-scope.ts b/tns-core-modules/ui/styling/style-scope.ts index dd987b65d..334c53e8d 100644 --- a/tns-core-modules/ui/styling/style-scope.ts +++ b/tns-core-modules/ui/styling/style-scope.ts @@ -343,6 +343,11 @@ const loadCss = profile(`"style-scope".loadCss`, (cssModule: string) => { applicationCommon.on("cssChanged", onCssChanged); applicationCommon.on("livesync", onLiveSync); +// Call to this method is injected in the application in: +// - no-snapshot - code injected in app.ts by [bundle-config-loader](https://github.com/NativeScript/nativescript-dev-webpack/blob/9b1e34d8ef838006c9b575285c42d2304f5f02b5/bundle-config-loader.ts#L85-L92) +// - with-snapshot - code injected in snapshot bundle by [NativeScriptSnapshotPlugin](https://github.com/NativeScript/nativescript-dev-webpack/blob/48b26f412fd70c19dc0b9c7763e08e9505a0ae11/plugins/NativeScriptSnapshotPlugin/index.js#L48-L56) +// Having the app.css loaded in snapshot provides significant boost in startup (when using the ns-theme ~150 ms). However, because app.css is resolved at build-time, +// when the snapshot is created - there is no way to use file qualifiers or change the name of on app.css export const loadAppCSS = profile("\"style-scope\".loadAppCSS", (args: applicationCommon.LoadAppCSSEventData) => { loadCss(args.cssFile); applicationCommon.off("loadAppCss", loadAppCSS);