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

Đang mở
  • Có gì không ổn?
#406 0 bình luận 2 reaction 0 người được giao Xem trên GitHub

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
46/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
node.js, typescript
Lĩnh vực
developer-experience, tooling

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
1.6k
Fork
126
Không có pull request nào được merge trong 30 ngày

Chuẩn bị môi trường

Dự án này không cung cấp dev container, Dockerfile hay hướng dẫn đóng góp, nên bạn cần tự thiết lập môi trường: hãy bắt đầu từ README và xem hướng dẫn đóng góp lần đầu của chúng tôi để biết các bước chung.

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của figma/code-connect

Tất cả issue của figma/code-connect

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.