Skip to content

Conversation

Copy link

Copilot AI commented Dec 12, 2025

Adds detailed architecture documentation to OVERVIEW.md explaining how Blaze packages interact during build and runtime phases. This addresses #482.

Changes

High-level architecture

  • Two major components: Template Compiler (build-time) and Reactive Runtime
  • Modular ecosystem with clear separation of concerns

Build vs. Runtime stages

  • Build: HTML scanning → parsing → code generation → bundling
  • Runtime: Template instantiation → HTMLjs creation → DOM materialization → reactivity tracking → selective updates

Package documentation

  • Core Runtime: blaze, templating-runtime, spacebars, htmljs, observe-sequence
  • Build-Time: templating-compiler, spacebars-compiler, html-tools, templating-tools, caching-html-compiler
  • Integration: templating, blaze-html-templates
  • Supporting: ui, blaze-tools

Each package entry includes:

  • Purpose and responsibilities
  • Dependencies
  • Operating stage (build/runtime/both)

Data flow diagrams

  • Build pipeline: .html → compiler chain → JavaScript output
  • Runtime flow: Template function → View → HTMLjs → DOM → reactive updates

Key Terms section

  • Spacebars: The template language with mustache-style syntax, block helpers, and reactive expressions. Includes practical code examples showing conditionals, iteration, and template inclusion.
  • Template: Reusable components defining structure and behavior. Covers definition in .html files, JavaScript API, helpers, event handlers, and lifecycle hooks with working examples.
  • Template Instance: Specific instantiation of a template with its own state and lifecycle. Explains instance-specific state management, view references, data context access, and subscription management.
  • View: The low-level primitive for reactive rendering. Details render functions, parent-child hierarchy, lifecycle phases, DOM tracking, and relationship to Templates.
  • Relationship diagram: Visual representation showing how Template, Template Instance, View, HTMLjs, and DOM relate to each other.

Key architectural benefits

  • Minimal client-side bundle (no compiler code at runtime)
  • Build-time template optimization
  • Pluggable compiler support for alternative syntaxes

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

@CLAassistant
Copy link

CLA assistant check
Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
You have signed the CLA already but the status is still pending? Let us recheck it.

…build/runtime stages

Co-authored-by: jankapunkt <1135285+jankapunkt@users.noreply.github.com>
Copilot AI changed the title [WIP] Update documentation for architecture overview docs: add comprehensive architecture overview with build/runtime stages and package roles Dec 12, 2025
Copilot AI requested a review from jankapunkt December 12, 2025 09:10
@jankapunkt
Copy link
Collaborator

@copilot extend the file with another section that explains the most important Terms within the Blaze ecosystem:

  • Spacebars
  • Template
  • Template Instance
  • View

…Instance, and View

Co-authored-by: jankapunkt <1135285+jankapunkt@users.noreply.github.com>
Copy link
Author

Copilot AI commented Dec 12, 2025

@copilot extend the file with another section that explains the most important Terms within the Blaze ecosystem:

  • Spacebars
  • Template
    ...

I've added a comprehensive "Key Terms in the Blaze Ecosystem" section to OVERVIEW.md covering:

Spacebars - The template language with mustache-style syntax, block helpers, and reactive expressions. Includes code examples showing conditionals, iteration, and template inclusion.

Template - Reusable components defining structure and behavior. Explains definition in .html files, JavaScript API, helpers, event handlers, and lifecycle hooks with practical examples.

Template Instance - Specific instantiation of a template with its own state and lifecycle. Covers instance-specific state, view reference, data context, DOM access, and subscription management with usage examples.

View - The low-level primitive for reactive rendering. Explains render functions, parent-child hierarchy, lifecycle phases, DOM tracking, and relationship to Templates.

Also added a visual diagram showing the relationship: Template → Template Instance → View → HTMLjs → DOM

Commit: 4d0074a

…eferences View

Co-authored-by: jankapunkt <1135285+jankapunkt@users.noreply.github.com>
Copilot AI changed the title docs: add comprehensive architecture overview with build/runtime stages and package roles docs: add comprehensive architecture overview with build/runtime stages, package roles, and key terms Dec 12, 2025
@jankapunkt
Copy link
Collaborator

@italojs can you merge this? It's an intermediate PR into #483 which I wanted to see, whether copilot is capable of providing a useful overview. I will use it as a foundation for the original PR but I think copilot will not be able to sign the cla so the CI will not pass and I cannot merge this.

@jankapunkt jankapunkt marked this pull request as ready for review December 12, 2025 15:03
@jankapunkt jankapunkt merged commit ff73c64 into docs/improve-architecture-overview Dec 12, 2025
0 of 4 checks passed
@jankapunkt jankapunkt deleted the copilot/sub-pr-483 branch December 12, 2025 15:03
@nachocodoner
Copy link
Member

This kind of summarization is very useful, especially if we expand or integrate Blaze more closely with other tools. It helps to know each architecture item, its purpose, and expectations. It’s also great to see AI can help us maintain this over time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants