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

Ouverte
  • Quelque chose ne va pas ?
#402 2 commentaires 2 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
54/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Calme
Stack technique
typescript
Domaine
developer-experience, tooling

Piste de recherche

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.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
1.6k
Forks
126
Aucune PR mergée en 30 j

Préparer son environnement

Ce projet ne fournit ni conteneur de développement, ni Dockerfile, ni guide de contribution : l'installation est à votre charge. Commencez par son README, et consultez notre guide de la première contribution pour les étapes générales.

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de figma/code-connect

Toutes les issues de figma/code-connect

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.