@angular-wave/angular.ts 0.6.3 → 0.6.5

package/src/core/compile/compile.js

@@ -5,9 +5,9 @@ import {
   getOrSetCacheData,
   isTextNode,
   startingTag,
-} from "../../shared/jqlite/jqlite";
-import { identifierForController } from "../controller/controller";
-import { TTL } from "../scope/scope";
+} from "../../shared/jqlite/jqlite.js";
+import { identifierForController } from "../controller/controller.js";
+import { TTL } from "../scope/scope.js";
 import {
   minErr,
   assertArg,
@@ -31,13 +31,13 @@ import {
   simpleCompare,
   isError,
   directiveNormalize,
-} from "../../shared/utils";
-import { SCE_CONTEXTS } from "../sce/sce";
-import { PREFIX_REGEXP } from "../../shared/constants";
-import { createEventDirective } from "../../directive/events/events";
-import { CACHE, EXPANDO } from "../cache/cache";
-import { Attributes } from "./attributes";
-import { ngObserveDirective } from "../../directive/observe/observe";
+} from "../../shared/utils.js";
+import { SCE_CONTEXTS } from "../sce/sce.js";
+import { PREFIX_REGEXP } from "../../shared/constants.js";
+import { createEventDirective } from "../../directive/events/events.js";
+import { Cache, EXPANDO } from "../cache/cache.js";
+import { Attributes } from "./attributes.js";
+import { ngObserveDirective } from "../../directive/observe/observe.js";
 
 let ttl = TTL;
 
@@ -50,11 +50,10 @@ const $compileMinErr = minErr("$compile");
 
 const UNINITALIZED_VALIED = new Object();
 const EXCLUDED_DIRECTIVES = ["ngIf", "ngRepeat"];
