@angular-wave/angular.ts 0.0.58 → 0.0.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/README.md +3 -0
  2. package/dist/angular-ts.esm.js +2 -2
  3. package/dist/angular-ts.umd.js +2 -2
  4. package/package.json +5 -1
  5. package/src/animations/animate-css.js +11 -1
  6. package/src/animations/animate-js.html +44 -0
  7. package/src/animations/animation.js +9 -1
  8. package/src/{core/parser/parse.test.js → animations/animations.test.js} +3 -5
  9. package/src/animations/raf-scheduler.html +18 -0
  10. package/src/animations/raf-scheduler.js +56 -58
  11. package/src/animations/raf-scheduler.spec.js +92 -0
  12. package/src/core/parser/lexer.html +18 -0
  13. package/src/core/parser/lexer.spec.js +300 -0
  14. package/src/core/parser/parse.js +6 -1
  15. package/src/core/parser/parser.test.js +19 -0
  16. package/types/animations/animate-css.d.ts +1 -1
  17. package/types/animations/animation.d.ts +1 -1
  18. package/types/animations/raf-scheduler.d.ts +8 -23
  19. package/types/core/parser/parse.d.ts +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@angular-wave/angular.ts",
3
3
  "license": "MIT",
4
- "version": "0.0.58",
4
+ "version": "0.0.60",
5
5
  "type": "module",
6
6
  "main": "dist/angular-ts.esm.js",
7
7
  "browser": "dist/angular-ts.umd.js",
@@ -9,6 +9,10 @@
9
9
  "type": "git",
10
10
  "url": "https://github.com/Angular-Wave/angular.ts.git"
11
11
  },
12
+ "keywords": [
13
+ "AngularJS",
14
+ "AngularTS"
15
+ ],
12
16
  "engines": {
13
17
  "node": ">=18.18.2"
14
18
  },
package/src/animations/animate-css.js CHANGED
@@ -144,6 +144,16 @@ export function $AnimateCssProvider() {
144
144
  "$$animateCache",
145
145
  "$$rAFScheduler",
146
146
  "$$animateQueue",
147
+
148
+ /**
149
+ *
150
+ * @param {*} $$AnimateRunner
151
+ * @param {*} $timeout
152
+ * @param {*} $$animateCache
153
+ * @param {import("./raf-scheduler").RafScheduler} $$rAFScheduler
154
+ * @param {*} $$animateQueue
155
+ * @returns
156
+ */
147
157
  function (
148
158
  $$AnimateRunner,
149
159
  $timeout,
@@ -275,7 +285,7 @@ export function $AnimateCssProvider() {
275
285
  }
276
286
 
277
287
  const restoreStyles = {};
278
- const node = getDomNode(element);
288
+ const node = /** @type {HTMLElement} */ (getDomNode(element));
279
289
  if (!node || !node.parentNode || !$$animateQueue.enabled()) {
280
290
  return closeAndReturnNoopAnimator();
281
291
  }
package/src/animations/animate-js.html ADDED
@@ -0,0 +1,44 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>AngularTS Test Runner</title>
6
+
7
+ <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
8
+ <script type="module" src="/src/index.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.2/lib/anime.min.js"></script>
10
+ <script>
11
+ document.addEventListener("DOMContentLoaded", () => {
12
+ window.angular.module("test", ["ngAnimate"]).animation(".colorful", [
13
+ function () {
14
+ return {
15
+ addClass: function (element, className, doneFn) {
16
+ anime({
17
+ targets: element[0],
18
+ translateX: parseInt(className),
19
+ });
20
+ },
21
+ removeClass: function (element, className, doneFn) {},
22
+ setClass: function (element, className, removedClass, doneFn) {
23
+ anime({
24
+ targets: element[0],
25
+ translateX: parseInt(className),
26
+ });
27
+ },
28
+ };
29
+ },
30
+ ]);
31
+ });
32
+ </script>
33
+
34
+ <style></style>
35
+ </head>
36
+ <body ng-app="test">
37
+ <div ng-class="location" class="colorful">
38
+ this box is moody {{ location }}
39
+ </div>
40
+ <button ng-click="location='0'">Change to red</button>
41
+ <button ng-click="location='150'">Change to blue</button>
42
+ <button ng-click="location='300'">Change to green</button>
43
+ </body>
44
+ </html>
package/src/animations/animation.js CHANGED
@@ -35,6 +35,15 @@ export function $$AnimationProvider() {
35
35
  "$$AnimateRunner",
36
36
  "$$rAFScheduler",
37
37
  "$$animateCache",
38
+ /**
39
+ *
40
+ * @param {*} $rootScope
41
+ * @param {*} $injector
42
+ * @param {*} $$AnimateRunner
43
+ * @param {import("./raf-scheduler").RafScheduler} $$rAFScheduler
44
+ * @param {*} $$animateCache
45
+ * @returns
46
+ */
38
47
  function (
39
48
  $rootScope,
40
49
  $injector,
@@ -305,7 +314,6 @@ export function $$AnimationProvider() {
305
314
  }
306
315
  }
307
316
  }
308
-
309
317
  $$rAFScheduler(finalAnimations);
310
318
  });
