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

refactor: circular deps part 14

Browse Source
This commit is contained in:
Nathan Walker
2025-07-10 15:47:29 -07:00
parent cebc78406b
commit e7ab426ee2
87 changed files with 2667 additions and 3403 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/ui/styling/background-common.ts
View File

@@ -1,6 +1,5 @@
import { CoreTypes } from '../../core-types';
import { LinearGradient } from './linear-gradient';
// Types.
import { Color } from '../../color';
import { BoxShadow } from './box-shadow';
import { ClipPathFunction } from './clip-path-function';

62
packages/core/ui/styling/background.android.ts
View File

@@ -2,9 +2,8 @@ import { View } from '../core/view';
import { LinearGradient } from './linear-gradient';
import { ClipPathFunction } from './clip-path-function';
import { isDataURI, isFileOrResourcePath, RESOURCE_PREFIX, FILE_PREFIX } from '../../utils';
import { parse } from '../../css-value';
import { CSSValue, parse } from '../../css-value';
import { path, knownFolders } from '../../file-system';
import { Application } from '../../application';
export * from './background-common';
function fromBase64(source: string): android.graphics.Bitmap {
@@ -115,7 +114,7 @@ function createNativeCSSValueArray(css: string): androidNative.Array<org.natives
return null;
}
const cssValues = parse(css);
const cssValues = parse(css) as CSSValue[];
const nativeArray = Array.create(org.nativescript.widgets.CSSValue, cssValues.length);
for (let i = 0, length = cssValues.length; i < length; i++) {
nativeArray[i] = new org.nativescript.widgets.CSSValue(cssValues[i].type, cssValues[i].string, cssValues[i].unit, cssValues[i].value);
@@ -123,60 +122,3 @@ function createNativeCSSValueArray(css: string): androidNative.Array<org.natives
return nativeArray;
}
export enum CacheMode {
none,
memory,
diskAndMemory,
}
let currentCacheMode: CacheMode;
let imageFetcher: org.nativescript.widgets.image.Fetcher;
export function initImageCache(context: android.content.Context, mode = CacheMode.diskAndMemory, memoryCacheSize = 0.25, diskCacheSize: number = 10 * 1024 * 1024): void {
if (currentCacheMode === mode) {
return;
}
currentCacheMode = mode;
if (!imageFetcher) {
imageFetcher = org.nativescript.widgets.image.Fetcher.getInstance(context);
} else {
imageFetcher.clearCache();
}
const params = new org.nativescript.widgets.image.Cache.CacheParams();
params.memoryCacheEnabled = mode !== CacheMode.none;
params.setMemCacheSizePercent(memoryCacheSize); // Set memory cache to % of app memory
params.diskCacheEnabled = mode === CacheMode.diskAndMemory;
params.diskCacheSize = diskCacheSize;
const imageCache = org.nativescript.widgets.image.Cache.getInstance(params);
imageFetcher.addImageCache(imageCache);
imageFetcher.initCache();
}
function onLiveSync(args): void {
if (imageFetcher) {
imageFetcher.clearCache();
}
}
global.NativeScriptGlobals.events.on('livesync', onLiveSync);
global.NativeScriptGlobals.addEventWiring(() => {
Application.android.on('activityStarted', (args) => {
if (!imageFetcher) {
initImageCache(args.activity);
} else {
imageFetcher.initCache();
}
});
});
global.NativeScriptGlobals.addEventWiring(() => {
Application.android.on('activityStopped', (args) => {
if (imageFetcher) {
imageFetcher.closeCache();
}
});
});

7
packages/core/ui/styling/background.ios.ts
View File

