/*!
 * Custom elements for Nanopore-Digital Web applications
 */
import { postcss } from "@stencil-community/postcss";
import { sass } from "@stencil/sass";
import { reactOutputTarget } from "@stencil/react-output-target";
import autoprefixer from "autoprefixer";
import { webTypesOutputTarget } from "@stencil-community/web-types-output-target";
import { vueOutputTarget } from "./plugins/stencil/vue-output";
// import { generateJsonDocs } from './plugins/stencil/custom-element-docs';
const vueComponentModels = [
    {
        elements: [
            'nano-input',
            'nano-date',
            'nano-range',
            'nano-rating',
            'nano-select',
            'nano-checkbox-group',
        ],
        targetAttr: 'value',
        event: 'v-nano-change',
        externalEvent: 'nanoChange',
    },
    {
        elements: ['nano-checkbox'],
        targetAttr: 'checked',
        event: 'v-nano-change',
        externalEvent: 'nanoChange',
    },
    {
        elements: ['nano-file-upload'],
        targetAttr: 'files',
        event: 'v-nano-change',
        externalEvent: 'nanoChange',
    },
];
export const config = {
    namespace: 'nano-components',
    sourceMap: false,
    minifyJs: false,
    preamble: 'Custom elements for Nanopore-Digital Web applications',
    outputTargets: [
        {
            type: 'dist-hydrate-script',
        },
        reactOutputTarget({
            componentCorePackage: '@nanoporetech-digital/components',
            proxiesFile: '../react/src/components.ts',
        }),
        vueOutputTarget({
            componentCorePackage: '@nanoporetech-digital/components',
            proxiesFile: '../vue/src/proxies.ts',
            componentModels: vueComponentModels,
        }),
        {
            type: 'dist-custom-elements',
            externalRuntime: true,
        },
        {
            type: 'www',
            serviceWorker: null,
            copy: [
                {
                    src: '../src/components/**/assets/**/*',
                    dest: './nano-assets',
                },
                {
                    src: '../src/assets',
                    dest: './nano-assets',
                },
                {
                    src: '../src/components/icon/device',
                    dest: './nano-assets/icon/device',
                },
                {
                    src: '../src/components/icon/pictogram',
                    dest: './nano-assets/icon/pictogram',
                },
                {
                    src: '../src/components/icon/flag',
                    dest: './nano-assets/icon/flag',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/brands',
                    dest: './nano-assets/fontawesome-pro/svgs/brands',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/light',
                    dest: './nano-assets/fontawesome-pro/svgs/light',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/regular',
                    dest: './nano-assets/fontawesome-pro/svgs/regular',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/solid',
                    dest: './nano-assets/fontawesome-pro/svgs/solid',
                },
                {
                    src: '../node_modules/@nanoporetech-digital/style/dist/assets/font',
                    dest: './nano-assets/font',
                },
                { src: '**/*.html' },
                { src: '**/*.css' },
                {
                    src: '../style',
                    dest: './style',
                },
            ],
        },
        {
            type: 'dist',
            esmLoaderPath: '../loader',
            copy: [
                {
                    src: '../src/components/**/assets/**/*',
                    dest: '../nano-assets',
                },
                {
                    src: '../src/assets',
                    dest: '../nano-assets',
                },
                {
                    src: '../src/components/icon/device',
                    dest: '../nano-assets/icon/device',
                },
                {
                    src: '../src/components/icon/pictogram',
                    dest: '../nano-assets/icon/pictogram',
                },
                {
                    src: '../src/components/icon/flag',
                    dest: '../nano-assets/icon/flag',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/brands',
                    dest: '../nano-assets/fontawesome-pro/svgs/brands',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/light',
                    dest: '../nano-assets/fontawesome-pro/svgs/light',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/regular',
                    dest: '../nano-assets/fontawesome-pro/svgs/regular',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/solid',
                    dest: '../nano-assets/fontawesome-pro/svgs/solid',
                },
                {
                    src: '../node_modules/@fortawesome/fontawesome-pro/svgs/duotone-light',
                    dest: '../nano-assets/fontawesome-pro/svgs/duotone',
                },
                {
                    src: '../node_modules/@nanoporetech-digital/style/dist/assets/font',
                    dest: '../nano-assets/font',
                },
                {
                    src: '../style',
                    dest: '../style',
                },
            ],
        },
        { type: 'docs-readme' },
        { type: 'docs-vscode', file: 'docs-vscode.json' },
        { type: 'docs-json', file: 'docs-json.json' },
        webTypesOutputTarget(),
    ],
    globalStyle: 'src/global/style/nano-components.scss',
    globalScript: 'src/global/script/global.ts',
    plugins: [
        sass({
            includePaths: ['./node_modules']
        }),
        postcss({
            injectGlobalPaths: [
                'src/global/style/defaults/border-box.css',
                'src/global/style/defaults/hidden.css',
                'src/global/style/defaults/reduced-motion.css',
            ],
            plugins: [
                autoprefixer({
                    overrideBrowserslist: ['>0.8%', 'not op_mini all'],
                }),
            ]
        }),
    ],
    devServer: {
        initialLoadUrl: '/components',
    },
    watchIgnoredRegex: /(docs-[a-zA-Z.]+)|(CHANGELOG.md|stats.html|custom-elements.json|stencil-stats.json|package-lock.json|web-types.json)|([a-zA-Z0-9-]+-e-2-e.*)/,
    testing: {
        testRegex: ['\\.(spec)\\.(tsx|ts|js)$'],
        testPathIgnorePatterns: [
            '<rootDir>/hydrate/',
            '<rootDir>/dist/',
            '__fixtures__',
        ],
        timers: 'fake',
        // @ts-expect-error stencil testing type is outdated
        fakeTimers: {
            enableGlobally: true,
            legacyFakeTimers: true,
        },
    },
    enableCache: true,
    buildEs5: false,
    hashFileNames: false,
    extras: {
        cloneNodeFix: true,
        tagNameTransform: true,
        experimentalImportInjection: true,
        experimentalScopedSlotChanges: true,
        experimentalSlotFixes: true,
        scriptDataOpts: true,
        addGlobalStyleToComponents: false,
    },
};
