@govbr-ds/webcomponents
Version:
Biblioteca de Web Components baseado no GovBR-DS
232 lines (231 loc) • 9.5 kB
JavaScript
/*!
* Construído por SERPRO
* © https://serpro.gov.br/ - MIT License.
*/
import { resolve } from "path";
import purgecss from "@fullhuman/postcss-purgecss";
import { angularOutputTarget } from "@stencil/angular-output-target";
import { reactOutputTarget } from "@stencil/react-output-target";
import { sass } from "@stencil/sass";
import { vueOutputTarget } from "@stencil/vue-output-target";
import { postcss } from "@stencil-community/postcss";
import autoprefixer from "autoprefixer";
import cssnano from "cssnano";
import purgeReplace from "postcss-replace";
import { generateMarkdown } from "./custom-docs/output-docs";
import { angularValueAccessorBindings, vueComponentModels } from "./src/value-accessors";
const componentCorePackage = `@govbr-ds/webcomponents`;
const customElementsDir = 'dist/components';
const resolvePath = (path) => resolve(__dirname, path).replace(/\\/g, '/');
const purge = purgecss({
content: [
'dist/webcomponents/**/*.js',
'dist/webcomponents/**/*.html',
'../../packages/webcomponents/src/**/*.tsx',
'../../packages/webcomponents/src/**/*.scss',
],
safelist: {
deep: [/^br-/, /^bg-/],
greedy: [/^br-/, /^bg-/],
standard: [':host', /^br-/, /^bg-/],
},
defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
});
// Detecta execução em modo desenvolvimento (serve/watch) para reduzir outputs e consumo de memória
const isNxTarget = process.env.NX_TASK_TARGET_TARGET || '';
const isDevMode = isNxTarget === 'stencil-start' ||
isNxTarget === 'start' ||
process.argv.includes('--dev') ||
process.argv.some((a) => /serve|start/.test(a));
export const config = {
namespace: 'webcomponents',
buildDist: true,
cacheDir: resolvePath('../../.stencil'),
enableCache: true,
preamble: 'Construído por SERPRO\n© https://serpro.gov.br/ - MIT License.',
sourceMap: true,
taskQueue: 'async',
watchIgnoredRegex: /(custom-elements\.)((d\.ts)|(json))$/g,
extras: {
/**
* Details: https://stenciljs.com/docs/config-extras
*/
enableImportInjection: true,
experimentalScopedSlotChanges: true,
experimentalSlotFixes: true,
},
outputTargets: isDevMode
? [
// DEV: somente www + pastas copiadas necessárias para o devapp
{
type: 'www',
serviceWorker: null,
copy: [
{
src: '../../../node_modules/@govbr-ds/core/dist/core.min.css',
dest: 'assets/core.min.css',
warn: true,
},
{
src: 'pages',
warn: true,
keepDirStructure: true,
},
{
// cópia adicional para dentro de assets, caso o servidor não sirva /pages
src: 'pages',
dest: 'assets/pages',
warn: true,
keepDirStructure: true,
},
{
src: 'assets',
warn: true,
keepDirStructure: true,
},
],
},
]
: [
{
type: 'dist',
copy: [
{ src: '../README.md', warn: true },
{ src: '../cem/*.*', dest: '../', warn: true },
],
},
{
type: 'dist-custom-elements',
dir: customElementsDir,
customElementsExportBehavior: 'single-export-module',
externalRuntime: false,
generateTypeDeclarations: true,
minify: true,
},
{
type: 'docs-custom',
generator: generateMarkdown,
},
{
// https://stenciljs.com/docs/hydrate-app
type: 'dist-hydrate-script',
dir: 'dist/hydrate',
},
{
type: 'www',
serviceWorker: null,
copy: [
{
src: '../../../node_modules/@govbr-ds/core/dist/core.min.css',
dest: 'assets/core.min.css',
warn: true,
},
{
src: '../../../apps/site/docs/stencil-generated-docs',
dest: 'assets/stencil-generated-docs',
warn: false,
},
{
src: 'pages',
warn: true,
keepDirStructure: true,
},
{
// cópia adicional para dentro de assets, caso o servidor não sirva /pages
src: 'pages',
dest: 'assets/pages',
warn: true,
keepDirStructure: true,
},
{
src: 'assets',
warn: true,
keepDirStructure: true,
},
],
},
angularOutputTarget({
/* --------------------------- Angular output target -------------------------- */
componentCorePackage,
outputType: 'component',
directivesProxyFile: resolvePath('../angular/src/stencil-generated/components.ts'),
directivesArrayFile: resolvePath('../angular/src/stencil-generated/index.ts'),
valueAccessorConfigs: angularValueAccessorBindings,
inlineProperties: true,
customElementsDir,
}),
angularOutputTarget({
/* -------------------- Angular Standalone output target -------------------- */
componentCorePackage,
outputType: 'standalone',
directivesProxyFile: resolvePath('../angular/standalone/src/stencil-generated/components.ts'),
directivesArrayFile: resolvePath('../angular/standalone/src/stencil-generated/index.ts'),
valueAccessorConfigs: angularValueAccessorBindings,
customElementsDir,
}),
reactOutputTarget({
/* --------------------------- React output target -------------------------- */
customElementsDir,
outDir: resolvePath('../react/src/stencil-generated'),
esModules: true,
}),
reactOutputTarget({
/* ------------------------- React SSR output target ------------------------ */
customElementsDir,
outDir: resolvePath('../react/ssr/stencil-generated'),
clientModule: '@@govbr-ds/webcomponents-react',
hydrateModule: '@govbr-ds/webcomponents/dist/hydrate',
esModules: true,
}),
vueOutputTarget({
/* ---------------------------- Vue output target --------------------------- */
componentCorePackage,
componentModels: vueComponentModels,
customElementsDir,
hydrateModule: '@govbr-ds/webcomponents/dist/hydrate',
includeDefineCustomElements: false,
includeImportCustomElements: true,
includePolyfills: false,
proxiesFile: resolvePath('../vue/src/stencil-generated/components.ts'),
}),
],
devServer: {
openBrowser: false,
port: 8001,
reloadStrategy: 'pageReload',
},
plugins: [
sass({
includePaths: [resolvePath('../../node_modules')],
injectGlobalPaths: [
resolvePath(`../../node_modules/@govbr-ds/core/src/partial/scss/base`),
resolvePath(`../../node_modules/@govbr-ds/core/src/partial/scss/utilities`),
],
outputStyle: 'compressed',
sourceMap: true,
sourceMapContents: true,
sourceMapEmbed: true,
// Removido 'mixed-decls' para evitar silenciar deprecação obsoleta e permitir higienização do código.
// Mantemos apenas deprecações ainda relevantes a bibliotecas de terceiros.
silenceDeprecations: ['import', 'global-builtin', 'color-functions'],
}),
postcss({
plugins: [
autoprefixer(),
// O Shadow DOM não respeita o estilo de 'html' e 'body', então substituímos por ':host'
purgeReplace({ pattern: 'html', data: { replaceAll: ':host' } }),
// Purge e cssnano se for build de produção
...(!process.argv.includes('--dev') ? [purge, cssnano()] : []),
],
}),
],
testing: {
/**
* O GitLab CI não permite sandbox, portanto estes parâmetros devem ser passados para o Chrome Headless
* antes que ele possa executar seus testes
*/
browserArgs: ['--no-sandbox', '--disable-setuid-sandbox'],
browserHeadless: 'shell',
},
};
//# sourceMappingURL=stencil.config.js.map