javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-15 19:26:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: return of missing css errors

Browse Source
This commit is contained in:
vakrilov
2019-07-16 11:01:43 +03:00
parent 78058087c8
commit 9113a04d80
17 changed files with 117 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
e2e/file-qualifiers/app/App_Resources/Android/src/main/res/values/strings.xml
View File

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">TestApp</string>
<string name="title_activity_kimera">TestApp</string>
<string name="app_name">FileQualifiers</string>
<string name="title_activity_kimera">FileQualifiers</string>
</resources>

2
e2e/file-qualifiers/app/app.css
View File

@ -1,3 +1,5 @@
@import '~nativescript-theme-core/css/core.light.css';
.root-footer {
color: black;
background-color: lightgreen

3
e2e/file-qualifiers/app/app.land.css
View File

@ -1,3 +1,6 @@
/* Currently app.land.css is never loaded */
@import '~nativescript-theme-core/css/lime.css';
.root-footer {
color: black;
background-color: lightpink;

2
e2e/file-qualifiers/app/main/main-page.land.xml
View File

@ -2,7 +2,7 @@
<StackLayout class="page-content">
<Label text="This is LANDSACPE page" />
<Button text="tap" tap="tap" />
<Button text="tap" tap="tap" class="btn btn-primary"/>
<Button text="navigate" tap="navigate" />

2
e2e/file-qualifiers/app/main/main-page.xml
View File

@ -2,7 +2,7 @@
<StackLayout class="page-content">
<Label text="This is DEFAULT page" />
<Button text="tap" tap="tap" />
<Button text="tap" tap="tap" class="btn btn-primary" />
<Button text="navigate" tap="navigate" />

2
e2e/file-qualifiers/app/other/other-page.land.xml
View File

@ -2,7 +2,7 @@
<StackLayout class="page-content">
<Label text="This is LANDSACPE other page" />
<Button text="tap" tap="tap" />
<Button text="tap" tap="tap" class="btn btn-primary"/>
<Button text="navigate" tap="navigate" />

2
e2e/file-qualifiers/app/other/other-page.xml
View File

@ -2,7 +2,7 @@
<StackLayout class="page-content">
<Label text="This is DEFAULT other page" />
<Button text="tap" tap="tap" />
<Button text="tap" tap="tap" class="btn btn-primary"/>
<Button text="navigate" tap="navigate" />

4
e2e/file-qualifiers/nsconfig.json
View File

@ -1,3 +1 @@
{
"useLegacyWorkflow": false
}
{}

7
e2e/file-qualifiers/package.json
View File

@ -6,18 +6,19 @@
"nativescript": {
"id": "org.nativescript.filequalifiers",
"tns-ios": {
"version": "6.0.0-2019-06-19-084246-01"
"version": "next"
},
"tns-android": {
"version": "6.0.0-2019-06-24-113546-01"
"version": "next"
}
},
"dependencies": {
"nativescript-theme-core": "^1.0.6",
"tns-core-modules": "file:../../tns-core-modules"
},
"devDependencies": {
"nativescript-dev-webpack": "next",
"tns-platform-declarations": "next",
"typescript": "3.4.1"
"typescript": "3.4.5"
}
}

8
e2e/file-qualifiers/webpack.config.js
View File

@ -28,7 +28,6 @@ module.exports = env => {
// Default destination inside platforms/<platform>/...
const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
const appResourcesPlatformDir = platform === "android" ? "Android" : "iOS";
const {
// The 'appPath' and 'appResourcesPath' values are fetched from
@ -73,6 +72,7 @@ module.exports = env => {
itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
}
nsWebpack.processAppComponents(appComponents, platform);
const config = {
mode: production ? "production" : "development",
context: appFullPath,
@ -133,6 +133,7 @@ module.exports = env => {
test: (module, chunks) => {
const moduleName = module.nameForCondition ? module.nameForCondition() : '';
return /[\\/]node_modules[\\/]/.test(moduleName) ||
/[\\/]tns-core-modules[\\/]/.test(moduleName) || // <-- Needed for snapshot builds with linked modules!
appComponents.some(comp => comp === moduleName);
},
@ -179,13 +180,14 @@ module.exports = env => {
unitTesting,
appFullPath,
projectRoot,
ignoredFiles: nsWebpack.getUserDefinedEntries(entries, platform)
}
},
].filter(loader => !!loader)
},
{
test: /\.(ts|css|scss|less|html|xml)$/,
test: /\.(ts|css|scss|html|xml)$/,
use: "nativescript-dev-webpack/hmr/hot-loader"
},
@ -227,7 +229,7 @@ module.exports = env => {
// Define useful constants like TNS_WEBPACK
new webpack.DefinePlugin({
"global.TNS_WEBPACK": "true",
"process": undefined,
"process": "global.process",
}),
// Remove all files from the out dir.
new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),

17
tests/app/ui/label/label-tests.ts
View File

@ -556,16 +556,15 @@ export class LabelTest extends testModule.UITest<LabelModule.Label> {
TKUnit.assertEqual(actualResult, this.expectedTextAlignment);
}
// TODO: fix this, broken with https://github.com/NativeScript/NativeScript/pull/7499
// public testErrorMessageWhenWrongCssIsAddedWithFile() {
// const view = this.testView;
// const page = this.testPage;
// this.waitUntilTestElementIsLoaded();
public testErrorMessageWhenWrongCssIsAddedWithFile() {
const view = this.testView;
const page = this.testPage;
this.waitUntilTestElementIsLoaded();
// view.id = "testLabel";
// page.addCssFile(fs.path.join(testDir, "label-tests-wrong-page.css"));
// TKUnit.assertNotEqual(this.errorMessage, undefined);
// }
view.id = "testLabel";
page.addCssFile(fs.path.join(testDir, "label-tests-wrong-page.css"));
TKUnit.assertNotEqual(this.errorMessage, undefined);
}
public testErrorMessageWhenWrongCssIsAdded() {
const view = this.testView;

26
tns-core-modules/module-name-resolver/module-name-resolver.ts
View File

@ -3,6 +3,11 @@ import { screen, device } from "../platform/platform";
import * as appCommonModule from "../application/application-common";
import { PlatformContext, findMatch } from "./qualifier-matcher";
import { registerModulesFromFileSystem } from "./non-bundle-workflow-compat";
import {
isEnabled as traceEnabled,
write as traceWrite,
categories as traceCategories
} from "../trace";
export class ModuleNameResolver implements ModuleNameResolverDefinition {
private _cache = {};
@ -18,6 +23,10 @@ export class ModuleNameResolver implements ModuleNameResolverDefinition {
this._cache[key] = result;
}
if (traceEnabled()) {
traceWrite(`path: '${path}' with ext: '${ext}' resolved: '${result}'`, traceCategories.ModuleNameResolver);
}
return result;
}
@ -52,6 +61,10 @@ export class ModuleNameResolver implements ModuleNameResolverDefinition {
let resolverInstance: ModuleNameResolver;
export function resolveModuleName(path: string, ext: string): string {
if (global.__snapshot) {
return resolveModuleSnapshot(path, ext);
}
if (!resolverInstance) {
resolverInstance = new ModuleNameResolver({
width: screen.mainScreen.widthDIPs,
@ -64,6 +77,19 @@ export function resolveModuleName(path: string, ext: string): string {
return resolverInstance.resolveModuleName(path, ext);
}
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
return new ModuleNameResolver({
width: 400,
height: 800,
os: "Android",
deviceType: "Phone"
}).resolveModuleName(path, ext);
}
export function clearCache() {
if (resolverInstance) {
resolverInstance.clearCache();

49
tns-core-modules/module-name-resolver/non-bundle-workflow-compat.ts
View File

@ -1,11 +1,27 @@
import * as fs from "../file-system/file-system";
import * as appCommonModule from "../application/application-common";
import {
isEnabled as traceEnabled,
write as traceWrite,
categories as traceCategories
} from "../trace";
const cache = new Set<string>();
let initialized = false;
function register(name, loader) {
function register(name: string, loader: (name?: string) => void) {
if (traceEnabled()) {
traceWrite(`[Compat] Register module: ${name}`, traceCategories.ModuleNameResolver);
}
global.registerModule(name, loader);
if (name.startsWith("tns_modules")) {
const nonTnsModulesName = name.substr("tns_modules".length + 1);
if (traceEnabled()) {
traceWrite(`[Compat] Register module: ${nonTnsModulesName}`, traceCategories.ModuleNameResolver);
}
global.registerModule(nonTnsModulesName, loader);
}
}
function processFile(file: fs.File) {
@ -35,16 +51,21 @@ function processFile(file: fs.File) {
let name = filePathRelativeToApp.substr(0, filePathRelativeToApp.length - "package.json".length - 1);
let requirePath = fs.path.join(file.parent.path, json.main);
if (name.startsWith("tns_modules")) {
name = name.substr("tns_modules".length + 1);
}
register(name, () => global.require(requirePath));
}
}
}
function processFolder(path: string) {
if (cache.has(path)) {
return;
}
cache.add(path);
if (traceEnabled()) {
traceWrite(`[Compat] Processing folder: ${path}`, traceCategories.ModuleNameResolver);
}
if (fs.Folder.exists(path)) {
const folder = fs.Folder.fromPath(path);
@ -66,25 +87,23 @@ function processFolder(path: string) {
export function registerModulesFromFileSystem(moduleName: string) {
initialize();
if (cache.has(moduleName)) {
return;
}
cache.add(moduleName);
let folderFound = false;
// moduleName is a folder with package.json
const path = fs.path.join(fs.knownFolders.currentApp().path, moduleName);
if (fs.Folder.exists(path)) {
processFolder(path);
return;
folderFound = true;
}
// moduleName is file - load all files in it's folder
// moduleName is file - load all files in its parent folder
const parentName = moduleName.substr(0, moduleName.lastIndexOf(fs.path.separator));
const parentFolderPath = fs.path.join(fs.knownFolders.currentApp().path, parentName);
if (fs.Folder.exists(parentFolderPath)) {
processFolder(parentFolderPath);
folderFound = true;
}
if (folderFound) {
return;
}
@ -92,8 +111,6 @@ export function registerModulesFromFileSystem(moduleName: string) {
const tnsModulesPath = fs.path.join(fs.knownFolders.currentApp().path, "tns_modules", moduleName);
if (fs.Folder.exists(tnsModulesPath)) {
processFolder(tnsModulesPath);
return;
}
// moduleName a file in tns_modules/plugin. Avoid traversing the whole tns_modules folder if parentName is empty
@ -101,8 +118,6 @@ export function registerModulesFromFileSystem(moduleName: string) {
const tnsParentFolderPath = fs.path.join(fs.knownFolders.currentApp().path, "tns_modules", parentName);
if (fs.Folder.exists(tnsParentFolderPath)) {
processFolder(tnsParentFolderPath);
return;
}
}
}

1
tns-core-modules/trace/trace.d.ts vendored
View File

@ -101,6 +101,7 @@ export module categories {
export const Animation: string;
export const Transition: string;
export const Livesync: string;
export const ModuleNameResolver: string;
export const separator: string;
export const All: string;

21
tns-core-modules/trace/trace.ts
View File

@ -131,21 +131,16 @@ export module categories {
export const Animation = "Animation";
export const Transition = "Transition";
export const Livesync = "Livesync";
export const ModuleNameResolver = "ModuleNameResolver";
export const separator = ",";
export const All = VisualTreeEvents + separator
+ Layout + separator
+ Style + separator
+ ViewHierarchy + separator
+ NativeLifecycle + separator
+ Debug + separator
+ Navigation + separator
+ Test + separator
+ Binding + separator
+ Error + separator
+ Animation + separator
+ Transition + separator
+ Livesync;
export const All = [
VisualTreeEvents, Layout, Style,
ViewHierarchy, NativeLifecycle,
Debug, Navigation, Test, Binding,
Error, Animation, Transition, Livesync,
ModuleNameResolver]
.join(separator);
export function concat(): string {
let result: string;

2
tns-core-modules/ui/builder/module-name-sanitizer.ts
View File

@ -3,6 +3,8 @@ export function sanitizeModuleName(moduleName: string, removeExtension: boolean
if (moduleName.startsWith("~/")) {
moduleName = moduleName.substring(2);
} else if (moduleName.startsWith("~")) {
moduleName = moduleName.substring(1);
} else if (moduleName.startsWith("/")) {
moduleName = moduleName.substring(1);
}

28
tns-core-modules/ui/styling/style-scope.ts
View File

@ -40,6 +40,8 @@ function ensureKeyframeAnimationModule() {
}
import * as capm from "./css-animation-parser";
import { sanitizeModuleName } from "../builder/module-name-sanitizer";
import { resolveModuleName } from "../../module-name-resolver";
let cssAnimationParserModule: typeof capm;
function ensureCssAnimationParserModule() {
if (!cssAnimationParserModule) {
@ -80,25 +82,26 @@ class CSSSource {
public static fromURI(uri: string, keyframes: KeyframesMap): CSSSource {
// webpack modules require all file paths to be relative to /app folder
let appRelativeUri = CSSSource.pathRelativeToApp(uri);
const appRelativeUri = CSSSource.pathRelativeToApp(uri);
const sanitizedModuleName = sanitizeModuleName(appRelativeUri);
const resolvedModuleName = resolveModuleName(sanitizedModuleName, "css");
try {
const cssOrAst = global.loadModule(appRelativeUri, true);
const cssOrAst = global.loadModule(resolvedModuleName, true);
if (cssOrAst) {
if (typeof cssOrAst === "string") {
// raw-loader
return CSSSource.fromSource(cssOrAst, keyframes, appRelativeUri);
return CSSSource.fromSource(cssOrAst, keyframes, resolvedModuleName);
} else if (typeof cssOrAst === "object" && cssOrAst.type === "stylesheet" && cssOrAst.stylesheet && cssOrAst.stylesheet.rules) {
// css-loader
return CSSSource.fromAST(cssOrAst, keyframes, appRelativeUri);
return CSSSource.fromAST(cssOrAst, keyframes, resolvedModuleName);
} else {
// css2json-loader
return CSSSource.fromSource(cssOrAst.toString(), keyframes, appRelativeUri);
return CSSSource.fromSource(cssOrAst.toString(), keyframes, resolvedModuleName);
}
}
} catch (e) {
// TODO: Commented as this prints error in playground: https://github.com/NativeScript/NativeScript/issues/7497
// traceWrite(`Could not load CSS from ${uri}: ${e}`, traceCategories.Error, traceMessageType.error);
traceWrite(`Could not load CSS from ${uri}: ${e}`, traceCategories.Error, traceMessageType.error);
}
return CSSSource.fromFile(appRelativeUri, keyframes);
@ -320,12 +323,17 @@ function onLiveSync(args: applicationCommon.CssChangedEventData): void {
loadCss(applicationCommon.getCssFileName());
}
const loadCss = profile(`"style-scope".loadCss`, (cssFile: string) => {
if (!cssFile) {
const loadCss = profile(`"style-scope".loadCss`, (cssModule: string) => {
if (!cssModule) {
return undefined;
}
const result = CSSSource.fromURI(cssFile, applicationKeyframes).selectors;
// safely remove "./" as global CSS should be resolved relative to app folder
if (cssModule.startsWith("./")) {
cssModule = cssModule.substr(2);
}
const result = CSSSource.fromURI(cssModule, applicationKeyframes).selectors;
if (result.length > 0) {
applicationSelectors = result;
mergeCssSelectors();