Misko Hevery
76698d38f7
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
33 lines
888 B
TypeScript
33 lines
888 B
TypeScript
/**
|
|
* @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"
|
|
}
|