├── static ├── .nojekyll ├── img │ ├── icon.png │ ├── logo.png │ ├── pwa.png │ ├── logo-dark.png │ ├── text-logo.png │ ├── Docs w │ │ └── toc.png │ ├── appflow-ad.png │ ├── logo-light.png │ ├── stencil-og.png │ ├── video-icon.png │ ├── ds-guide-cover.png │ ├── feature-icons.png │ ├── ionic-os-logo.png │ ├── demos │ │ ├── demo-fiber.jpg │ │ ├── demo-fiber@2x.jpg │ │ ├── demo-ionichn.jpg │ │ ├── demo-revogrid.jpg │ │ ├── demo-stedux.jpg │ │ ├── demo-instamusic.jpg │ │ ├── demo-ionicbeer.jpg │ │ ├── demo-ionichn@2x.jpg │ │ ├── demo-stedux@2x.jpg │ │ ├── demo-stenciljs.jpg │ │ ├── demo-stenimator.jpg │ │ ├── demo-instamusic@2x.jpg │ │ ├── demo-ionicbeer@2x.jpg │ │ ├── demo-revogrid@2x.jpg │ │ ├── demo-stenciljs@2x.jpg │ │ └── demo-stenimator@2x.jpg │ ├── pwa-toolkit-logo.png │ ├── video-thumbnail.png │ ├── frameworks-sprite.png │ ├── pwa-toolkit-logo@2x.png │ ├── video-thumbnail-2.png │ ├── video-thumbnail-3.png │ ├── pwa-lighthouse-score.png │ ├── testing │ │ └── diff-example.png │ ├── pwa-lighthouse-score@2x.png │ ├── components │ │ ├── announcement-bar │ │ │ ├── bg-ioniconf.png │ │ │ └── bg-ioniconf-2022.png │ │ └── product-dropdown │ │ │ ├── logo-dark.png │ │ │ └── logo-light.png │ ├── stencil-logo.svg │ ├── stencil-logo-old.svg │ └── stencil-logo-new.svg ├── icon │ └── favicon.ico ├── cli.ts └── blog │ └── list.json ├── .github ├── CODEOWNERS └── workflows │ ├── main.yml │ ├── format.yml │ └── check-markdown.yml ├── docs ├── config │ ├── _category_.json │ ├── docs.md │ └── plugins.md ├── guides │ ├── _category_.json │ └── build-conditionals.md ├── testing │ ├── _category_.json │ ├── playwright │ │ └── _category_.json │ ├── webdriverio │ │ ├── _category_.json │ │ └── 03-mocking.md │ └── stencil-testrunner │ │ ├── _category_.json │ │ └── 02-config.md ├── components │ └── _category_.json ├── core │ ├── _category_.json │ └── dev-server-api.md ├── reference │ └── _category_.json ├── introduction │ └── _category_.json ├── output-targets │ └── _category_.json ├── framework-integration │ ├── _category_.json │ └── 01-overview.md ├── static-site-generation │ ├── _category_.json │ ├── deployment.md │ └── server-side-rendering-ssr.md ├── documentation-generation │ ├── _category_.json │ └── 01-overview.md └── build-variables.md ├── src ├── css │ ├── html.css │ ├── screenshot.css │ ├── measure.css │ ├── headline.css │ ├── utils.css │ ├── code.css │ ├── link.css │ ├── table.css │ ├── variables.css │ ├── buttons.css │ ├── bs-chart.scss │ └── lists.css ├── manifest.json ├── components │ └── LifecycleMethodsChart.module.css └── theme │ └── SearchBar │ ├── index.module.scss │ └── index.tsx ├── versioned_docs ├── version-v2 │ ├── config │ │ ├── _category_.json │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ └── _category_.json │ ├── components │ │ └── _category_.json │ ├── reference │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ ├── ember.md │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ └── build-variables.md ├── version-v3 │ ├── config │ │ ├── _category_.json │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ └── _category_.json │ ├── components │ │ └── _category_.json │ ├── reference │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ ├── ember.md │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ ├── documentation-generation │ │ ├── _category_.json │ │ └── 01-overview.md │ └── build-variables.md ├── version-v4.33 │ ├── config │ │ ├── _category_.json │ │ ├── docs.md │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ ├── _category_.json │ │ ├── playwright │ │ │ └── _category_.json │ │ ├── webdriverio │ │ │ ├── _category_.json │ │ │ └── 03-mocking.md │ │ └── stencil-testrunner │ │ │ ├── _category_.json │ │ │ └── 02-config.md │ ├── components │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── reference │ │ └── _category_.json │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ ├── documentation-generation │ │ ├── _category_.json │ │ └── 01-overview.md │ └── build-variables.md ├── version-v4.34 │ ├── config │ │ ├── _category_.json │ │ ├── docs.md │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ ├── _category_.json │ │ ├── playwright │ │ │ └── _category_.json │ │ ├── webdriverio │ │ │ ├── _category_.json │ │ │ └── 03-mocking.md │ │ └── stencil-testrunner │ │ │ ├── _category_.json │ │ │ └── 02-config.md │ ├── components │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── reference │ │ └── _category_.json │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ ├── documentation-generation │ │ ├── _category_.json │ │ └── 01-overview.md │ └── build-variables.md ├── version-v4.35 │ ├── config │ │ ├── _category_.json │ │ ├── docs.md │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ ├── _category_.json │ │ ├── playwright │ │ │ └── _category_.json │ │ ├── webdriverio │ │ │ ├── _category_.json │ │ │ └── 03-mocking.md │ │ └── stencil-testrunner │ │ │ ├── _category_.json │ │ │ └── 02-config.md │ ├── components │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── reference │ │ └── _category_.json │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ ├── documentation-generation │ │ ├── _category_.json │ │ └── 01-overview.md │ └── build-variables.md ├── version-v4.36 │ ├── config │ │ ├── _category_.json │ │ ├── docs.md │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ ├── _category_.json │ │ ├── playwright │ │ │ └── _category_.json │ │ ├── webdriverio │ │ │ ├── _category_.json │ │ │ └── 03-mocking.md │ │ └── stencil-testrunner │ │ │ ├── _category_.json │ │ │ └── 02-config.md │ ├── components │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── reference │ │ └── _category_.json │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ ├── documentation-generation │ │ ├── _category_.json │ │ └── 01-overview.md │ └── build-variables.md ├── version-v4.37 │ ├── config │ │ ├── _category_.json │ │ ├── docs.md │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ ├── _category_.json │ │ ├── playwright │ │ │ └── _category_.json │ │ ├── webdriverio │ │ │ ├── _category_.json │ │ │ └── 03-mocking.md │ │ └── stencil-testrunner │ │ │ ├── _category_.json │ │ │ └── 02-config.md │ ├── components │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── reference │ │ └── _category_.json │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ ├── documentation-generation │ │ ├── _category_.json │ │ └── 01-overview.md │ └── build-variables.md ├── version-v4.38 │ ├── config │ │ ├── _category_.json │ │ ├── docs.md │ │ └── plugins.md │ ├── guides │ │ ├── _category_.json │ │ └── build-conditionals.md │ ├── testing │ │ ├── _category_.json │ │ ├── playwright │ │ │ └── _category_.json │ │ ├── webdriverio │ │ │ ├── _category_.json │ │ │ └── 03-mocking.md │ │ └── stencil-testrunner │ │ │ ├── _category_.json │ │ │ └── 02-config.md │ ├── components │ │ └── _category_.json │ ├── core │ │ ├── _category_.json │ │ └── dev-server-api.md │ ├── reference │ │ └── _category_.json │ ├── introduction │ │ └── _category_.json │ ├── output-targets │ │ └── _category_.json │ ├── framework-integration │ │ ├── _category_.json │ │ └── 01-overview.md │ ├── static-site-generation │ │ ├── _category_.json │ │ └── deployment.md │ ├── documentation-generation │ │ ├── _category_.json │ │ └── 01-overview.md │ └── build-variables.md └── version-v4.39 │ ├── config │ ├── _category_.json │ ├── docs.md │ └── plugins.md │ ├── guides │ ├── _category_.json │ └── build-conditionals.md │ ├── testing │ ├── _category_.json │ ├── playwright │ │ └── _category_.json │ ├── webdriverio │ │ ├── _category_.json │ │ └── 03-mocking.md │ └── stencil-testrunner │ │ ├── _category_.json │ │ └── 02-config.md │ ├── components │ └── _category_.json │ ├── core │ ├── _category_.json │ └── dev-server-api.md │ ├── reference │ └── _category_.json │ ├── introduction │ └── _category_.json │ ├── output-targets │ └── _category_.json │ ├── framework-integration │ ├── _category_.json │ └── 01-overview.md │ ├── static-site-generation │ ├── _category_.json │ └── deployment.md │ ├── documentation-generation │ ├── _category_.json │ └── 01-overview.md │ └── build-variables.md ├── .prettierignore ├── babel.config.js ├── .env ├── versions.json ├── cspell.json ├── .gitignore ├── cspell-wordlist.txt ├── versioned_sidebars ├── version-v2-sidebars.json ├── version-v3-sidebars.json ├── version-v4.33-sidebars.json ├── version-v4.34-sidebars.json ├── version-v4.35-sidebars.json ├── version-v4.36-sidebars.json ├── version-v4.37-sidebars.json ├── version-v4.38-sidebars.json └── version-v4.39-sidebars.json ├── LICENSE └── sidebars.js /static/.nojekyll: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | * @ionic-team/stencil 2 | -------------------------------------------------------------------------------- /docs/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /docs/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /docs/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /static/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/icon.png -------------------------------------------------------------------------------- /static/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/logo.png -------------------------------------------------------------------------------- /static/img/pwa.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/pwa.png -------------------------------------------------------------------------------- /docs/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /docs/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /docs/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /src/css/html.css: -------------------------------------------------------------------------------- 1 | hr { 2 | height: 1px; 3 | background-color: #eee; 4 | border: none; 5 | } -------------------------------------------------------------------------------- /static/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/icon/favicon.ico -------------------------------------------------------------------------------- /static/img/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/logo-dark.png -------------------------------------------------------------------------------- /static/img/text-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/text-logo.png -------------------------------------------------------------------------------- /docs/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /docs/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /docs/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /static/img/Docs w/toc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/Docs w/toc.png -------------------------------------------------------------------------------- /static/img/appflow-ad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/appflow-ad.png -------------------------------------------------------------------------------- /static/img/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/logo-light.png -------------------------------------------------------------------------------- /static/img/stencil-og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/stencil-og.png -------------------------------------------------------------------------------- /static/img/video-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/video-icon.png -------------------------------------------------------------------------------- /static/img/ds-guide-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/ds-guide-cover.png -------------------------------------------------------------------------------- /static/img/feature-icons.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/feature-icons.png -------------------------------------------------------------------------------- /static/img/ionic-os-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/ionic-os-logo.png -------------------------------------------------------------------------------- /versioned_docs/version-v2/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/config/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Config", 3 | "position": 5 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/guides/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Guides", 3 | "position": 8 4 | } 5 | -------------------------------------------------------------------------------- /static/cli.ts: -------------------------------------------------------------------------------- 1 | console.log('\x1b[31mERROR\x1b[0m Stencil for Deno has reached end-of-life'); 2 | Deno.exit(1); 3 | -------------------------------------------------------------------------------- /static/img/demos/demo-fiber.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-fiber.jpg -------------------------------------------------------------------------------- /static/img/pwa-toolkit-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/pwa-toolkit-logo.png -------------------------------------------------------------------------------- /static/img/video-thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/video-thumbnail.png -------------------------------------------------------------------------------- /versioned_docs/version-v2/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/testing/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Testing", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json 2 | package-lock.json 3 | # auto-generated/maintained by docusaurus 4 | versions.json 5 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [require.resolve('@docusaurus/core/lib/babel/preset')], 3 | }; 4 | -------------------------------------------------------------------------------- /docs/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /docs/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /docs/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /static/img/demos/demo-fiber@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-fiber@2x.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-ionichn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-ionichn.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-revogrid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-revogrid.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-stedux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-stedux.jpg -------------------------------------------------------------------------------- /static/img/frameworks-sprite.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/frameworks-sprite.png -------------------------------------------------------------------------------- /static/img/pwa-toolkit-logo@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/pwa-toolkit-logo@2x.png -------------------------------------------------------------------------------- /static/img/video-thumbnail-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/video-thumbnail-2.png -------------------------------------------------------------------------------- /static/img/video-thumbnail-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/video-thumbnail-3.png -------------------------------------------------------------------------------- /versioned_docs/version-v2/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/components/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Components", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/core/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Core Compiler API", 3 | "position": 9 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/reference/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Reference", 3 | "position": 10 4 | } 5 | -------------------------------------------------------------------------------- /docs/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /static/img/demos/demo-instamusic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-instamusic.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-ionicbeer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-ionicbeer.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-ionichn@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-ionichn@2x.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-stedux@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-stedux@2x.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-stenciljs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-stenciljs.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-stenimator.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-stenimator.jpg -------------------------------------------------------------------------------- /static/img/pwa-lighthouse-score.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/pwa-lighthouse-score.png -------------------------------------------------------------------------------- /static/img/testing/diff-example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/testing/diff-example.png -------------------------------------------------------------------------------- /versioned_docs/version-v2/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/introduction/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Introduction", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /static/img/demos/demo-instamusic@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-instamusic@2x.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-ionicbeer@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-ionicbeer@2x.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-revogrid@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-revogrid@2x.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-stenciljs@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-stenciljs@2x.jpg -------------------------------------------------------------------------------- /static/img/demos/demo-stenimator@2x.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/demos/demo-stenimator@2x.jpg -------------------------------------------------------------------------------- /static/img/pwa-lighthouse-score@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/pwa-lighthouse-score@2x.png -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/output-targets/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Output Targets", 3 | "position": 6 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/testing/playwright/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Playwright", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/testing/webdriverio/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "WebdriverIO", 3 | "position": 2 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/framework-integration/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Framework Integrations", 3 | "position": 3 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/static-site-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Static Site Generation", 3 | "position": 4 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/testing/stencil-testrunner/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Stencil Test Runner", 3 | "position": 1 4 | } 5 | -------------------------------------------------------------------------------- /src/css/screenshot.css: -------------------------------------------------------------------------------- 1 | 2 | .screenshot { 3 | max-width: 100%; 4 | box-shadow: 0px 2px 4px rgba(0,0,0,0.1); 5 | border-radius: 4px; 6 | } 7 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/documentation-generation/_category_.json: -------------------------------------------------------------------------------- 1 | { 2 | "label": "Documentation Generation", 3 | "position": 7 4 | } 5 | -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | ENABLE_SEARCH=true 2 | ALGOLIA_INDEX="prod_stencil_site" 3 | ALGOLIA_APP_ID="U8C19STHEM" 4 | ALGOLIA_SEARCH_KEY="37f5d36b35de22eb3716a45df5063d62" -------------------------------------------------------------------------------- /static/img/components/announcement-bar/bg-ioniconf.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/components/announcement-bar/bg-ioniconf.png -------------------------------------------------------------------------------- /static/img/components/product-dropdown/logo-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/components/product-dropdown/logo-dark.png -------------------------------------------------------------------------------- /static/img/components/product-dropdown/logo-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/components/product-dropdown/logo-light.png -------------------------------------------------------------------------------- /static/img/components/announcement-bar/bg-ioniconf-2022.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stenciljs/site/HEAD/static/img/components/announcement-bar/bg-ioniconf-2022.png -------------------------------------------------------------------------------- /versions.json: -------------------------------------------------------------------------------- 1 | [ 2 | "v4.39", 3 | "v4.38", 4 | "v4.37", 5 | "v4.36", 6 | "v4.35", 7 | "v4.34", 8 | "v4.33", 9 | "v3", 10 | "v2" 11 | ] 12 | -------------------------------------------------------------------------------- /src/css/measure.css: -------------------------------------------------------------------------------- 1 | .measure-xl { 2 | max-width: 720px; 3 | } 4 | 5 | .measure-lg { 6 | max-width: 660px; 7 | } 8 | 9 | .measure-md { 10 | max-width: 460px; 11 | } 12 | -------------------------------------------------------------------------------- /src/css/headline.css: -------------------------------------------------------------------------------- 1 | .headline { 2 | margin-top: 0; 3 | margin-bottom: 80px; 4 | } 5 | 6 | @media screen and (max-width: 768px) { 7 | .headline { 8 | text-align: center; 9 | margin-bottom: 60px; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /cspell.json: -------------------------------------------------------------------------------- 1 | { 2 | "dictionaries": ["custom-words"], 3 | "dictionaryDefinitions": [ 4 | { 5 | "name": "custom-words", 6 | "path": "./cspell-wordlist.txt", 7 | "addWords": true 8 | } 9 | ], 10 | "ignoreRegExpList": ["/(```+)[\\s\\S]+?\\1/g", "/`[a-zA-Z-_]+`/g", "/:[a-z_]+:/g"] 11 | } 12 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Stencil", 3 | "short_name": "Stencil", 4 | "start_url": "/", 5 | "display": "standalone", 6 | "icons": [ 7 | { 8 | "src": "assets/img/icon.png", 9 | "sizes": "512x512", 10 | "type": "image/png" 11 | } 12 | ], 13 | "background_color": "#16161d", 14 | "theme_color": "#16161d" 15 | } 16 | -------------------------------------------------------------------------------- /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: CI 2 | 3 | on: 4 | push: 5 | branches: 6 | - 'main' 7 | pull_request: 8 | branches: 9 | - '**' 10 | 11 | concurrency: 12 | group: ${{ github.workflow }}-${{ github.ref }} 13 | cancel-in-progress: true 14 | 15 | jobs: 16 | format: 17 | name: Format 18 | uses: ./.github/workflows/format.yml 19 | -------------------------------------------------------------------------------- /src/css/utils.css: -------------------------------------------------------------------------------- 1 | .push { 2 | margin-top: 70px; 3 | } 4 | 5 | .push-sm { 6 | margin-top: 36px; 7 | } 8 | 9 | .block { 10 | display: block; 11 | } 12 | 13 | .pull-left { 14 | float: left; 15 | } 16 | 17 | .pull-right{ 18 | float: right; 19 | } 20 | 21 | .no-scroll { 22 | overflow: hidden; 23 | } 24 | 25 | .sticky { 26 | position: sticky; 27 | top: 24px; 28 | } 29 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | 4 | # Production 5 | /build 6 | 7 | # Generated files 8 | .docusaurus 9 | .cache-loader 10 | 11 | # Misc 12 | .DS_Store 13 | .env.local 14 | .env.development.local 15 | .env.test.local 16 | .env.production.local 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | 22 | www 23 | 24 | # IDEs 25 | .idea/ 26 | .vscode/ 27 | 28 | # vercel 29 | .vercel 30 | auth.json 31 | config.json 32 | -------------------------------------------------------------------------------- /docs/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/core/dev-server-api.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Core Dev Server API 3 | sidebar_label: Dev Server API 4 | description: Stencil Core Dev Server API 5 | slug: /dev-server-api 6 | --- 7 | 8 | # Stencil Core Dev Server API 9 | 10 | The CLI API can be found at `@stencil/core/dev-server`. 11 | 12 | ## start() 13 | 14 | ```tsx 15 | start(stencilDevServerConfig: StencilDevServerConfig, logger: Logger, watcher?: CompilerWatcher): Promise 16 | ``` 17 | -------------------------------------------------------------------------------- /src/css/code.css: -------------------------------------------------------------------------------- 1 | 2 | code { 3 | font-weight: 400; 4 | font-family: 'SFMono-Regular', 'Lucida Console', Monaco, monospace; 5 | font-size: 14px; 6 | } 7 | 8 | ol code, 9 | ul code, 10 | p code, 11 | table code { 12 | font-size: 14px; 13 | padding: 2px 6px 3px; 14 | background-color: var(--color-whisper); 15 | color: var(--color-woodsmoke); 16 | border-radius: 3px; 17 | white-space: nowrap; 18 | } 19 | 20 | h1 code, 21 | h2 code, 22 | h3 code { 23 | font-size: 0.8em; 24 | font-weight: bold; 25 | } 26 | 27 | blockquote code { 28 | font-size: 13px; 29 | background-color: var(--color-wheatfield); 30 | } 31 | -------------------------------------------------------------------------------- /cspell-wordlist.txt: -------------------------------------------------------------------------------- 1 | !Javascript 2 | !PostCss 3 | !TurboRepo 4 | !Typescript 5 | !nodejs 6 | Brunelle 7 | Deno 8 | FOUC 9 | Ionicons 10 | POSIX 11 | Turborepo 12 | Vetur 13 | WHATWG 14 | async 15 | autoprefixing 16 | contentful 17 | declutter 18 | divs 19 | expressjs 20 | lifecycles 21 | microtask 22 | minifier 23 | Nuxt 24 | polyfilling 25 | precache 26 | prehydration 27 | prerender 28 | prerendered 29 | prerendering 30 | prerenders 31 | proxied 32 | pseudocode 33 | runtimes 34 | shadowrootmode 35 | sourcemaps 36 | templating 37 | transpiles 38 | transpiling 39 | unshift 40 | usingtheplatform 41 | vnode 42 | webapps 43 | wdio 44 | webdriverio -------------------------------------------------------------------------------- /src/components/LifecycleMethodsChart.module.css: -------------------------------------------------------------------------------- 1 | .lifecycleChart { 2 | display: block; 3 | 4 | --opacity: 1; 5 | } 6 | 7 | .lifecycleChart.highlight { 8 | --opacity: 0.5; 9 | } 10 | 11 | .lifecycleChart rect, 12 | .lifecycleChart text, 13 | .lifecycleChart path { 14 | opacity: var(--opacity); 15 | transition: opacity 0.2s ease-in-out; 16 | } 17 | 18 | .lifecycleChart .trigger { 19 | cursor: default; 20 | } 21 | 22 | .lifecycleChart.highlight-init .pathInit, 23 | .lifecycleChart.highlight-attached .pathAttached, 24 | .lifecycleChart.highlight-removed .pathRemoved, 25 | .lifecycleChart.highlight-update .pathUpdate { 26 | --opacity: 1; 27 | } 28 | -------------------------------------------------------------------------------- /src/css/link.css: -------------------------------------------------------------------------------- 1 | 2 | .text-link { 3 | transition: border 0.3s; 4 | font-size: 13px; 5 | line-height: 20px; 6 | text-transform: uppercase; 7 | letter-spacing: 0.05em; 8 | text-decoration: none; 9 | font-weight: 700; 10 | border-bottom: 2px solid transparent; 11 | padding-bottom: 3px; 12 | } 13 | 14 | .text-link--primary { 15 | color: var(--color-dodger-blue); 16 | } 17 | 18 | .text-link--primary:hover { 19 | border-bottom-color: var(--color-dodger-blue-hover); 20 | } 21 | 22 | .text-link--secondary { 23 | color: var(--color-manatee); 24 | } 25 | 26 | .text-link--secondary:hover { 27 | border-bottom-color: rgba(136, 136, 162, 0.2); 28 | } 29 | 30 | stencil-route-link:hover { 31 | cursor: pointer; 32 | } 33 | -------------------------------------------------------------------------------- /src/css/table.css: -------------------------------------------------------------------------------- 1 | 2 | table { 3 | width: 100%; 4 | overflow: auto; 5 | margin-top: 28px; 6 | margin-bottom: 18px; 7 | border-spacing: 0; 8 | border-collapse: collapse; 9 | overflow-x: auto; 10 | } 11 | 12 | tr { 13 | background-color: #fff; 14 | border-top: 1px solid #c6cbd1; 15 | } 16 | 17 | th { 18 | font-size: 13px; 19 | font-weight: bold; 20 | } 21 | 22 | th, 23 | td { 24 | padding: 10px 10px; 25 | border: 1px solid #dfe2e5; 26 | } 27 | 28 | td { 29 | border: 1px solid #dfe2e5; 30 | vertical-align: top; 31 | font-size: 14px; 32 | } 33 | 34 | td { 35 | line-height: 1.5; 36 | } 37 | 38 | table code { 39 | font-size: 13px; 40 | } 41 | 42 | tr:nth-child(2n) { 43 | background-color: #f6f8fa; 44 | } 45 | 46 | 47 | @media screen and (max-width: 590px) { 48 | table { 49 | display: block; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /docs/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v2/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v3/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/static-site-generation/deployment.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Deploying a Static Site 3 | sidebar_label: Deployment 4 | description: Deploying a Static Site 5 | slug: /static-site-generation-deployment 6 | --- 7 | 8 | # Deploying a Stencil Static Site 9 | 10 | Deploying a prerendered static site built with Stencil is exactly like deploying any static site, because the output is just a set of HTML files. 11 | 12 | Every path that Stencil detects (or is provided using `entryUrls` in the prerender config) is generated in the `www` output target's directory, with each url given an `index.html` that becomes the root for the app. 13 | 14 | Think of it as turning every URL in your app into a standalone web page that bootstraps the entire app. No matter what URL a visitor comes to, they will be served an `index.html` file with that page's specific content already rendered, but with the entire app then hydrating and loading. 15 | 16 | This means you can simply deploy the `www` output target's directory to any static host! -------------------------------------------------------------------------------- /versioned_docs/version-v2/framework-integration/ember.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ember Integration with Stencil 3 | sidebar_label: Ember 4 | description: Ember Integration with Stencil 5 | slug: /ember 6 | --- 7 | 8 | # Ember 9 | 10 | Working with Stencil components in Ember is really easy thanks to the `ember-cli-stencil` addon. It handles: 11 | 12 | - Importing the required files into your `vendor.js` 13 | - Copying the component definitions into your `assets` directory 14 | - Optionally generating a wrapper component for improved compatibility with older Ember versions 15 | 16 | Start off by installing the Ember addon 17 | 18 | ```bash 19 | ember install ember-cli-stencil 20 | ``` 21 | 22 | Now, when you build your application, Stencil collections in your dependencies will automatically be discovered and pulled into your application. You can just start using the custom elements in your `hbs` files with no further work needed. For more information, check out the [`ember-cli-stencil` documentation](https://github.com/alexlafroscia/ember-cli-stencil). 23 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/framework-integration/ember.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Ember Integration with Stencil 3 | sidebar_label: Ember 4 | description: Ember Integration with Stencil 5 | slug: /ember 6 | --- 7 | 8 | # Ember 9 | 10 | Working with Stencil components in Ember is really easy thanks to the `ember-cli-stencil` addon. It handles: 11 | 12 | - Importing the required files into your `vendor.js` 13 | - Copying the component definitions into your `assets` directory 14 | - Optionally generating a wrapper component for improved compatibility with older Ember versions 15 | 16 | Start off by installing the Ember addon 17 | 18 | ```bash 19 | ember install ember-cli-stencil 20 | ``` 21 | 22 | Now, when you build your application, Stencil collections in your dependencies will automatically be discovered and pulled into your application. You can just start using the custom elements in your `hbs` files with no further work needed. For more information, check out the [`ember-cli-stencil` documentation](https://github.com/alexlafroscia/ember-cli-stencil). 23 | -------------------------------------------------------------------------------- /src/css/variables.css: -------------------------------------------------------------------------------- 1 | 2 | :root { 3 | --color-woodsmoke: #03060B; 4 | --color-gandalf: #414155; 5 | --color-gunpowder: #505061; 6 | --color-dolphin: #2D4665; 7 | --color-manatee: #8888A2; 8 | --color-concrete: #9F9EB2; 9 | --color-cadet-blue: #abb2bf; 10 | --color-whisper: #EBEBF7; 11 | --color-selago: #F4F4FD; 12 | --color-white-lilac: #f8f8fc; 13 | --color-white: #fff; 14 | 15 | --color-green-haze: #00AB47; 16 | 17 | --color-dodger-blue-rgb: 76, 72, 255; 18 | --color-dodger-blue: rgb(76, 72, 255); 19 | --color-dodger-blue-contrast: rgb(255, 255, 255); 20 | --color-dodger-blue-hover: rgba(76, 72, 255, 0.2); 21 | 22 | --color-purplewinkle: #F4F4FF; 23 | 24 | --color-old-lace: #fdf5e4; 25 | --color-wheatfield: #F1E3C5; 26 | --color-pirate-gold: #9A6400; 27 | 28 | --button-shadow: 0px 2px 4px rgba(2, 8, 20, 0.1), 0px 1px 2px rgba(2, 8, 20, 0.08); 29 | --button-shadow-hover: 0 4px 6px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.08); 30 | 31 | --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); 32 | 33 | --line-rule-color: #edf2f6; 34 | } 35 | -------------------------------------------------------------------------------- /.github/workflows/format.yml: -------------------------------------------------------------------------------- 1 | name: Format Stencil Docs (Check) 2 | 3 | on: 4 | workflow_call: 5 | # Make this a reusable workflow, no value needed 6 | # https://docs.github.com/en/actions/using-workflows/reusing-workflows 7 | 8 | jobs: 9 | format: 10 | name: Check 11 | runs-on: 'ubuntu-latest' 12 | steps: 13 | - name: Checkout Code 14 | uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 15 | 16 | # this overrides previous versions of the node runtime that was set. 17 | # jobs that need a different version of the Node runtime should explicitly 18 | # set their node version after running this step 19 | - name: Use Node Version from Volta 20 | uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0 21 | with: 22 | node-version-file: './package.json' 23 | cache: 'npm' 24 | 25 | - name: Install Dependencies 26 | run: npm ci 27 | shell: bash 28 | 29 | - name: Prettier Check 30 | run: npm run prettier.dry-run 31 | shell: bash 32 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v2-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v3-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v4.33-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v4.34-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v4.35-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v4.36-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v4.37-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v4.38-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /versioned_sidebars/version-v4.39-sidebars.json: -------------------------------------------------------------------------------- 1 | { 2 | "docs": [ 3 | { 4 | "type": "autogenerated", 5 | "dirName": "." 6 | }, 7 | { 8 | "type": "category", 9 | "label": "Community", 10 | "items": [ 11 | { 12 | "type": "link", 13 | "label": "Stencil on Twitter", 14 | "href": "https://twitter.com/stenciljs" 15 | }, 16 | { 17 | "type": "link", 18 | "label": "Stencil on Discord", 19 | "href": "https://chat.stenciljs.com/" 20 | }, 21 | { 22 | "type": "link", 23 | "label": "Stencil on GitHub", 24 | "href": "https://github.com/ionic-team/stencil" 25 | } 26 | ] 27 | }, 28 | { 29 | "type": "category", 30 | "label": "Legal", 31 | "items": [ 32 | { 33 | "type": "doc", 34 | "id": "telemetry" 35 | }, 36 | { 37 | "type": "link", 38 | "label": "Privacy Policy", 39 | "href": "https://ionic.io/privacy" 40 | } 41 | ] 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Ionic 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /src/theme/SearchBar/index.module.scss: -------------------------------------------------------------------------------- 1 | .search { 2 | position: relative; 3 | 4 | display: flex; 5 | align-items: center; 6 | 7 | @media (max-width: 540px) { 8 | display: none; 9 | } 10 | 11 | :global(.algolia-autocomplete) { 12 | width: 100%; 13 | } 14 | 15 | &::after { 16 | content: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSIxNCIgZmlsbD0ibm9uZSI+PHBhdGggZmlsbD0iI0IyQkVDRCIgZD0iTTE0LjI5IDEyLjYgMTEuMSA5LjQxYTUuOSA1LjkgMCAxIDAtMS4yIDEuMmwzLjE4IDMuMTdhLjg0Ljg0IDAgMCAwIDEuMi0xLjJaTTIuMTkgNS45YTQuMjEgNC4yMSAwIDEgMSA4LjQxIDAgNC4yMSA0LjIxIDAgMCAxLTguNDIgMFoiLz48L3N2Zz4='); 17 | 18 | position: absolute; 19 | left: 11px; 20 | 21 | transform: translateY(2px); 22 | } 23 | 24 | &Input { 25 | padding: 8px 8px 8px 32px; 26 | 27 | background-color: var(--ifm-navbar-background-color); 28 | 29 | width: 100%; 30 | 31 | border: 1px solid var(--search-border, var(--c-indigo-30)); 32 | border-radius: 8px; 33 | 34 | height: 2.25rem; 35 | 36 | font-weight: 400; 37 | font-size: 0.875rem; 38 | line-height: 17px; 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /.github/workflows/check-markdown.yml: -------------------------------------------------------------------------------- 1 | name: Check Markdown 2 | 3 | on: 4 | pull_request: 5 | branches: 6 | - '**' 7 | 8 | jobs: 9 | markdown-link-check: 10 | runs-on: ubuntu-latest 11 | steps: 12 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 13 | 14 | - name: Use Node from Volta 15 | uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0 16 | with: 17 | node-version-file: 'package.json' 18 | cache: 'npm' 19 | 20 | - name: install dependencies 21 | run: npm ci 22 | 23 | - name: check internal markdown links 24 | run: npm run check-links 25 | 26 | markdown-spelling-check: 27 | runs-on: ubuntu-latest 28 | steps: 29 | - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2 30 | 31 | - name: Use Node from Volta 32 | uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.1.0 33 | with: 34 | node-version-file: 'package.json' 35 | cache: 'npm' 36 | 37 | - name: install dependencies 38 | run: npm ci 39 | 40 | - name: check spelling 41 | run: npm run spellcheck 42 | -------------------------------------------------------------------------------- /docs/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/testing/stencil-testrunner/02-config.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Testing Config 3 | sidebar_label: Config 4 | description: Testing Config 5 | slug: /testing-config 6 | --- 7 | 8 | # Testing Config 9 | 10 | The `testing` config setting in `stencil.config.ts` specifies an object that corresponds to the jest configuration that should be used in your tests. Stencil provides a default configuration, which you likely won't need to edit, however it can be extended with the same configuration options as Jest. See the [Configuring Jest Guide](https://jestjs.io/docs/en/configuration.html) for configuration details. 11 | 12 | :::note 13 | Keep in mind that the usual way of configuring Jest (`package.json` and `jest.config.js`) is not used with the `stencil testing` command. Jest can still be used, but configuring the presets, transpilation and setting up the correct commands must be done by the project. 14 | ::: 15 | 16 | Some additional Stencil specific options may be set here as well for configuring the e2e tests. 17 | 18 | ```tsx reference title="" 19 | https://github.com/ionic-team/stencil/blob/32811591777de726f0374649a4f5e250a0a8e355/src/declarations/stencil-public-compiler.ts#L1968-L2119 20 | ``` 21 | -------------------------------------------------------------------------------- /sidebars.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | /** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */ 4 | const sidebars = { 5 | docs: [ 6 | { 7 | type: 'autogenerated', 8 | dirName: '.', // '.' means the current docs folder 9 | }, 10 | { 11 | type: 'category', 12 | label: 'Community', 13 | items: [ 14 | { 15 | type: 'link', 16 | label: 'Stencil on Twitter', 17 | href: 'https://twitter.com/stenciljs', 18 | }, 19 | { 20 | type: 'link', 21 | label: 'Stencil on Discord', 22 | href: 'https://chat.stenciljs.com/', 23 | }, 24 | { 25 | type: 'link', 26 | label: 'Stencil on GitHub', 27 | href: 'https://github.com/ionic-team/stencil', 28 | }, 29 | ], 30 | }, 31 | { 32 | type: 'category', 33 | label: 'Legal', 34 | items: [ 35 | { 36 | type: 'doc', 37 | id: 'telemetry', 38 | }, 39 | { 40 | type: 'link', 41 | label: 'Privacy Policy', 42 | href: 'https://ionic.io/privacy', 43 | }, 44 | ], 45 | }, 46 | ], 47 | }; 48 | 49 | module.exports = sidebars; 50 | -------------------------------------------------------------------------------- /docs/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /docs/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /src/css/buttons.css: -------------------------------------------------------------------------------- 1 | 2 | .btn { 3 | transition: all .15s ease; 4 | text-decoration: none; 5 | border: none; 6 | outline: none; 7 | font-size: 14px; 8 | font-weight: 700; 9 | text-transform: uppercase; 10 | padding: 14px 20px 16px; 11 | border-radius: 6px; 12 | letter-spacing: 0.04em; 13 | box-shadow: var(--button-shadow); 14 | cursor: pointer; 15 | display: inline-flex; 16 | align-items: center; 17 | 18 | } 19 | 20 | .btn a { 21 | text-decoration: none; 22 | color: inherit; 23 | } 24 | 25 | .btn app-icon { 26 | margin-right: 8px; 27 | opacity: 0.8; 28 | } 29 | 30 | .btn:hover { 31 | text-decoration: none; 32 | transform: translateY(-1px); 33 | box-shadow: var(--button-shadow-hover); 34 | } 35 | 36 | .btn--primary { 37 | background: var(--color-dodger-blue); 38 | color: var(--color-white); 39 | } 40 | 41 | .btn--secondary { 42 | background: var(--color-white); 43 | color: var(--color-dodger-blue); 44 | } 45 | 46 | .btn--tertiary { 47 | background: #F4F4FD; 48 | color: var(--color-dodger-blue); 49 | box-shadow: none; 50 | } 51 | 52 | .btn--tertiary:hover { 53 | background-color: #ececf9; 54 | box-shadow: none; 55 | transform: none; 56 | } 57 | 58 | .btn--small { 59 | letter-spacing: -0.02em; 60 | text-transform: none; 61 | font-size: 15px; 62 | padding: 5px 12px 7px; 63 | font-weight: 600; 64 | border-radius: 8px; 65 | min-height: 38px; 66 | } 67 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/guides/build-conditionals.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Conditionals 3 | description: Build Conditionals 4 | --- 5 | 6 | # Build Conditionals 7 | 8 | Build Conditionals in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 9 | 10 | ### Using Build Conditionals 11 | 12 | Lets dive in and look at an example of how to use our build conditional: 13 | 14 | ```tsx 15 | import { Component, Build } from '@stencil/core'; 16 | 17 | @Component({ 18 | tag: 'stencil-app', 19 | styleUrl: 'stencil-app.css' 20 | }) 21 | export class StencilApp { 22 | 23 | componentDidLoad() { 24 | if (Build.isDev) { 25 | console.log('im in dev mode'); 26 | } else { 27 | console.log('im running in production'); 28 | } 29 | } 30 | } 31 | ``` 32 | 33 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 34 | 35 | ### Use Cases 36 | 37 | Some use cases we have come up with are: 38 | 39 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 40 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 41 | - Disabling auth checks when in dev mode 42 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/framework-integration/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Framework Integration 3 | sidebar_label: Overview 4 | description: Framework Integration 5 | slug: /overview 6 | --- 7 | 8 | # Framework Integration 9 | 10 | Stencil's primary goal is to remove the need for components to be written using a specific framework's API. 11 | It accomplishes this by using standardized web platform APIs that work across all modern browsers. 12 | Using the low-level component model that is provided by the browser (which all frameworks are built on) allows Stencil components to work inside a framework or without one. 13 | 14 | The experience of integrating web components directly into existing applications can be tricky at times, as frameworks have varying support for vanilla web components. 15 | In order to accommodate the various issues the Stencil team has created Framework Wrappers to make the process simpler. 16 | 17 | The Framework Wrappers are configured like output targets, and emit a native library, just like if your components were originally written using any of these frameworks: 18 | 19 | - [Angular](./angular.md) 20 | - [React](./react.md) 21 | - [Vue](./vue.md) 22 | - [Ember (Community)](./ember.md) 23 | 24 | By using Stencil bindings, you can build your components once, and have Stencil emit Angular/React/Vue libraries. 25 | This way, the consumers of your components can enjoy all the features of their framework of choice. 26 | -------------------------------------------------------------------------------- /src/theme/SearchBar/index.tsx: -------------------------------------------------------------------------------- 1 | import React, { useEffect } from 'react'; 2 | 3 | import styles from './index.module.scss'; 4 | 5 | type DocSearchProps = { 6 | apiKey: string; 7 | indexName: string; 8 | inputSelector: string; 9 | debug: boolean; 10 | }; 11 | 12 | interface CustomWindow extends Window { 13 | docsearch: (props: DocSearchProps) => void; 14 | } 15 | 16 | declare const window: CustomWindow; 17 | 18 | export default function SearchBar() { 19 | useEffect(() => { 20 | const script = document.createElement('script'); 21 | script.src = 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js'; 22 | script.async = true; 23 | script.onload = () => { 24 | window.docsearch({ 25 | apiKey: '6399791d239c7e56a6b47685a64f8873', 26 | indexName: 'stenciljs', 27 | inputSelector: '#algolia-search', 28 | debug: false, // Set debug to true if you want to inspect the dropdown 29 | }); 30 | }; 31 | 32 | const link = document.createElement('link'); 33 | link.rel = 'stylesheet'; 34 | link.href = 'https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css'; 35 | 36 | document.body.appendChild(script); 37 | document.head.appendChild(link); 38 | }, []); 39 | 40 | return ( 41 |
42 | 43 |
44 | ); 45 | } 46 | -------------------------------------------------------------------------------- /static/blog/list.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "title": "Fall 2019 Stencil Roadmap", 4 | "date": "August 28, 2019", 5 | "url": "/blog/stencil-roadmap-fall-2019", 6 | "author": "Adam Bradley", 7 | "twitter": "adamdbradley", 8 | "description": "With the Stencil One release behind us, we’re seeing developers build lots of successful Stencil-based web components. Now that the dust has settled, we realized it was time to talk about what’s next for the future of the project.", 9 | "img": "/assets/img/blog/posts/stencil-roadmap-fall-2019.jpg", 10 | "filePath": "/assets/blog/stencil-roadmap-fall-2019.json" 11 | }, 12 | { 13 | "title": "How Lazy-Loading Web Components Work with Stencil", 14 | "date": "August 15, 2019", 15 | "url": "/blog/how-lazy-loading-web-components-work", 16 | "author": "Adam Bradley", 17 | "twitter": "adamdbradley", 18 | "description": "When you’re building an app that requires a large library of components in a single file download, you’re often forced to sacrifice performance - and specifically startup time - for the sake of accessing all those components. The two are often mutually exclusive. Choose to easily have all the components available, or choose blazing fast startup, but it’s difficult to get both. At least that’s the experience for many.", 19 | "img": "/assets/img/blog/posts/stencil-lazy-loading.png", 20 | "filePath": "/assets/blog/how-lazy-loading-works.json" 21 | } 22 | ] 23 | -------------------------------------------------------------------------------- /docs/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /src/css/bs-chart.scss: -------------------------------------------------------------------------------- 1 | .bs-chart, 2 | .bs-chart__cards, 3 | .bs-chart__card { 4 | display: flex; 5 | justify-content: center; 6 | } 7 | 8 | .bs-chart { 9 | margin: 40px 0; 10 | } 11 | 12 | .bs-chart__group + .bs-chart__group, 13 | .bs-chart__card + .bs-chart__card { 14 | margin-left: 8px; 15 | } 16 | 17 | .bs-chart__group:first-child .bs-chart__card { 18 | background: #39B54A; 19 | } 20 | 21 | .bs-chart__group:last-child .bs-chart__card { 22 | background: #d0901a; 23 | } 24 | 25 | .bs-chart__card { 26 | width: 110px; 27 | flex-direction: column; 28 | align-items: center; 29 | border-radius: 8px; 30 | color: #fff; 31 | padding: 8px; 32 | font-size: 11px; 33 | font-weight: 600; 34 | } 35 | 36 | .bs-chart__card ion-icon { 37 | background: rgba(255, 255, 255, 0.15); 38 | padding: 8px; 39 | border-radius: 100px; 40 | margin: 6px 0 8px; 41 | } 42 | 43 | .bs-chart__group-label { 44 | display: block; 45 | text-align: center; 46 | font-size: 11px; 47 | color: #646464; 48 | margin-top: 6px; 49 | } 50 | 51 | @media screen and (max-width: 872px) { 52 | .bs-chart__card { 53 | width: 100%; 54 | } 55 | 56 | .bs-chart, 57 | .bs-chart__group, 58 | .bs-chart__cards { 59 | flex-direction: column; 60 | } 61 | 62 | .bs-chart__group + .bs-chart__group { 63 | margin-left: 0; 64 | margin-top: 20px; 65 | } 66 | 67 | .bs-chart__card + .bs-chart__card { 68 | margin-left: 0; 69 | margin-top: 8px; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/config/docs.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Documentation Generation Config 3 | sidebar_label: Docs Config 4 | description: Documentation Generation Config 5 | slug: /docs-config 6 | --- 7 | 8 | # Docs Config 9 | 10 | The `docs` config option allows global configuration of certain behaviors related to [documentation generation output targets](../documentation-generation/01-overview.md). 11 | 12 | :::note 13 | These configurations are **global** and will be applied to all output target instances including those defined in the [`outputTargets`](../output-targets/01-overview.md) 14 | configuration, as well as those injected by CLI flags (like `--docs`). 15 | ::: 16 | 17 | ## markdown 18 | 19 | The `markdown` config object allows certain customizations for markdown files generated by the [`docs-readme` output target](../documentation-generation/docs-readme.md) or the 20 | `--docs` CLI flag. 21 | 22 | ### targetComponent 23 | 24 | **Optional** 25 | 26 | **Default: `{ textColor: '#333', background: '#f9f' }`** 27 | 28 | This option allows you to change the colors used when generating the dependency graph mermaid diagrams for components. Any hex color string is a valid 29 | value. 30 | 31 | ```tsx title="stencil.config.ts" 32 | import { Config } from '@stencil/core'; 33 | 34 | export const config: Config = { 35 | docs: { 36 | markdown: { 37 | targetComponent: { 38 | textColor: '#fff', 39 | background: '#000', 40 | }, 41 | }, 42 | }, 43 | }; 44 | ``` 45 | -------------------------------------------------------------------------------- /docs/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/testing/webdriverio/03-mocking.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Mocking 3 | sidebar_label: Mocking 4 | description: Mocking 5 | label: Mocking 6 | --- 7 | 8 | # Mocking 9 | 10 | WebdriverIO has support for file based module mocking as well as mocking of entire dependencies of your project. The framework provides a set of primitives for mocking as documented in the project [documentation](https://webdriver.io/docs/component-testing/mocking): 11 | 12 | ```ts 13 | import { mock, fn, unmock } from '@wdio/browser-runner' 14 | ``` 15 | 16 | To create a mock you can either create a file with the name of the module you would like to mock in the `__mocks__` directory, as described in [Manual Mocks](https://webdriver.io/docs/component-testing/mocking#manual-mocks), or mock the file directly as part of your test: 17 | 18 | ```ts 19 | import { mock, fn } from '@wdio/browser-runner' 20 | import { format } from './utils/utils.ts' 21 | 22 | // mock files within the project 23 | mock('./utils/utils.ts', () => ({ 24 | format: fn().mockReturnValue(42) 25 | })) 26 | // mock whole modules and replace functionality with what is defined in `./__mocks__/leftpad.ts` 27 | mock('leftpad') 28 | 29 | console.log(format()) // returns `42` 30 | ``` 31 | 32 | Once a module is mocked, importing it either from your test or your component will give you the mocked version of the module and not the actual one. 33 | 34 | Find more examples and documentation on mocking in the project [documentation](https://webdriver.io/docs/component-testing/mocking). -------------------------------------------------------------------------------- /static/img/stencil-logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /static/img/stencil-logo-old.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /docs/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/build-variables.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Build Constants 3 | description: Stencil has a number of add-ons that you can use with the build process. 4 | slug: /build-variables 5 | --- 6 | 7 | # Build Constants 8 | 9 | Build Constants in Stencil allow you to run specific code only when Stencil is running in development mode. This code is stripped from your bundles when doing a production build, therefore keeping your bundles as small as possible. 10 | 11 | ### Using Build Constants 12 | 13 | Lets dive in and look at an example of how to use our build constants: 14 | 15 | ```tsx 16 | import { Component, Build } from '@stencil/core'; 17 | 18 | @Component({ 19 | tag: 'stencil-app', 20 | styleUrl: 'stencil-app.scss' 21 | }) 22 | export class StencilApp { 23 | 24 | componentDidLoad() { 25 | if (Build.isDev) { 26 | console.log('im in dev mode'); 27 | } else { 28 | console.log('im running in production'); 29 | } 30 | 31 | if (Build.isBrowser) { 32 | console.log('im in the browser'); 33 | } else { 34 | console.log('im in prerendering (server)'); 35 | } 36 | } 37 | } 38 | ``` 39 | 40 | As you can see from this example, we just need to import `Build` from `@stencil/core` and then we can use the `isDev` constant to detect when we are running in dev mode or production mode. 41 | 42 | ### Use Cases 43 | 44 | Some use cases we have come up with are: 45 | 46 | - Diagnostics code that runs in dev to make sure logic is working like you would expect 47 | - `console.log()`'s that may be useful for debugging in dev mode but that you don't want to ship 48 | - Disabling auth checks when in dev mode 49 | -------------------------------------------------------------------------------- /static/img/stencil-logo-new.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/css/lists.css: -------------------------------------------------------------------------------- 1 | .list--unstyled { 2 | list-style-type: none; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | .list--icon li { 8 | position: relative; 9 | padding-left: 28px; 10 | } 11 | 12 | .list--icon app-icon { 13 | position: absolute; 14 | top: 0; 15 | left: 0; 16 | } 17 | 18 | .list--columns { 19 | display: flex; 20 | flex-wrap: wrap; 21 | margin-top: 42px; 22 | } 23 | 24 | .list--columns li { 25 | flex: 0 0 25%; 26 | line-height: 1.4; 27 | margin-bottom: 10px; 28 | padding-right: 18px; 29 | } 30 | 31 | @media screen and (max-width: 1024px) { 32 | .list--columns li { 33 | flex: 0 0 33.33%; 34 | } 35 | } 36 | 37 | @media screen and (max-width: 768px) { 38 | .list--columns li { 39 | flex: 0 0 50%; 40 | } 41 | } 42 | 43 | @media screen and (max-width: 480px) { 44 | .list--columns li { 45 | flex: 0 0 100%; 46 | } 47 | } 48 | 49 | .list--numbered-badge { 50 | margin: 30px 0; 51 | padding: 0; 52 | list-style-type: none; 53 | } 54 | 55 | .list--numbered-badge li { 56 | display: flex; 57 | align-items: center; 58 | counter-increment: step-counter; 59 | margin-bottom: 10px; 60 | } 61 | 62 | .list--numbered-badge li + li { 63 | margin-top: 36px; 64 | } 65 | 66 | .list--numbered-badge li::before { 67 | flex: 0 0 32px; 68 | content: counter(step-counter); 69 | margin-right: 5px; 70 | width: 32px; 71 | height: 32px; 72 | border-radius: 32px; 73 | display: flex; 74 | align-items: center; 75 | justify-content: center; 76 | margin-right: 16px; 77 | background: var(--color-dodger-blue); 78 | color: var(--color-white); 79 | font-size: 15px; 80 | font-weight: bold; 81 | box-shadow: var(--card-shadow); 82 | } 83 | -------------------------------------------------------------------------------- /docs/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v2/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - (Deprecated) [@stencil/less](https://www.npmjs.com/package/@stencil/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/config/plugins.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Plugin Config 3 | sidebar_label: Plugins 4 | description: Plugin Config 5 | slug: /plugins 6 | --- 7 | 8 | # Plugins 9 | 10 | ## Stencil plugins 11 | 12 | By default, Stencil does not come with `Sass` or `PostCSS` support. However, either can be added using the `plugins` array. 13 | 14 | ```tsx 15 | import { Config } from '@stencil/core'; 16 | import { sass } from '@stencil/sass'; 17 | 18 | export const config: Config = { 19 | plugins: [ 20 | sass() 21 | ] 22 | }; 23 | ``` 24 | 25 | ## Rollup plugins 26 | 27 | The `rollupPlugins` config can be used to add your own [Rollup](https://rollupjs.org) plugins. 28 | Under the hood, stencil ships with some built-in plugins including `node-resolve` and `commonjs`, since the execution order of rollup plugins is important, stencil provides an API to inject custom plugin **before node-resolve** and after **commonjs transform**: 29 | 30 | 31 | ```tsx 32 | export const config = { 33 | rollupPlugins: { 34 | before: [ 35 | // Plugins injected before rollupNodeResolve() 36 | resolvePlugin() 37 | ], 38 | after: [ 39 | // Plugins injected after commonjs() 40 | nodePolyfills() 41 | ] 42 | } 43 | } 44 | ``` 45 | 46 | ### Related Plugins 47 | 48 | - [@stencil/sass](https://www.npmjs.com/package/@stencil/sass) 49 | - [@stencil-community/postcss](https://www.npmjs.com/package/@stencil-community/postcss) 50 | - [@stencil-community/less](https://www.npmjs.com/package/@stencil-community/less) 51 | - (Deprecated) [@stencil/stylus](https://www.npmjs.com/package/@stencil/stylus) 52 | 53 | 54 | ## Node Polyfills 55 | See the [Node Polyfills in Module bundling](../guides/module-bundling.md#node-polyfills) for other examples. 56 | -------------------------------------------------------------------------------- /docs/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /versioned_docs/version-v3/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /docs/static-site-generation/server-side-rendering-ssr.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Combining Server Side Rendering and Static Site Generation 3 | sidebar_label: Server Side Rendering 4 | description: How to combine both Server Side Rendering and Static Site Generation approaches 5 | slug: /static-site-generation-server-side-rendering-ssr 6 | --- 7 | 8 | # Combining Server Side Rendering and Static Site Generation 9 | 10 | Static Site Generation and Server Side Rendering are often confused but are very different approaches to solve the same problem: providing already rendered content to the client before the client has loaded and rendered itself. 11 | 12 | Server Side Rendering (SSR) is the process of rendering content to a client based on an HTTP request. A client makes a request and the server processes it, returning rendered HTML back to the client. The Client then hydrates that HTML and bootstraps the client-side JS app. 13 | 14 | Static Site Generation (SSG) does the rendering at build time instead of request time, so the server does not need to do any additional rendering and requests can be processed very quickly. The process for the client hydrating and bootstrapping is the same, however. 15 | 16 | SSG has limits, and pages that require some server-side processing before rendering won't benefit from using it. However, that set of pages that _truly_ need to be rendered at request time on the server is lower than most would think. For example, instead of using SSR, why not prerender and simply make an API request from the Client? Or configure the server to modify headers without having to run a classic expressjs/etc. server? 17 | 18 | If a page simply _must_ be Server Side Rendered, then that can be done using Stencil's [hydration functionality](../guides/hydrate-app.md) in any Node.js based server. 19 | 20 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.33/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.34/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.35/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.36/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.37/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.38/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | -------------------------------------------------------------------------------- /versioned_docs/version-v4.39/documentation-generation/01-overview.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Stencil Documentation Generation 3 | sidebar_label: Overview 4 | description: Stencil Documentation Generation 5 | slug: /doc-generation 6 | --- 7 | 8 | # Documentation Generation 9 | 10 | - [`docs-readme`: Documentation readme files formatted in markdown](./docs-readme.md) 11 | - [`docs-json`: Documentation data formatted in JSON](./docs-json.md) 12 | - [`docs-custom`: Custom documentation generation](./docs-custom.md) 13 | - [`docs-vscode`: Documentation generation for VS Code](./docs-vscode.md) 14 | - [`stats`: Stats about the compiled files](./docs-stats.md) 15 | 16 | ## Docs Auto-Generation 17 | 18 | As apps scale with more and more components, and team size and members continue to adjust over time, it's vital all components are well documented, and that the documentation itself is maintained. Maintaining documentation is right up there with some of the least interesting things developers must do, but that doesn't mean it can't be made easier. 19 | 20 | Throughout the build process, the compiler is able to extract documentation from each component, to include JSDocs comments, types of each member on the component (thanks TypeScript!) and CSS Variables (CSS Custom Properties). 21 | 22 | 23 | ### Component Property Docs Example: 24 | 25 | To add a description to a `@Prop`, simply add a comment on the previous line: 26 | 27 | ```tsx 28 | /** (optional) The icon to display */ 29 | @Prop() iconType = ""; 30 | ``` 31 | 32 | ### CSS Example: 33 | 34 | Stencil will also document CSS variables when you specify them via jsdoc-style comments inside your css or scss files: 35 | 36 | ```css 37 | :root { 38 | /** 39 | * @prop --primary: Primary header color. 40 | */ 41 | --primary: blue; 42 | } 43 | ``` 44 | --------------------------------------------------------------------------------