refactor(ivy): Add style reconciliation algorithm (#34004)
This change introduces class/style reconciliation algorithm for DOM elements. NOTE: The code is not yet hooked up, it will be used by future style algorithm. Background: Styling algorithm currently has [two paths](https://hackmd.io/@5zDGNGArSxiHhgvxRGrg-g/rycZk3N5S) when computing how the style should be rendered. 1. A direct path which concatenates styling and uses `elemnent.className`/`element.style.cssText` and 2. A merge path which uses internal data structures and uses `element.classList.add/remove`/`element.style[property]`. The situation is confusing and hard to follow/maintain. So a future PR will remove the merge-path and do everything with direct-path. This however breaks when some other code adds class or style to the element without Angular's knowledge. If this happens instead of switching from direct-path to merge-path algorithm, this change provides a different mental model whereby we always do `direct-path` but the code which writes to the DOM detects the situation and reconciles the out of bound write. The reconciliation process is as follows: 1. Detect that no one has modified `className`/`cssText` and if so just write directly (fast path). 2. If out of bounds write did occur, switch from writing using `className`/`cssText` to `element.classList.add/remove`/`element.style[property]`. This does require that the write function computes the difference between the previous Angular expected state and current Angular state. (This requires a parser. The advantage of having a parser is that we can support `style="width: {{exp}}px" kind of bindings.`) Compute the diff and apply it in non destructive way using `element.classList.add/remove`/`element.style[property]` Properties of approach: - If no out of bounds style modification: - Very fast code path: Just concatenate string in right order and write them to DOM. - Class list order is preserved - If out of bounds style modification detected: - Penalty for parsing - Switch to non destructive modification: `element.classList.add/remove`/`element.style[property]` - Switch to alphabetical way of setting classes. PR Close #34004
This commit is contained in:
Misko Hevery
Miško Hevery
parent
ef95da6d3b
commit
76698d38f7
|
|
@ -30,7 +30,7 @@ export function parse(value: string): string[] {
|
|||
// we use a string array here instead of a string map
|
||||
// because a string-map is not guaranteed to retain the
|
||||
// order of the entries whereas a string array can be
|
||||
// construted in a [key, value, key, value] format.
|
||||
// constructed in a [key, value, key, value] format.
|
||||
const styles: string[] = [];
|
||||
|
||||
let i = 0;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,131 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {CharCode} from '../../util/char_code';
|
||||
import {consumeClassToken, consumeWhitespace} from './styling_parser';
|
||||
|
||||
/**
|
||||
* Computes the diff between two class-list strings.
|
||||
*
|
||||
* Example:
|
||||
* `oldValue` => `"A B C"`
|
||||
* `newValue` => `"A C D"`
|
||||
* will result in:
|
||||
* ```
|
||||
* new Map([
|
||||
* ['A', null],
|
||||
* ['B', false],
|
||||
* ['C', null],
|
||||
* ['D', true]
|
||||
* ])
|
||||
* ```
|
||||
*
|
||||
* @param oldValue Previous class-list string.
|
||||
* @param newValue New class-list string.
|
||||
* @returns A `Map` which will be filled with changes.
|
||||
* - `true`: Class needs to be added to the element.
|
||||
* - `false: Class needs to be removed from the element.
|
||||
* - `null`: No change (leave class as is.)
|
||||
*/
|
||||
export function computeClassChanges(oldValue: string, newValue: string): Map<string, boolean|null> {
|
||||
const changes = new Map<string, boolean|null>();
|
||||
splitClassList(oldValue, changes, false);
|
||||
splitClassList(newValue, changes, true);
|
||||
return changes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Splits the class list into array, ignoring whitespace and add it to corresponding categories
|
||||
* `changes`.
|
||||
*
|
||||
* @param text Class list to split
|
||||
* @param changes Map which will be filled with changes. (`false` - remove; `null` - noop;
|
||||
* `true` - add.)
|
||||
* @param isNewValue `true` if we are processing new list.
|
||||
*/
|
||||
export function splitClassList(
|
||||
text: string, changes: Map<string, boolean|null>, isNewValue: boolean): void {
|
||||
const end = text.length;
|
||||
let index = 0;
|
||||
while (index < end) {
|
||||
index = consumeWhitespace(text, index, end);
|
||||
const tokenEnd = consumeClassToken(text, index, end);
|
||||
if (tokenEnd !== index) {
|
||||
processClassToken(changes, text.substring(index, tokenEnd), isNewValue);
|
||||
}
|
||||
index = tokenEnd;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Processes the token by adding it to the `changes` Map.
|
||||
*
|
||||
* @param changes Map which keeps track of what should be done with each value.
|
||||
* - `false` The token should be deleted. (It was in old list, but not in new list.)
|
||||
* - `null` The token should be ignored. (It was present in old list as well as new list.)
|
||||
* - `true` the token should be added. (It was only present in the new value)
|
||||
* @param token Token to add to set.
|
||||
* @param isNewValue True if invocation represents an addition (removal otherwise.)
|
||||
* - `false` means that we are processing the old value, which may need to be deleted.
|
||||
* Initially all tokens are labeled `false` (remove it.)
|
||||
* - `true` means that we are processing new value which may need to be added. If a token
|
||||
* with same key already exists with `false` then the resulting token is `null` (no
|
||||
* change.) If no token exists then the new token value is `true` (add it.)
|
||||
*/
|
||||
export function processClassToken(
|
||||
changes: Map<string, boolean|null>, token: string, isNewValue: boolean) {
|
||||
if (isNewValue) {
|
||||
// This code path is executed when we are iterating over new values.
|
||||
const existingTokenValue = changes.get(token);
|
||||
if (existingTokenValue === undefined) {
|
||||
// the new list has a token which is not present in the old list. Mark it for addition.
|
||||
changes.set(token, true);
|
||||
} else if (existingTokenValue === false) {
|
||||
// If the existing value is `false` this means it was in the old list. Because it is in the
|
||||
// new list as well we marked it as `null` (noop.)
|
||||
changes.set(token, null);
|
||||
}
|
||||
} else {
|
||||
// This code path is executed when we are iterating over previous values.
|
||||
// This means that we store the tokens in `changes` with `false` (removals).
|
||||
changes.set(token, false);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a class from a `className` string.
|
||||
*
|
||||
* @param className A string containing classes (whitespace separated)
|
||||
* @param classToRemove A class name to remove from the `className`
|
||||
* @returns a new class-list which does not have `classToRemove`
|
||||
*/
|
||||
export function removeClass(className: string, classToRemove: string): string {
|
||||
let start = 0;
|
||||
let end = className.length;
|
||||
while (start < end) {
|
||||
start = className.indexOf(classToRemove, start);
|
||||
if (start === -1) {
|
||||
// we did not find anything, so just bail.
|
||||
break;
|
||||
}
|
||||
const removeLength = classToRemove.length;
|
||||
const hasLeadingWhiteSpace = start === 0 || className.charCodeAt(start - 1) <= CharCode.SPACE;
|
||||
const hasTrailingWhiteSpace = start + removeLength === end ||
|
||||
className.charCodeAt(start + removeLength) <= CharCode.SPACE;
|
||||
if (hasLeadingWhiteSpace && hasTrailingWhiteSpace) {
|
||||
// Cut out the class which should be removed.
|
||||
const endWhitespace = consumeWhitespace(className, start + removeLength, end);
|
||||
className = className.substring(0, start) + className.substring(endWhitespace, end);
|
||||
end = className.length;
|
||||
} else {
|
||||
// in this case we are only a substring of the actual class, move on.
|
||||
start = start + removeLength;
|
||||
}
|
||||
}
|
||||
return className;
|
||||
}
|
||||
|
|
@ -0,0 +1,175 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {ProceduralRenderer3, RElement, Renderer3, isProceduralRenderer} from '../interfaces/renderer';
|
||||
import {computeClassChanges} from './class_differ';
|
||||
import {computeStyleChanges} from './style_differ';
|
||||
|
||||
/**
|
||||
* Writes new `className` value in the DOM node.
|
||||
*
|
||||
* In its simplest form this function just writes the `newValue` into the `element.className`
|
||||
* property.
|
||||
*
|
||||
* However, under some circumstances this is more complex because there could be other code which
|
||||
* has added `class` information to the DOM element. In such a case writing our new value would
|
||||
* clobber what is already on the element and would result in incorrect behavior.
|
||||
*
|
||||
* To solve the above the function first reads the `element.className` to see if it matches the
|
||||
* `expectedValue`. (In our case `expectedValue` is just last value written into the DOM.) In this
|
||||
* way we can detect to see if anyone has modified the DOM since our last write.
|
||||
* - If we detect no change we simply write: `element.className = newValue`.
|
||||
* - If we do detect change then we compute the difference between the `expectedValue` and
|
||||
* `newValue` and then use `element.classList.add` and `element.classList.remove` to modify the
|
||||
* DOM.
|
||||
*
|
||||
* NOTE: Some platforms (such as NativeScript and WebWorkers) will not have `element.className`
|
||||
* available and reading the value will result in `undefined`. This means that for those platforms
|
||||
* we will always fail the check and will always use `element.classList.add` and
|
||||
* `element.classList.remove` to modify the `element`. (A good mental model is that we can do
|
||||
* `element.className === expectedValue` but we may never know the actual value of
|
||||
* `element.className`)
|
||||
*
|
||||
* @param renderer Renderer to use
|
||||
* @param element The element which needs to be updated.
|
||||
* @param expectedValue The expected (previous/old) value of the class list which we will use to
|
||||
* check if out of bounds modification has happened to the `element`.
|
||||
* @param newValue The new class list to write.
|
||||
*/
|
||||
export function writeAndReconcileClass(
|
||||
renderer: Renderer3, element: RElement, expectedValue: string, newValue: string): void {
|
||||
if (element.className === expectedValue) {
|
||||
// This is the simple/fast case where no one has written into element without our knowledge.
|
||||
if (isProceduralRenderer(renderer)) {
|
||||
renderer.setAttribute(element, 'class', newValue);
|
||||
} else {
|
||||
element.className = newValue;
|
||||
}
|
||||
ngDevMode && ngDevMode.rendererSetClassName++;
|
||||
} else {
|
||||
// The expected value is not the same as last value. Something changed the DOM element without
|
||||
// our knowledge so we need to do reconciliation instead.
|
||||
reconcileClassNames(renderer, element, expectedValue, newValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes new `cssText` value in the DOM node.
|
||||
*
|
||||
* In its simplest form this function just writes the `newValue` into the `element.style.cssText`
|
||||
* property.
|
||||
*
|
||||
* However, under some circumstances this is more complex because there could be other code which
|
||||
* has added `style` information to the DOM element. In such a case writing our new value would
|
||||
* clobber what is already on the element and would result in incorrect behavior.
|
||||
*
|
||||
* To solve the above the function first reads the `element.style.cssText` to see if it matches the
|
||||
* `expectedValue`. (In our case `expectedValue` is just last value written into the DOM.) In this
|
||||
* way we can detect to see if anyone has modified the DOM since our last write.
|
||||
* - If we detect no change we simply write: `element.style.cssText = newValue`
|
||||
* - If we do detect change then we compute the difference between the `expectedValue` and
|
||||
* `newValue` and then use `element.style[property]` to modify the DOM.
|
||||
*
|
||||
* NOTE: Some platforms (such as NativeScript and WebWorkers) will not have `element.style`
|
||||
* available and reading the value will result in `undefined` This means that for those platforms we
|
||||
* will always fail the check and will always use `element.style[property]` to
|
||||
* modify the `element`. (A good mental model is that we can do `element.style.cssText ===
|
||||
* expectedValue` but we may never know the actual value of `element.style.cssText`)
|
||||
*
|
||||
* @param renderer Renderer to use
|
||||
* @param element The element which needs to be updated.
|
||||
* @param expectedValue The expected (previous/old) value of the class list to write.
|
||||
* @param newValue The new class list to write
|
||||
*/
|
||||
export function writeAndReconcileStyle(
|
||||
renderer: Renderer3, element: RElement, expectedValue: string, newValue: string): void {
|
||||
const style = (element as HTMLElement).style;
|
||||
if (style != null && style.cssText === expectedValue) {
|
||||
// This is the simple/fast case where no one has written into element without our knowledge.
|
||||
if (isProceduralRenderer(renderer)) {
|
||||
renderer.setAttribute(element, 'style', newValue);
|
||||
} else {
|
||||
style.cssText = newValue;
|
||||
}
|
||||
ngDevMode && ngDevMode.rendererCssText++;
|
||||
} else {
|
||||
// The expected value is not the same as last value. Something changed the DOM element without
|
||||
// our knowledge so we need to do reconciliation instead.
|
||||
reconcileStyleNames(renderer, element, expectedValue, newValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes to `classNames` by computing the difference between `oldValue` and `newValue` and using
|
||||
* `classList.add` and `classList.remove`.
|
||||
*
|
||||
* NOTE: Keep this a separate function so that `writeAndReconcileClass` is small and subject to
|
||||
* inlining. (We expect that this function will be called rarely.)
|
||||
*
|
||||
* @param renderer Renderer to use when updating DOM.
|
||||
* @param element The native element to update.
|
||||
* @param oldValue Old value of `classNames`.
|
||||
* @param newValue New value of `classNames`.
|
||||
*/
|
||||
function reconcileClassNames(
|
||||
renderer: Renderer3, element: RElement, oldValue: string, newValue: string) {
|
||||
const isProcedural = isProceduralRenderer(renderer);
|
||||
computeClassChanges(oldValue, newValue).forEach((classValue, className) => {
|
||||
if (classValue === true) {
|
||||
if (isProcedural) {
|
||||
(renderer as ProceduralRenderer3).addClass(element, className);
|
||||
} else {
|
||||
(element as HTMLElement).classList.add(className);
|
||||
}
|
||||
ngDevMode && ngDevMode.rendererAddClass++;
|
||||
} else if (classValue === false) {
|
||||
if (isProcedural) {
|
||||
(renderer as ProceduralRenderer3).removeClass(element, className);
|
||||
} else {
|
||||
(element as HTMLElement).classList.remove(className);
|
||||
}
|
||||
ngDevMode && ngDevMode.rendererRemoveClass++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Writes to `styles` by computing the difference between `oldValue` and `newValue` and using
|
||||
* `styles.setProperty` and `styles.removeProperty`.
|
||||
*
|
||||
* NOTE: Keep this a separate function so that `writeAndReconcileStyle` is small and subject to
|
||||
* inlining. (We expect that this function will be called rarely.)
|
||||
*
|
||||
* @param renderer Renderer to use when updating DOM.
|
||||
* @param element The DOM element to update.
|
||||
* @param oldValue Old value of `classNames`.
|
||||
* @param newValue New value of `classNames`.
|
||||
*/
|
||||
function reconcileStyleNames(
|
||||
renderer: Renderer3, element: RElement, oldValue: string, newValue: string) {
|
||||
const isProcedural = isProceduralRenderer(renderer);
|
||||
const changes = computeStyleChanges(oldValue, newValue);
|
||||
changes.forEach((styleValue, styleName) => {
|
||||
const newValue = styleValue.new;
|
||||
if (newValue === null) {
|
||||
if (isProcedural) {
|
||||
(renderer as ProceduralRenderer3).removeStyle(element, styleName);
|
||||
} else {
|
||||
(element as HTMLElement).style.removeProperty(styleName);
|
||||
}
|
||||
ngDevMode && ngDevMode.rendererRemoveStyle++;
|
||||
} else if (styleValue.old !== newValue) {
|
||||
if (isProcedural) {
|
||||
(renderer as ProceduralRenderer3).setStyle(element, styleName, newValue);
|
||||
} else {
|
||||
(element as HTMLElement).style.setProperty(styleName, newValue);
|
||||
}
|
||||
ngDevMode && ngDevMode.rendererSetStyle++;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {CharCode} from '../../util/char_code';
|
||||
import {consumeSeparator, consumeStyleKey, consumeStyleValue, consumeWhitespace} from './styling_parser';
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Stores changes to Style values.
|
||||
* - `key`: style name.
|
||||
* - `value`:
|
||||
* - `old`: previous value (or `null`)
|
||||
* - `new`: new value (or `null`).
|
||||
*
|
||||
* If `old === new` do nothing.
|
||||
* If `old === null` then add `new`.
|
||||
* If `new === null` then remove `old`.
|
||||
*/
|
||||
export type StyleChangesMap = Map<string, {old: string | null, new: string | null}>;
|
||||
|
||||
/**
|
||||
* Computes the diff between two style strings.
|
||||
*
|
||||
* Example:
|
||||
* `oldValue` => `"a: 1; b: 2, c: 3"`
|
||||
* `newValue` => `"b: 2; c: 4; d: 5;"`
|
||||
* will result in:
|
||||
* ```
|
||||
* changes = Map(
|
||||
* 'a', { old: '1', new: null },
|
||||
* 'b', { old: '2', new: '2' },
|
||||
* 'c', { old: '3', new: '4' },
|
||||
* 'd', { old: null, new: '5' },
|
||||
* )
|
||||
* ``
|
||||
*
|
||||
* @param oldValue Previous style string.
|
||||
* @param newValue New style string.
|
||||
* @returns `StyleChangesArrayMap`.
|
||||
*/
|
||||
export function computeStyleChanges(oldValue: string, newValue: string): StyleChangesMap {
|
||||
const changes: StyleChangesMap = new Map<string, {old: string | null, new: string | null}>();
|
||||
parseKeyValue(oldValue, changes, false);
|
||||
parseKeyValue(newValue, changes, true);
|
||||
return changes;
|
||||
}
|
||||
|
||||
/**
|
||||
* Splits the style list into array, ignoring whitespace and add it to corresponding categories
|
||||
* changes.
|
||||
*
|
||||
* @param text Style list to split
|
||||
* @param changes Where changes will be stored.
|
||||
* @param isNewValue `true` if parsing new value (effects how values get added to `changes`)
|
||||
*/
|
||||
export function parseKeyValue(text: string, changes: StyleChangesMap, isNewValue: boolean): void {
|
||||
const end = text.length;
|
||||
let start = 0;
|
||||
while (start < end) {
|
||||
const keyStart = consumeWhitespace(text, start, end);
|
||||
const keyEnd = consumeStyleKey(text, keyStart, end);
|
||||
if (keyEnd === keyStart) {
|
||||
// we reached an end so just quit
|
||||
break;
|
||||
}
|
||||
const valueStart = consumeSeparator(text, keyEnd, end, CharCode.COLON);
|
||||
const valueEnd = consumeStyleValue(text, valueStart, end);
|
||||
if (ngDevMode && valueStart === valueEnd) {
|
||||
throw malformedStyleError(text, valueStart);
|
||||
}
|
||||
start = consumeSeparator(text, valueEnd, end, CharCode.SEMI_COLON);
|
||||
const key = text.substring(keyStart, keyEnd);
|
||||
const value = text.substring(valueStart, valueEnd);
|
||||
processStyleKeyValue(changes, key, value, isNewValue);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Appends style `key`/`value` information into the list of `changes`.
|
||||
*
|
||||
* Once all of the parsing is complete, the `changes` will contain a
|
||||
* set of operations which need to be performed on the DOM to reconcile it.
|
||||
*
|
||||
* @param changes An `StyleChangesMap which tracks changes.
|
||||
* @param key Style key to be added to the `changes`.
|
||||
* @param value Style value to be added to the `changes`.
|
||||
* @param isNewValue true if `key`/`value` should be processed as new value.
|
||||
*/
|
||||
function processStyleKeyValue(
|
||||
changes: StyleChangesMap, key: string, value: string, isNewValue: boolean): void {
|
||||
if (isNewValue) {
|
||||
// This code path is executed when we are iterating over new values.
|
||||
const existing = changes.get(key);
|
||||
if (existing === undefined) {
|
||||
// Key we have not seen before
|
||||
changes.set(key, styleKeyValue(null, value));
|
||||
} else {
|
||||
// Already seen, update value.
|
||||
existing.new = value;
|
||||
}
|
||||
} else {
|
||||
// This code path is executed when we are iteration over previous values.
|
||||
changes.set(key, styleKeyValue(value, null));
|
||||
}
|
||||
}
|
||||
|
||||
function styleKeyValue(oldValue: string | null, newValue: string | null) {
|
||||
return {old: oldValue, new: newValue};
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes a style from a `cssText` string.
|
||||
*
|
||||
* @param cssText A string which contains styling.
|
||||
* @param styleToRemove A style (and its value) to remove from `cssText`.
|
||||
* @returns a new style text which does not have `styleToRemove` (and its value)
|
||||
*/
|
||||
export function removeStyle(cssText: string, styleToRemove: string): string {
|
||||
let start = 0;
|
||||
let end = cssText.length;
|
||||
let lastValueEnd = 0;
|
||||
while (start < end) {
|
||||
const possibleKeyIndex = cssText.indexOf(styleToRemove, start);
|
||||
if (possibleKeyIndex === -1) {
|
||||
// we did not find anything, so just bail.
|
||||
break;
|
||||
}
|
||||
while (start < possibleKeyIndex + 1) {
|
||||
const keyStart = consumeWhitespace(cssText, start, end);
|
||||
const keyEnd = consumeStyleKey(cssText, keyStart, end);
|
||||
if (keyEnd === keyStart) {
|
||||
// we reached the end
|
||||
return cssText;
|
||||
}
|
||||
const valueStart = consumeSeparator(cssText, keyEnd, end, CharCode.COLON);
|
||||
const valueEnd = consumeStyleValue(cssText, valueStart, end);
|
||||
if (ngDevMode && valueStart === valueEnd) {
|
||||
throw malformedStyleError(cssText, valueStart);
|
||||
}
|
||||
const valueEndSep = consumeSeparator(cssText, valueEnd, end, CharCode.SEMI_COLON);
|
||||
if (keyStart == possibleKeyIndex && keyEnd === possibleKeyIndex + styleToRemove.length) {
|
||||
if (valueEndSep == end) {
|
||||
// This is a special case when we are the last key in a list, we then chop off the
|
||||
// trailing separator as well.
|
||||
cssText = cssText.substring(0, lastValueEnd);
|
||||
} else {
|
||||
cssText = cssText.substring(0, keyStart) + cssText.substring(valueEndSep, end);
|
||||
}
|
||||
end = cssText.length;
|
||||
start = keyStart;
|
||||
break; // rescan.
|
||||
} else {
|
||||
// This was not the item we are looking for, keep going.
|
||||
start = valueEndSep;
|
||||
}
|
||||
lastValueEnd = valueEnd;
|
||||
}
|
||||
}
|
||||
return cssText;
|
||||
}
|
||||
|
||||
function malformedStyleError(text: string, index: number) {
|
||||
return new Error(
|
||||
`Malformed style at location ${index} in string '` + text.substring(0, index) + '[>>' +
|
||||
text.substring(index, index + 1) + '<<]' + text.substr(index + 1) + '\'.');
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {CharCode} from '../../util/char_code';
|
||||
|
||||
/**
|
||||
* Returns index of next non-whitespace character.
|
||||
*
|
||||
* @param text Text to scan
|
||||
* @param startIndex Starting index of character where the scan should start.
|
||||
* @param endIndex Ending index of character where the scan should end.
|
||||
* @returns Index of next non-whitespace character (May be the same as `start` if no whitespace at
|
||||
* that location.)
|
||||
*/
|
||||
export function consumeWhitespace(text: string, startIndex: number, endIndex: number): number {
|
||||
while (startIndex < endIndex && text.charCodeAt(startIndex) <= CharCode.SPACE) {
|
||||
startIndex++;
|
||||
}
|
||||
return startIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns index of last char in class token.
|
||||
*
|
||||
* @param text Text to scan
|
||||
* @param startIndex Starting index of character where the scan should start.
|
||||
* @param endIndex Ending index of character where the scan should end.
|
||||
* @returns Index after last char in class token.
|
||||
*/
|
||||
export function consumeClassToken(text: string, startIndex: number, endIndex: number): number {
|
||||
while (startIndex < endIndex && text.charCodeAt(startIndex) > CharCode.SPACE) {
|
||||
startIndex++;
|
||||
}
|
||||
return startIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Consumes all of the characters belonging to style key and token.
|
||||
*
|
||||
* @param text Text to scan
|
||||
* @param startIndex Starting index of character where the scan should start.
|
||||
* @param endIndex Ending index of character where the scan should end.
|
||||
* @returns Index after last style key character.
|
||||
*/
|
||||
export function consumeStyleKey(text: string, startIndex: number, endIndex: number): number {
|
||||
let ch: number;
|
||||
while (startIndex < endIndex &&
|
||||
((ch = text.charCodeAt(startIndex)) === CharCode.DASH || ch === CharCode.UNDERSCORE ||
|
||||
((ch & CharCode.UPPER_CASE) >= CharCode.A && (ch & CharCode.UPPER_CASE) <= CharCode.Z))) {
|
||||
startIndex++;
|
||||
}
|
||||
return startIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Consumes all whitespace and the separator `:` after the style key.
|
||||
*
|
||||
* @param text Text to scan
|
||||
* @param startIndex Starting index of character where the scan should start.
|
||||
* @param endIndex Ending index of character where the scan should end.
|
||||
* @returns Index after separator and surrounding whitespace.
|
||||
*/
|
||||
export function consumeSeparator(
|
||||
text: string, startIndex: number, endIndex: number, separator: number): number {
|
||||
startIndex = consumeWhitespace(text, startIndex, endIndex);
|
||||
if (startIndex < endIndex) {
|
||||
if (ngDevMode && text.charCodeAt(startIndex) !== separator) {
|
||||
throw expectingError(text, String.fromCharCode(separator), startIndex);
|
||||
}
|
||||
startIndex++;
|
||||
}
|
||||
startIndex = consumeWhitespace(text, startIndex, endIndex);
|
||||
return startIndex;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Consumes style value honoring `url()` and `""` text.
|
||||
*
|
||||
* @param text Text to scan
|
||||
* @param startIndex Starting index of character where the scan should start.
|
||||
* @param endIndex Ending index of character where the scan should end.
|
||||
* @returns Index after last style value character.
|
||||
*/
|
||||
export function consumeStyleValue(text: string, startIndex: number, endIndex: number): number {
|
||||
let ch1 = -1; // 1st previous character
|
||||
let ch2 = -1; // 2nd previous character
|
||||
let ch3 = -1; // 3rd previous character
|
||||
let i = startIndex;
|
||||
let lastChIndex = i;
|
||||
while (i < endIndex) {
|
||||
const ch: number = text.charCodeAt(i++);
|
||||
if (ch === CharCode.SEMI_COLON) {
|
||||
return lastChIndex;
|
||||
} else if (ch === CharCode.DOUBLE_QUOTE || ch === CharCode.SINGLE_QUOTE) {
|
||||
lastChIndex = i = consumeQuotedText(text, ch, i, endIndex);
|
||||
} else if (
|
||||
startIndex ===
|
||||
i - 4 && // We have seen only 4 characters so far "URL(" (Ignore "foo_URL()")
|
||||
ch3 === CharCode.U &&
|
||||
ch2 === CharCode.R && ch1 === CharCode.L && ch === CharCode.OPEN_PAREN) {
|
||||
lastChIndex = i = consumeQuotedText(text, CharCode.CLOSE_PAREN, i, endIndex);
|
||||
} else if (ch > CharCode.SPACE) {
|
||||
// if we have a non-whitespace character then capture its location
|
||||
lastChIndex = i;
|
||||
}
|
||||
ch3 = ch2;
|
||||
ch2 = ch1;
|
||||
ch1 = ch & CharCode.UPPER_CASE;
|
||||
}
|
||||
return lastChIndex;
|
||||
}
|
||||
|
||||
/**
|
||||
* Consumes all of the quoted characters.
|
||||
*
|
||||
* @param text Text to scan
|
||||
* @param quoteCharCode CharCode of either `"` or `'` quote or `)` for `url(...)`.
|
||||
* @param startIndex Starting index of character where the scan should start.
|
||||
* @param endIndex Ending index of character where the scan should end.
|
||||
* @returns Index after quoted characters.
|
||||
*/
|
||||
export function consumeQuotedText(
|
||||
text: string, quoteCharCode: number, startIndex: number, endIndex: number): number {
|
||||
let ch1 = -1; // 1st previous character
|
||||
let index = startIndex;
|
||||
while (index < endIndex) {
|
||||
const ch = text.charCodeAt(index++);
|
||||
if (ch == quoteCharCode && ch1 !== CharCode.BACK_SLASH) {
|
||||
return index;
|
||||
}
|
||||
if (ch == CharCode.BACK_SLASH && ch1 === CharCode.BACK_SLASH) {
|
||||
// two back slashes cancel each other out. For example `"\\"` should properly end the
|
||||
// quotation. (It should not assume that the last `"` is escaped.)
|
||||
ch1 = 0;
|
||||
} else {
|
||||
ch1 = ch;
|
||||
}
|
||||
}
|
||||
throw ngDevMode ? expectingError(text, String.fromCharCode(quoteCharCode), endIndex) :
|
||||
new Error();
|
||||
}
|
||||
|
||||
function expectingError(text: string, expecting: string, index: number) {
|
||||
return new Error(
|
||||
`Expecting '${expecting}' at location ${index} in string '` + text.substring(0, index) +
|
||||
'[>>' + text.substring(index, index + 1) + '<<]' + text.substr(index + 1) + '\'.');
|
||||
}
|
||||
|
|
@ -5,6 +5,7 @@
|
|||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {CharCode} from '../../util/char_code';
|
||||
import {AttributeMarker, TAttributes} from '../interfaces/node';
|
||||
import {CssSelector} from '../interfaces/projection';
|
||||
import {ProceduralRenderer3, RElement, Renderer3, isProceduralRenderer} from '../interfaces/renderer';
|
||||
|
|
@ -103,5 +104,5 @@ export function isAnimationProp(name: string): boolean {
|
|||
// Perf note: accessing charCodeAt to check for the first character of a string is faster as
|
||||
// compared to accessing a character at index 0 (ex. name[0]). The main reason for this is that
|
||||
// charCodeAt doesn't allocate memory to return a substring.
|
||||
return name.charCodeAt(0) === 64; // @
|
||||
return name.charCodeAt(0) === CharCode.AT_SIGN;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
import {unwrapSafeValue} from '../../sanitization/bypass';
|
||||
import {CharCode} from '../../util/char_code';
|
||||
import {PropertyAliases, TNodeFlags} from '../interfaces/node';
|
||||
import {LStylingData, StylingMapArray, StylingMapArrayIndex, TStylingContext, TStylingContextIndex, TStylingContextPropConfigFlags, TStylingNode} from '../interfaces/styling';
|
||||
import {NO_CHANGE} from '../tokens';
|
||||
|
|
@ -431,7 +432,7 @@ export function splitOnWhitespace(text: string): string[]|null {
|
|||
let foundChar = false;
|
||||
for (let i = 0; i < length; i++) {
|
||||
const char = text.charCodeAt(i);
|
||||
if (char <= 32 /*' '*/) {
|
||||
if (char <= CharCode.SPACE) {
|
||||
if (foundChar) {
|
||||
if (array === null) array = [];
|
||||
array.push(text.substring(start, i));
|
||||
|
|
|
|||
|
|
@ -0,0 +1,32 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* List ASCII char codes to be used with `String.charCodeAt`
|
||||
*/
|
||||
export const enum CharCode {
|
||||
UPPER_CASE = ~32, // & with this will make the char uppercase
|
||||
SPACE = 32, // " "
|
||||
DOUBLE_QUOTE = 34, // "\""
|
||||
SINGLE_QUOTE = 39, // "'"
|
||||
OPEN_PAREN = 40, // "("
|
||||
CLOSE_PAREN = 41, // ")"
|
||||
COLON = 58, // ":"
|
||||
DASH = 45, // "-"
|
||||
UNDERSCORE = 95, // "_"
|
||||
SEMI_COLON = 59, // ";"
|
||||
BACK_SLASH = 92, // "\\"
|
||||
AT_SIGN = 64, // "@"
|
||||
A = 65, // "A"
|
||||
U = 85, // "U"
|
||||
R = 82, // "R"
|
||||
L = 76, // "L"
|
||||
Z = 90, // "A"
|
||||
a = 97, // "a"
|
||||
z = 122, // "z"
|
||||
}
|
||||
|
|
@ -42,6 +42,7 @@ declare global {
|
|||
rendererSetClassName: number;
|
||||
rendererAddClass: number;
|
||||
rendererRemoveClass: number;
|
||||
rendererCssText: number;
|
||||
rendererSetStyle: number;
|
||||
rendererRemoveStyle: number;
|
||||
rendererDestroy: number;
|
||||
|
|
@ -82,6 +83,7 @@ export function ngDevModeResetPerfCounters(): NgDevModePerfCounters {
|
|||
rendererSetClassName: 0,
|
||||
rendererAddClass: 0,
|
||||
rendererRemoveClass: 0,
|
||||
rendererCssText: 0,
|
||||
rendererSetStyle: 0,
|
||||
rendererRemoveStyle: 0,
|
||||
rendererDestroy: 0,
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ ts_library(
|
|||
),
|
||||
deps = [
|
||||
"//packages/core",
|
||||
"//packages/core/src/util",
|
||||
"@npm//@types/jasmine",
|
||||
"@npm//@types/node",
|
||||
],
|
||||
|
|
@ -215,3 +216,16 @@ ng_benchmark(
|
|||
name = "duplicate_map_based_style_and_class_bindings",
|
||||
bundle = ":duplicate_map_based_style_and_class_bindings_lib",
|
||||
)
|
||||
|
||||
ng_rollup_bundle(
|
||||
name = "split_class_list_lib",
|
||||
entry_point = ":split_class_list.ts",
|
||||
deps = [
|
||||
":perf_lib",
|
||||
],
|
||||
)
|
||||
|
||||
ng_benchmark(
|
||||
name = "split_class_list",
|
||||
bundle = ":split_class_list_lib",
|
||||
)
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ export function createBenchmark(benchmarkName: string): Benchmark {
|
|||
if (!runAgain) {
|
||||
// tslint:disable-next-line:no-console
|
||||
console.log(
|
||||
` ${formatTime(iterationTime_ms)} (count: ${profile.sampleCount}, iterations: ${profile.iterationCount})`);
|
||||
` ${formatTime(profile.bestTime)} (count: ${profile.sampleCount}, iterations: ${profile.iterationCount})`);
|
||||
}
|
||||
}
|
||||
iterationCounter = profile.iterationCount;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,64 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {processClassToken, splitClassList} from '@angular/core/src/render3/styling/class_differ';
|
||||
|
||||
import {createBenchmark} from './micro_bench';
|
||||
|
||||
const benchmark = createBenchmark('split_class_list');
|
||||
const splitTime = benchmark('String.split(" ")');
|
||||
const splitRegexpTime = benchmark('String.split(/\\s+/)');
|
||||
const splitClassListTime = benchmark('splitClassList');
|
||||
|
||||
const LETTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
|
||||
const CLASSES: string[] = [LETTERS];
|
||||
for (let i = 0; i < LETTERS.length; i++) {
|
||||
CLASSES.push(LETTERS.substring(0, i) + ' ' + LETTERS.substring(i, LETTERS.length));
|
||||
}
|
||||
|
||||
let index = 0;
|
||||
let changes = new Map<string, boolean|null>();
|
||||
let parts: string[] = [];
|
||||
while (splitTime()) {
|
||||
changes = clearArray(changes);
|
||||
const classes = CLASSES[index++];
|
||||
parts = classes.split(' ');
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i];
|
||||
if (part !== '') {
|
||||
processClassToken(changes, part, false);
|
||||
}
|
||||
}
|
||||
if (index === CLASSES.length) index = 0;
|
||||
}
|
||||
|
||||
const WHITESPACE = /\s+/m;
|
||||
while (splitRegexpTime()) {
|
||||
changes = clearArray(changes);
|
||||
const classes = CLASSES[index++];
|
||||
parts = classes.split(WHITESPACE);
|
||||
for (let i = 0; i < parts.length; i++) {
|
||||
const part = parts[i];
|
||||
if (part !== '') {
|
||||
processClassToken(changes, part, false);
|
||||
}
|
||||
}
|
||||
if (index === CLASSES.length) index = 0;
|
||||
}
|
||||
|
||||
while (splitClassListTime()) {
|
||||
changes = clearArray(changes);
|
||||
splitClassList(CLASSES[index++], changes, false);
|
||||
if (index === CLASSES.length) index = 0;
|
||||
}
|
||||
|
||||
benchmark.report();
|
||||
|
||||
function clearArray(a: Map<any, any>): any {
|
||||
a.clear();
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {computeClassChanges, removeClass, splitClassList} from '../../../src/render3/styling/class_differ';
|
||||
|
||||
describe('class differ', () => {
|
||||
describe('computeClassChanges', () => {
|
||||
function expectComputeClassChanges(oldValue: string, newValue: string) {
|
||||
const changes: (boolean | null | string)[] = [];
|
||||
const newLocal = computeClassChanges(oldValue, newValue);
|
||||
sortedForEach(newLocal, (value, key) => { changes.push(key, value); });
|
||||
return expect(changes);
|
||||
}
|
||||
|
||||
it('should detect no changes', () => {
|
||||
expectComputeClassChanges('', '').toEqual([]);
|
||||
expectComputeClassChanges('A', 'A').toEqual(['A', null]);
|
||||
expectComputeClassChanges('A B', 'A B').toEqual(['A', null, 'B', null]);
|
||||
});
|
||||
|
||||
it('should detect no changes when out of order', () => {
|
||||
expectComputeClassChanges('A B', 'B A').toEqual(['A', null, 'B', null]);
|
||||
expectComputeClassChanges('A B C', 'B C A').toEqual(['A', null, 'B', null, 'C', null]);
|
||||
});
|
||||
|
||||
it('should detect additions', () => {
|
||||
expectComputeClassChanges('A B', 'A B C').toEqual(['A', null, 'B', null, 'C', true]);
|
||||
expectComputeClassChanges('Alpha Bravo', 'Bravo Alpha Charlie').toEqual([
|
||||
'Alpha', null, 'Bravo', null, 'Charlie', true
|
||||
]);
|
||||
expectComputeClassChanges('A B ', 'C B A').toEqual(['A', null, 'B', null, 'C', true]);
|
||||
});
|
||||
|
||||
it('should detect removals', () => {
|
||||
expectComputeClassChanges('A B C', 'A B').toEqual(['A', null, 'B', null, 'C', false]);
|
||||
expectComputeClassChanges('B A C', 'B A').toEqual(['A', null, 'B', null, 'C', false]);
|
||||
expectComputeClassChanges('C B A', 'A B').toEqual(['A', null, 'B', null, 'C', false]);
|
||||
});
|
||||
|
||||
it('should detect duplicates and ignore them', () => {
|
||||
expectComputeClassChanges('A A B C', 'A B C').toEqual(['A', null, 'B', null, 'C', null]);
|
||||
expectComputeClassChanges('A A B', 'A A C').toEqual(['A', null, 'B', false, 'C', true]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('splitClassList', () => {
|
||||
function expectSplitClassList(text: string) {
|
||||
const changes: (boolean | null | string)[] = [];
|
||||
const changesMap = new Map<string, boolean|null>();
|
||||
splitClassList(text, changesMap, false);
|
||||
changesMap.forEach((value, key) => changes.push(key, value));
|
||||
return expect(changes);
|
||||
}
|
||||
|
||||
it('should parse a list', () => {
|
||||
expectSplitClassList('').toEqual([]);
|
||||
expectSplitClassList('A').toEqual(['A', false]);
|
||||
expectSplitClassList('A B').toEqual(['A', false, 'B', false]);
|
||||
expectSplitClassList('Alpha Bravo').toEqual(['Alpha', false, 'Bravo', false]);
|
||||
});
|
||||
|
||||
it('should ignore extra spaces', () => {
|
||||
expectSplitClassList(' \n\r\t').toEqual([]);
|
||||
expectSplitClassList(' A ').toEqual(['A', false]);
|
||||
expectSplitClassList(' \n\r\t A \n\r\t B\n\r\t ').toEqual(['A', false, 'B', false]);
|
||||
expectSplitClassList(' \n\r\t Alpha \n\r\t Bravo \n\r\t ').toEqual([
|
||||
'Alpha', false, 'Bravo', false
|
||||
]);
|
||||
});
|
||||
|
||||
it('should remove duplicates', () => {
|
||||
expectSplitClassList('').toEqual([]);
|
||||
expectSplitClassList('A A').toEqual(['A', false]);
|
||||
expectSplitClassList('A B B A').toEqual(['A', false, 'B', false]);
|
||||
expectSplitClassList('Alpha Bravo Bravo Alpha').toEqual(['Alpha', false, 'Bravo', false]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeClass', () => {
|
||||
it('should remove class name from a class-list string', () => {
|
||||
expect(removeClass('', '')).toEqual('');
|
||||
expect(removeClass('A', 'A')).toEqual('');
|
||||
expect(removeClass('AB', 'AB')).toEqual('');
|
||||
expect(removeClass('A B', 'A')).toEqual('B');
|
||||
expect(removeClass('A B', 'A')).toEqual('B');
|
||||
});
|
||||
|
||||
it('should not remove a sub-string', () => {
|
||||
expect(removeClass('ABC', 'A')).toEqual('ABC');
|
||||
expect(removeClass('ABC', 'B')).toEqual('ABC');
|
||||
expect(removeClass('ABC', 'C')).toEqual('ABC');
|
||||
expect(removeClass('ABC', 'AB')).toEqual('ABC');
|
||||
expect(removeClass('ABC', 'BC')).toEqual('ABC');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
export function sortedForEach<V>(map: Map<string, V>, fn: (value: V, key: string) => void): void {
|
||||
const keys: string[] = [];
|
||||
map.forEach((value, key) => keys.push(key));
|
||||
keys.sort();
|
||||
keys.forEach((key) => fn(map.get(key) !, key));
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Renderer3, domRendererFactory3} from '@angular/core/src/render3/interfaces/renderer';
|
||||
import {writeAndReconcileClass, writeAndReconcileStyle} from '@angular/core/src/render3/styling/reconcile';
|
||||
|
||||
describe('styling reconcile', () => {
|
||||
[document, domRendererFactory3.createRenderer(null, null)].forEach((renderer: Renderer3) => {
|
||||
let element: HTMLDivElement;
|
||||
beforeEach(() => { element = document.createElement('div'); });
|
||||
|
||||
describe('writeAndReconcileClass', () => {
|
||||
it('should write new value to DOM', () => {
|
||||
writeAndReconcileClass(renderer, element, '', 'A');
|
||||
expect(getSortedClassName(element)).toEqual('A');
|
||||
|
||||
writeAndReconcileClass(renderer, element, 'A', 'C B A');
|
||||
expect(getSortedClassName(element)).toEqual('A B C');
|
||||
|
||||
writeAndReconcileClass(renderer, element, 'C B A', '');
|
||||
expect(getSortedClassName(element)).toEqual('');
|
||||
});
|
||||
|
||||
it('should write value alphabetically when existing class present', () => {
|
||||
element.className = 'X';
|
||||
writeAndReconcileClass(renderer, element, '', 'A');
|
||||
expect(getSortedClassName(element)).toEqual('A X');
|
||||
|
||||
writeAndReconcileClass(renderer, element, 'A', 'C B A');
|
||||
expect(getSortedClassName(element)).toEqual('A B C X');
|
||||
|
||||
writeAndReconcileClass(renderer, element, 'C B A', '');
|
||||
expect(getSortedClassName(element)).toEqual('X');
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('writeAndReconcileStyle', () => {
|
||||
it('should write new value to DOM', () => {
|
||||
writeAndReconcileStyle(renderer, element, '', 'width: 100px;');
|
||||
expect(getSortedStyle(element)).toEqual('width: 100px;');
|
||||
|
||||
writeAndReconcileStyle(
|
||||
renderer, element, 'width: 100px;', 'color: red; height: 100px; width: 100px;');
|
||||
expect(getSortedStyle(element)).toEqual('color: red; height: 100px; width: 100px;');
|
||||
|
||||
writeAndReconcileStyle(renderer, element, 'color: red; height: 100px; width: 100px;', '');
|
||||
expect(getSortedStyle(element)).toEqual('');
|
||||
});
|
||||
|
||||
it('should not clobber out of bound styles', () => {
|
||||
element.style.cssText = 'color: red;';
|
||||
writeAndReconcileStyle(renderer, element, '', 'width: 100px;');
|
||||
expect(getSortedStyle(element)).toEqual('color: red; width: 100px;');
|
||||
|
||||
writeAndReconcileStyle(renderer, element, 'width: 100px;', 'width: 200px;');
|
||||
expect(getSortedStyle(element)).toEqual('color: red; width: 200px;');
|
||||
|
||||
writeAndReconcileStyle(renderer, element, 'width: 200px;', 'width: 200px; height: 100px;');
|
||||
expect(getSortedStyle(element)).toEqual('color: red; height: 100px; width: 200px;');
|
||||
|
||||
writeAndReconcileStyle(renderer, element, 'width: 200px; height: 100px;', '');
|
||||
expect(getSortedStyle(element)).toEqual('color: red;');
|
||||
});
|
||||
|
||||
it('should support duplicate styles', () => {
|
||||
element.style.cssText = 'color: red;';
|
||||
writeAndReconcileStyle(renderer, element, '', 'width: 100px; width: 200px;');
|
||||
expect(getSortedStyle(element)).toEqual('color: red; width: 200px;');
|
||||
|
||||
writeAndReconcileStyle(
|
||||
renderer, element, 'width: 100px; width: 200px;',
|
||||
'width: 100px; width: 200px; height: 100px;');
|
||||
expect(getSortedStyle(element)).toEqual('color: red; height: 100px; width: 200px;');
|
||||
|
||||
writeAndReconcileStyle(renderer, element, 'width: 100px; height: 100px;', '');
|
||||
expect(getSortedStyle(element)).toEqual('color: red;');
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function getSortedClassName(element: HTMLElement): string {
|
||||
const names: string[] = [];
|
||||
const classList = element.classList || [];
|
||||
for (let i = 0; i < classList.length; i++) {
|
||||
const name = classList[i];
|
||||
if (names.indexOf(name) === -1) {
|
||||
names.push(name);
|
||||
}
|
||||
}
|
||||
names.sort();
|
||||
return names.join(' ');
|
||||
}
|
||||
|
||||
function getSortedStyle(element: HTMLElement): string {
|
||||
const names: string[] = [];
|
||||
const style = element.style;
|
||||
// reading `style.color` is a work around for a bug in Domino. The issue is that Domino has stale
|
||||
// value for `style.length`. It seems that reading a property from the element causes the stale
|
||||
// value to be updated. (As of Domino v 2.1.3)
|
||||
style.color;
|
||||
for (let i = 0; i < style.length; i++) {
|
||||
const name = style.item(i);
|
||||
if (names.indexOf(name) === -1) {
|
||||
names.push(name);
|
||||
}
|
||||
}
|
||||
names.sort();
|
||||
let sorted = '';
|
||||
names.forEach(key => {
|
||||
const value = style.getPropertyValue(key);
|
||||
if (value != null && value !== '') {
|
||||
if (sorted !== '') sorted += ' ';
|
||||
sorted += key + ': ' + value + ';';
|
||||
}
|
||||
});
|
||||
return sorted;
|
||||
}
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {StyleChangesMap, parseKeyValue, removeStyle} from '@angular/core/src/render3/styling/style_differ';
|
||||
import {consumeSeparator, consumeStyleValue} from '@angular/core/src/render3/styling/styling_parser';
|
||||
import {CharCode} from '@angular/core/src/util/char_code';
|
||||
import {sortedForEach} from './class_differ_spec';
|
||||
|
||||
describe('style differ', () => {
|
||||
describe('parseStyleValue', () => {
|
||||
it('should parse empty value', () => {
|
||||
expectParseValue(':').toBe('');
|
||||
expectParseValue(':;🛑ignore').toBe('');
|
||||
expectParseValue(': ;🛑ignore').toBe('');
|
||||
expectParseValue(':;🛑ignore').toBe('');
|
||||
expectParseValue(': \n\t\r ;🛑').toBe('');
|
||||
});
|
||||
|
||||
it('should parse basic value', () => {
|
||||
expectParseValue(':a').toBe('a');
|
||||
expectParseValue(':text').toBe('text');
|
||||
expectParseValue(': text2 ;🛑').toBe('text2');
|
||||
expectParseValue(':text3;🛑').toBe('text3');
|
||||
expectParseValue(': text3 ;🛑').toBe('text3');
|
||||
expectParseValue(': text1 text2;🛑').toBe('text1 text2');
|
||||
expectParseValue(': text1 text2 ;🛑').toBe('text1 text2');
|
||||
});
|
||||
|
||||
it('should parse quoted values', () => {
|
||||
expectParseValue(':""').toBe('""');
|
||||
expectParseValue(':"\\\\"').toBe('"\\\\"');
|
||||
expectParseValue(': ""').toBe('""');
|
||||
expectParseValue(': "" ').toBe('""');
|
||||
expectParseValue(': "text1" text2 ').toBe('"text1" text2');
|
||||
expectParseValue(':"text"').toBe('"text"');
|
||||
expectParseValue(': \'hello world\'').toBe('\'hello world\'');
|
||||
expectParseValue(':"some \n\t\r text ,;";🛑').toBe('"some \n\t\r text ,;"');
|
||||
expectParseValue(':"\\"\'";🛑').toBe('"\\"\'"');
|
||||
});
|
||||
|
||||
it('should parse url()', () => {
|
||||
expectParseValue(':url(:;)').toBe('url(:;)');
|
||||
expectParseValue(':URL(some :; text)').toBe('URL(some :; text)');
|
||||
expectParseValue(': url(text);🛑').toBe('url(text)');
|
||||
expectParseValue(': url(text) more text;🛑').toBe('url(text) more text');
|
||||
expectParseValue(':url(;"\':\\))').toBe('url(;"\':\\))');
|
||||
expectParseValue(': url(;"\':\\)) ;🛑').toBe('url(;"\':\\))');
|
||||
});
|
||||
});
|
||||
|
||||
describe('parseKeyValue', () => {
|
||||
it('should parse empty value', () => {
|
||||
expectParseKeyValue('').toEqual([]);
|
||||
expectParseKeyValue(' \n\t\r ').toEqual([]);
|
||||
});
|
||||
|
||||
it('should prase single style', () => {
|
||||
expectParseKeyValue('width: 100px').toEqual(['width', '100px', null]);
|
||||
expectParseKeyValue(' width : 100px ;').toEqual(['width', '100px', null]);
|
||||
});
|
||||
|
||||
it('should prase multi style', () => {
|
||||
expectParseKeyValue('width: 100px; height: 200px').toEqual([
|
||||
'height', '200px', null, //
|
||||
'width', '100px', null, //
|
||||
]);
|
||||
expectParseKeyValue(' height : 200px ; width : 100px ').toEqual([
|
||||
'height', '200px', null, //
|
||||
'width', '100px', null //
|
||||
]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('removeStyle', () => {
|
||||
it('should remove no style', () => {
|
||||
expect(removeStyle('', 'foo')).toEqual('');
|
||||
expect(removeStyle('abc: bar', 'a')).toEqual('abc: bar');
|
||||
expect(removeStyle('abc: bar', 'b')).toEqual('abc: bar');
|
||||
expect(removeStyle('abc: bar', 'c')).toEqual('abc: bar');
|
||||
expect(removeStyle('abc: bar', 'bar')).toEqual('abc: bar');
|
||||
});
|
||||
|
||||
it('should remove all style', () => {
|
||||
expect(removeStyle('foo: bar', 'foo')).toEqual('');
|
||||
expect(removeStyle('foo: bar; foo: bar;', 'foo')).toEqual('');
|
||||
});
|
||||
|
||||
it('should remove some of the style', () => {
|
||||
expect(removeStyle('a: a; foo: bar; b: b', 'foo')).toEqual('a: a; b: b');
|
||||
expect(removeStyle('a: a; foo: bar; b: b; foo: bar; c: c', 'foo'))
|
||||
.toEqual('a: a; b: b; c: c');
|
||||
});
|
||||
|
||||
it('should remove trailing ;', () => {
|
||||
expect(removeStyle('a: a; foo: bar', 'foo')).toEqual('a: a');
|
||||
expect(removeStyle('a: a ; foo: bar ; ', 'foo')).toEqual('a: a');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function expectParseValue(
|
||||
/**
|
||||
* The text to parse.
|
||||
*
|
||||
* The text can contain special 🛑 character which demarcates where the parsing should stop
|
||||
* and asserts that the parsing ends at that location.
|
||||
*/
|
||||
text: string) {
|
||||
let stopIndex = text.indexOf('🛑');
|
||||
if (stopIndex < 0) stopIndex = text.length;
|
||||
const valueStart = consumeSeparator(text, 0, text.length, CharCode.COLON);
|
||||
const valueEnd = consumeStyleValue(text, valueStart, text.length);
|
||||
const valueSep = consumeSeparator(text, valueEnd, text.length, CharCode.SEMI_COLON);
|
||||
expect(valueSep).toBe(stopIndex);
|
||||
return expect(text.substring(valueStart, valueEnd));
|
||||
}
|
||||
|
||||
function expectParseKeyValue(text: string) {
|
||||
const changes: StyleChangesMap = new Map<string, any>();
|
||||
parseKeyValue(text, changes, false);
|
||||
const list: any[] = [];
|
||||
sortedForEach(changes, (value, key) => list.push(key, value.old, value.new));
|
||||
return expect(list);
|
||||
}
|
||||
Loading…
Reference in New Issue