Stats
Often it's very helpful to understand the state of your libraries generated files in the form of json data. To build the docs as json, use the
--stats flag, followed by a path on where to write the json file.
scripts: {
"docs.data": "stencil build --stats"
"docs.data-with-optional-file": "stencil build --stats path/to/stats.json"
}Another option would be to add the stats output target to the
stencil.config.ts in order to auto-generate this file with every build:
import { Config } from '@stencil/core';
export const config: Config = {
outputTargets: [
{
type: 'stats',
file: 'path/to/stats.json' // optional
}
]
};If you don't pass a file name to the --stats flag or the output target's
file key, the file will be output to the root directory of your project as
stencil-stats.json
Check out the typescript declarations for the JSON output: https://github.com/ionic-team/stencil/blob/main/src/declarations/stencil-public-docs.ts
The file that's generated will produce data similar to this:
{
"timestamp": "2021-09-22T17:31:14",
"compiler": {
"name": "node",
"version": "16.9.1"
},
"app": {
"namespace": "ExampleStencilLibrary",
"fsNamespace": "example-stencil-library",
"components": 1,
"entries": 1,
"bundles": 30,
"outputs": [
{
"name": "dist-collection",
"files": 3,
"generatedFiles": [
"./dist/collection/components/my-component/my-component.js",
// etc...
]
},
{
"name": "dist-lazy",
"files": 26,
"generatedFiles": [
"./dist/cjs/example-stencil-library.cjs.js",
// etc...
]
},
{
"name": "dist-types",
"files": 1,
"generatedFiles": [
"./dist/types/stencil-public-runtime.d.ts"
]
}
]
},
"options": {
"minifyJs": true,
"minifyCss": true,
"hashFileNames": true,
"hashedFileNameLength": 8,
"buildEs5": true
},
"formats": {
"esmBrowser": [
{
"key": "my-component.entry",
"components": [
"my-component"
],
"bundleId": "p-12cc1edd",
"fileName": "p-12cc1edd.entry.js",
"imports": [
"p-24af5948.js"
],
"originalByteSize": 562
}
],
"esm": [
// exact same model as the esmBrowser, but for esm files
],
"es5": [
// exact same model as the esmBrowser, but for es5 files
],
"system": [
// exact same model as the esmBrowser, but for system files
],
"commonjs": [
// exact same model as the esmBrowser, but for cjs files
]
},
"components": [
{
"tag": "my-component",
"path": "./src/components/my-component/my-component.js",
"source": "./src/components/my-component/my-component.tsx",
"elementRef": null,
"componentClassName": "MyComponent",
"assetsDirs": [],
"dependencies": [],
"dependents": [],
"directDependencies": [],
"directDependents": [],
"docs": {
"tags": [],
"text": ""
},
"encapsulation": "shadow",
"excludeFromCollection": false,
"events": [],
"internal": false,
"legacyConnect": [],
"legacyContext": [],
"listeners": [],
"methods": [],
"potentialCmpRefs": [],
"properties": [
{
"name": "first",
"type": "string",
"attribute": "first",
"reflect": false,
"mutable": false,
"required": false,
"optional": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"docs": {
"tags": [],
"text": "The first name"
},
"internal": false
},
],
},
],
"entries": [
{
"cmps": [
// Expanded component details are produced here
],
"entryKey": "my-component.entry"
}
],
"componentGraph": {
"sc-my-component": [
"p-24af5948.js"
]
},
"sourceGraph": {
"./src/components/my-component/my-component.tsx": [
"./src/utils/utils"
],
"./src/index.ts": [],
"./src/utils/utils.ts": []
},
"collections": []
}
One example of usage with this file is to automatically create preload tags automatically. Here's a link to a gist containing some code samples about how to set up preloading to improve performance
Contributors
Thanks for your interest!
We just need some basic information so we can send the guide your way.