Support tsconfig `paths` in Template API imports (.figma.ts)

Offen
  • Stimmt etwas nicht?
#408 3 Kommentare 0 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
48/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Ruhig
Tech-Stack
javascript, nodejs, typescript
Bereich
tooling

Rechercherichtung

Start by reading raw_template_bundler.ts and the bundleTemplateWithHelpers function mentioned in the issue, then trace how figma.config.json settings reach the esbuild call. Check the existing template import handling and tests for bundling or path aliases. Done means .figma.ts templates can resolve aliases configured with paths and publish without the relative-import error.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

API question

Please provide:

  • Code Connect CLI version: 2.0.0
  • Operating system: MacOS
  • Code Connect file, Figma design and/or relevant code snippet that could help us get more context
    • If you prefer not to share those publicly please reach out via the Figma support
Problem

Alias imports in .figma.ts fail during publish, even with paths set per docs.

And looking at the source, in raw_template_bundler.ts the bundleTemplateWithHelpers function passes an empty value for the tsconfig.json settings during the esbuild build, and it doesn't seem to specifically consume the paths field added in figma.config.json. I'm not sure if I've pinpointed this correctly, but is there a specific reason this decision was made?

Infos

figma.config.json:

{
    "$schema": "https://raw.githubusercontent.com/figma/code-connect/main/schemas/figma.config.schema.json",
    "codeConnect": {
        "parser": "react",
        "label": "TEST",
        "language": "typescript",
        "include": ["src/**/*.figma.ts"],
        "paths": {
            "~/*": ["./src/*"]
        }
    },
    "fileKey": "he4tiAGOKGPl0Fm56ZpJsy",
    "packageImportPath": "@vapor-ui/composites"
}

.figma.ts:

import { getProperties } from '~/utils/figma-utils';

export default {
    example: figma.code` ... `
}

error log:

npx figma connect publish

Config file found, parsing /Users/goorm/01_works/my-works/packages/composites using specified include globs
❌ /Users/goorm/01_works/my-works/packages/composites/src/components/dialog/dialog.figma.ts
TypeScript template files only support importing from 'figma' and relative helper files.
Found in /Users/goorm/01_works/my-works/packages/composites/src/components/dialog/dialog.figma.ts:
  import { getProperties } from '~/utils/figma-utils';

Use "const figma = require('figma')" or "import figma from 'figma'" for the Figma API.
Helper imports must use relative paths (for example: "./helpers").
Using label "TEST"
Using language "typescript"
No Code Connect files found in /Users/goorm/01_works/my-works/packages/composites - Make sure you have configured `include` and `exclude` in your figma.config.json file correctly, or that you are running in a directory that contains Code Connect files.
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.