Croqueta

Hot and Tasty Frontend Framework

Croqueta is a lightweight JavaScript framework for building modern web applications using native web components and fine-grained reactivity.

NOTE

Croqueta is a work in progress. The API is not stable and may change in future versions.

🎯 Why Croqueta?

Probably the world doesn't need another JavaScript framework, but I just wanted to create one to explore the depths of the web platform and learn more about how frontend frameworks work under the hood. The journey it's being fun and I've learned a lot, so I decided to share it. Maybe you'll find it useful too.

🏛️ Principles

• Standard Based: Components are built on top of Custom Elements and the rendering system is written as a tagged template literal
• Future-Proof: Reactivity is achieved by using the TC39 Signals Polyfill. When browsers adopt the standard, Croqueta will run natively without the polyfill weight.
• Architectural Scalability: While it includes most of the features needed in a production-grade application, you can just take what you need. It's designed to be modular and interoperable.
• Lightweight: Designed to be lightweight and fast, a whole framework under 15kb gzipped.
• Zero-Build option: Use it directly from a CDN or install the NPM package on your project.
• Typed: The framework is written in TypeScript and provides type definitions for all its APIs.

✨ Features

• 📦 Components: Build reactive components, handle inputs, outputs, and lifecycle with minimal boilerplate.
• ⚛️ Reactivity: Track changes and update only the necessary parts of the DOM thanks to signals. Transform data with computed signals and do side effects easily.
• 💉 Dependency Injection: Inject services and replace them with mocks during testing.
• 🚦 Router: Create your SPA with different router strategies, lazy loading, guards, resolvers and more.
• 🔄 State Management: Redux-pattern state management powered by signals and Redux DevTools compatible.
• 🌀 Portals: Render components in different parts of the DOM.

📦 Installation

Drop a script tag with the CDN link in your HTML file:

<script type="importmap">
  {
    "imports": {
      "@mimopo/croqueta": "https://unpkg.com/@mimopo/croqueta/index.mjs",
      "@mimopo/croqueta/dev": "https://unpkg.com/@mimopo/croqueta/dev.mjs",
      "signal-polyfill": "https://unpkg.com/signal-polyfill/dist/index.js"
    }
  }
</script>

Or install as NPM package on your project:

npm install @mimopo/croqueta

NOTE

Don't forget to use type="module" on your script tag when using the CDN version!

🚀 Quick Start

Creating a reactive component is simple and boilerplate-free.

import { Component, html, registerComponent, signal } from '@mimopo/croqueta';

class MyCounter extends Component {
  static tag = 'my-counter';

  private count = signal(0);

  protected render() {
    return html`
      <div class="counter">
        <p>Current Count: ${this.count}</p>
        <button (click)="${() => this.count.set(this.count.get() + 1)}">Increment</button>
      </div>
    `;
  }
}

registerComponent(MyCounter);

import { Component, html, registerComponent, signal } from '@mimopo/croqueta';

class MyCounter extends Component {
  static tag = 'my-counter';

  count = signal(0);

  render() {
    return html`
      <div class="counter">
        <p>Current Count: ${this.count}</p>
        <button (click)="${() => this.count.set(this.count.get() + 1)}">Increment</button>
      </div>
    `;
  }
}

registerComponent(MyCounter);

Then load the component in your HTML:

<my-counter></my-counter>

>_ CLI Tool

Croqueta CLI is a command-line tool for scaffolding and managing Croqueta applications. It includes generators for components, services, tests, applications and more.

npx @mimopo/croqueta-cli

🤖 AI-Ready

If you are using AI, you can help your agent to understand Croqueta framework and interact with Croqueta CLI by running the following Croqueta CLI command to install agent skills on your .agent/skills folder:

npx @mimopo/croqueta-cli ai-agent-skills

📖 Examples

Check out our functional examples in the repository or open them directly on StackBlitz:

🤝 Contributing

This is a low-level framework built to explore the depths of the Web Platform. Feel free to open issues or PRs if you want to dive into the internals!

Check CONTRIBUTING.md for more information.

🗒️ Changelog

• Changelog

⚖️ License

Croqueta is licensed under the MIT license