311
319
 
package/src/{core/parser/parse.test.js → animations/animations.test.js} RENAMED
@@ -1,11 +1,9 @@
1
1
  import { test, expect } from "@playwright/test";
2
2
 
3
- const TEST_URL = "src/core/parser/parse.html";
4
-
5
- test("unit tests contain no errors", async ({ page }) => {
6
- await page.goto(TEST_URL);
3
+ test("raf-scheduler unit tests contain no errors", async ({ page }) => {
4
+ await page.goto("src/animations/raf-scheduler.html");
7
5
  await page.content();
8
- await page.waitForTimeout(100);
6
+
9
7
  await expect(page.locator(".jasmine-overall-result")).toHaveText(
10
8
  /0 failures/,
11
9
  );
package/src/animations/raf-scheduler.html ADDED
@@ -0,0 +1,18 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>AngularTS Test Runner</title>
6
+
7
+ <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
8
+ <link rel="stylesheet" href="/jasmine/jasmine-5.1.2/jasmine.css" />
9
+ <script src="/jasmine/jasmine-5.1.2/jasmine.js"></script>
10
+ <script src="/jasmine/jasmine-5.1.2/jasmine-html.js"></script>
11
+ <script src="/jasmine/jasmine-5.1.2/boot0.js"></script>
12
+ <script src="/jasmine/jasmine-5.1.2/boot1.js"></script>
13
+ <script type="module" src="/src/animations/raf-scheduler.spec.js"></script>
14
+ </head>
15
+ <body>
16
+ <div id="dummy"></div>
17
+ </body>
18
+ </html>
package/src/animations/raf-scheduler.js CHANGED
@@ -1,74 +1,72 @@
1
1
  /**
2
- * @typedef {Object} Scheduler
2
+ * @typedef {Function} RafSchedulerFunction
3
+ * @typedef {Object} RafSchedulerObject
3
4
  * @property {Function} waitUntilQuiet - Function to wait until the animation frame is quiet.
4
- * @property {Array<Function>} queue - The queue of tasks to be processed.
5
- * @property {Function} scheduler - The function to add tasks to the queue and schedule the next tick.
5
+ * @typedef {RafSchedulerObject & RafSchedulerFunction} RafScheduler
6
6
  */
7
7
 
8
8
  /**
9
9
  * Creates a requestAnimationFrame scheduler.
10
- * @returns {Scheduler} The scheduler object.
10
+ * @returns {RafScheduler} The scheduler object.
11
11
  */
12
- export const $$rAFSchedulerFactory = [
13
- () => {
14
- /**
15
- * @type {Array<Array<Function>>}
16
- */
17
- let queue = [];
18
- /**
19
- * @type {number|null}
20
- */
21
- let cancelFn = null;
12
+ export function $$rAFSchedulerFactory() {
13
+ /**
14
+ * @type {Array<Array<Function>>}
15
+ */
16
+ let queue = [];
17
+ /**
18
+ * @type {number|null}
19
+ */
20
+ let cancelFn = null;
22
21
 
23
- /**
24
- * Processes the next tick of the animation frame.
25
- */
26
- function nextTick() {
27
- if (!queue.length) return;
22
+ /**
23
+ * Processes the next tick of the animation frame.
24
+ */
25
+ function nextTick() {
26
+ if (!queue.length) return;
28
27
 
29
- const items = queue.shift();
30
- items.forEach((i) => i());
28
+ const items = queue.shift();
29
+ items.forEach((i) => i());
31
30
 
32
- if (!cancelFn) {
33
- window.requestAnimationFrame(() => {
34
- cancelFn = null;
35
- nextTick();
36
- });
37
- }
31
+ if (!cancelFn) {
32
+ window.requestAnimationFrame(() => {
33
+ cancelFn = null;
34
+ nextTick();
35
+ });
38
36
  }
37
+ }
39
38
 
40
- /**
41
- * Adds tasks to the queue and schedules the next tick.
42
- * @param {Array<Function>} tasks - The tasks to be added to the queue.
43
- */
44
- function scheduler(tasks) {
45
- // Make a copy since RAFScheduler mutates the state
46
- // of the passed in array variable and this would be difficult
47
- // to track down on the outside code
48
- queue = queue.concat(tasks);
49
- nextTick();
50
- }
39
+ /**
40
+ * Adds tasks to the queue and schedules the next tick.
41
+ * @param {Array<Function>} tasks - The tasks to be added to the queue.
42
+ */
43
+ function scheduler(tasks) {
44
+ // Make a copy since RAFScheduler mutates the state
45
+ // of the passed in array variable and this would be difficult
46
+ // to track down on the outside code
47
+ queue = queue.concat(tasks);
48
+ nextTick();
49
+ }
51
50
 
52
- queue = scheduler.queue = [];
51
+ queue = scheduler.queue = [];
53
52
 
54
- /**
55
- * Waits until the animation frame is quiet before running the provided function.
56
- * Cancels any previous animation frame requests.
57
- * @param {Function} fn - The function to run when the animation frame is quiet.
58
- */
59
- scheduler.waitUntilQuiet = (fn) => {
60
- if (cancelFn !== null) {
61
- window.cancelAnimationFrame(cancelFn);
62
- cancelFn = null;
63
- }
53
+ /**
54
+ * Waits until the animation frame is quiet before running the provided function.
55
+ * Cancels any previous animation frame requests.
56
+ * @param {Function} fn - The function to run when the animation frame is quiet.
57
+ */
58
+ scheduler.waitUntilQuiet = (fn) => {
59
+ if (cancelFn !== null) {
60
+ window.cancelAnimationFrame(cancelFn);
61
+ cancelFn = null;
62
+ }
64
63
 
65
- cancelFn = window.requestAnimationFrame(() => {
66
- cancelFn = null;
67
- fn();
68
- nextTick();
69
- });
70
- };
64
+ cancelFn = window.requestAnimationFrame(() => {
65
+ cancelFn = null;
66
+ fn();
67
+ nextTick();
68
+ });
69
+ };
71
70
 
72
- return scheduler;
73
- },
74
- ];
71
+ return scheduler;
72
+ }
package/src/animations/raf-scheduler.spec.js ADDED
@@ -0,0 +1,92 @@
1
+ import { $$rAFSchedulerFactory } from "./raf-scheduler";
2
+
3
+ describe("$$rAFSchedulerFactory", function () {
4
+ let scheduler;
5
+ let rAFCallbacks;
6
+ let originalRequestAnimationFrame;
7
+ let originalCancelAnimationFrame;
8
+
9
+ beforeEach(function () {
10
+ rAFCallbacks = [];
11
+ scheduler = $$rAFSchedulerFactory();
12
+
13
+ originalRequestAnimationFrame = window.requestAnimationFrame;
14
+ originalCancelAnimationFrame = window.cancelAnimationFrame;
15
+
16
+ spyOn(window, "requestAnimationFrame").and.callFake(function (cb) {
17
+ const id = rAFCallbacks.length;
18
+ rAFCallbacks.push(cb);
19
+ return id;
20
+ });
21
+
22
+ spyOn(window, "cancelAnimationFrame").and.callFake(function (id) {
23
+ rAFCallbacks[id] = null;
24
+ });
25
+ });
26
+
27
+ afterEach(function () {
28
+ window.requestAnimationFrame = originalRequestAnimationFrame;
29
+ window.cancelAnimationFrame = originalCancelAnimationFrame;
30
+ });
31
+
32
+ function flushRAF() {
33
+ const callbacks = rAFCallbacks.slice();
34
+ rAFCallbacks.length = 0;
35
+ callbacks.forEach((cb) => cb && cb());
36
+ }
37
+
38
+ it("should schedule tasks and process them", function () {
39
+ const task1 = jasmine.createSpy("task1");
40
+ const task2 = jasmine.createSpy("task2");
41
+
42
+ scheduler([[task1, task2]]);
43
+
44
+ expect(task1).toHaveBeenCalled();
45
+ expect(task2).toHaveBeenCalled();
46
+ });
47
+
48
+ it("should process tasks in the correct order", function () {
49
+ const callOrder = [];
50
+ const task1 = function () {
51
+ callOrder.push("task1");
52
+ };
53
+ const task2 = function () {
54
+ callOrder.push("task2");
55
+ };
56
+
57
+ scheduler([[task1, task2]]);
58
+
59
+ expect(callOrder).toEqual(["task1", "task2"]);
60
+ });
61
+
62
+ it("should wait until quiet before running the final function", function () {
63
+ const quietFn = jasmine.createSpy("quietFn");
64
+ const task1 = jasmine.createSpy("task1");
65
+
66
+ scheduler([[task1]]);
67
+ scheduler.waitUntilQuiet(quietFn);
68
+
69
+ expect(quietFn).not.toHaveBeenCalled();
70
+
71
+ flushRAF();
72
+
73
+ expect(task1).toHaveBeenCalled();
74
+ expect(quietFn).toHaveBeenCalled();
75
+ });
76
+
77
+ it("should cancel the previous animation frame when scheduling a new waitUntilQuiet", function () {
78
+ const quietFn1 = jasmine.createSpy("quietFn1");
79
+ const quietFn2 = jasmine.createSpy("quietFn2");
80
+
81
+ scheduler.waitUntilQuiet(quietFn1);
82
+ scheduler.waitUntilQuiet(quietFn2);
83
+
84
+ expect(quietFn1).not.toHaveBeenCalled();
85
+ expect(quietFn2).not.toHaveBeenCalled();
86
+
87
+ flushRAF();
88
+
89
+ expect(quietFn1).not.toHaveBeenCalled();
90
+ expect(quietFn2).toHaveBeenCalled();
91
+ });
92
+ });
package/src/core/parser/lexer.html ADDED
@@ -0,0 +1,18 @@
1
+ <!doctype html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <title>AngularTS Test Runner</title>
6
+
7
+ <link rel="shortcut icon" type="image/png" href="/images/favicon.ico" />
8
+ <link rel="stylesheet" href="/jasmine/jasmine-5.1.2/jasmine.css" />
9
+ <script src="/jasmine/jasmine-5.1.2/jasmine.js"></script>
10
+ <script src="/jasmine/jasmine-5.1.2/jasmine-html.js"></script>
11
+ <script src="/jasmine/jasmine-5.1.2/boot0.js"></script>
12
+ <script src="/jasmine/jasmine-5.1.2/boot1.js"></script>
13
+ <script type="module" src="/src/core/parser/lexer.spec.js"></script>
14
+ </head>
15
+ <body>
16
+ <div id="dummy"></div>
17
+ </body>
18
+ </html>