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

Aperta
  • Qualcosa non va?
#402 2 commenti 2 reazioni 0 assegnatari Vedi su GitHub

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
3-5 giorni
Idoneità per principianti
54/100
Tipo di issue
Funzionalità
Chiarezza
Abbastanza chiara
Stato di attività
Tranquilla
Stack tecnologico
typescript
Ambito
developer-experience, tooling

Direzione di ricerca

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.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

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.

Lingua principale
TypeScript
Stelle
1.6k
Fork
126
Nessuna PR unita negli ultimi 30g

Preparare l'ambiente

Questo progetto non fornisce container di sviluppo, Dockerfile né guida per i contributori, quindi l'ambiente è a tuo carico: parti dal suo README e consulta la nostra guida al primo contributo per i passaggi generali.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di figma/code-connect

Tutte le issue di figma/code-connect

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.