refactor: compile on demand l-html

Author: aidenybai

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);
+    }
   }
 };

src/core/directives/text.ts

@@ -1,9 +1,8 @@
 import { DirectiveProps } from '../../models/structs';
 
-export const textDirective = ({ el, parts, data, state }: DirectiveProps): void => {
+export const textDirective = ({ el, data, state }: DirectiveProps): void => {
   const ret = data.compute(state) ?? data.value;
-  const prop = parts[1] === 'perf' ? 'textContent' : 'innerText';
-  if (ret !== el[prop]) {
-    el[prop] = ret;
+  if (ret !== el.textContent) {
+    el.textContent = ret;
   }
 };