Releases · CarbonPackages/Carbon.Pipeline

21 Mar 15:33

jonnitto

0.17.0

71a0731

0.17.0 Latest

Latest

Flow Settings in Javascript

Suppose you use tools like Flownative.Sentry, you perhaps want to pass some of the settings to your Javascript without setting a data attribute somewhere in the markup. For that, you can enable esbuild.defineFlowSettings. Just add the path (e.g. Flownative.Sentry.release) to the setting. In the background, the command flow configuration:show is runned. If you run the command build, which automatically has the flag --production, the FLOW_CONTEXT is set to Production.

esbuild:
  defineFlowSettings: Flownative.Sentry.release

defineFlowSettings can be also an array of strings:

esbuild:
  defineFlowSettings:
    - Flownative.Sentry.release
    - Flownative.Sentry.environment
    - Flownative.Sentry.dsn

Every entry results into one injected variable.

In Javascript, you can access the variables like this:

Sentry.init({
  dsn: FLOW.Flownative.Sentry.dsn,
  release: FLOW.Flownative.Sentry.release,
  environment: FLOW.Flownative.Sentry.environment,
  integrations: [new Integrations.BrowserTracing()],
});

Important

As some chars are not allowed to be injected as variable keys, the will get replaced:

Char	Replaced with
`..`	`.`
`-`	`_`
`0`	`ZERO`
`1`	`ONE`
`2`	`TWO`
`3`	`THREE`
`4`	`FOUR`
`5`	`FIVE`
`6`	`SIX`
`7`	`SEVEN`
`8`	`EIGHT`
`9`	`NINE`

Make sure your [eslint.config.mjs] has the global FLOW enabled:

import globals from "globals";
import pluginJs from "@eslint/js";
import prettierRecommended from "eslint-plugin-prettier/recommended";

export default [
  pluginJs.configs.recommended,
  prettierRecommended,
  {
    ignores: ["Build/", "Packages/", "**/Public/", "**/Resources/Private/Templates/", "*.noLinter.*"],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
        FLOW: "readonly",
      },
    },
  },
];