@angular-wave/angular.ts 0.7.5 → 0.7.7

package/docs/assets/scss/index.scss

@@ -10,4 +10,16 @@
   &::after {
     background-color: white !important; // override dark overlay
   }
+
+  #download {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: baseline;
+
+    #version {
+      font-weight: 600;
+      margin-right: 2rem;
+    }
+  }
 }

package/docs/content/_index.md

@@ -4,13 +4,24 @@ title: AngularTS
 
 {{< blocks/cover color="white" height="full" >}}
 
-<div class="text-center">
+<div class="text-center" ng-app>
   <h1 class="display-1 mt-0 mt-md-5 pb-4">Angular<span>TS</span></h1>
 </div>
 
 <p class="lead mb-5">A modern, reactive and typesafe evolution of the classic JS framework from Google&copy;</p>
-<a class="btn btn-lg btn-secondary me-3 mb-4" href="https://github.com/Angular-Wave/angular.ts">
-  Download <i class="fab fa-github ms-2 "></i>
-</a>
+
+<div id="download">
+  <span id="version"></span>
+  <a class="btn btn-lg btn-secondary me-3 mb-4" href="https://github.com/Angular-Wave/angular.ts">
+    Download <i class="fab fa-github ms-2 "></i>
+  </a>
+  <script defer>
+      window.addEventListener("DOMContentLoaded", () => {
+        const versionSpan = document.getElementById("version");
+        const version = window.angular.version;
+        versionSpan.textContent = `Latest release: ${version}`;
+      });
+  </script>
+</div>
 
 {{< /blocks/cover >}}

package/docs/content/docs/directive/bind.md

@@ -0,0 +1,70 @@
+---
+title: ng-bind
+description: >
+  Sync or hydrate textContent of element with an expression
+---
+
+### Description
+
+The `ng-bind` attribute places the text content of the specified HTML element
+with the value of a given expression, and to update the text content when the
+value of that expression changes.
+
+Typically, you don't use `ng-bind` directly, but instead you use the double
+curly markup like `{{ expression }}` which is similar but less verbose.
+
+It is preferable to use `ng-bind` instead of `{{ expression }}` if a template is
+momentarily displayed by the browser in its raw state before it is compiled.
+Since `ng-bind` is an element attribute, it makes the bindings invisible to the
+user while the page is loading.
+
+An alternative solution to this problem would be using the `ng-cloak` directive.
+
+`ng-bind` can be modified with a `data-lazy` data attribute, which will delay
+update of element content until model is changed. This is useful for rendering
+server-generated content, while keeping the UI dynamic. In other frameworks,
+this technieque is known as
+[hydration](<https://en.wikipedia.org/wiki/Hydration_(web_development)>).
+
+### Directive parameters
+
+---
+
+#### `ng-bind`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Restrict:** `A`
+- **Element:** ANY
+- **Priority:** `0`
+- **Description:** Expression to evaluate and modify
+  [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
+  property.
+- **Example:**
+
+  ```html
+  <div ng-bind="name"></div>
+  ```
+
+---
+
+### Directive modifiers
+
+#### `data-lazy`
+
+- **Type:** `boolean`
+- **Description:** Apply expression once the bound model changes.
+- **Example:**
+
+  ```html
+  <div ng-bind="name" data-lazy="true"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-bind/ng-bind.html" >}}
+
+{{< showraw src="examples/ng-bind/ng-bind.html" >}}
+
+---

package/docs/content/docs/directive/click.md

@@ -16,6 +16,9 @@ is clicked.
 #### `ng-click`
 
 - **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Restrict:** `A`
+- **Element:** ANY
+- **Priority:** `0`
 - **Description:** Expression to evaluate upon
   [click](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event)
   event.

package/docs/content/docs/directive/dblclick.md

@@ -16,6 +16,9 @@ element is double clicked.
 #### `ng-dblclick`
 
 - **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Restrict:** `A`
+- **Element:** ANY
+- **Priority:** `0`
 - **Description:** Expression to evaluate upon
   [dblclick](https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event)
   event.

package/docs/content/docs/directive/keydown.md

@@ -0,0 +1,38 @@
+---
+title: ng-keydown
+description: >
+  Handler for keydown event
+---
+
+### Description
+
+The `ng-keydown` directive allows you to specify custom behavior when pressing
+keys, regardless of whether they produce a character value.
+
+### Directive parameters
+
+---
+
+#### `ng-keydown`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [keydown](https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event)
+  event.
+  [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-keydown="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-keydown/ng-keydown.html" >}}
+
+{{< showraw src="examples/ng-keydown/ng-keydown.html" >}}
+
+---

package/docs/content/docs/directive/keyup.md

@@ -0,0 +1,38 @@
+---
+title: ng-keyup
+description: >
+  Handler for keyup event
+---
+
+### Description
+
+The `ng-keyup` directive allows you to specify custom behavior when releasing
+keys, regardless of whether they produce a character value.
+
+### Directive parameters
+
+---
+
+#### `ng-keyup`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [keyup](https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event)
+  event.
+  [KeyboardEvent](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
+  object is available as `$event`.
+- **Example:**
+
+  ```html
+  <div ng-keyup="$ctrl.greet($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-keyup/ng-keyup.html" >}}
+
+{{< showraw src="examples/ng-keyup/ng-keyup.html" >}}
+
+---

