{"id":25816100,"url":"https://github.com/stenciljs/core","last_synced_at":"2025-09-09T21:25:13.037Z","repository":{"id":37359204,"uuid":"82095231","full_name":"stenciljs/core","owner":"stenciljs","description":"A toolchain for building scalable, enterprise-ready component systems on top of TypeScript and Web Component standards. Stencil components can be distributed natively to React, Angular, Vue, and traditional web developers from a single, framework-agnostic codebase.","archived":false,"fork":false,"pushed_at":"2025-08-29T16:47:06.000Z","size":79037,"stargazers_count":12857,"open_issues_count":275,"forks_count":817,"subscribers_count":170,"default_branch":"main","last_synced_at":"2025-08-29T16:59:39.210Z","etag":null,"topics":["custom-elements","ionic","ssg","ssr","static-site-generator","stencil","stenciljs","typescript","webcomponents"],"latest_commit_sha":null,"homepage":"https://stenciljs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stenciljs.png","metadata":{"files":{"readme":"docs/README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2017-02-15T18:57:07.000Z","updated_at":"2025-08-29T05:48:50.000Z","dependencies_parsed_at":"2023-11-14T23:30:11.988Z","dependency_job_id":"13cfdf11-679c-410d-bb80-29a26cf6159d","html_url":"https://github.com/stenciljs/core","commit_stats":{"total_commits":7946,"total_committers":211,"mean_commits":37.65876777251185,"dds":0.5162345834382078,"last_synced_commit":"22684f35ea533ef4fa737f92138befa7fecc9604"},"previous_names":["stenciljs/core","ionic-team/stencil"],"tags_count":724,"template":false,"template_full_name":null,"purl":"pkg:github/stenciljs/core","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Fcore","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Fcore/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Fcore/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Fcore/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stenciljs","download_url":"https://codeload.github.com/stenciljs/core/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stenciljs%2Fcore/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274365931,"owners_count":25272293,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-09T02:00:10.223Z","response_time":80,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["custom-elements","ionic","ssg","ssr","static-site-generator","stencil","stenciljs","typescript","webcomponents"],"created_at":"2025-02-28T05:01:15.912Z","updated_at":"2025-09-09T21:25:13.028Z","avatar_url":"https://github.com/stenciljs.png","language":"TypeScript","readme":"# Stencil Technical Documentation\n\nWelcome to the Stencil technical documentation. This documentation is designed for contributors who want to understand the internal architecture and implementation details of Stencil. It provides comprehensive information about how Stencil works under the hood.\n\n## Overview\n\nStencil is a compiler that generates Web Components and builds high-performance web applications. It combines the best concepts of the most popular frameworks into a simple build-time tool.\n\n### Architecture Overview\n\n```mermaid\ngraph TB\n    subgraph \"Build Time\"\n        CLI[CLI Entry Point] --\u003e Compiler[Compiler Core]\n        Compiler --\u003e TS[TypeScript Compiler]\n        Compiler --\u003e Bundler[Rollup Bundler]\n        Compiler --\u003e Optimizer[Build Optimizer]\n    end\n    \n    subgraph \"Development\"\n        DevServer[Dev Server] --\u003e HMR[Hot Module Replacement]\n        DevServer --\u003e WS[WebSocket Server]\n    end\n    \n    subgraph \"Runtime\"\n        ComponentRuntime[Component Runtime] --\u003e VDOM[Virtual DOM]\n        ComponentRuntime --\u003e LC[Lifecycle Manager]\n        ComponentRuntime --\u003e PS[Proxy State]\n    end\n    \n    subgraph \"Server Side\"\n        Hydrate[Hydrate App] --\u003e MockDoc[Mock Document]\n        Hydrate --\u003e SSR[SSR Renderer]\n    end\n    \n    CLI -.-\u003e DevServer\n    Compiler --\u003e ComponentRuntime\n    Compiler --\u003e Hydrate\n```\n\n## Core Components\n\n### [CLI](./cli.md)\n**Location:** `/src/cli`\n\nThe command-line interface that serves as the entry point for all Stencil operations. It handles:\n- Command parsing and validation\n- Configuration loading\n- Task orchestration (build, serve, test, etc.)\n- Version checking and telemetry\n- Process management\n\n### [Compiler](./compiler.md)\n**Location:** `/src/compiler`\n\nThe heart of Stencil that transforms TypeScript/JSX components into optimized web components. Key responsibilities:\n- TypeScript transformation and compilation\n- Component metadata extraction\n- Build optimization and bundling\n- Output target generation\n- Style processing\n- Static analysis\n- Build orchestration and caching\n- Incremental compilation\n\n### [Runtime](./runtime.md)\n**Location:** `/src/client`, `/src/runtime`, `/src/internal`\n\nThe client-side code that powers Stencil components in the browser:\n- Component lifecycle management\n- Virtual DOM implementation\n- State management and reactivity\n- Event handling\n- Lazy loading\n- Hydration support\n\n### [Dev Server](./dev-server.md)\n**Location:** `/src/dev-server`\n\nDevelopment server with hot module replacement:\n- HTTP server for serving builds\n- WebSocket server for HMR\n- File watching and rebuilding\n- Browser auto-refresh\n- Error overlay\n- Request proxying\n\n### [Hydrate](./hydrate.md)\n**Location:** `/src/hydrate`\n\nServer-side rendering and hydration support:\n- Node.js rendering environment\n- Component pre-rendering\n- Static site generation\n- Hydration markers\n- SEO optimization\n\n### [Mock Doc](./mock-doc.md)\n**Location:** `/src/mock-doc`\n\nLightweight DOM implementation for server-side rendering:\n- DOM API implementation\n- Window and document globals\n- CSS parsing\n- HTML parsing and serialization\n- Performance optimizations\n\n### [Declarations](./declarations.md)\n**Location:** `/src/declarations`\n\nTypeScript type definitions and interfaces that define:\n- Public API contracts\n- Internal data structures\n- Configuration schemas\n- Build metadata formats\n\n### Deprecated Components\n\n#### [Testing](./testing-deprecated.md)\n**Location:** `/src/testing`\n\nThe built-in test runner based on Jest (deprecated). Users should migrate to:\n- [Jest Stencil Runner](https://github.com/stenciljs/jest-stencil-runner)\n- [WebdriverIO](https://stenciljs.com/docs/testing/webdriverio/overview)\n- [Playwright](https://stenciljs.com/docs/testing/playwright/overview)\n- [Vitest](https://stenciljs.com/docs/testing/vitest)\n\n#### [Screenshot Testing](./screenshot-deprecated.md)\n**Location:** `/src/screenshot`\n\nVisual regression testing (deprecated). Will be removed in the next major version.\n\n## Key Concepts\n\n### Build Process\n\n1. **Configuration Loading**: Parse and validate stencil.config.ts\n2. **Discovery**: Find all components in the source\n3. **Analysis**: Extract metadata from decorators\n4. **Transformation**: Convert TypeScript/JSX to JavaScript\n5. **Bundling**: Create optimized bundles\n6. **Output Generation**: Generate files for each output target\n\n### Component Lifecycle\n\nComponents follow a predictable lifecycle during initialization and updates:\n\n1. **Constructor**: Element created\n2. **connectedCallback**: Element added to DOM\n3. **componentWillLoad**: Before first render\n4. **componentWillRender**: Before each render\n5. **render**: Generate virtual DOM\n6. **componentDidRender**: After each render\n7. **componentDidLoad**: After first render\n8. **componentDidUpdate**: After updates\n9. **disconnectedCallback**: Element removed from DOM\n\n### Multi-Threading Architecture\n\nStencil uses a multi-threaded architecture for better performance:\n\n```mermaid\ngraph LR\n    Main[Main Thread] --\u003e W1[Worker 1]\n    Main --\u003e W2[Worker 2]\n    Main --\u003e W3[Worker N]\n    \n    W1 --\u003e Tasks1[TypeScript\u003cbr/\u003eCompilation]\n    W2 --\u003e Tasks2[Bundle\u003cbr/\u003eGeneration]\n    W3 --\u003e Tasks3[Style\u003cbr/\u003eProcessing]\n```\n\n## Building Stencil\n\n### [Scripts Build System](./scripts.md)\n**Location:** `/scripts`\n\nThe build system used to develop and build Stencil itself:\n- Uses esbuild for bundling\n- Bundles TypeScript, Terser, and Parse5\n- Creates all distributable packages\n- Handles release automation\n- Validates build outputs\n\nThis is separate from Stencil's compiler - it's specifically for building the Stencil project during development.\n\n## Building and Development\n\nTo work on Stencil itself:\n\n```bash\n# Clone the repository\ngit clone https://github.com/ionic-team/stencil.git\ncd stencil\n\n# Install dependencies\nnpm install\n\n# Build Stencil\nnpm run build\n\n# Run tests\nnpm test\n\n# Start development\nnpm run dev\n```\n\nFor detailed compiler documentation and build process information, see the [Compiler](./compiler.md) documentation.","funding_links":[],"categories":["TypeScript","typescript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstenciljs%2Fcore","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstenciljs%2Fcore","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstenciljs%2Fcore/lists"}