Is it possible to have a single figma.config.json with multiple code outputs?

[cadamsdev]

figma cli version: 1.3.1

Currently we use web components which the usage varies depending on what framework is being used to consume the component. In Figma we want to display code usages for "React", "Angular", "Lit" and "HTML" (no framework).

Currently to show the different usages I had to create multiple figma.config files.

figma-react.config.json

{
  "codeConnect": {
    "include": ["**/*.react.connect.{tsx,jsx}"],
    "label": "React",
    "parser": "react",
    "interactiveSetupFigmaFileUrl": "some url",
    "documentUrlSubstitutions": {
      "<DS_BUTTON>": "some url"
    }
  }
}

figma-angular.config.json

{
  "codeConnect": {
    "include": ["**/*.angular.connect.{ts,js}"],
    "label": "Angular",
    "parser": "html",
    "interactiveSetupFigmaFileUrl": "some url",
    "documentUrlSubstitutions": {
      "<DS_BUTTON>": "some url"
    }
  }
}

figma-lit.config.json

{
  "codeConnect": {
    "include": ["**/*.lit.connect.{ts,js}"],
    "label": "Lit",
    "parser": "html",
    "interactiveSetupFigmaFileUrl": "some url",
    "documentUrlSubstitutions": {
      "<DS_BUTTON>": "some url"
    }
  }
}

figma-html.config.json

{
  "codeConnect": {
    "include": ["**/*.html.connect.{ts,js}"],
    "label": "HTML",
    "parser": "html",
    "interactiveSetupFigmaFileUrl": "some url",
    "documentUrlSubstitutions": {
      "<DS_BUTTON>": "some url"
    }
  }
}

So, then I can show these usages

Angular

ds-button.angular.connect.ts

figma.connect("<DS_BUTTON>", {
  props: { },
  example: () =>
    html`
    <ds-button
      (click)="() => console.log('clicked')"
      >
    </ds-button>`,
});

React

ds-button.react.connect.ts

Note: Using a React wrapper component

figma.connect(
  "<DS_BUTTON>",
  {
    props: {},
    example: () => (
      <DSButton
        onClick={() => {
          console.log('clicked')
        }}
      />
    ),
  },
)

Lit

ds-button.lit.connect.ts

figma.connect("<DS_BUTTON>", {
  props: {},
  example: () =>
    html`
      <ds-button
        @click=${() => console.log("clicked")}
      >
      </ds-button>`,
});

HTML (no framework)

ds-button.html.connect.ts

figma.connect("<DS_BUTTON>", {
  props: { },
  example: () =>
    html`
      <ds-button></ds-button>
      <script>
        document.querySelector('ds-button')
          .addEventListener('click', () => {
            console.log('clicked!');
          })
      </script>
    `,
});

Problem: The issue with having to create multiple figma.config files is that we're duplicatingdocumentUrlSubstitutions and interactiveSetupFigmaFileUrl as all of these configs should share that. It's also quite difficult to maintain. If we need to add another documentUrlSubstitutions we also need to go update the other config files and add the same thing.

It would be much better if we could do this with a single figma.config file.

Is this the correct usage or is there another way to handle this?