Support "each" syntax for COMPONENT_SET

[t4y3]

Allow referencing of properties of child elements using the each syntax.

Example

Template

import {
{{#each children}}
  {{property.type|pascal}}Icon,
{{/each}}
} from "@heroicons/react/24/solid";
import { FC } from "react";

export const MyIcon: FC<{ type: string }> = ({ type }) => {
  switch (type) {
  {{#each children}}
    case "{{property.type}}":
      return <{{property.type|pascal}}Icon className="h-6 w-6 text-blue-500" />;
  {{/each}}
    default:
      return null;
  }
};

Snippet

import {
  AdjustmentsHorizontalIcon,
  ArrowDownRightIcon,
  Bars3Icon,
} from "@heroicons/react/24/solid";
import { FC } from "react";

export const MyIcon: FC<{ type: string }> = ({ type }) => {
  switch (type) {
    case "adjustments-horizontal":
      return <AdjustmentsHorizontalIcon className="h-6 w-6 text-blue-500" />;
    case "arrow-down-right":
      return <ArrowDownRightIcon className="h-6 w-6 text-blue-500" />;
    case "bars-3":
      return <Bars3Icon className="h-6 w-6 text-blue-500" />;
    default:
      return null;
  }
};

[t4y3]

@jake-figma What are your thoughts on adding the "each" syntax?

[jake-figma]

this is really interesting and love that you took the initiative to throw together a pr.

i'm considering another approach to this, referenced in #6 that would allow for child querying and be recursive. i am partial to that approach because it keeps the templating language simple, and is also agnostic to layer structure. sometimes the layering/grouping in figma is frustratingly deep so a children query would allow you to dive deeper more precisely than a loop would.

id like to keep this open for discussion, but dont want to add more overhead to the language quite yet.

[jake-figma]

i understand this wouldnt be the only scenario for an each loop, but im also interested in learning more about this use case generating definition code. is the idea that you add icons to this component set frequently and would rather copy paste the entire file code whenever that occurs?

due to the way component set templates are inherited by instances, this code would render incomplete definition snippets whenever you select an instance of this component, which seems annoying.

[t4y3]

Yeah, idea #6 certainly sounds good and versatile!

Thank you. I'll end this issue. 😄

[jake-figma]

Yeah, idea #6 certainly sounds good and versatile!

Thank you. I'll end this issue. 😄

@t4y3, would love to hear more from you as we build out this project more this year! thanks for commenting and taking a peek. love your implementation, and was surprised to get such good feedback so soon lol!