How stenciljs/core works
Stencil turns TypeScript/JSX component definitions into framework-independent Web Components. The principal workflow is project authors invoking the CLI to compile component metadata and source into distributable outputs, which browser applications load and render through Stencil’s runtime. Separate branches support development serving and hot updates, server-side hydration and prerendering, and project testing. The graph reflects the README’s product description and the supplied source/tree; several subsystem links are based on the documented product workflow because their implementation was not sampled.
Main entry points: compiler.ts Compiler · output-targets/index.ts Output targets · task-build.ts Build task · cli/index.ts Stencil CLI
Components 25
Project build
- Stencil CLI
src/cli/index.ts - Build task
src/cli/task-build.ts - Config loading
src/compiler/config/load-config.ts
Compilation
- Compiler
src/compiler/compiler.ts - TypeScript transforms
src/compiler/transpile.ts - Component metadata
src/compiler/transformers/static-to-meta/component.ts - Module bundling
src/compiler/bundle/bundle-interface.ts - Component graph
src/compiler/entries/component-graph.ts - Output targets
src/compiler/output-targets/index.ts - Lazy component output
src/compiler/output-targets/dist-lazy/lazy-output.ts - Hydrate script output
src/compiler/output-targets/dist-hydrate-script/index.ts - Type generation
src/compiler/types/generate-types.ts
Component runtime
- Lazy module loader
src/client/client-load-module.ts - Runtime bootstrap
src/runtime/bootstrap-lazy.ts - Component lifecycle
src/runtime/initialize-component.ts - DOM rendering
src/runtime/vdom/vdom-render.ts - Hydration runtime
src/hydrate/platform/hydrate-app.ts
Serving and rendering
- Development server
src/dev-server/index.ts - Live-update client
src/dev-server/dev-server-client/client-web-socket.ts - Prerender worker
src/compiler/prerender/prerender-worker.ts
Project tools
- Testing platform
src/testing/platform/testing-platform.ts - Mock DOM
src/mock-doc/index.ts
Other components
- Project author
- Web Component artifacts
- Browser application
Connections 24
- Project author → Stencil CLI: invokes
- Stencil CLI → Build task: dispatches
- Build task → Config loading: loads config
- Build task → Compiler: requests build
- Compiler → TypeScript transforms: transforms source
- Compiler → Component metadata: extracts metadata
- Compiler → Component graph: resolves dependencies
- Compiler → Module bundling: bundles modules
- Compiler → Output targets: generates targets
- Output targets → Lazy component output: writes lazy format
- Output targets → Hydrate script output: writes hydrate format
- Compiler → Type generation: generates types
- Output targets → Web Component artifacts: writes artifacts
- Web Component artifacts → Browser application: loads components
- Browser application → Lazy module loader: requests module
- Lazy module loader → Runtime bootstrap: loads bundle
- Runtime bootstrap → Component lifecycle: initializes components
- Component lifecycle → DOM rendering: updates DOM
- Browser application → Development server: requests app
- Development server → Live-update client: sends build updates
- Live-update client → Browser application: reloads or updates
- Compiler → Prerender worker: dispatches prerender
- Prerender worker → Hydration runtime: hydrates document
- Testing platform → Mock DOM: uses mock DOM