v0.8.1

Patch Changes

• 2e1f297: Use the CDN's new semver URL

v0.8.0

Minor Changes

• 115a71f: Swaps the order of the context and props args in registerCustomFunction to match registerBehavior

v0.7.0

Minor Changes

• 15b70f6: Replace wrap/wrapAsync with rebind

  This is a breaking change which removes wrap and wrapAsync with a new rebind function. Just call rebind any time state has change that necessitates calling bind() to get new values.

• f0594ca: Changes bind() to pass the this forward

v0.6.2

Patch Changes

• 60e1b7b: Adds the wrapAsync method to the behavior context

v0.6.1

Patch Changes

• 5280f3c: Adds a wrap function for wrapping callbacks in behaviors

v0.6.0

Minor Changes

• 5071384: # New mount API

  This change implements a new mount API, a breaking change.

  The old signature:

  mount(root, state => {
    return sheet`
  
    `;
  }

  Is replace with a class rather than a proxy-based callback function. This should allow higher-level abstractions to be built on top without the magic of the proxy implementation.

  mount(
    root,
    class {
      bind() {
        return sheet`
  
      `;
      }
    }
  );

  The API asks for a bind method on the passed in class that returns a sheet.

  Additionally you can probably static inputProperties which will give you a map of (custom) properties. This is for the next change...

  New behavior property

  The old mount property is replaced with behavior. mount() is a function passed to behavior. You can mount multiple behaviors on teh same element:

  class One {
    bind() {}
  }
  
  class Two {
    bind() {}
  }
  
  mount(
    root,
    class {
      bind() {
        return sheet`
        #app {
          behavior: mount(${One}), mount(${Two});
        }
      `;
      }
    }
  );

  Normal comma-separated rules applied. Additionally you can provide inputProperties and receive a map like so:

  class One {
    static inputProperties = ["--foo"];
    constructor(props) {
      this.initial = props.get("--foo");
    }
    bind(props) {
      return sheet`
        #thing {
          text: ${this.initial + "-" + props.get("--foo")}
        }
      `;
    }
  }
  
  mount(
    root,
    class {
      bind() {
        return sheet`
        #app {
          behavior: mount(${One});
        }
      `;
      }
    }
  );

v0.5.1

Patch Changes

• 3ccb517: Adds support for longhand properties for events

  This adds the following longhand syntaxes for events:

  let controller = new AbortController();
  
  sheet`
    button {
      event-listener[click]: ${cb};
      event-capture[click]: false;
      event-once[click]: false;
      event-passive[click]: false;
      event-signal[click]: ${controller.signal};
    }
  `;

v0.5.0

Minor Changes

• 31bd7cc: Keyed properties, comma-separated lists, and more

  Breaking changes

  • Multi-binding properties now need to separate each binding with a comma:

    #app {
      class-toggle: one ${true}, two ${two};
    }

  • Multi-binding properties now will invalidate any others that were previous applied.
  • The 3rd signature for get() has been removed. This is the signature that automatically looks for the item() within an each clause. This might be replaced by item(name) in the future.

  New features

  • Keyed properties - All multi-binding properties can instead by used with their key being placed in the property name like so:

    input {
      attr[placeholder]: "Enter your email";
    }
    
    #app {
      class-toggle[darkmode]: ${true};
    }

  • var() now expands when it contains a list, like in CSS.

    #app {
      --opts: type "text";
    }
    
    input {
      attr: var(--opts);
    }

  • Custom properties can contain space-separated lists (as shown above).

  • The attr property is now a shorthand for attr-value and attr-toggle.

    app {
      attr[name]: "password" ${true};
    }
    
    /** Is exactly equivalent to */
    app {
      attr-value[name]: "password";
      attr-toggle[name]: ${true};
    }
    
    /** But the second argument is optional in attr and defaults to true */
    app {
      attr[name]: "password";
    }

  • The new registerCustomFunction API allows you to define a custom function in JavaScript with access to input properties, the element being bounded to, and more.

  import sheet, { registerCustomFunction } from "corset";
  
  registerCustomFunction(
    "--add-two",
    class {
      static inputProperties = ["--start"];
      call([a, b], _ctx, props) {
        return a + b + props.get("--start");
      }
    }
  );
  
  mount(
    document,
    () => sheet`
    #app {
      --start: 2;
  
      text: --add-two(${1}, ${2});
    }
  `
  );

  What is not included

  Some features discussed didn't make it in, but could come relatively soon:

  • There is no built-in number types yet.
  • Space-separated lists do not work within functions yet (except through a var()).
  • No initial yet.
  • No change to the mount() API.

• 582546b: Makes the identifiers true and false be recognized as booleans

Patch Changes

• 59a963d: Fix for unbinding events using keyed syntax

v0.5.0-next.1

Patch Changes

• 59a963d: Fix for unbinding events using keyed syntax

v0.5.0-next.0

Minor Changes

• 31bd7cc: Keyed properties, comma-separated lists, and more

  Breaking changes

  • Multi-binding properties now need to separate each binding with a comma:

    #app {
      class-toggle: one ${true}, two ${two};
    }

  • Multi-binding properties now will invalidate any others that were previous applied.
  • The 3rd signature for get() has been removed. This is the signature that automatically looks for the item() within an each clause. This might be replaced by item(name) in the future.

  New features

  • Keyed properties - All multi-binding properties can instead by used with their key being placed in the property name like so:

    input {
      attr[placeholder]: "Enter your email";
    }
    
    #app {
      class-toggle[darkmode]: ${true};
    }

  • var() now expands when it contains a list, like in CSS.

    #app {
      --opts: type "text";
    }
    
    input {
      attr: var(--opts);
    }

  • Custom properties can contain space-separated lists (as shown above).

  • The attr property is now a shorthand for attr-value and attr-toggle.

    app {
      attr[name]: "password" ${true};
    }
    
    /** Is exactly equivalent to */
    app {
      attr-value[name]: "password";
      attr-toggle[name]: ${true};
    }
    
    /** But the second argument is optional in attr and defaults to true */
    app {
      attr[name]: "password";
    }

  • The new registerCustomFunction API allows you to define a custom function in JavaScript with access to input properties, the element being bounded to, and more.

  import sheet, { registerCustomFunction } from "corset";
  
  registerCustomFunction(
    "--add-two",
    class {
      static inputProperties = ["--start"];
      call([a, b], _ctx, props) {
        return a + b + props.get("--start");
      }
    }
  );
  
  mount(
    document,
    () => sheet`
    #app {
      --start: 2;
  
      text: --add-two(${1}, ${2});
    }
  `
  );

  What is not included

  Some features discussed didn't make it in, but could come relatively soon:

  • There is no built-in true and false yet. Instead continue using a JS insertion ${true}.
  • There is no built-in number types yet.
  • Space-separated lists do not work within functions yet (except through a var()).
  • No initial yet.
  • No change to the mount() API.