package/docs/content/docs/directive/load.md

@@ -0,0 +1,43 @@
+---
+title: ng-load
+description: >
+  Handler for load event
+---
+
+### Description
+
+The `ng-load` directive allows you to specify custom behavior for elements that
+trigger
+[load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)
+event.
+
+**Note**: there is no guarantee that the browser will bind `ng-load` directive
+before loading its resource. Demo below is using a large image to showcase
+itself.
+
+### Directive parameters
+
+---
+
+#### `ng-load`
+
+- **Type:** [Expression](../../../typedoc/types/Expression.html)
+- **Description:** Expression to evaluate upon
+  [load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event)
+  event. [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) object
+  is available as `$event`.
+- **Example:**
+
+  ```html
+  <img src="url" ng-load="$ctrl.load($event)"></div>
+  ```
+
+---
+
+#### Demo
+
+{{< showhtml src="examples/ng-load/ng-load.html" >}}
+
+{{< showraw src="examples/ng-load/ng-load.html" >}}
+
+---

package/docs/static/examples/ng-bind/ng-bind.html

@@ -0,0 +1,9 @@
+<section ng-app>
+  <!-- Eager bind -->
+  <label>Enter name: <input type="text" ng-model="name" /></label><br />
+  Hello <span ng-bind="name">I am never displayed</span>!
+
+  <!-- Lazy bind -->
+  <button ng-click="name1 = name">Sync</button>
+  <span ng-bind="name1" data-lazy="true">I am server content</span>!
+</section>

package/docs/static/examples/ng-keydown/ng-keydown.html

@@ -0,0 +1,9 @@
+<section ng-app>
+  <input
+    type="text"
+    ng-keydown="count = count + 1"
+    ng-init="count = 0"
+    placeholder="Click here, then press down a key."
+  />
+  Keydown {{ count }} times
+</section>

package/docs/static/examples/ng-keyup/ng-keyup.html

@@ -0,0 +1,9 @@
+<section ng-app>
+  <input
+    type="text"
+    ng-keyup="count = count + 1"
+    ng-init="count = 0"
+    placeholder="Click here, then press down a key."
+  />
+  Keyup {{ count }} times
+</section>

package/docs/static/examples/ng-load/ng-load.html

@@ -0,0 +1,8 @@
+<section ng-app>
+  <img
+    ng-load="res = 'Large image loaded'"
+    width="150px"
+    src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/93/Centroamerica_prehispanica_siglo_XVI.svg/1920px-Centroamerica_prehispanica_siglo_XVI.svg.png"
+  />
+  {{ res }}
+</section>

package/legacy.d.ts

