Mangle optimizations

Author: tolyo

README.md

@@ -14,7 +14,7 @@ AngularTS builds on that foundation and adds:
 - a fully reactive change-detection model without digests or virtual DOMs, like `Vue`
 - access to native DOM APIs at component and directive level (no `JQuery`or `JQLite`)
 - access to native Promises API (no `$q` or `$timetout`)
-- built-in enterprise-level router (`ui-router` ported as `ng-router`)
+- built-in enterprise-level router (`ng-router`, ported from `ui-router`)
 - built-in animations (`animate`)
 - new directives, inspired by `HTMX`
 - new injectables for REST resources, persistent stores, Web Workers, EventSources, WebSockets and WASM modules

src/router/directives/state-directives.ts

@@ -139,8 +139,29 @@ function clickHook(
       el.getAttribute("target");
 
     if (!res) {
-      // HACK: This is to allow ng-clicks to be processed before the transition is initiated:
-      const transition = setTimeout(function () {
+      const originalPreventDefault = event.preventDefault.bind(event);
+
+      let cancelled = false;
+
+      let ignorePreventDefaultCount = type._isAnchor && !target._href ? 1 : 0;
+
+      event.preventDefault = function () {
+        originalPreventDefault();
+
+        if (ignorePreventDefaultCount-- <= 0) {
+          cancelled = true;
+        }
+      };
+
+      originalPreventDefault();
+
+      queueMicrotask(() => {
+        event.preventDefault = originalPreventDefault;
+
+        if (cancelled) {
+          return;
+        }
+
         if (!el.getAttribute("disabled")) {
           $state
             .go(
@@ -153,14 +174,6 @@ function clickHook(
             });
         }
       });
-
-      event.preventDefault();
-      // if the state has no URL, ignore one preventDefault from the <a> directive.
-      let ignorePreventDefaultCount = type._isAnchor && !target._href ? 1 : 0;
-
-      event.preventDefault = function () {
-        if (ignorePreventDefaultCount-- <= 0) clearTimeout(transition);
-      };
     } else {
       // ignored
       event.preventDefault();
@@ -217,7 +230,7 @@ StateRefDirective.$inject = [
 ];
 
 /**
- * Generates `ui-sref` links and keeps their href/state data in sync.
+ * Generates `ng-sref` links and keeps their href/state data in sync.
  */
 export function StateRefDirective(
   $stateService: ng.StateService,

src/router/params/interface.ts

@@ -329,7 +329,7 @@ export interface ParamDeclaration {
    * `mode: 'list' is inherited, but refresh: true is not inherited.
    * // The param values are thus: `{ fooId: 4567, mode: 'list' }`
    * ```
-   * <ui-sref="foo({ fooId: 4567 })">4567</ui-sref>
+   * <ng-sref="foo({ fooId: 4567 })">4567</ng-sref>
    * ```
    *
    * ---

src/router/state/interface.ts

@@ -387,8 +387,8 @@ export interface StateDeclaration extends ViewDeclarationCommon {
    * Normally, a state's parent is implied from the state's [[name]], e.g., `"parentstate.childstate"`.
    *
    * Alternatively, you can explicitly set the parent state using this property.
-   * This allows shorter state names, e.g., `<a ui-sref="childstate">Child</a>`
-   * instead of `<a ui-sref="parentstate.childstate">Child</a>
+   * This allows shorter state names, e.g., `<a ng-sref="childstate">Child</a>`
+   * instead of `<a ng-sref="parentstate.childstate">Child</a>
    *
    * When using this property, the state's name should not have any dots in it.
    *
@@ -844,7 +844,7 @@ export interface StateDeclaration extends ViewDeclarationCommon {
    * - The `lazyLoad` function is invoked if a transition is going to enter the state.
    * - The function is invoked before the transition starts (using an `onBefore` transition hook).
    * - The function is only invoked once; while the `lazyLoad` function is loading code, it will not be invoked again.
-   *   For example, if the user double clicks a ui-sref, `lazyLoad` is only invoked once even though there were two transition attempts.
+   *   For example, if the user double clicks an `ng-sref`, `lazyLoad` is only invoked once even though there were two transition attempts.
    *   Instead, the existing lazy load promise is re-used.
    * - When the promise resolves successfully, the `lazyLoad` property is deleted from the state declaration.
    * - If the promise resolves to a [[LazyLoadResult]] which has an array of `states`, those states are registered.

src/router/state/state-service.ts

@@ -151,12 +151,19 @@ export class StateProvider {
   $get = [
     $injectTokens._injector,
     $injectTokens._url,
+    $injectTokens._view,
     /**
      * @param {ng.InjectorService} $injector
      * @param {ng.UrlService} $url
+     * @param {ng.ViewService} _viewService
      * @returns {StateProvider}
      */
-    ($injector: ng.InjectorService, $url: ng.UrlService) => {
+    (
+      $injector: ng.InjectorService,
+      $url: ng.UrlService,
+      _viewService: ng.ViewService,
+    ) => {
+      void _viewService;
       this.urlService = $url;
       this.$injector = $injector;
 

src/router/state/views.ts

@@ -13,24 +13,9 @@ import type { TemplateFactoryProvider } from "../template-factory.ts";
 /**
  * @return {(path: PathNode[], view: ViewDeclaration) => ViewConfig}
  */
-export function getViewConfigFactory() {
-  /**
-   * Lazily resolved to avoid a direct bootstrap-time dependency on the ng1 injector.
-   * The factory is cached after first use.
-   * @type {TemplateFactoryProvider | null}
-   */
-  let templateFactory: TemplateFactoryProvider | null = null;
-
-  return (path: PathNode[], view: ViewDeclaration): ViewConfig => {
-    templateFactory =
-      templateFactory || window.angular.$injector.get("$templateFactory"); // TODO: remove static injector
-
-    return new ViewConfig(
-      path,
-      view,
-      templateFactory as TemplateFactoryProvider,
-    );
-  };
+export function getViewConfigFactory(templateFactory: TemplateFactoryProvider) {
+  return (path: PathNode[], view: ViewDeclaration): ViewConfig =>
+    new ViewConfig(path, view, templateFactory);
 }
 
 const hasAnyKey = (keys: string[], obj: Record<string, any>): boolean =>

src/router/transition/interface.ts

@@ -19,7 +19,7 @@ export type DeregisterFn = () => void;
  * The TransitionOptions object can be used to change the behavior of a transition.
  *
  * It is passed as the third argument to [[StateService.go]], [[StateService.transitionTo]].
- * It can also be used with a `uiSref`.
+ * It can also be used with an `ngSref`.
  */
 export interface TransitionOptions {
   /**
@@ -84,7 +84,7 @@ export interface TransitionOptions {
 
   /**
    * This option may be used to cancel the active transition (if one is active) in favour of the this one.
-   * This is the default behaviour or ui-router.
+   * This is the default behaviour of ng-router.
    *
    *
    * - When `true`, the active transition will be canceled and new transition will begin.

src/router/view/view.spec.js

@@ -7,6 +7,7 @@ import { StateObject } from "../state/state-object.ts";
 import { ViewService } from "./view.ts";
 import { PathNode } from "../path/path-node.ts";
 import { PathUtils } from "../path/path-utils.ts";
+import { getViewConfigFactory } from "../state/views.ts";
 import { tail } from "../../shared/common.ts";
 import { wait } from "../../shared/test-utils.ts";
 
@@ -76,7 +77,11 @@ describe("view", () => {
       };
 
       state = register(stateDeclaration);
-      const $view = new ViewService(null);
+      const $view = new ViewService();
+
+      $view._viewConfigFactory = getViewConfigFactory(
+        $injector.get("$templateFactory"),
+      );
 
       const _states = [root, state];
       path = _states.map((_state) => new PathNode(_state));
@@ -98,7 +103,7 @@ describe("view", () => {
   });
 
   describe("matching", () => {
-    it("matches root default ng-view targets using the active ui-view fqn format", () => {
+    it("matches root default ng-view targets using the active ng-view fqn format", () => {
       const uiView = {
         fqn: "$default",
         name: "$default",
@@ -168,7 +173,7 @@ describe("view", () => {
   });
 
   describe("service helpers", () => {
-    it("normalizes relative ui-view targets", () => {
+    it("normalizes relative ng-view targets", () => {
       const parentContext = register({ name: "parent", parent: root });
       const childContext = register({
         name: "child",

src/router/view/view.ts

@@ -1,9 +1,11 @@
 import { equals, removeFrom } from "../../shared/common.ts";
+import { $injectTokens as $t } from "../../injection-tokens.ts";
 import { trace } from "../common/trace.ts";
 import { getViewConfigFactory, type ViewConfig } from "../state/views.ts";
 import type { PathNode } from "../path/path-node.ts";
 import type { ViewDeclaration } from "../state/interface.ts";
 import type { StateObject } from "../state/state-object.ts";
+import type { TemplateFactoryProvider } from "../template-factory.ts";
 
 /** The context ref can be anything that has a `name` and a `parent` reference to another IContextRef */
 export interface ViewContext {
@@ -26,7 +28,7 @@ export interface ActiveUIView {
   configUpdated: (config: ViewConfig | undefined) => void;
 }
 
-// A uiView and its matching viewConfig
+// An ngView and its matching viewConfig
 export interface ViewTuple {
   ngView: ActiveUIView | undefined;
   viewConfig: ViewConfig | undefined;
@@ -42,7 +44,7 @@ type ViewConfigFactory = (
 ) => ViewConfig;
 
 /**
- * Tracks active `ui-view` instances and matches them with registered
+ * Tracks active `ng-view` instances and matches them with registered
  * view configs produced during state transitions.
  */
 export class ViewService {
@@ -58,20 +60,27 @@ export class ViewService {
   _rootContext: StateObject | null | undefined;
 
   /**
-   * Creates an empty view registry ready to track active `ui-view` instances.
+   * Creates an empty view registry ready to track active `ng-view` instances.
    */
   constructor() {
     this._ngViews = [];
     this._viewConfigs = [];
     this._listeners = [];
-    this._viewConfigFactory = getViewConfigFactory();
+    this._viewConfigFactory = undefined;
     this._rootContext = undefined;
   }
 
   /**
    * Returns the singleton view service instance.
    */
-  $get = (): ViewService => this;
+  $get = [
+    $t._templateFactory,
+    ($templateFactory: TemplateFactoryProvider): ViewService => {
+      this._viewConfigFactory = getViewConfigFactory($templateFactory);
+
+      return this;
+    },
+  ];
 
   onSync(listener: (tuples: ViewTuple[]) => void): () => void {
     this._listeners.push(listener);
@@ -80,7 +89,7 @@ export class ViewService {
   }
 
   /**
-   * Gets or sets the root view context used for relative `ui-view` targeting.
+   * Gets or sets the root view context used for relative `ng-view` targeting.
    */
   rootViewContext(
     context?: StateObject | null,
@@ -119,7 +128,7 @@ export class ViewService {
   }
 
   /**
-   * Re-matches active `ui-view` instances against currently registered view configs
+   * Re-matches active `ng-view` instances against currently registered view configs
    * and notifies both the views and registered listeners of the new assignments.
    */
   sync(): void {
@@ -240,7 +249,7 @@ export class ViewService {
   }
 
   /**
-   * Registers one active `ui-view` and returns a deregistration function.
+   * Registers one active `ng-view` and returns a deregistration function.
    */
   registerUIView(ngView: ActiveUIView): () => void {
     trace.traceViewServiceUIViewEvent("-> Registering", ngView);
@@ -300,7 +309,7 @@ export class ViewService {
 
   /**
    * Builds a predicate that determines whether a view config matches
-   * a specific active `ui-view`.
+   * a specific active `ng-view`.
    */
   static matches(
     ngViewsByFqn: Record<string, ActiveUIView>,