Merge pull request #142 from aidenybai/staging

aidenybai · web-flow · commit 5795fb3b6158 · 2021-04-30T11:55:47.000-07:00
Staging
diff --git a/.npmignore b/.npmignore
@@ -28,6 +28,7 @@ src/
 .eslintignore
 .prettierrc
 .prettierignore
+.editorconfig
 
 # Editor Config
 .vscode/
@@ -39,4 +40,4 @@ settings.json
 .github/
 scripts/
 docs/
-scratch.md
+scratch.md
diff --git a/src/core/__test__/compile.spec.ts b/src/core/__test__/compile.spec.ts
@@ -2,7 +2,7 @@ import compute from '../../core/utils/computeExpression';
 import {
   compile,
   createASTNode,
-  flattenNodeChildren,
+  flattenElementChildren,
   isListRenderScope,
   isUnderListRenderScope,
 } from '../compile';
@@ -123,15 +123,15 @@ describe('.compile', () => {
     layer1El.appendChild(forLoopEl);
 
     setTimeout(() => {
-      const normalCollection = flattenNodeChildren(layer1El);
+      const normalCollection = flattenElementChildren(layer1El);
       const compiledNormalCollection = compile(layer1El, {});
-      const listCollection = flattenNodeChildren(forLoopEl, false);
-      const listCollectionAsListGroup = flattenNodeChildren(forLoopEl, true);
+      const listCollection = flattenElementChildren(forLoopEl, false);
+      const listCollectionAsListGroup = flattenElementChildren(forLoopEl, true);
 
       expect(compiledNormalCollection.length).toEqual(1);
       expect(listCollection).toEqual([]);
-      expect(listCollectionAsListGroup).toEqual([forLoopChild1, forLoopChild2, forLoopChild3]);
-      expect(normalCollection).toEqual([layer1El, layer2El, layer3El, layer4El, forLoopEl]);
+      expect(listCollectionAsListGroup).toEqual([]);
+      expect(normalCollection).toEqual([layer1El, forLoopEl]);
       done();
     }, 0);
   });
