Stencil 0.13.2: Separation of production code from generated, tests and dev harness

Stencil
1

Hello,

I’ve been tasked with evaluating Stencil as the basis for our UI components framework and widgets library. So far it’s going well, everything works as expected.

The one question I have is how to separate production code from non-production code, which is a well established best practice IMHO. So far I have:

  • /src/main => productive code
  • /src/test => test code
  • /target/dist => distribution
  • /target/www => www

The issue is that /src/main still contains some non-productive sources:

  • components.d.ts. This is a generated source, and as such IMHO it doesn’t belong in the /src directory tree - it doesn’t seem clean. Generated sources should be separate - I would usually put them somewhere in /target/… I can’t find a configuration that would allow me to do this.

  • index.html and manifest.json. This is a simple web-component for packaging and inclusion in other webapps, and not a complete web application, so it won’t have a productive index.html. The file that is there is used as a harness for dev purposes: it’s a simple page that hosts the web component, which is copied to /target/www when I run the dev-server. I would like to move these files to /src/test, but then they aren’t copied to /target/www when starting the dev-server. I can’t find a configuration that would support this.

I have managed to separate out the tests to /src/test and move dist/ and www/ to /target/gen and /target/dist, by modification of tsconfig.json and stencil.config.ts, which are copied below.

Can you point me in the right direction to how to move the remaining files?

Thanks very much for any help,

Adam

tsconfig.json:

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "allowUnreachableCode": false,
        "declaration": false,
        "experimentalDecorators": true,
        "lib": [
            "dom",
            "es2017"
        ],
        "sourceMap": true,
        "allowJs": false,
        "moduleResolution": "node",
        "module": "esnext",
        "rootDirs": [
            "src/main",
            "src/test"
        ],
        "target": "es2017",
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "jsx": "react",
        "jsxFactory": "h"
    },
    "include": [
        "src/main",
        "types/jsx.d.ts"
    ],
    "exclude": [
        "node_modules"
    ]
}

stencil.config.ts

const {postcss} = require("@stencil/postcss");

exports.config = {
    namespace: "sqg-test-widget",
    srcDir: "src/main",
    outputTargets: [
        {
            type: "www",
            dir: "target/www"
        },
        {
            type: "dist",
            dir: "target/dist"
        }
    ],
    testing: {
        verbose: true,
        collectCoverage: true,
        coverageDirectory: "target/coverage",
        testRegex: "(\\.(test|spec))\\.(e2e\\.)?(tsx?|jsx?)$",
        roots: [
            "<rootDir>/src/main/",
            "<rootDir>/src/test/"
        ],
        moduleFileExtensions: ["ts", "tsx", "js", "json", "jsx"]
    },
    plugins: [
        postcss({
            plugins: [
                require("stylelint")(),
                require("postcss-custom-media")({
                    preserve: true
                }),
                require("postcss-nested"),
                require("postcss-import-url")(),
                require("autoprefixer")(["> 1%", "last 2 versions", "IE 11"]),
                require("postcss-reporter")({
                    clearReportedMessages: true
                })
            ]
        })
    ]
};
2

I should mention that I have read the following documentation:

3

I managed to move the index.html and manifest.json files by adding the following lines to my

copy: [
    {
        src: "../../src/test/index.html",
        dest: "index.html"
    },
    {
        src: "../../src/test/manifest.json",
        dest: "manifest.json"
    }
],

Hacky, but it works. I’m open to other suggestions.

The issue with the file “components.d.ts” being generated in the prod source directory is still a problem.

4

Better solution for the index.html:

srcIndexHtml: "src/test/index.html",