Template files: expose template API types via a real import (drop tsconfig types requirement)

Aberta
  • Algo errado?
#406 0 comentários 2 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
4/5
Tempo estimado
3-5 dias
Facilidade para iniciantes
46/100
Tipo de issue
Funcionalidade
Clareza
Claramente especificada
Status de atividade
Ativa
Stack de tecnologia
node.js, typescript
Domínio
developer-experience, tooling

Direção de pesquisa

Start by reading package.json and raw_templates.ts to understand the existing exports and how template imports are validated and rewritten. Then inspect the current figma-types declaration and its tests, if present, to see how the template API is typed. Done means the new subpath resolves through normal TypeScript module resolution and the CLI still rewrites it to the sandbox import while preserving existing 'figma' support.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

Related: #261 — that issue asks for the Template API types to be published via npm (which figma-types now does); this one asks to make them resolvable without tsconfig configuration.

Problem

Template files use a virtual module:

import figma from 'figma'

There is no figma package on npm — the module is injected by the CLI sandbox at execution time (raw_templates.ts rewrites the import to require('figma') before transpiling). TypeScript can therefore only resolve it through the ambient declaration shipped as @figma/code-connect/figma-types, which requires every consuming project to edit its tsconfig.json:

{ "compilerOptions": { "types": ["@figma/code-connect/figma-types"] } }

Pain points:

  • Monorepos: one edit per package that owns Code Connect files (dozens for us).
  • Packages that already set compilerOptions.types (e.g. for @testing-library/jest-dom) must merge entries manually; @types/* auto-inclusion stops applying, so this is easy to get wrong.
  • The ambient figma-types entry also declares a global require, which conflicts with @types/node — hence the need for the separate figma-types-no-require variant.
Proposal

Let template files import the template API from a real module specifier, e.g.:

import figma from '@figma/code-connect/template'

Implementation sketch (sandbox semantics unchanged):

  1. New subpath export in package.json: 
    "./template": {
  "types": "./template.d.ts",
  "default": "./template.js"
}
    • template.d.ts: the current figma-types content expressed as a real module (export the API type / a typed default) instead of declare module 'figma'.
    • template.js: a stub that throws at runtime (e.g. "template files are executed by the Code Connect CLI") — it is never loaded in practice since the CLI rewrites the import.
  2. CLI: extend figmaImportRegex / import validation in raw_templates.ts to accept the new specifier alongside 'figma', rewriting both to require('figma') before transpilation.
  3. Keep the existing 'figma' specifier + figma-types for backward compatibility.

Why a subpath and not the root entry: the root already exports a different figma (the React/HTML parser API — figma.connect, figma.boolean, …). The template API (selectedInstance, figma.code, figma.batch, figma.helpers) is a distinct surface.

Because the specifier becomes a real module, tsc/tsserver resolve its types through normal module resolution — no tsconfig changes needed in consuming projects.

Alternatives considered
  • @types/figma on DefinitelyTyped: decouples the types from CLI releases (they must version in lockstep since they describe the template runtime API) and @types auto-inclusion is disabled as soon as a project sets compilerOptions.types, which is common — so it wouldn't fix the main pain point.
Linguagem predominante
TypeScript
Estrelas
1.6k
Forks
126
Nenhum PR com merge em 30d

Preparar o ambiente

Este projeto não oferece contêiner de desenvolvimento, Dockerfile nem guia de contribuição, então a configuração fica por sua conta: comece pelo README e veja nosso guia da primeira contribuição para os passos gerais.

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de figma/code-connect

Todas as issues de figma/code-connect

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.