Mateusz Łuczak
Aug 1 · 3 min read

After 1.5 years of continuous development, countless commits, 6 beta releases, I am excited to announce the official release of Strudel 1.0. Big thank you to all who participated in the contribution to the framework and developing it to it’s current shape. Let’s take a peek at what’s in the store.

New syntax for Evt decorator

The only breaking change from 0.x is the change to Evt decorator syntax. The change is subtle — in the old versions of Strudel, decorator took a single string as a parameter, which was event descriptor and optional selector used for delegation separated by space. This made internal logic harder, but also in the real life usages caused some issues. Now it’s two separate parameters for event descriptor and selector.

Old API

@Evt('click .btn')
onBtnClick() { }

New API

@Evt('click', '.btn')
onBtnClick() { }

In multiple real-life scenarios, the name of the selector is stored in the variable. Using the old API, developer needed to use the string interpolation like @Evt(`click ${selector}`).Now it can be simply written as @Evt('click', selector) making it easier.

As this is a breaking change we have prepared support for automatic migration with codemod. Checkout the official migration guide.

Support for lazy initialisation

One of the flaws of the previous versions was framework inability to handle components that were either dynamically registered (asynchronous code) or added to a DOM after initial DOMContentLoaded event. Now the framework takes care about both situations allowing for handling more complex scenarios in your application.

Custom decorators

The internal way of how property decorators are implemented has been unified, allowing to provide a method in the API to create custom decorators that has access to component lifecycle. New API is called createDecorator and is a factory that gives access to component, property and parameters passed to decorator.

import { Component, createDecorator } from 'strudel';const Log = createDecorator((component, property, params) => {
component[property] = () => {
console.log(`Called ${property} in ${component}`);
}
})();
@Component('.test')
class Test {
@Log
setup() { }
}

We believe this change in the API introduce more creativity in your projects and interesting decorators contributed to the Strudel core API.

DOM API improvements

The overall goal of the DOM API was to introduce syntax similar to jQuery users with much smaller footprint. Some of the useful methods from jQuery were still missing like index so they were added to the DOM API. Now you can also remove specific event listeners with off . Also find and @El decorator now support selectors starting with > .

Official tooling

Working on the official 1.0 multiple tools were developed and improved in the ecosystem, which some of them might be new for you:

What’s next?

Version 1.0 usually suggests that the core API will stay stable and the library is ready for production use. Future development will focus on:

  • Adding new property decorators based on the community feedback
  • Streamlining the developer experience via improving the tools

We are shaping the ideas for version 2.0, so if you have interesting idea you are always welcome to contribute via any channel listed on the community page or directly via Strudel github.

Strudel Bakery

The official Strudel.js blog

Mateusz Łuczak

Written by

Front-end developer, Cognifide. I design and code, but also play board games. Creator of StrudelJS.

Strudel Bakery

The official Strudel.js blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade