stencil.config.ts

import { Config } from '@stencil/core';
import { sass } from '@stencil/sass';
import { reactOutputTarget } from '@stencil/react-output-target';
import { vueOutputTarget } from '@stencil/vue-output-target';
import nodePolyfills from 'rollup-plugin-node-polyfills';
import tailwind from 'stencil-tailwind-plugin';
import { getExcludedComponentTags } from './src/global/scripts/exclude-react-components';
import image from '@rollup/plugin-image';

/**
 * A list of component tags to be excluded from the build process.
 *
 * This is necessary to exclude functional components (components used by `sdk-dapp`)
 * in order to prevent potential conflicts with the event bus and issues related to
 * Stencil's state management. By excluding these components, we ensure that the
 * application remains stable and avoids unintended behavior caused by overlapping
 * event handling or state inconsistencies.
 *
 * The components to be excluded are determined dynamically from the specified directory.
 */
const excludeComponents = getExcludedComponentTags('./src/components/functional');

const isDev = process.argv.includes('--dev');

export const config: Config = {
  namespace: 'sdk-dapp-ui',
  globalStyle: './src/global/style.css',
  buildEs5: false,
  plugins: [
    sass(),
    tailwind({
      tailwindCssPath: './src/global/tailwind.css',
    }),
  ],
  sourceMap: isDev,
  testing: {
    setupFilesAfterEnv: ['./src/setupTests.ts'],
  },
  outputTargets: [
    reactOutputTarget({
      outDir: './dist/react',
      stencilPackageName: '../../dist/types',
      customElementsDir: '../web-components',
      excludeComponents,
    }),
    vueOutputTarget({
      componentCorePackage: '../../dist/types',
      proxiesFile: './dist/vue/components.ts',
      customElementsDir: '../web-components',
      excludeComponents,
    }),
    {
      type: 'dist-custom-elements',
      externalRuntime: false,
      generateTypeDeclarations: true,
      customElementsExportBehavior: 'bundle',
      dir: './dist/web-components',
      copy: [{ src: 'assets', dest: 'dist/assets' }],
    },
  ],
  rollupPlugins: {
    before: [nodePolyfills(), image()],
  },
  extras: {
    enableImportInjection: true,
  },
};