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

Offen
  • Stimmt etwas nicht?
#402 2 Kommentare 2 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Anfängerfreundlichkeit
54/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
typescript
Bereich
developer-experience, tooling

Rechercherichtung

Start by reading the existing CLI preview implementation and the Code Connect template handling path; the issue does not name specific files or tests. Work out how a local props map could render a template to the string shown in Figma’s dev panel. Done means the utility returns that output for supplied props and can support local tests that validate the generated code.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

feature request

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.

Vorherrschende Sprache
TypeScript
Sterne
1.6k
Forks
126
Keine gemergten PRs in 30 T.

Entwicklungsumgebung

Dieses Projekt bietet weder Dev-Container noch Dockerfile noch Beitragsleitfaden – die Einrichtung liegt bei Ihnen. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus figma/code-connect

Alle Issues in figma/code-connect

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.