v0.14.2

Features

Global

• Adds a new CI based on Github Actions.
• Adds a new static code analyzer and coverage checker backed via SonarCloud.

@corpuscule/element

You can now use @query and @queryAll decorators to search in Light DOM even if Shadow DOM is enabled. Simply do the following:

@element('x-foo', {renderer})
class Foo extends HTMLElement {
  @query('.target', {lightDOM: true}) private target: HTMLElement;

  protected [render](): TemplateResult {
    return html`
      <div class="title">Foo</div>
      <slot></slot>
    `;
  }
}

<x-foo>
  <div class="target"></div>
</x-foo>

Fixes

@corpuscule/element

• Now all change catchers (propertyChangedCallback and internalChangedCallback) are called AFTER the property is assigned while previously they were called BEFORE which led to some unexpected behavior.

Changes

• Update dependencies (Oct 2019) (#102 by @Lodin).
• Replace TravisCI + Codecov with Github Actions + SonarCloud (#103 by @Lodin).
• Run property and internal callbacks after the actual property is assigned (#104 by @Lodin).
• Add lightDOM option for query selectors (#105 by @Lodin).

v0.14.1

This release brings support for sending CSSStyleSheet object directly to a @style decorator. It is a part of preparations for upcoming CSS Modules proposal.

import styles from '@corpuscule/styles';

const sheet = new CSSStyleSheet();
sheet.replaceSync(':host { width: 100% }')

@styles(sheet)
class StyledComponent extends HTMLElement {}

Changes

• Add support for CSSStyleSheet object (#101 by @Lodin)

v0.14.0

This release brings a lot of fixes, improvements, and breaking changes to the Corpuscule project.

Features and fixes

All packages

• Documentation is added for all the project. It can be found here.
• @api decorators are renamed to @gear to explain their role better.

@corpuscule/context

• Provider now provides undefined instead of null if no defaultValue is set.

@corpuscule/element

• renderer option of the ElementDecoratorOptions is not required anymore. If you omit this property, no rendering will ever happen to your element.
• queueMicrotask is used instead of the Promise.resolve. It is a modern analog to the Promise.resolve and describes the action it performs better.
• guard parameter of the @property decorator is the function by default now. It allows for avoiding unnecessary and expensive null check on the property change.

@corpuscule/forms

• The custom property name is allowed for properties @gear and @option marks if their desired responsibility is sent as a string argument to the decorator.

@corpuscule/router

• The inability to work with nested routes is fixed. It was a severe bug that broke the whole router usage experience.
• push is renamed to navigate to explain its role better.
• Custom context data is allowed to be sent through the navigate function and the Link component. It comes to the route actions as a part of the first argument.
• Router actions are async now. It allows doing code splitting during the routing.
• You can specify the initial route from which the whole application starts. It may be useful for setting the base URL.

@corpuscule/styles

• Timing for firing the [stylesAttachedCallback] is fixed. Before, it was firing before all CSS files are loaded in case of using URL class, which has no sense. Now it fires right after CSS is attached in all cases.

@corpuscule/utils

• compose util is removed. No Corpuscule code used it, so it is unnecessary to continue maintaining it.
• getSupers is renamed to reflectClassMethods to explain its role better.

Breaking changes

All packages

• @api decorators are renamed to @gear.

@corpuscule/context

• Provider of the @corpuscule/context now provides undefined instead of null if no defaultValue is set.

@corpuscule/element

• Usage of the queueMicrotask might require a polyfill until all browsers ship it.

@corpuscule/forms

• @gear and @option require parenthesis.

@corpuscule/router

• Required property route is removed. Now you can use only one property with any name to receive the result of route action. More details in #87 and #70.
• push is renamed to navigate.

@corpuscule/utils

• compose util is removed.
• getSupers is renamed to reflectClassMethods.

Changes

• Improve Redux connector (#84 by @Lodin)
• Fix audit issues (#85 by @Lodin)
• Add Storeon connector to the packages list (#86 by @Lodin)
• Make router working correctly with nested routers (#87 by @Lodin)
• Make defaultValue for provider undefined instead of null (#88 by @Lodin)
• Use the own getter from the value descriptor (#89 by @Lodin)
• Update project dependencies (#90 by @Lodin)
• Remove compose util (#91 by @Lodin)
• Fix timing of calling [stylesAttachedCallback] for URL instances (#92 by @Lodin)
• Update project dependecies to the latest versions (#93 by @Lodin)
• Add documentation for the whole project (#94 by @Lodin)
• Update dependencies to the latest versions (#95 by @Lodin)
• Small improvements for the element (#96 by @Lodin)
• Allow specifying a custom name for the gear and option properties (#97 by @Lodin)
• Allow specifying custom route context data (#98 by @Lodin)
• Improve the documentation for symbolic property names (#99 by @Lodin)
• Update project README (#100 by @Lodin)

v0.13.0

This release introduces a Corpuscule connector for the Storeon, a tiny Redux-like state manager that provides an alternative for Redux in only 173 Bytes.

As a bonus, Redux connector is rewritten in a more straightforward, performant and decoupled way.

Features

You can use @corpuscule/storeon to create an element that can connect to a Storeon store and interact with it. The API is pretty similar to the Redux connector except for the @unit decorator: it receives not a getter, but a key to a separate store section. All examples you can find in the documentation.

Changes

• Add connector for storeon (#83 by @Lodin)
• Improve Redux connector (#84 by @Lodin)
• Fix audit issues (#85 by @Lodin)
• Add Storeon connector to the packages list (#86 by @Lodin)

v0.12.0

Rationale

History

The earlier versions of Corpuscule used the second decorator proposal.
However, in January 2019, this proposal was deprecated due to the complexity and potential performance penalty, and
work on the third proposal was started.

Due to the beginning state of the new specification, the absence of the Babel implementation of it, it was decided to rewrite Corpuscule to the emulation of the new decorator proposal.

Emulation of the proposal

Emulation means that Corpuscule does not follow the specification yet. It respects basic ideas, but the implementation is based on the first decorator proposal (stage 1, also Typescript decorators or legacy decorator proposal) supplemented with the special Babel plugin that adds missing functionality to it.

This decision is made because the new proposal changes syntax a lot and until Typescript implements this syntax in the compiler they will be incompatible. Implementation of the new syntax requires decorators to be on stage 3 which means that Corpuscule will also wait until it happens.

Breaking changes

This PR introduces a lot of breaking changes. It is connected with the new static nature of decorators.

Token system instead of decorator creator functions

The protospec of the decorator proposal decides that decorators cannot be treated as a JavaScript value. So they can be exported, but cannot be created and returned from the function. It means that all decorator creator functions like createContext or createFormContext are deprecated from now.

Instead, a token system is introduced. Using the createContextToken or createFormToken, you can create a simple JS object that should be sent as an argument to all the decorators the decorating system of the package consists of. With it, these decorators will be able to exchange the data with each other.

You can read more about the token system in the @corpuscule/context docs.

It also affects createComputingPair function from the @corpuscule/element.

Options moves to decorators

Options that were earlier in the creator functions now moves to the decorators themselves. It is actual for @corpuscule/element (createElementDecorator function is removed now, and options moved to the decorator itself), @corpuscule/form (scheduler option is moved to the @field decorator), @corpuscule/styles (adoptedStyleSheets and shadyCSS options are moved to the @stylesAdvanced decorator).

Creator functions are replaced with advanced decorators

Since the creator functions disappear, it is necessary for something to take their place. So, advanced decorators come on the scene. For all @corpuscule/context descendants, these decorators can receive a token other than default and be used in a completely different context. For @corpuscule/styles @stylesAdvanced decorator receives additional options that change its behavior.

@corpuscule/babel-preset

From now, you have to use @corpuscule/babel-preset as the main Babel preset until the static decorator proposal reaches stage 3 and all necessary transpilers and tools appear in the community.

Removed and changed utils

Some earlier Corpuscule utils are removed because they are not necessary from now:

• descriptors (replaced with makeAccessor).
• lifecycleDescriptors (replaced with defineExtendable).

Others are rewritten:

• asserts (removed everything except assertRequiredProperty).
• getSupers (heavily refactored).
• propertyUtils (removed everything except for getName).

Features

Thanks to the rewriting, the average size of each Corpuscule package was reduced to almost ⅓.

Changes

• Add proper failure on broken build (#78 by @Lodin)
• Use legacy decorator proposal (#79 by @Lodin)
• Use "file" directive in package.json instead of .npmignore (#80 by @Lodin)
• Update project dependencies (#81 by @Lodin)
• Tune karma configuration (#82 by @Lodin)

v0.11.2

The new release aims to improve developer experience for the Copruscule project, fix a lot of small bugs and mistakes and make different components work better together.

Features

@coruscule/router

The new route property is accessible for the router @outlet. It receives the current route from the list outlet has as a parameter. It opens a door for various improvements starting from the easier list of links implementation (you can now compare route with route instead of relying on location.pathname and other tricks) up to setting specific information in the Route object.

@outlet(routes)
class Outlet extends HTMLElement {
  @api layout;
  @api route;
}

Breaking changes

@corpuscule/element

Before the following operation was allowed:

@element('my-component')
class MyComponent extends HTMLElement {}

const myComponent = new MyComponent();

Now you have to wait until the element definition is over:

@element('my-component')
class MyComponent extends HTMLElement {}

await customElements.whenDefined('my-component');

const myComponent = new MyComponent();

@coruscule/router

The new route property is required. If it does not exist, the error will be thrown.

Examples

There are new examples of building forms with @final-form and @corpuscule:

Simple Form

Uses the default inputs: input, select, and textarea to build a form with no validation.

Synchronous Record-Level Validation

Introduces a whole-record validation function and demonstrates how to use Field component to display errors next to fields.

Synchronous Field-Level Validation

Introduces field-level validation functions and demonstrates how to use Field component to display errors next to fields.

Changes

• Form: allow to use same names for both form and field options (#62 by @Lodin)
• Fix element definition timing (#63 by @Lodin)
• Form: replace focus/blur events with bubbling focusin/focusout (#64 by @Lodin)
• Fix field update before first subscription (#65 by @Lodin)
• Make scheduler queue-oriented (#66 by @Lodin)
• Simplify forbidding update if Field is not connected (#67 by @Lodin)
• Use scheduling only on Field option change (#68 by @Lodin)
• Form: remove updates for non-important options for Field (#69 by @Lodin)
• Add tracking current route (#70 by @Lodin)
• Move CustomElementRegistry patch to a separate "init.js" file (#71 by @Lodin)
• Add missing documentation (#72 by @Lodin)
• Use "input" event instead of "change" event to track field changes (#73 by @Lodin)
• Add CodeSandbox examples for the form (#74 by @Lodin)
• Add init file to the files list (#75 by @Lodin)
• Improve rollup external setting (#76 by @Lodin)
• Docs: fix file paths (#77 by @Lodin)

v0.10.3

Small fix for the form: now it can catch reset event as well it catches submit.

Changes

• Form: handle reset event (#61 by @Lodin)

v0.10.2

This release introduces several updates and improvements

Changes

• New scheduler algorithm (#58 by @Lodin)
• Update dependencies (#59 by @Lodin)
• Add bundlephobia badges to packages readme (#60 by @Lodin)

v0.10.1

A small patch that fixes a couple of bugs in @corpuscule/form package.

Changes

• Convert undefined and null values to empty string for native form elements (#55 by @Lodin)
• Simplify 🏁 Final Form instance setting up (#56 by @Lodin)
• Fix wrong default subscription for Field (#57 by @Lodin)

v0.10.0

This release focuses mostly on the @corpuscule/form package: it received most updates. However, other packages have their fixes and changes as well.

Auto Fields

The most impressive feature in this release - Auto Fields. They are allowed not only to receive data comes up from native form elements with change events but also to change these elements values by form updates. It happens automatically and does not require specific actions from the user. So now you can write the following code and expect form to update and be updated automatically.

<script>
  @field({auto: true, selector: 'input'})
  class Field extends HTMLElement {
    @api formApi;
    @api input;
    @api meta;

    @option name;
  }
  
  customElements.define('x-field', Field);
</script>
<x-form>
  <x-field name="foo-bar">
    <input type="radio" value="foo">
    <input type="radio" value="bar">
  </x-field>
</x-form>

Along with the container fields, support for Customized Built-In Elements is also improved. You can do with them the same things you do with container fields. The only difference is that CB elements will change themselves instead of searching native elements.

<script>
  @field({auto: true})
  class Field extends HTMLSelectElement {
    @api formApi;
    @api input;
    @api meta;

    @option name = 'foo-bar';
  }
  
  customElements.define('x-field', Field, {extends: 'input'});
</script>
<x-form>
  <input is="x-field" type="radio" value="foo">
  <input is="x-field" type="radio" value="bar">
</x-form>

Breaking changes

This release is full of breaking changes for @corpuscule/form package:

• @field is now a decorator creator rather than decorator itself. You need to add parenthesis for each call.
• @api now requires a formApi property instead of form (see rationale in #53).

Changes

• Fix connected value (#49 by @Lodin)
• Allow decorators to be wrappers (#50 by @Lodin)
• Simplify approach of sharing decorator properties (#51 by @Lodin)
• Use helpers from @babel/plugin-transform-runtime for debugging (#52 by @Lodin)
• Rename api property form -> formApi (#53 by @Lodin)
• Add Auto Fields (#54 by @Lodin)