perf: do not recompile every list render

aidenybai · Feb 21, 2021 · 261ae21 · 261ae21
1 parent 6bef826
commit 261ae21
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/core/directives/bind.ts b/src/core/directives/bind.ts
@@ -29,7 +29,7 @@ export const bindDirective = ({ el, name, data, state }: DirectiveProps) => {
         }
 
         const removeDynamicClassesRE = new RegExp(
-          `\\b${Object.keys(hydratedClasses).join('|')}\\b`,
+          `\\s*${Object.keys(hydratedClasses).join('|')}\\s*`,
           'gim'
         );
         const rawClasses = el.className.replace(removeDynamicClassesRE, '');
@@ -39,12 +39,13 @@ export const bindDirective = ({ el, name, data, state }: DirectiveProps) => {
             'class',
             formatAcceptableWhitespace(`${rawClasses} ${classes.join(' ')}`)
           );
-        } else if (formatAcceptableWhitespace(el.className).length > 0) {
+        } else if (formatAcceptableWhitespace(rawClasses).length > 0) {
           return el.setAttribute('class', formatAcceptableWhitespace(rawClasses));
-        } else {
+        } else if (el.hasAttribute('class')) {
           return el.removeAttribute('class');
         }
       }
+
     case 'style':
       // Accept object and set properties based on boolean state value
       const hydratedStyles = data.compute(state);

diff --git a/src/core/directives/for.ts b/src/core/directives/for.ts
@@ -59,7 +59,10 @@ export const forDirective = ({ el, data, state, node }: DirectiveProps) => {
     }
   }
 
-  if (!marker) adjustDeps(ast, data.deps, node, 'for');
+  if (!marker) {
+    adjustDeps(ast, data.deps, node, 'for');
+    setElementCustomProp(el, '__l_for_ast', compile(el, state));
+  }
 
-  render(compile(el, state), directives, state, node.deps);
+  render(getElementCustomProp(el, '__l_for_ast'), directives, state, node.deps);
 };