@@ -8,7 +8,7 @@ import { isDataURI, isFileOrResourcePath, layout } from '../../utils';
import { ios as iosViewUtils, NativeScriptUIView } from '../utils';
import { ImageSource } from '../../image-source';
import type { CSSValue } from '../../css-value/reworkcss-value';
import { parse as cssParse } from '../../css-value/reworkcss-value.js';
import { parse as cssParse } from '../../css-value/reworkcss-value';
import { BoxShadow } from './box-shadow';
import { BackgroundClearFlags } from './background-common';
import { ClipPathFunction } from './clip-path-function';
@@ -464,6 +464,7 @@ function clearNonUniformBorders(nativeView: NativeScriptUIView): void {
function parsePosition(pos: string): { x: CSSValue; y: CSSValue } {
const values = cssParse(pos);
if (values.length === 2) {
// @ts-ignore
return { x: values[0], y: values[1] };
}
@@ -528,8 +529,8 @@ function getDrawParams(this: void, image: UIImage, background: BackgroundDefinit
if (size) {
const values = cssParse(size);
if (values.length === 2) {
const vx = values[0];
const vy = values[1];
const vx = values[0] as CSSValue;
const vy = values[1] as CSSValue;
if (vx.unit === '%' && vy.unit === '%') {
imageWidth = (width * vx.value) / 100;
imageHeight = (height * vy.value) / 100;

93
packages/core/ui/styling/style-scope.ts
View File

@@ -5,34 +5,24 @@ import { unsetValue } from '../core/properties/property-shared';
import * as ReworkCSS from '../../css';
import { RuleSet, StyleSheetSelectorScope, SelectorCore, SelectorsMatch, ChangeMap, fromAstNode, Node, MEDIA_QUERY_SEPARATOR, matchMediaQueryString } from './css-selector';
import { Trace, CoreTypes } from './styling-shared';
import { Trace } from './styling-shared';
import { File, knownFolders, path } from '../../file-system';
import { Application, CssChangedEventData, LoadAppCSSEventData } from '../../application';
import { profile } from './styling-profile';
import * as kam from '../animation/keyframe-animation';
let keyframeAnimationModule: typeof kam;
function ensureKeyframeAnimationModule() {
if (!keyframeAnimationModule) {
keyframeAnimationModule = require('../animation/keyframe-animation');
}
}
import { Keyframes, KeyframeAnimationInfo, KeyframeAnimation } from '../animation/keyframe-animation';
import * as capm from './css-animation-parser';
import { CssAnimationParser } from './css-animation-parser';
import { sanitizeModuleName } from '../../utils/common';
import { resolveModuleName } from '../../module-name-resolver';
import { cleanupImportantFlags } from './css-utils';
let cssAnimationParserModule: typeof capm;
function ensureCssAnimationParserModule() {
if (!cssAnimationParserModule) {
cssAnimationParserModule = require('./css-animation-parser');
}
}
let parser: 'rework' | 'nativescript' | 'css-tree' = 'css-tree';
try {
const appConfig = require('~/package.json');
console.log('style-scope here??');
// @ts-ignore
const appConfig = await import('~/package.json');
console.log('style-scope appConfig:', appConfig);
if (appConfig) {
if (appConfig.cssParser === 'rework') {
parser = 'rework';
@@ -44,15 +34,15 @@ try {
//
}
type KeyframesMap = Map<string, kam.Keyframes[]>;
type KeyframesMap = Map<string, Keyframes[]>;
let mergedApplicationCssSelectors: RuleSet[] = [];
let applicationCssSelectors: RuleSet[] = [];
const applicationAdditionalSelectors: RuleSet[] = [];
let mergedApplicationCssKeyframes: kam.Keyframes[] = [];
let applicationCssKeyframes: kam.Keyframes[] = [];
const applicationAdditionalKeyframes: kam.Keyframes[] = [];
let mergedApplicationCssKeyframes: Keyframes[] = [];
let applicationCssKeyframes: Keyframes[] = [];
const applicationAdditionalKeyframes: Keyframes[] = [];
let applicationCssSelectorVersion = 0;
@@ -97,7 +87,7 @@ export function mergeCssKeyframes(): void {
class CSSSource {
private _selectors: RuleSet[] = [];
private _keyframes: kam.Keyframes[] = [];
private _keyframes: Keyframes[] = [];
private constructor(
private _ast: ReworkCSS.SyntaxTree,
@@ -205,7 +195,7 @@ class CSSSource {
return this._selectors;
}
get keyframes(): kam.Keyframes[] {
get keyframes(): Keyframes[] {
return this._keyframes;
}
@@ -245,20 +235,20 @@ class CSSSource {
}
@profile
private parseCSSAst() {
private async parseCSSAst() {
if (this._source) {
if (__CSS_PARSER__ === 'css-tree') {
const cssTreeParse = require('../../css/css-tree-parser').cssTreeParse;
const { cssTreeParse } = await import('../../css/css-tree-parser');
this._ast = cssTreeParse(this._source, this._file);
} else if (__CSS_PARSER__ === 'nativescript') {
const CSS3Parser = require('../../css/CSS3Parser').CSS3Parser;
const CSSNativeScript = require('../../css/CSSNativeScript').CSSNativeScript;
const { CSS3Parser } = await import('../../css/CSS3Parser');
const { CSSNativeScript } = await import('../../css/CSSNativeScript');
const cssparser = new CSS3Parser(this._source);
const stylesheet = cssparser.parseAStylesheet();
const cssNS = new CSSNativeScript();
this._ast = cssNS.parseStylesheet(stylesheet);
} else if (__CSS_PARSER__ === 'rework') {
const parseCss = require('../../css').parse;
const { parse: parseCss } = await import('../../css');
this._ast = parseCss(this._source, { source: this._file });
}
}
@@ -270,17 +260,15 @@ class CSSSource {
const nodes = this._ast.stylesheet.rules;
const rulesets: RuleSet[] = [];
const keyframes: kam.Keyframes[] = [];
const keyframes: Keyframes[] = [];
// When css2json-loader is enabled, imports are handled there and removed from AST rules
populateRulesFromImports(nodes, rulesets, keyframes);
_populateRules(nodes, rulesets, keyframes);
if (rulesets && rulesets.length) {
ensureCssAnimationParserModule();
rulesets.forEach((rule) => {
rule[animationsSymbol] = cssAnimationParserModule.CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations);
rule[animationsSymbol] = CssAnimationParser.keyframeAnimationsFromCSSDeclarations(rule.declarations);
});
}
@@ -294,7 +282,7 @@ class CSSSource {
}
}
function populateRulesFromImports(nodes: ReworkCSS.Node[], rulesets: RuleSet[], keyframes: kam.Keyframes[]): void {
function populateRulesFromImports(nodes: ReworkCSS.Node[], rulesets: RuleSet[], keyframes: Keyframes[]): void {
const imports = nodes.filter((r) => r.type === 'import');
if (!imports.length) {
return;
@@ -329,10 +317,10 @@ function populateRulesFromImports(nodes: ReworkCSS.Node[], rulesets: RuleSet[],
}
}
export function _populateRules(nodes: ReworkCSS.Node[], rulesets: RuleSet[], keyframes: kam.Keyframes[], mediaQueryString?: string): void {
export function _populateRules(nodes: ReworkCSS.Node[], rulesets: RuleSet[], keyframes: Keyframes[], mediaQueryString?: string): void {
for (const node of nodes) {
if (isKeyframe(node)) {
const keyframeRule: kam.Keyframes = {
const keyframeRule: Keyframes = {
name: node.name,
keyframes: node.keyframes,
mediaQueryString: mediaQueryString,
@@ -531,7 +519,7 @@ if (Application.hasLaunched()) {
export class CssState {
static emptyChangeMap: Readonly<ChangeMap<ViewBase>> = Object.freeze(new Map());
static emptyPropertyBag: Record<string, unknown> = {};
static emptyAnimationArray: ReadonlyArray<kam.KeyframeAnimation> = Object.freeze([]);
static emptyAnimationArray: ReadonlyArray<KeyframeAnimation> = Object.freeze([]);
static emptyMatch: Readonly<SelectorsMatch<ViewBase>> = {
selectors: [],
changeMap: new Map(),
@@ -543,7 +531,7 @@ export class CssState {
_onDynamicStateChangeHandler: () => void;
_appliedChangeMap: Readonly<ChangeMap<ViewBase>>;
private _appliedPropertyValues: Record<string, unknown> = CssState.emptyPropertyBag;
_appliedAnimations: ReadonlyArray<kam.KeyframeAnimation>;
_appliedAnimations: ReadonlyArray<KeyframeAnimation>;
_appliedSelectorsVersion: number;
_match: SelectorsMatch<ViewBase>;
@@ -633,14 +621,13 @@ export class CssState {
}
private playKeyframeAnimations(matchingSelectors: SelectorCore[]): void {
const animations: kam.KeyframeAnimation[] = [];
const animations: KeyframeAnimation[] = [];
matchingSelectors.forEach((selector) => {
const ruleAnimations: kam.KeyframeAnimationInfo[] = selector.ruleset?.[animationsSymbol];
const ruleAnimations: KeyframeAnimationInfo[] = selector.ruleset?.[animationsSymbol];
if (ruleAnimations) {
ensureKeyframeAnimationModule();
for (const animationInfo of ruleAnimations) {
const animation = keyframeAnimationModule.KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
const animation = KeyframeAnimation.keyframeAnimationFromInfo(animationInfo);
if (animation) {
animations.push(animation);
}
@@ -841,10 +828,10 @@ export class StyleScope {
private _css = '';
private _mergedCssSelectors: RuleSet[];
private _mergedCssKeyframes: kam.Keyframes[];
private _mergedCssKeyframes: Keyframes[];
private _localCssSelectors: RuleSet[] = [];
private _localCssKeyframes: kam.Keyframes[] = [];
private _localCssKeyframes: Keyframes[] = [];
private _localCssSelectorVersion = 0;
private _localCssSelectorsAppliedVersion = 0;
@@ -915,17 +902,15 @@ export class StyleScope {
this.ensureSelectors();
}
public getKeyframeAnimationWithName(animationName: string): kam.KeyframeAnimationInfo {
public getKeyframeAnimationWithName(animationName: string): KeyframeAnimationInfo {
if (!this._mergedCssKeyframes) {
return null;
}
const keyframeRule = this.findKeyframeRule(animationName);
ensureKeyframeAnimationModule();
const animation = new keyframeAnimationModule.KeyframeAnimationInfo();
ensureCssAnimationParserModule();
animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
const animation = new KeyframeAnimationInfo();
animation.keyframes = keyframeRule ? CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
return animation;
}
@@ -953,7 +938,7 @@ export class StyleScope {
@profile
private _createSelectors() {
const toMerge: RuleSet[] = [];
const toMergeKeyframes: kam.Keyframes[] = [];
const toMergeKeyframes: Keyframes[] = [];
toMerge.push(...mergedApplicationCssSelectors.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
toMergeKeyframes.push(...mergedApplicationCssKeyframes.filter((v) => !v.scopedTag || this._cssFiles.indexOf(v.scopedTag) >= 0));
@@ -1015,24 +1000,22 @@ export class StyleScope {
for (let i = selectors.length - 1; i >= 0; i--) {
const ruleset = selectors[i].ruleset;
const animations: kam.KeyframeAnimationInfo[] = ruleset[animationsSymbol];
const animations: KeyframeAnimationInfo[] = ruleset[animationsSymbol];
if (animations != null && animations.length) {
ensureCssAnimationParserModule();
for (const animation of animations) {
const keyframeRule = this.findKeyframeRule(animation.name);
animation.keyframes = keyframeRule ? cssAnimationParserModule.CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
animation.keyframes = keyframeRule ? CssAnimationParser.keyframesArrayFromCSS(keyframeRule.keyframes) : null;
}
}
}
}
public getAnimations(ruleset: RuleSet): kam.KeyframeAnimationInfo[] {
public getAnimations(ruleset: RuleSet): KeyframeAnimationInfo[] {
return ruleset[animationsSymbol];
}
private findKeyframeRule(animationName: string): kam.Keyframes {
private findKeyframeRule(animationName: string): Keyframes {
if (!this._mergedCssKeyframes) {
return null;
}