v2.5.0

Minor Changes

• 38ff738: Allow specifying an alternative event target with event-target

  This now allows specifying an alternative event target via the new event-target property. You can use it like this:

  import sheet, { mount } from "https://cdn.corset.dev/v2";
  
  mount(
    document,
    class {
      onpopstate(ev) {
        console.log(
          `location: ${document.location}, state: ${JSON.stringify(
            event.state
          )}`
        );
      }
      bind() {
        return sheet`
        #app {
          event: popstate ${this.onpopstate};
          event-target: popstate ${window};
        }
      `;
      }
    }
  );

  In the above we are able to use a selector to listen to the popstate event that is on the window object.

  This can also be used with any object that follows the EventTarget interface:

  import sheet, { mount } from "https://cdn.corset.dev/v2";
  
  let target = new EventTarget();
  // Now this can be shared around
  
  mount(
    document,
    class {
      bind() {
        return sheet`
        #app {
          event: foo ${() => console.log("foo event occurred!")};
          event-target: foo ${target};
        }
  
        some-custom-element {
          prop: events ${target};
        }
      `;
      }
    }
  );

v2.5.0-next.0

Minor Changes

• 38ff738: Allow specifying an alternative event target with event-target

  This now allows specifying an alternative event target via the new event-target property. You can use it like this:

  import sheet, { mount } from "https://cdn.corset.dev/v2";
  
  mount(
    document,
    class {
      onpopstate(ev) {
        console.log(
          `location: ${document.location}, state: ${JSON.stringify(
            event.state
          )}`
        );
      }
      bind() {
        return sheet`
        #app {
          event: popstate ${this.onpopstate};
          event-target: popstate ${window};
        }
      `;
      }
    }
  );

  In the above we are able to use a selector to listen to the popstate event that is on the window object.

  This can also be used with any object that follows the EventTarget interface:

  import sheet, { mount } from "https://cdn.corset.dev/v2";
  
  let target = new EventTarget();
  // Now this can be shared around
  
  mount(
    document,
    class {
      bind() {
        return sheet`
        #app {
          event: foo ${() => console.log("foo event occurred!")};
          event-target: foo ${target};
        }
  
        some-custom-element {
          prop: events ${target};
        }
      `;
      }
    }
  );

v2.4.0

Minor Changes

• 9730a91: Target the root element via :scope

v2.3.0

Minor Changes

• c3aaec0: Allow multiple store-set within a rule

  #app {
    store-root: app;
    store-set: app first "Wilbur";
    store-set: app last "Phillips";
    --full-name: store-get(app, first) " " store-get(app, last);
    text: var(--full-name);
  }

• 8573803: Allow multiple store-root on an element

  You can now set multiple stores on an element:

  #app {
    store-root: one, two;
    store-set: one name "Matthew";
    store-set: two name "Wilbur";
  }

v2.2.3

Patch Changes

• 8750545: var should recompute when child compute is dirty

v2.2.2

Patch Changes

• 5d68c7e: Prevent unnecessary function calls when a var is undefined

v2.2.1

Patch Changes

• 3efbd6a: Update when pushing to an empty array using longhand each

v2.2.0

Minor Changes

• ef19155: Allow using SVG templates

v2.1.0

Minor Changes

• c39d80e: Consolidate data properties

  This consolidates data attributes, grouping them by type, so that you might have:

  <div data-corset-props="--one --two --three"></div>

  Instead of:

  <div data-corset-prop-one data-corset-prop-two data-corset-prop-three></div>

  This means less clutter in the DOM.

  In addition to data-corset-props there is also data-corset-stores for stores and data-corset-scope for each scope values (item and index).

v2.0.2

Patch Changes

• cf4ca7a: Ensure changes in list update