Previously we would write to class/style as strings `element.className` and `element.style.cssText`. Turns out that approach is good for initial render but not good for updates. Updates using this approach are problematic because we have to check to see if there was an out of bound write to style and than perform reconciliation. This also requires the browser to bring up CSS parser which is expensive.
Another problem with old approach is that we had to queue the DOM writes and flush them twice. Once on element advance instruction and once in `hostBindings`. The double flushing is expensive but it also means that a directive can observe that styles are not yet written (they are written after directive executes.)
The new approach uses `element.classList.add/remove` and `element.style.setProperty/removeProperty` API for updates only (it continues to use `element.className` and `element.style.cssText` for initial render as it is cheaper.) The other change is that the styling changes are applied immediately (no queueing). This means that it is the instruction which computes priority. In some circumstances it may result in intermediate writes which are than overwritten with new value. (This should be rare)
Overall this change deletes most of the previous code and replaces it with new simplified implement. The simplification results in code savings.
PR Close#34804
NOTE: This change must be reverted with previous deletes so that it code remains in build-able state.
This change deletes old styling code and replaces it with a simplified styling algorithm.
The mental model for the new algorithm is:
- Create a linked list of styling bindings in the order of priority. All styling bindings ere executed in compiled order and than a linked list of bindings is created in priority order.
- Flush the style bindings at the end of `advance()` instruction. This implies that there are two flush events. One at the end of template `advance` instruction in the template. Second one at the end of `hostBindings` `advance` instruction when processing host bindings (if any).
- Each binding instructions effectively updates the string to represent the string at that location. Because most of the bindings are additive, this is a cheap strategy in most cases. In rare cases the strategy requires removing tokens from the styling up to this point. (We expect that to be rare case)S Because, the bindings are presorted in the order of priority, it is safe to resume the processing of the concatenated string from the last change binding.
PR Close#34616
This change moves information from instructions to declarative position:
- `ɵɵallocHostVars(vars)` => `DirectiveDef.hostVars`
- `ɵɵelementHostAttrs(attrs)` => `DirectiveDef.hostAttrs`
When merging directives it is necessary to know about `hostVars` and `hostAttrs`. Before this change the information was stored in the `hostBindings` function. This was problematic, because in order to get to the information the `hostBindings` would have to be executed. In order for `hostBindings` to be executed the directives would have to be instantiated. This means that the directive instantiation would happen before we had knowledge about the `hostAttrs` and as a result the directive could observe in the constructor that not all of the `hostAttrs` have been applied. This further complicates the runtime as we have to apply `hostAttrs` in parts over many invocations.
`ɵɵallocHostVars` was unnecessarily complicated because it would have to update the `LView` (and Blueprint) while existing directives are already executing. By moving it out of `hostBindings` function we can access it statically and we can create correct `LView` (and Blueprint) in a single pass.
This change only changes how the instructions are generated, but does not change the runtime much. (We cheat by emulating the old behavior by calling `ɵɵallocHostVars` and `ɵɵelementHostAttrs`) Subsequent change will refactor the runtime to take advantage of the static information.
PR Close#34683
Previously, the template type-checker would always construct a generic
template context type with correct bounds, even when strictTemplates was
disabled. This meant that type-checking of expressions involving that type
was stricter than View Engine.
This commit introduces a 'strictContextGenerics' flag which behaves
similarly to other 'strictTemplates' flags, and switches the inference of
generic type parameters on the component context based on the value of this
flag.
PR Close#34649
This commit increases payload size limits for angular.io application that triggered an error after merging another commit (00f13cc074). The goal of this commit is to bring master back to a "green" state and separate investigation is required to identify the root cause for size increase.
PR Close#34913
The StackBlitz API (which we use to generate StackBlitz projects on the
fly, when a user clicks on a live example link in the docs) allows
specifying the file to open in the editor by passing a query param. If
no file is specified, StackBlitz opens a default one. In the past, it
used to be `main.ts` and nowadays it seems to be `app.component.ts`.
StackBlitz builder, the tool that we use to generate the StackBlitz
projects, allows specifying the primary file by setting the `file`
property in the corresponding `stackblitz.json`.
Previously, if the `file` property was not set, StackBlitz builder would
not specify a file, thus falling back on StackBlitz's default behavior.
This was not great, because the default behavior may change unexpectedly
is the future to something that is less useful for our users.
This commit change StackBlitz builder to always specify a primary file.
If no file is specified in `stackblitz.json`, the builder will look
for the first file that exists in the example from a list of predefined
files.
Partially addresses #22357.
PR Close#34553
The StackBlitz API (which we use to generate StackBlitz projects on the
fly, when a user clicks on a live example link in the docs) allows
specifying the file to open in the editor by passing a query param. If
no file is specified, StackBlitz opens a default one.
This commit specifies relevant landing files for some of the examples to
make it easier to engage with the examples more quickly, and to see what
the example is attempting to demonstrate.
Fixes#22357.
PR Close#34553
First we used a messages array to display messages toh-4 but it dsplayed only one message added additional messages on click of a hero
Fixes#28739
PR Close#34496
When running the e2e tests on CI, it is desirable that the build
progress is not logged, because that clutters the logs and makes it
difficult to get to the useful info in case of failures.
The previous config to achieve that doesn't work any more.
This commit update the `ci` configuration for e2e tests to suppress
build progress logging.
PR Close#34840
Previously, the examples in the `comparing-observables` guide were hard-coded.
This made it impossible to test them and verify they are correct.
This commit fixes this by converting them into a proper mini-app. In a
subsequent commit, tests will be added to verify that the source code
works as expected (and guard against regressions).
Fixes#31024
PR Close#34327
Previously, the examples in the `cli-builder` guide were hard-coded.
This made it impossible to test them and verify they are correct.
This commit fixes this by converting them into a proper mini-app. In a
subsequent commit, tests will be added to verify that the source code
works as expected (and guard against regressions).
Fixes#34314
PR Close#34362
earlier in the docs it was told that adding typescript's type checking make json response typed so changed docs to say that it adds all typescipt capabilities during compile time
Fixes#34746
PR Close#34845
With TS 3.7, these examples were running into the error below (e.g. on https://circleci.com/gh/angular/angular/574906#tests/containers/0):
```
============== AIO example output for: /home/circleci/ng/aio/content/examples/observables/
running: yarn tsc --project ./
$ /home/circleci/ng/aio/content/examples/observables/node_modules/.bin/tsc --project ./
../../../tools/examples/shared/node_modules/protractor/built/index.d.ts(5,10): error TS2440: Import declaration conflicts with local declaration of 'PluginConfig'.
../../../tools/examples/shared/node_modules/protractor/built/index.d.ts(5,24): error TS2440: Import declaration conflicts with local declaration of 'ProtractorPlugin'.
error Command failed with exit code 2.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
completed: yarn tsc --project ./
```
This happened because of https://github.com/angular/protractor/issues/5348.
It's unclear why this typings problem does not affect `ng e2e` runs, and only affects `tsc` runs.
For now it seems sensible to alter the tests to compile only the app and not the e2e, since the intent of 2cc954d5a5 was never to verify the correctness of the e2e in the first place.
We still need a release of protractor that supports TS 3.7 though, but at least it doesn't seem to block our update proper.
PR Close#33717
This simplifies the Firebase redirect config, removing a redundant
pattern (`/api/http`) which is covered by the previous pattern and
dropping an unused named captured segment (`:rest*`).
This change does not affect the redirection behavior for the deployed
apps, but allows the Firebase hosting emulator to work correctly.
(See [here][1] for more info.)
NOTE: Although we are not currently using the Firebase emulator for
development/testing, we might want to use it in the future.
[1]: https://github.com/firebase/superstatic/issues/231#issuecomment-573034515
PR Close#34726
Currently, the angular.io projects do not use Firebase's Realtime
Database and therefore we only need to configure and deploy changes for
`hosting`.
This commit removes the unused Realtime Database related configs and
files.
PR Close#34696
There was some confusion about how the service will be injected in the sentence with the `new` keyword. This PR should hopefully clear the confusion.
Fixes#34612
PR Close#34638
Miško Hevery
Alex Rickabaugh
Andrew Kushnir
Aravind
Sonu Kapoor
Judy Bogart
ajitsinghkaler
George Kalpakas
Kapunahele Wong
Kristina Gocheva
Filipe Silva
Pete Bacon Darwin
GavinMK
Adam
mikef
Kara Erickson
Do Nhu Vy
arturovt
Sam Julien
ghiscoding
Sonu Kapoor
dependabot[bot]
Alan Agius