[chore] unify props (#80)

* unify props * +
lifeart · Jan 30, 2024 · 6172e2e · 6172e2e
1 parent c20c780
commit 6172e2e
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 66 deletions.
diff --git a/plugins/converter.test.ts b/plugins/converter.test.ts
@@ -162,7 +162,7 @@ describe.each([
     describe('basic element helper support', () => {
       test('it return kinda valid component-like code', () => {
         expect($t<ASTv1.BlockStatement>(`{{(element "tag")}}`)).toEqual(
-          `$:() => $:function(args,props){const $slots = $_GET_SLOTS(this, arguments);return{[$nodes]:[$_tag("tag",[props[$propsProp],props[$attrsProp],props[$eventsProp]],[()=>$_slot('default',()=>[],$slots)], this)], ctx: this};}`,
+          `$:() => $:function(args){const $fw = $_GET_FW(this, arguments);const $slots = $_GET_SLOTS(this, arguments);return{[$nodes]:[$_tag("tag", $fw,[()=>$_slot('default',()=>[],$slots)], this)], ctx: this};}`,
         );
       });
     });

diff --git a/plugins/converter.ts b/plugins/converter.ts
@@ -104,13 +104,14 @@ export function convert(seenNodes: Set<ASTv1.Node>, flags: Flags) {
       patchNodePath(node);
 
       if (node.path.original === 'element') {
-        return `$:function(args,props){const $slots = ${
+        // @todo  - write test to catch props issue here
+        return `$:function(args){const $fw = ${
+          SYMBOLS.$_GET_FW
+        }(this, arguments);const $slots = ${
           SYMBOLS.$_GET_SLOTS
         }(this, arguments);return{[${SYMBOLS.$nodes}]:[${
           SYMBOLS.TAG
-        }(${ToJSType(node.params[0])},[props[${SYMBOLS.$propsProp}],props[${
-          SYMBOLS.$attrsProp
-        }],props[${SYMBOLS.$eventsProp}]],[()=>${
+        }(${ToJSType(node.params[0])}, $fw,[()=>${
           SYMBOLS.SLOT
         }('default',()=>[],$slots)], this)], ctx: this};}`;
       } else if (node.path.original === SYMBOLS.$__hash) {

diff --git a/plugins/symbols.ts b/plugins/symbols.ts
@@ -19,11 +19,8 @@ export const SYMBOLS = {
   $_hasBlock: '$_hasBlock',
   $nodes: '$nodes',
   $args: '$args',
-  $propsProp: '$propsProp',
-  $attrsProp: '$attrsProp',
   $_inElement: '$_inElement',
   $_ucw: '$_ucw',
-  $eventsProp: '$eventsProp',
   $__if: '$__if',
   $__eq: '$__eq',
   $__debugger: '$__debugger',

diff --git a/plugins/utils.ts b/plugins/utils.ts
@@ -269,7 +269,7 @@ function toArgs(
 ) {
   if (flags.IS_GLIMMER_COMPAT_MODE === false) {
     const extraArgs = [...args];
-    if (props !== '{}') {
+    if (props !== '{}' && !props.includes(SYMBOLS.EMPTY_DOM_PROPS)) {
       extraArgs.push([`$:[${SYMBOLS.$PROPS_SYMBOL}]`, `$:${props}`]);
     }
     if (slots !== '{}') {
@@ -280,7 +280,9 @@ function toArgs(
 
   const result = `${SYMBOLS.ARGS}(${toObject(args)},${slots},${props})`;
 
-  return result.replace(`${SYMBOLS.ARGS}({},{},{})`, '{}');
+  return result
+    .replace(`${SYMBOLS.ARGS}({},{},{})`, '{}')
+    .replace('$_args({},{},$_edp)', '{}');
 }
 
 function hasStableChildsForControlNode(
@@ -413,29 +415,25 @@ export function serializeNode(
       return !attr[0].startsWith('@');
     });
     const props = node.properties;
+    //
     let secondArg = hasSplatAttrs
-      ? `{[${SYMBOLS.$propsProp}]: [...$fw[${SYMBOLS.$propsProp}], ...${toArray(
-          props,
-        )}], [${SYMBOLS.$attrsProp}]: [...$fw[${
-          SYMBOLS.$attrsProp
-        }], ...${toArray(attrs)}], [${SYMBOLS.$eventsProp}]: [...$fw[${
-          SYMBOLS.$eventsProp
-        }],...${toArray(node.events)}]}`
-      : `{[${SYMBOLS.$propsProp}]: ${toArray(props)}, [${
-          SYMBOLS.$attrsProp
-        }]: ${toArray(attrs)},  [${SYMBOLS.$eventsProp}]: ${toArray(
-          node.events,
-        )}}`;
+      ? `[[...$fw[0], ...${toArray(props)}],[...$fw[1], ...${toArray(
+          attrs,
+        )}],[...$fw[2],...${toArray(node.events)}]]`
+      : `[${toArray(props)},${toArray(attrs)},${toArray(node.events)}]`;
 
-    let isSecondArgEmpty = secondArg.split('[]').length === 4;
+    let isSecondArgEmpty = secondArg === '[[],[],[]]';
     if (isSecondArgEmpty) {
-      if (!secondArg.includes('...')) {
-        isSecondArgEmpty = true;
-        secondArg = '{}';
-      } else {
-        isSecondArgEmpty = false;
-      }
+      secondArg = SYMBOLS.EMPTY_DOM_PROPS;
     }
+    // if (isSecondArgEmpty) {
+    //   if (!secondArg.includes('...')) {
+    //     isSecondArgEmpty = true;
+    //     secondArg = '{}';
+    //   } else {
+    //     isSecondArgEmpty = false;
+    //   }
+    // }
 
     if (node.selfClosing) {
       // @todo - we could pass `hasStableChild` ans hasBlock / hasBlockParams to the DOM helper

diff --git a/src/utils/dom.ts b/src/utils/dom.ts
@@ -35,9 +35,6 @@ import {
   isTagLike,
   $template,
   $nodes,
-  $attrsProp,
-  $propsProp,
-  $eventsProp,
   addToTree,
   RENDER_TREE,
   setBounds,
@@ -79,11 +76,7 @@ type Attr =
 type TagAttr = [string, Attr];
 type TagProp = [string, Attr];
 type TagEvent = [string, EventListener | ModifierFn];
-type FwType = {
-  props: TagProp[];
-  attrs: TagAttr[];
-  events: TagEvent[];
-};
+type FwType = [TagProp[], TagAttr[], TagEvent[]];
 type Props = [TagProp[], TagAttr[], TagEvent[], FwType?];
 
 function $prop(
@@ -338,15 +331,9 @@ function _DOM(
   const attrs = tagProps[1];
   const _events = tagProps[2];
   const hasSplatAttrs = typeof tagProps[3] === 'object';
-  const attributes = hasSplatAttrs
-    ? [...tagProps[3]![$attrsProp], ...attrs]
-    : attrs;
-  const properties = hasSplatAttrs
-    ? [...tagProps[3]![$propsProp], ...props]
-    : props;
-  const events = hasSplatAttrs
-    ? [...tagProps[3]![$eventsProp], ..._events]
-    : _events;
+  const properties = hasSplatAttrs ? [...tagProps[3]![0], ...props] : props;
+  const attributes = hasSplatAttrs ? [...tagProps[3]![1], ...attrs] : attrs;
+  const events = hasSplatAttrs ? [...tagProps[3]![2], ..._events] : _events;
   events.forEach(([eventName, fn]) => {
     $ev(element, eventName, fn, destructors);
   });
@@ -473,9 +460,7 @@ export function $_inElement(
       associateDestroyable(ctx, destructors);
       return $_fin([], this);
     } as unknown as Component<any>,
-    {
-      [$PROPS_SYMBOL]: { attrs: [], props: [], events: [] }
-    },
+    {},
     ctx,
   );
 }
@@ -493,9 +478,7 @@ export function $_ucw(
       }
       return $_fin(roots(this), this);
     } as unknown as Component<any>,
-    {
-      [$PROPS_SYMBOL]: { attrs: [], props: [], events: [] }
-    },
+    {},
     ctx,
   );
 }
@@ -957,10 +940,10 @@ export function $_GET_ARGS(ctx: any, args: any) {
   ctx[$args] = ctx[$args] || args[0] || {};
 }
 export function $_GET_SLOTS(ctx: any, args: any) {
-  return (args[0] || {})[$SLOTS_SYMBOL] || ctx[$args][$SLOTS_SYMBOL] || {};
+  return (args[0] || {})[$SLOTS_SYMBOL] || ctx[$args]?.[$SLOTS_SYMBOL] || {};
 }
 export function $_GET_FW(ctx: any, args: any) {
-  return (args[0] || {})[$PROPS_SYMBOL] || ctx[$args][$PROPS_SYMBOL] || {};
+  return (args[0] || {})[$PROPS_SYMBOL] || ctx[$args]?.[$PROPS_SYMBOL] || {};
 }
 export function $_args(
   args: Record<string, unknown>,

diff --git a/src/utils/index.ts b/src/utils/index.ts
@@ -17,12 +17,4 @@ export { hbs, scope } from '@/utils/template';
 export { effect } from '@/utils/vm';
 export * from '@/utils/dom';
 export * from '@/utils/helpers/index';
-export {
-  $template,
-  $nodes,
-  $args,
-  $fwProp,
-  $propsProp,
-  $attrsProp,
-  $eventsProp,
-} from '@/utils/shared';
+export { $template, $nodes, $args, $fwProp } from '@/utils/shared';
diff --git a/src/utils/shared.ts b/src/utils/shared.ts
@@ -11,9 +11,6 @@ export const $nodes = 'nodes' as const;
 export const $args = 'args' as const;
 export const $_debug_args = '_debug_args' as const;
 export const $fwProp = '$fw' as const;
-export const $propsProp = 'props' as const;
-export const $attrsProp = 'attrs' as const;
-export const $eventsProp = 'events' as const;
 
 export const IN_SSR_ENV =
   import.meta.env.SSR || location.pathname === '/tests.html';