-
+export const DIRECTIVE_SUFFIX = "Directive";
 CompileProvider.$inject = ["$provide", "$$sanitizeUriProvider"];
 export function CompileProvider($provide, $$sanitizeUriProvider) {
   const hasDirectives = {};
-  const Suffix = "Directive";
   const ALL_OR_NOTHING_ATTRS = {
     ngSrc: true,
     ngSrcset: true,
@@ -196,14 +195,14 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
       assertArg(directiveFactory, "directiveFactory");
       if (!Object.prototype.hasOwnProperty.call(hasDirectives, name)) {
         hasDirectives[name] = [];
-        $provide.factory(name + Suffix, [
+        $provide.factory(name + DIRECTIVE_SUFFIX, [
           "$injector",
           "$exceptionHandler",
           /**
            *
-           * @param {import("../../core/di/internal-injector").InjectorService} $injector
-           * @param {import('../exception-handler').ErrorHandler} $exceptionHandler
-           * @returns
+           * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
+           * @param {import("../exception-handler.js").ErrorHandler} $exceptionHandler
+           * @returns {import("../../types.js").Directive[]}
            */
           function ($injector, $exceptionHandler) {
             const directives = [];
@@ -524,7 +523,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
     "$sce",
     "$animate",
     /**
-     * @param {import("../../core/di/internal-injector").InjectorService} $injector
+     * @param {import("../../core/di/internal-injector.js").InjectorService} $injector
      * @param {*} $interpolate
      * @param {import("../exception-handler").ErrorHandler} $exceptionHandler
      * @param {*} $templateRequest
@@ -588,7 +587,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           : (x) => x.replace(/\{\{/g, startSymbol).replace(/}}/g, endSymbol);
 
       const NG_PREFIX_BINDING = /^ng(Attr|Prop|On|Observe)([A-Z].*)$/;
-      const MULTI_ELEMENT_DIR_RE = /^(.+)Start$/;
       return compile;
 
       //= ===============================
@@ -724,7 +722,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
        * Compile function matches each node in nodeList against the directives. Once all directives
        * for a particular node are collected their compile functions are executed. The compile
        * functions return values - the linking functions - are combined into a composite linking
-       * function, which is the a linking function for the node.
+       * function, which is the linking function for the node.
        *
        * @param {NodeList|JQLite} nodeList an array of nodes or NodeList to compile
        * @param {*} transcludeFn A linking function, where the
@@ -746,27 +744,29 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         previousCompileContext,
       ) {
         const linkFns = [];
-        let attrs;
-        let directives;
         /**
          * @type {any}
          */
-        var nodeLinkFn;
+        var nodeLinkFn = null;
         let childNodes;
         let childLinkFn;
         let linkFnFound;
         let nodeLinkFnFound;
 
         for (let i = 0; i < nodeList.length; i++) {
-          attrs = new Attributes($rootScope, $animate, $exceptionHandler, $sce);
+          const attrs = new Attributes(
+            $rootScope,
+            $animate,
+            $exceptionHandler,
+            $sce,
+          );
 
           // We must always refer to `nodeList[i]` hereafter,
           // since the nodes can be replaced underneath us.
-          directives = collectDirectives(
+          const directives = collectDirectives(
             /** @type Element */ (nodeList[i]),
-            [],
             attrs,
-            i === 0 ? maxPriority : undefined,
+            maxPriority,
             ignoreDirective,
           );
 
@@ -823,8 +823,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           let childLinkFn;
           let node;
           let childScope;
-          let i;
-          let ii;
           let idx;
           let childBoundTranscludeFn;
           let stableNodeList;
@@ -835,7 +833,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
             stableNodeList = new Array(nodeList.length);
 
             // create a sparse array by only copying the elements which have a linkFn
-            for (i = 0; i < linkFns.length; i += 3) {
+            for (let i = 0; i < linkFns.length; i += 3) {
               idx = linkFns[i];
               stableNodeList[idx] = nodeList[idx];
             }
@@ -843,7 +841,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
             stableNodeList = nodeList;
           }
 
-          for (i = 0, ii = linkFns.length; i < ii; ) {
+          for (let i = 0, ii = linkFns.length; i < ii; ) {
             node = stableNodeList[linkFns[i++]];
             nodeLinkFn = linkFns[i++];
             childLinkFn = linkFns[i++];
@@ -945,15 +943,14 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
        *        the function returns.
        * @param {Attributes|import("./attributes").AttributeLike} attrs The shared attrs object which is used to populate the normalized attributes.
        * @param {number=} maxPriority Max directive priority.
-       * @param {boolean=} ignoreDirective
+       * @param {string} [ignoreDirective]
+       * @return {import('../../types.js').Directive[]} An array to which the directives are added to. This array is sorted before the function returns.
        */
-      function collectDirectives(
-        node,
-        directives,
-        attrs,
-        maxPriority,
-        ignoreDirective,
-      ) {
+      function collectDirectives(node, attrs, maxPriority, ignoreDirective) {
+        /**
+         * @type {import('../../types.js').Directive[]}
+         */
+        const directives = [];
         const { nodeType } = node;
         const attrsMap = attrs.$attr;
         let nodeName;
@@ -961,49 +958,31 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         switch (nodeType) {
           case Node.ELEMENT_NODE /* Element */:
             nodeName = node.nodeName.toLowerCase();
-
-            // use the node name: <directive>
-            addDirective(
-              directives,
-              directiveNormalize(nodeName),
-              "E",
-              maxPriority,
-              ignoreDirective,
-            );
+            if (ignoreDirective !== directiveNormalize(nodeName)) {
+              // use the node name: <directive>
+              addDirective(
+                directives,
+                directiveNormalize(nodeName),
+                "E",
+                maxPriority,
+              );
+            }
 
             // iterate over the attributes
-            for (
-              var attr,
-                name,
-                nName,
-                value,
-                ngPrefixMatch,
-                nAttrs = node.attributes,
-                j = 0,
-                jj = nAttrs && nAttrs.length;
-              j < jj;
-              j++
-            ) {
-              /** @type {string|boolean} */
-              let attrStartName = false;
-
-              /** @type {string|boolean} */
-              let attrEndName = false;
-
+            for (let j = 0; j < node.attributes?.length; j++) {
               let isNgAttr = false;
               let isNgProp = false;
               let isNgEvent = false;
               let isNgObserve = false;
-              let multiElementMatch;
 
-              attr = nAttrs[j];
-              name = attr.name;
-              value = attr.value;
-
-              nName = directiveNormalize(name.toLowerCase());
+              let attr = node.attributes[j];
+              let name = attr.name;
+              let value = attr.value;
+              let nName = directiveNormalize(name.toLowerCase());
 
               // Support ng-attr-*, ng-prop-* and ng-on-*
-              if ((ngPrefixMatch = nName.match(NG_PREFIX_BINDING))) {
+              const ngPrefixMatch = nName.match(NG_PREFIX_BINDING);
+              if (ngPrefixMatch) {
                 isNgAttr = ngPrefixMatch[1] === "Attr";
                 isNgProp = ngPrefixMatch[1] === "Prop";
                 isNgEvent = ngPrefixMatch[1] === "On";
@@ -1015,15 +994,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                   .toLowerCase()
                   .substring(4 + ngPrefixMatch[1].length)
                   .replace(/_(.)/g, (match, letter) => letter.toUpperCase());
-
-                // Support *-start / *-end multi element directives
-              } else if (
-                (multiElementMatch = nName.match(MULTI_ELEMENT_DIR_RE)) &&
-                directiveIsMultiElement(multiElementMatch[1])
-              ) {
-                attrStartName = name;
-                attrEndName = `${name.substring(0, name.length - 5)}end`;
-                name = name.substring(0, name.length - 6);
               }
 
               if (isNgProp || isNgEvent) {
@@ -1033,10 +1003,19 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                 if (isNgProp) {
                   addPropertyDirective(node, directives, nName, name);
                 } else {
-                  addEventDirective(directives, nName, name);
+                  directives.push(
+                    createEventDirective(
+                      $parse,
+                      $rootScope,
+                      $exceptionHandler,
+                      nName,
+                      name,
+                      /* forceAsync= */ false,
+                    ),
+                  );
                 }
               } else if (isNgObserve) {
-                addObserveDirective(directives, name, value);
+                directives.push(ngObserveDirective(name, value));
               } else {
                 // Update nName for cases where a prefix was removed
                 // NOTE: the .toLowerCase() is unnecessary and causes https://github.com/angular/angular.js/issues/16624 for ng-attr-*
@@ -1060,15 +1039,10 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
                   nName,
                   isNgAttr,
                 );
-                addDirective(
-                  directives,
-                  nName,
-                  "A",
-                  maxPriority,
-                  ignoreDirective,
-                  attrStartName,
-                  attrEndName,
-                );
+
+                if (nName !== ignoreDirective) {
+                  addDirective(directives, nName, "A", maxPriority);
+                }
               }
             }
 
@@ -1093,62 +1067,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         return directives;
       }
 
-      /**
-       * Given a node with a directive-start it collects all of the siblings until it finds
-       * directive-end.
-       * @param {Element} node
-       * @param {string} attrStart
-       * @param {string} attrEnd
-       * @returns {*}
-       */
-      function groupScan(node, attrStart, attrEnd) {
-        const nodes = [];
-        let depth = 0;
-        if (attrStart && node.hasAttribute && node.hasAttribute(attrStart)) {
-          do {
-            if (!node) {
-              throw $compileMinErr(
-                "uterdir",
-                "Unterminated attribute, found '{0}' but no matching '{1}' found.",
-                attrStart,
-                attrEnd,
-              );
-            }
-            if (node.nodeType === Node.ELEMENT_NODE) {
-              if (node.hasAttribute(attrStart)) depth++;
-              if (node.hasAttribute(attrEnd)) depth--;
-            }
-            nodes.push(node);
-            node = /** @type {Element} */ (node.nextSibling);
-          } while (depth > 0);
-        } else {
-          nodes.push(node);
-        }
-
-        return JQLite(nodes);
-      }
-
-      /**
-       * Wrapper for linking function which converts normal linking function into a grouped
-       * linking function.
-       * @param linkFn
-       * @param attrStart
-       * @param attrEnd
-       * @returns {Function}
-       */
-      function groupElementsLinkFnWrapper(linkFn, attrStart, attrEnd) {
-        return function groupedElementsLink(
-          scope,
-          element,
-          attrs,
-          controllers,
-          transcludeFn,
-        ) {
-          element = groupScan(element[0], attrStart, attrEnd);
-          return linkFn(scope, element, attrs, controllers, transcludeFn);
-        };
-      }
-
       /**
        * A function generator that is used to support both eager and lazy compilation
        * linking function.
@@ -1540,17 +1458,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         // executes all directives on the current element
         for (let i = 0, ii = directives.length; i < ii; i++) {
           directive = directives[i];
-          const attrStart = directive.$$start;
-          const attrEnd = directive.$$end;
-
-          // collect multiblock sections
-          if (attrStart) {
-            $compileNode = groupScan(
-              /** @type {Element} */ (compileNode),
-              attrStart,
-              attrEnd,
-            );
-          }
           $template = undefined;
 
           if (terminalPriority > directive.priority) {
@@ -1828,7 +1735,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
               // - combine directives as: processed + template + unprocessed
               const templateDirectives = collectDirectives(
                 /** @type {Element} */ (compileNode),
-                [],
                 newTemplateAttrs,
               );
               const unprocessedDirectives = directives.splice(
@@ -1898,13 +1804,11 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
               );
               const context = directive.$$originalDirective || directive;
               if (isFunction(linkFn)) {
-                addLinkFns(null, bind(context, linkFn), attrStart, attrEnd);
+                addLinkFns(null, bind(context, linkFn));
               } else if (linkFn) {
                 addLinkFns(
                   bind(context, linkFn.pre),
                   bind(context, linkFn.post),
-                  attrStart,
-                  attrEnd,
                 );
               }
             } catch (e) {
@@ -1932,10 +1836,8 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
 
         /// /////////////////
 
-        function addLinkFns(pre, post, attrStart, attrEnd) {
+        function addLinkFns(pre, post) {
           if (pre) {
-            if (attrStart)
-              pre = groupElementsLinkFnWrapper(pre, attrStart, attrEnd);
             pre.require = directive.require;
             pre.directiveName = directiveName;
             if (
@@ -1947,8 +1849,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
             preLinkFns.push(pre);
           }
           if (post) {
-            if (attrStart)
-              post = groupElementsLinkFnWrapper(post, attrStart, attrEnd);
             post.require = directive.require;
             post.directiveName = directiveName;
             if (
@@ -2103,45 +2003,25 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
        * looks up the directive and decorates it with exception handling and proper parameters. We
        * call this the boundDirective.
        *
+       * @param {import('../../types.js').Directive[]} tDirectives
        * @param {string} name name of the directive to look up.
        * @param {string} location The directive must be found in specific format.
        *   String containing any of these characters:
-       *
        *   * `E`: element name
        *   * `A': attribute
+       * @param maxPriority
        * @returns {boolean} true if directive was added.
        */
-      function addDirective(
-        tDirectives,
-        name,
-        location,
-        maxPriority,
-        ignoreDirective,
-        startAttrName,
-        endAttrName,
-      ) {
-        if (name === ignoreDirective) return false;
+      function addDirective(tDirectives, name, location, maxPriority) {
         let match = false;
         if (Object.prototype.hasOwnProperty.call(hasDirectives, name)) {
-          for (
-            let directive,
-              directives = $injector.get(name + Suffix),
-              i = 0,
-              ii = directives.length;
-            i < ii;
-            i++
-          ) {
-            directive = directives[i];
+          let directives = $injector.get(name + DIRECTIVE_SUFFIX);
+          for (let i = 0, ii = directives.length; i < ii; i++) {
+            let directive = directives[i];
             if (
               (isUndefined(maxPriority) || maxPriority > directive.priority) &&
               directive.restrict.indexOf(location) !== -1
             ) {
-              if (startAttrName) {
-                directive = inherit(directive, {
-                  $$start: startAttrName,
-                  $$end: endAttrName,
-                });
-              }
               if (!directive.$$bindings) {
                 const bindings = (directive.$$bindings = parseDirectiveBindings(
                   directive,
@@ -2159,33 +2039,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         return match;
       }
 
-      /**
-       * looks up the directive and returns true if it is a multi-element directive,
-       * and therefore requires DOM nodes between -start and -end markers to be grouped
-       * together. Example: `<div my-directive-start></div><div><div/><div my-directive-end></div>`
-       *
-       * @param {string} name name of the directive to look up.
-       * @returns true if directive was registered as multi-element.
-       */
-      function directiveIsMultiElement(name) {
-        if (Object.prototype.hasOwnProperty.call(hasDirectives, name)) {
-          for (
-            let directive,
-              directives = $injector.get(name + Suffix),
-              i = 0,
-              ii = directives.length;
-            i < ii;
-            i++
-          ) {
-            directive = directives[i];
-            if (directive.multiElement) {
-              return true;
-            }
-          }
-        }
-        return false;
-      }
-
       /**
        * When the element is replaced with HTML template then the new attributes
        * on the template need to be merged with the existing attributes in the DOM.
@@ -2295,7 +2148,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
               replaceWith($rootElement, $compileNode, compileNode);
               const templateDirectives = collectDirectives(
                 compileNode,
-                [],
                 tempTemplateAttrs,
               );
 
@@ -2458,15 +2310,13 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
       }
 
       function addTextInterpolateDirective(directives, text) {
-        const interpolateFn = $interpolate(text, true); // Create interpolation function
+        const interpolateFn = $interpolate(text, true);
         if (interpolateFn) {
           directives.push({
             priority: 0,
-            // When transcluding a template that has bindings in the root
-            // we don't have a parent and thus need to add the class during linking fn.
             compile: () => (scope, node) => {
               scope.$watch(interpolateFn, (value) => {
-                node[0].nodeValue = value; // Update text node with new interpolated value
+                node[0].nodeValue = value;
               });
             },
           });
@@ -2538,10 +2388,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         );
       }
 
-      function sanitizeSrcsetPropertyValue(value) {
-        return sanitizeSrcset($sce.valueOf(value), "ng-prop-srcset");
-      }
-
       function sanitizeSrcset(value, invokeType) {
         if (!value) {
           return value;
@@ -2614,7 +2460,8 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           propName === "srcset" &&
           (nodeName === "img" || nodeName === "source")
         ) {
-          sanitizer = sanitizeSrcsetPropertyValue;
+          sanitizer = (value) =>
+            sanitizeSrcset($sce.valueOf(value), "ng-prop-srcset");
         } else if (trustedContext) {
           sanitizer = $sce.getTrusted.bind($sce, trustedContext);
         }
@@ -2643,23 +2490,6 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
         });
       }
 
-      function addEventDirective(directives, attrName, eventName) {
-        directives.push(
-          createEventDirective(
-            $parse,
-            $rootScope,
-            $exceptionHandler,
-            attrName,
-            eventName,
-            /* forceAsync= */ false,
-          ),
-        );
-      }
-
-      function addObserveDirective(directives, source, prop) {
-        directives.push(ngObserveDirective(source, prop));
-      }
-
       function addAttrInterpolateDirective(
         node,
         directives,
@@ -2800,7 +2630,7 @@ export function CompileProvider($provide, $$sanitizeUriProvider) {
           fragment.appendChild(elementsToRemove[i]);
         }
 
-        if (CACHE.has(firstElementToRemove[EXPANDO])) {
+        if (Cache.has(firstElementToRemove[EXPANDO])) {
           // Copy over user data (that includes AngularJS's $scope etc.). Don't copy private
           // data here because there's no public interface in jQuery to do that and copying over
           // event listeners (which is the main use of private data) wouldn't work anyway.

package/src/core/compile/compile.md

@@ -70,7 +70,6 @@
 -       {@link $compile#-controlleras- controllerAs}: 'stringIdentifier',
 -       {@link $compile#-bindtocontroller- bindToController}: false,
 -       {@link $compile#-require- require}: 'siblingDirectiveName', // or // ['^parentDirectiveName', '?optionalDirectiveName', '?^optionalParent'],
--       {@link $compile#-multielement- multiElement}: false,
 -       {@link $compile#-compile- compile}: function compile(tElement, tAttrs, transclude) {
 -         return {
 -            {@link $compile#pre-linking-function pre}: function preLink(scope, iElement, iAttrs, controller) { ... },
@@ -234,13 +233,6 @@
 - The directive definition object provides instructions to the {@link ng.$compile
 - compiler}. The attributes are:
 -
-- #### `multiElement`
-- When this property is set to true (default is `false`), the HTML compiler will collect DOM nodes between
-- nodes with the attributes `directive-name-start` and `directive-name-end`, and group them
-- together as the directive elements. It is recommended that this feature be used on directives
-- which are not strictly behavioral (such as {@link ngClick}), and which
-- do not manipulate or replace child nodes (such as {@link ngInclude}).
--
 - #### `priority`
 - When there are multiple directives defined on a single DOM element, sometimes it
 - is necessary to specify the order in which the directives are applied. The `priority` is used