@@ -662,10 +662,6 @@ declare namespace angular {
     $eval(expression: string, locals?: Object): any;
     $eval(expression: (scope: IScope) => any, locals?: Object): any;
 
-    $evalAsync(): void;
-    $evalAsync(expression: string, locals?: Object): void;
-    $evalAsync(expression: (scope: IScope) => void, locals?: Object): void;
-
     // Defaults to false by the implementation checking strategy
     $new(isolate?: boolean, parent?: IScope): IScope;
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@angular-wave/angular.ts",
   "description": "A modern, optimized and type-safe version of AngularJS",
   "license": "MIT",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "type": "module",
   "main": "dist/angular-ts.esm.js",
   "module": "dist/angular-ts.esm.js",

package/src/core/location/location.js

@@ -775,7 +775,7 @@ export class LocationProvider {
           return;
         }
 
-        $rootScope.$evalAsync(() => {
+        Promise.resolve().then(() => {
           const oldUrl = $location.absUrl();
           const oldState = $location.$$state;
           let defaultPrevented;

package/src/core/scope/scope.js

@@ -467,7 +467,6 @@ export class Scope {
       $destroy: this.$destroy.bind(this),
       $eval: this.$eval.bind(this),
       $apply: this.$apply.bind(this),
-      $evalAsync: this.$evalAsync.bind(this),
       $postUpdate: this.$postUpdate.bind(this),
       $isRoot: this.#isRoot.bind(this),
       $target: target,
@@ -977,10 +976,6 @@ export class Scope {
     return res;
   }
 
-  async $evalAsync(expr, locals) {
-    return await this.$eval(expr, locals);
-  }
-
   /**
    * @param {Object} newTarget
    */

package/src/directive/bind/bind.js

@@ -1,4 +1,10 @@
-import { isUndefined, stringify, isNull, isProxy } from "../../shared/utils.js";
+import {
+  isUndefined,
+  stringify,
+  isNull,
+  isProxy,
+  isDefined,
+} from "../../shared/utils.js";
 import { $injectTokens } from "../../injection-tokens.js";
 
 /**
@@ -12,9 +18,15 @@ export function ngBindDirective() {
      * @param {import('../../core/compile/attributes.js').Attributes} attr
      */
     link(scope, element, attr) {
-      scope.$watch(attr["ngBind"], (value) => {
-        element.textContent = stringify(isProxy(value) ? value.$target : value);
-      });
+      scope.$watch(
+        attr["ngBind"],
+        (value) => {
+          element.textContent = stringify(
+            isProxy(value) ? value.$target : value,
+          );
+        },
+        isDefined(attr["lazy"]),
+      );
     },
   };
 }

package/src/directive/bind/bind.spec.js

@@ -106,6 +106,19 @@ describe("ng-bind", () => {
         $rootScope.value.$target.toString(),
       );
     });
+
+    it("should support `data-lazy` attribute", async () => {
+      $rootScope.value = 0;
+      await wait();
+      element = $compile('<div ng-bind="value" data-lazy="true">Content</div>')(
+        $rootScope,
+      );
+      expect(element.textContent).toEqual("Content");
+
+      $rootScope.value = 2;
+      await wait();
+      expect(element.textContent).toEqual("2");
+    });
   });
 
   describe("ngBindTemplate", () => {

package/src/directive/events/events.js

@@ -6,7 +6,7 @@ import { directiveNormalize } from "../../shared/utils.js";
  */
 export const ngEventDirectives = {};
 
-"click copy cut dblclick focus blur keydown keyup keypress load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup paste submit touchstart touchend touchmove"
+"click copy cut dblclick focus blur keydown keyup load mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup paste submit touchstart touchend touchmove"
   .split(" ")
   .forEach((eventName) => {
     const directiveName = directiveNormalize(`ng-${eventName}`);

package/src/directive/events/events.md

@@ -1,44 +1,3 @@
-## ngClick
-
-**Directive:** `ngClick`  
-**Restrict:** `A`  
-**Element:** `ANY`  
-**Priority:** `0`
-
-**Description:**  
-The ngClick directive allows you to specify custom behavior when an element is clicked.
-
-**Param:**
-
-- `{String} ngClick` [Expression](guide/expression) to evaluate upon click. ([Event object](guide/expression#-event-) is available as `$event`).
-
-## ngDblclick
-
-**Directive:** `ngDblclick`  
-**Restrict:** `A`  
-**Element:** `ANY`  
-**Priority:** `0`
-
-**Description:**  
-The `ngDblclick` directive allows you to specify custom behavior on a dblclick event.
-
-**Param:**
-
-- `{string} ngDblclick` [Expression](guide/expression) to evaluate upon a dblclick. (The Event object is available as `$event`).
-
-**Example:**
-
-```html
-<example name="ng-dblclick">
-  <file name="index.html">
-    <button ng-dblclick="count = count + 1" ng-init="count=0">
-      Increment (on double click)
-    </button>
-    count: {{count}}
-  </file>
-</example>
-```
-
 ## ngSubmit
 
 **Directive:** `ngSubmit`  

package/src/directive/messages/messages.js

@@ -103,7 +103,7 @@ class NgMessageCtrl {
   reRender() {
     if (!this.renderLater) {
       this.renderLater = true;
-      this.$scope.$evalAsync(() => {
+      Promise.resolve().then(() => {
         if (this.renderLater && this.cachedCollection) {
           this.render(this.cachedCollection);
         }