Use compiled directives where available

Author: allmarkedup

src/directives.js

@@ -1,7 +1,8 @@
 import { onAttributeRemoved } from "./mutation";
 import { elementBoundEffect, isReactive } from "./reactivity";
-import { applyModifiers } from "./modifiers";
+import { applyModifiers, parseModifier } from "./modifiers";
 import { getClosestController, evaluateControllerProperty } from "./controller";
+import { options } from "./lifecycle";
 
 let directiveHandlers = {};
 let isDeferringHandlers = false;
@@ -19,7 +20,16 @@ export function directiveExists(name) {
 }
 
 export function directives(el, attributes) {
-  const directives = Array.from(attributes).filter(isDirectiveAttribute).map(toParsedDirectives);
+  let directives = [];
+
+  if (el.__stimulusX_directives) {
+    console.log("using compiled directives");
+    directives = el.__stimulusX_directives;
+  } else {
+    directives = Array.from(attributes).filter(isDirectiveAttribute).map(toParsedDirectives);
+    if (options.compileDirectives) el.__stimulusX_directives = directives;
+  }
+
   return directives
     .flat()
     .filter((d) => d)
@@ -135,6 +145,8 @@ function toParsedDirectives({ name, value }) {
       modifiers.push("not");
     }
 
+    modifiers = modifiers.map((m) => parseModifier(m));
+
     const identifierMatch = valueExpression.match(/^([a-zA-Z0-9\-_]+)#/);
     if (!identifierMatch) {
       console.warn(`Invalid binding descriptor ${bindingExpression}`);

src/lifecycle.js

@@ -14,15 +14,19 @@ import { deferHandlingDirectives, directives } from "./directives";
 
 const defaultOptions = {
   optIn: false,
+  compileDirectives: true,
 };
 
 let markerCount = 1;
 let application = null;
+let options = defaultOptions;
 
 export function init(app, opts = {}) {
-  const { optIn } = Object.assign({}, defaultOptions, opts);
+  options = Object.assign({}, defaultOptions, opts);
   application = app;
 
+  const { optIn } = options;
+
   // Override controller registration to insert a reactive subclass instead of the original
   application.register = function (identifier, ControllerClass) {
     let controllerConstructor;
@@ -75,6 +79,7 @@ export function destroyTree(root) {
   walk(root, (el) => {
     cleanupElement(el);
     cleanupAttributes(el);
+    delete el.__stimulusX_directives;
     delete el.__stimulusX_marker;
   });
 }
@@ -123,4 +128,4 @@ function handleValueAttributes(el, attrs) {
   }
 }
 
-export { application };
+export { application, options };

src/modifiers.js

@@ -9,7 +9,7 @@ export function modifier(name, handler) {
 
 export function applyModifiers(value, modifiers = []) {
   return modifiers.reduce((value, modifier) => {
-    const { name, args } = parseModifierNameAndArguments(modifier);
+    const { name, args } = modifier;
     if (modifierExists(name)) {
       return applyModifier(value, name, args);
     } else {
@@ -31,7 +31,7 @@ function getModifier(name) {
   return modifierHandlers.find((modifier) => modifier.name === name);
 }
 
-function parseModifierNameAndArguments(modifier) {
+export function parseModifier(modifier) {
   const matches = modifier.match(/^([^\(]+)(?=\((?=(.*)\)$)|$)/);
 
   if (matches && typeof matches[2] !== "undefined") {