Skip to content

Add a utility to render the template file with props to string locally. #402

@kealjones-wk

Description

@kealjones-wk

Describe the feature you'd like:
I would love for the figma code-connect module to export a utility (similar to cli's preview) that will take in the template file and allow us to provide a handwritten local "props" map/config and then it would spit out the exact string output that could be expected in the dev panel in figma.

We have a lot of components and we would like to write unit tests to validate that our template files are syntactically correct and match our expected output. The only way to validate this currently is to manually publish and go view every components output in the dev panel in figma directly, then copy that code into a ts file and ensure it has no type errors. Sure it's not too bad for one component, but we would like to have the logic validated in local test to give ourselves more confidence that our template is syntactically correct and valid and getting output exactly how we would expect and does not have errors in the dev panel.

psudocode just as an example:

const output = previewFigmaTemplate(
  ()=> import('Button.figma.ts'), 
  {
    Variant: 'Outlined - Secondary',
    Size: 'Large',
    State: 'Disabled',
    'Typography.Text': 'Save',
  });

Then i could take that string output turn it into a virtual file and run it through typescript to type check and validate that its outputting real valid code that works with our library.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions