Merge pull request #110 from aidenybai/staging

Author: aidenybai

src/component.ts

@@ -1,4 +1,5 @@
-/* istanbul ignore next */
+/* istanbul ignore file */
+
 import { Directives, DirectiveProps, Watchers, State, ASTNode } from './models/structs';
 
 import { directives } from './core/directive';

src/core/directives/for.ts

@@ -1,7 +1,7 @@
 /* istanbul ignore file */
 
 import { DIRECTIVE_PREFIX } from '../../models/generics';
-import { DirectiveProps } from '../../models/structs';
+import { ASTNode, DirectiveProps } from '../../models/structs';
 
 import compile from '../../core/compile';
 import render from '../../core/render';
@@ -15,9 +15,9 @@ import computeExpression from '../utils/computeExpression';
 // This directive is size-based, not content-based, since everything is compiled and rerendered
 
 export const forDirective = ({ el, data, state, node }: DirectiveProps): void => {
-  const marker = getElementCustomProp(el, 'component');
-
-  setElementCustomProp(el, 'component', true);
+  const originalAST = getElementCustomProp(el, 'component');
+  // Initial compilation
+  if (!originalAST) setElementCustomProp(el, 'component', compile(el, state));
 
   const forLoopRE = /\s+(?:in|of)\s+/gim;
   const [expression, target] = data.value.split(forLoopRE);
@@ -26,7 +26,6 @@ export const forDirective = ({ el, data, state, node }: DirectiveProps): void =>
   // Try to grab by property, else compute it if it's a custom array
   const currArray =
     (state[target?.trim()] as unknown[]) ?? computeExpression(target?.trim(), el, true)(state);
-  const ast = compile(el, state);
 
   const template = getElementCustomProp(el, '__for_template');
   if (el.innerHTML.trim() === template) el.innerHTML = '';
@@ -66,13 +65,16 @@ export const forDirective = ({ el, data, state, node }: DirectiveProps): void =>
         el.appendChild(isTable ? fragment.firstElementChild.firstElementChild : fragment);
       }
     }
+    setElementCustomProp(el, 'component', compile(el, state));
   }
 
-  if (!marker) {
+  if (!originalAST) {
     // Deps recompiled because child nodes may have additional deps
-    adjustDeps(ast, data.deps, node!, 'for');
+    adjustDeps(getElementCustomProp(el, 'component') as ASTNode[], data.deps, node!, 'for');
     el.removeAttribute(`${DIRECTIVE_PREFIX}for`);
   }
 
-  render(compile(el, state, true), directives, state, node!.deps);
+  // Only recompile if there is no increase/decrease in array size, else use the original AST
+  const ast = arrayDiff === 0 ? (originalAST as ASTNode[]) : compile(el, state, true);
+  render(ast, directives, state, node!.deps);
 };

src/core/render.ts

@@ -15,6 +15,7 @@ const render = (
 
   concurrent(function* () {
     for (const node of ast) {
+      yield;
       const isStatic = node.type === ASTNodeType.STATIC;
       if (isStatic) node.type = ASTNodeType.NULL;
 

src/core/utils/__test__/computeExpression.spec.ts

@@ -4,25 +4,27 @@ describe('.compute', () => {
   it('should use key-based retrieval during computation', () => {
     const el = document.createElement('div');
 
-    expect(computeExpression('count', el)({ count: 0 })).toEqual(0);
+    expect(computeExpression('count', el, true, {}, ['count'])({ count: 0 })).toEqual(0);
   });
 
   it('should compute correctly', () => {
     const el = document.createElement('div');
-    expect(computeExpression('count + 1', el)({ count: 0 })).toEqual(1);
+    expect(computeExpression('count + 1', el, true, {}, ['count'])({ count: 0 })).toEqual(1);
   });
 
   it('should not return the value', () => {
     const el = document.createElement('div');
-    expect(computeExpression('count + 1', el, false)({ count: 0 })).toEqual(undefined);
+    expect(computeExpression('count + 1', el, false, {}, ['count'])({ count: 0 })).toEqual(
+      undefined
+    );
   });
 
   it('should emit and access an event', () => {
     const el = document.createElement('div');
 
     expect(
       // @ts-expect-error: 'foo' cannot be passed as an Event, but good enough for our use case
-      computeExpression(`$emit('customEvent', $el); return $event`, el, false)({}, 'foo')
+      computeExpression(`$emit('customEvent', $el); return $event`, el, false, {}, [])({}, 'foo')
     ).toEqual('foo');
   });
 });

src/core/utils/computeExpression.ts

@@ -7,15 +7,20 @@ export const computeExpression = (
   el?: HTMLElement,
   returnable = true,
   refs: Refs = {},
-  deps: string[] = []
+  deps?: string[]
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): ((state: UnknownKV, event?: Event) => any) => {
   // This dynamically appends `$state.` to the front of standalone props, allowing the
   // user to write less and us to compile and run faster without with() {}
   let formattedExpression = `${returnable ? `return ${expression}` : expression}`;
-  deps.forEach((dep) => {
-    formattedExpression = formattedExpression.replace(expressionPropRE(dep), `$state.${dep}`);
-  });
+  if (deps) {
+    deps.forEach((dep) => {
+      formattedExpression = formattedExpression.replace(expressionPropRE(dep), `$state.${dep}`);
+    });
+  } else {
+    formattedExpression = `with($state){${formattedExpression}}`;
+  }
+
   return (state: UnknownKV, event?: Event) => {
     try {
       const value = state[expression];