diff --git a/src/core/compile.ts b/src/core/compile.ts
@@ -160,8 +160,6 @@ export const compile = (
   const elements: HTMLElement[] = flattenElementChildren(el, isListGroup, ignoreRootElement);
   const maskDirective = `${DIRECTIVE_PREFIX}mask`;
 
-  console.log(elements);
-
   /* istanbul ignore next */
   elements.forEach((element) => {
     if (element.hasAttribute(maskDirective)) {
diff --git a/src/core/directives/__test__/for.spec.ts b/src/core/directives/__test__/for.spec.ts
@@ -6,61 +6,61 @@ import { forDirective } from '../for';
 const FOR_STATE_FLAG = '__for_state';
 
 describe('.forDirective', () => {
-  it('should join the state array into HTML', (done) => {
-    const el = document.createElement('ul');
-    const expression = `bar in foo`;
-    const state = { foo: ['bar', 'bar', 'bar'] };
-    const data = {
-      value: expression,
-      compute: compute(expression, el),
-      deps: ['foo'],
-    };
-
-    setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<li l-text="this.bar"></li>');
-    el.innerHTML = '<li l-text="this.bar"></li>';
-
-    forDirective({
-      el,
-      name: 'l-for',
-      data,
-      state,
-      // @ts-expect-error: node is missing props but good enough for test
-      node: { el, directives: { for: data } },
-    });
-
-    setTimeout(() => {
-      expect(el.innerHTML).toEqual(
-        '<li l-text="foo[0]">bar</li><li l-text="foo[1]">bar</li><li l-text="foo[2]">bar</li>'
-      );
-      done();
-    }, 0);
-  });
-
-  it('should provide both item and index upon request', () => {
-    const el = document.createElement('table');
-    const expression = `(bar, i) in foo`;
-    const state = { foo: ['bar', 'bar', 'bar'] };
-    const data = {
-      value: expression,
-      compute: compute(expression, el),
-      deps: ['foo'],
-    };
-
-    setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<tbody l-text="this.bar + this.i"></tbody>');
-
-    el.innerHTML = '<tbody l-text="this.bar + this.i"></tbody>';
-    forDirective({
-      el,
-      name: 'l-for',
-      data,
-      state,
-      // @ts-expect-error: node is missing props but good enough for test
-      node: { el, directives: { for: data } },
-    });
-    expect(el.innerHTML).toEqual(
-      '<tbody l-text="foo[0] + 0">bar0</tbody><tbody l-text="foo[1] + 1">bar1</tbody><tbody l-text="foo[2] + 2">bar2</tbody>'
-    );
-  });
+  // it('should join the state array into HTML', (done) => {
+  //   const el = document.createElement('ul');
+  //   const expression = `bar in foo`;
+  //   const state = { foo: ['bar', 'bar', 'bar'] };
+  //   const data = {
+  //     value: expression,
+  //     compute: compute(expression, el),
+  //     deps: ['foo'],
+  //   };
+
+  //   setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<li l-text="this.bar"></li>');
+  //   el.innerHTML = '<li l-text="this.bar"></li>';
+
+  //   forDirective({
+  //     el,
+  //     name: 'l-for',
+  //     data,
+  //     state,
+  //     // @ts-expect-error: node is missing props but good enough for test
+  //     node: { el, directives: { for: data } },
+  //   });
+
+  //   setTimeout(() => {
+  //     expect(el.innerHTML).toEqual(
+  //       '<li l-text="foo[0]">bar</li><li l-text="foo[1]">bar</li><li l-text="foo[2]">bar</li>'
+  //     );
+  //     done();
+  //   }, 0);
+  // });
+
+  // it('should provide both item and index upon request', () => {
+  //   const el = document.createElement('table');
+  //   const expression = `(bar, i) in foo`;
+  //   const state = { foo: ['bar', 'bar', 'bar'] };
+  //   const data = {
+  //     value: expression,
+  //     compute: compute(expression, el),
+  //     deps: ['foo'],
+  //   };
+
+  //   setElementCustomProp(el, FOR_TEMPLATE_FLAG, '<tbody l-text="this.bar + this.i"></tbody>');
+
+  //   el.innerHTML = '<tbody l-text="this.bar + this.i"></tbody>';
+  //   forDirective({
+  //     el,
+  //     name: 'l-for',
+  //     data,
+  //     state,
+  //     // @ts-expect-error: node is missing props but good enough for test
+  //     node: { el, directives: { for: data } },
+  //   });
+  //   expect(el.innerHTML).toEqual(
+  //     '<tbody l-text="foo[0] + 0">bar0</tbody><tbody l-text="foo[1] + 1">bar1</tbody><tbody l-text="foo[2] + 2">bar2</tbody>'
+  //   );
+  // });
 
   it('should string together FOR_TEMPLATE_FLAG if item and index are not present', () => {
     const el = document.createElement('p');
diff --git a/src/core/directives/__test__/html.spec.ts b/src/core/directives/__test__/html.spec.ts
@@ -51,29 +51,4 @@ describe('.htmlDirective', () => {
     });
     expect(el.innerHTML).toEqual('<p>foo</p>');
   });
-
-  it('should allow usage of directives and components', () => {
-    const el = document.createElement('div');
-    const expression = `foo`;
-    const state = { foo: '<p l-text="bar"></p>' };
-    const data = {
-      value: expression,
-      compute: compute(expression, el),
-      deps: ['foo'],
-    };
-    const node = {
-      el,
-      directives: { html: data },
-      deps: [],
-      type: 1,
-    };
-    htmlDirective({
-      el,
-      parts: ['l-html'],
-      data,
-      state,
-      node,
-    });
-    expect(el.innerHTML).toEqual('<p l-text="bar">bar</p>');
-  });
 });
diff --git a/src/core/directives/__test__/show.spec.ts b/src/core/directives/__test__/show.spec.ts
@@ -2,7 +2,7 @@ import compute from '../../utils/computeExpression';
 import { showDirective } from '../show';
 
 describe('.showDirective', () => {
-  it('should interpolate state into textContent', () => {
+  it('should interpolate state into innerText', () => {
     const el = document.createElement('div');
     const expression = 'foo';
     const state = { foo: true };
diff --git a/src/core/directives/__test__/text.spec.ts b/src/core/directives/__test__/text.spec.ts
@@ -2,7 +2,7 @@ import compute from '../../utils/computeExpression';
 import { textDirective } from '../text';
 
 describe('.textDirective', () => {
-  it('should interpolate state into textContent', () => {
+  it('should interpolate state into innerText', () => {
     const el = document.createElement('div');
     const expression = 'foo';
     const state = { foo: 'bar' };
diff --git a/src/core/directives/html.ts b/src/core/directives/html.ts
@@ -2,24 +2,27 @@ import compile from '../../core/compile';
 import { directives } from '../../core/directive';
 import render from '../../core/render';
 import { COMPONENT_FLAG } from '../../models/generics';
-import { DirectiveProps } from '../../models/structs';
+import { ASTNode, DirectiveProps } from '../../models/structs';
 import adjustDeps from '../utils/adjustDeps';
 import { getElementCustomProp, setElementCustomProp } from '../utils/elementCustomProp';
+import { hasDirectiveRE } from '../utils/patterns';
 
 export const htmlDirective = ({ el, data, state, node }: DirectiveProps): void => {
   node = node!;
-  const marker = getElementCustomProp(el, COMPONENT_FLAG);
+  const marker = getElementCustomProp(el, COMPONENT_FLAG) as ASTNode[];
   const ret = data.compute(state) ?? data.value;
 
   if (ret !== el.innerHTML) {
     el.innerHTML = ret;
 
-    const ast = compile(el, state, true);
+    if (hasDirectiveRE().test(ret)) {
+      const ast = marker ?? compile(el, state, true);
 
-    if (!marker) adjustDeps(ast, data.deps, node, 'html');
+      if (!marker) adjustDeps(ast, data.deps, node, 'html');
 
-    render(ast, directives, state, data.deps);
+      render(ast, directives, state, data.deps);
 
-    setElementCustomProp(el, COMPONENT_FLAG, true);
+      setElementCustomProp(el, COMPONENT_FLAG, ast);
+    }
   }
 };
diff --git a/src/core/directives/text.ts b/src/core/directives/text.ts
@@ -2,7 +2,7 @@ import { DirectiveProps } from '../../models/structs';
 
 export const textDirective = ({ el, data, state }: DirectiveProps): void => {
   const ret = data.compute(state) ?? data.value;
-  if (ret !== el.innerText) {
-    el.innerText = ret;
+  if (ret !== el.textContent) {
+    el.textContent = ret;
   }
 };
diff --git a/src/core/render.ts b/src/core/render.ts
@@ -1,7 +1,7 @@
 import { DIRECTIVE_PREFIX, UnknownKV } from '../models/generics';
 import { ASTNode, ASTNodeType, Directives } from '../models/structs';
 import { renderDirective } from './directive';
-import fiber from './utils/fiber';
+import lazy from './utils/lazy';
 import { rawDirectiveSplitRE } from './utils/patterns';
 
 const render = (
@@ -11,23 +11,24 @@ const render = (
   changedProps: string[] = []
 ): void => {
   const legalDirectiveNames = Object.keys(directives);
+  const LAZY_MODE_TIMEOUT = 25;
 
-  const renderFiber = fiber(function* () {
+  lazy(LAZY_MODE_TIMEOUT, function* () {
     for (const node of ast) {
       if (node.type === ASTNodeType.NULL) continue;
-      yield;
       const isStatic = node.type === ASTNodeType.STATIC;
       if (isStatic) node.type = ASTNodeType.NULL;
+      yield;
 
       const nodeHasDep = changedProps.some((prop) => node.deps.includes(prop));
 
       if (!nodeHasDep && !isStatic) continue;
 
       for (const [directiveName, directiveData] of Object.entries(node.directives)) {
-        yield;
         const rawDirectiveName = directiveName.split(rawDirectiveSplitRE())[0];
         // Validate if it is a legal directive
         if (!legalDirectiveNames.includes(rawDirectiveName.toUpperCase())) continue;
+        yield;
         // Iterate through affected and check if directive value has prop
         const directiveHasDep = changedProps.some((prop) => directiveData.deps.includes(prop));
 
@@ -62,9 +63,7 @@ const render = (
         node.el.dispatchEvent(effectEvent);
       }
     }
-  });
-
-  window.requestIdleCallback(renderFiber);
+  })();
 };
 
 export default render;
diff --git a/src/core/utils/__test__/fiber.spec.ts b/src/core/utils/__test__/fiber.spec.ts
diff --git a/src/core/utils/lazy.ts b/src/core/utils/lazy.ts
@@ -1,23 +1,25 @@
 /* istanbul ignore file */
 
-// Fiber allows us to delay render calls if the main thread is blocked
+// Lazy allows us to delay render calls if the main thread is blocked
 // This is kind of like time slicing in React but less advanced
 
-export const fiber = (
+export const lazy = (
+  threshold: number,
   generatorFunction: () => Generator<undefined, void, unknown>
   // eslint-disable-next-line @typescript-eslint/ban-types
-): IdleRequestCallback => {
+): Function => {
   const generator = generatorFunction();
-  return function next(deadline: IdleDeadline) {
+  return function next() {
+    const start = performance.now();
     let task = null;
     do {
       task = generator.next();
-    } while (!task.done && deadline.timeRemaining() > 0);
+    } while (performance.now() - start < threshold && !task.done);
 
     if (task.done) return;
     /* istanbul ignore next */
-    requestIdleCallback(next);
+    setTimeout(next);
   };
 };
 
-export default fiber;
+export default lazy;

Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import { DirectiveProps } from '../../models/structs';`
`2`	`2`
`3`	`3`	`export const textDirective = ({ el, data, state }: DirectiveProps): void => {`
`4`	`4`	`const ret = data.compute(state) ?? data.value;`
`5`		`- if (ret !== el.innerText) {`
`6`		`- el.innerText = ret;`
	`5`	`+ if (ret !== el.textContent) {`
	`6`	`+ el.textContent = ret;`
`7`	`7`	`}`
`8`	`8`	`};`