Skip to content

Releases: canjs/canjs

Introducing type.Integer and bug fixes

10 Oct 20:18
@matthewp matthewp
v6.1.0
60bad89
Compare
Choose a tag to compare
Introducing type.Integer and bug fixes

canjs/canjs 6.1.0 Release Notes

can-observable-array

Add ObservableArray to can-namespace

This patch release adds ObservableArray to can-namespace so it is available on the global can object.

can-observable-object

Add ObservableObject to can-namespace

This patch release adds ObservableObject to can-namespace so it is available on the global can object.

can-stache-element

Add StacheElement to can-namespace

This patch release adds StacheElement to can-namespace so it is available on the global can object.

can-type

Add can-type to can-namespace

This patch release adds can-type to can-namespace so it is available on the global can object.

class Person extends ObservableObject() {
   static get props() {
      return {
	age: type.check(Number)
      };
   }
}

var farah = new Person();
farah.age = '4';  // -> Uncaught Error: 4 (String) is not of type Number.
import { Reflect, type } from "can";

let ConvertingInteger = type.convert(type.Integer);
let val = Reflect.convert(12.1, ConvertingInteger);

console.log(val); // -> 12
Assets 2

CanJS 6

04 Oct 18:14
@matthewp matthewp
v6.0.0
fa2968a
Compare
Choose a tag to compare
CanJS 6

CanJS 6.0 🎉

CanJS 6.0 is a major step forward for CanJS, fully embracing JavaScript classes, web components and other modern features. The highlights of the release include:

  • ObservableObject and ObservableArray as new simplified replacements for DefineMap and DefineList based on JavaScript class syntax. These new types use proxies so they can react to changes even if properties are not predefined.

    import { ObservableObject } from "can";

class Person extends ObservableObject {
  get fullName() {
    return this.first + " " + this.last;
  }
}

let person = new Person();
person.on("fullName", ({ value }) => {
  console.log("Full name is", value);
});

person.first = "Ada";
person.last = "Lovelace";

  • StacheElement, a new base class for creating web components, a standard way to share components that works in any framework. StacheElement has the same API as [can-observable-object ObservableObject] so you only need to know the one API to use for both [guides/data models] and components.

    import { StacheElement } from "can";

class HelloWorld extends StacheElement {
  static view = `Hello {{ this.name }}!`;
}
customElements.define("hello-world", HelloWorld);

let el = new HelloWorld();
el.name = "world";
document.body.append(el);

  • New package can-type brings a high level of flexibility to defining property types on can-observable-object and can-stache-element. It allows defining strict types, types that can be null/undefined and more.

    import { ObservableObject, type } from "can";

class Person extends ObservableObject {
  static props = {
    age: type.maybe(Number)
  };
}

let person = new Person({ age: null });
console.log(person.age); // null

person.age = 11;
console.log(person.age); // 11

person.age = "14"; // throws!!

  • Internet Explorer 11 support (still!)

Although StacheElement, ObservableObject, and ObservableArray use features such as classes and proxies that are not supported in IE11, you can continue to use can-component and DefineMap and DefineList if your application needs to be compatible with IE11.

See the Setup Guide for more details.

Changes

can-attribute-observable

can-component

var c = new Component({
  viewModel : {
    foo: value.bind(this,"bar")
  }
});

#360

  • can-component v5.0.0 - Removes use of nodeLists
    This removes the use of can-view-nodelist from this package as nodeLists are no longer supported in CanJS. This is a breaking change, for compatibility with the other CanJS 6 libraries.

can-connect

can-connect-tag

can-control

can-deep-observable

can-define-realtime-rest-model

can-dom-mutate

  • can-dom-mutate v2.0.0 - onNodeRemoved and onNodeInserted
    This adds an onNodeRemoved and an onNodeInserted element that let you listen to when an element is removed from any parent or inserted into any parent. By any parent, we mean this works from parents that are in the document (connected) and not in the document. Although you must use domMutateNode for elements that are disconnected.

Let's break this down.

The following works:

var div = document.createElement("div");
// CONNECTED
document.body.append(div);

domMutate.onNodeRemoved( div , function(){
  // CALLED!
});
div.remove();

The following works too:

// DISCONNECTED
var div = document.createElement("div");

domMutate.onNodeRemoved( div , function(){
  // CALLED!
});

// USE domMutateNode
domMutateNode.removeChild.call(document.body, div );

The following does not work

// DISCONNECTED
var div = document.createElement("div");

domMutate.onNodeRemoved( div , function(){
  // NOT CALLED!
});
div.remove();

This is NOT a breaking change, but it might affect your application's performance, so it is in a major release.

can-observable-array

import { ObservableArray } from "can";
import Person from "./person";

class PeopleList extends ObservableArray {
  static items = Person;
}

can-observable-bindings

<my-el name="Matt"></my-el>

Will output:

const element = document.querySelector("my-el")
console.log(element.name) //-> "Matt"

element.setAttribute("name", "Kevin")
console.log(element.name) //-> "Kevin"
Read more
Assets 2

5.33.2

01 Oct 19:58
@m-mujica m-mujica
v5.33.2
c03d50e
Compare
Choose a tag to compare
5.33.2

Bug fixes

canjs

can-ajax

🎉

Assets 2

v5.33.1

16 Sep 17:47
@chasenlehara chasenlehara
v5.33.1
1ce7b4a
Compare
Choose a tag to compare
v5.33.1

Bug fixes

can-connect

can-query-logic

can-route-pushstate

can-stache

Assets 2

v5.33.0

05 Sep 14:32
@chasenlehara chasenlehara
v5.33.0
f9cd076
Compare
Choose a tag to compare
v5.33.0

can-connect

can-control

can-fixture-socket

can-map-define

  • can-map-define v4.4.0 - Add resolver behavior
    This adds the value behavior from DefineMap to can-map-define. Since can-map-define already has a behavior named value (to set a starting value to a property), this new behavior has been named resolver instead.

can-ndjson-stream

can-reflect

can-simple-observable

can-type

can-vdom

can-view-scope

var context = { foo: true };

var scope = new Scope(context);
var scopeKeyData = scope.computeData("foo.length", {
   warnOnMissingKey: true
});

scopeKeyData.read();  // -> Unable to find key "foo.length". Found "foo" with value: true
var scope = new Scope({});

var scopeKeyData = scope.computeData("foo.length", {
   warnOnMissingKey: true
});

scopeKeyData.read();  // -> Unable to find key "foo.length".
Assets 2

v5.32.0

20 Aug 14:23
@phillipskevin phillipskevin
v5.32.0
1557a70
Compare
Choose a tag to compare
v5.32.0

New features

Bug fixes

Assets 2

v5.31.0

14 Aug 16:06
@matthewp matthewp
v5.31.0
fb7c46f
Compare
Choose a tag to compare
v5.31.0

canjs/canjs v5.31.0 Release Notes

This release highlights an updated can-query-logic with support for new $all, $and, and $not comparisons.

can-define

defineMap.listenTo("prop", (ev) => {
  console.log("New value", ev.value, "Old value", ev.oldValue);
});

can-query-logic

$all

The $all comparison matches collections which contain all of the provided values. For example given the dataset:

[
  {
    "id": "Canada",
    "colors": [ "red", "white" ]
  },
  {
    "id": "Mexico",
    "colors": [ "red", "white", "green" ]
  },
  {
    "id": "USA",
    "colors": [ "red", "white", "blue" ]
  }
]

The query { colors: { $all: ["red", "white"] } } would match all 3 entries. The query { colors: { $all: ["blue"] } } would match only USA.

$not

The $not comparison can be used to negate any other comparison. For example given the dataset:

[
  {
    "name": "Joe",
    "age": 45
  },
  {
    "name": "Zoey",
    "age": 22
  }
]

The query { age: { $not: { $lt: 40 } } } matches Joe. It is exactly equivalent to { age: { $gte: 40 } }.

$and

The $and comparison combines multiple other comparisons into a single grouping. It can be used in combination with the two above comparisons like so. Given the dataset:

[
  {
    "id": "Canada",
    "colors": [ "red", "white" ]
  },
  {
    "id": "Mexico",
    "colors": [ "red", "white", "green" ]
  },
  {
    "id": "USA",
    "colors": [ "red", "white", "blue" ]
  }
]

The query { $and: [ { colors: { $all: ["red, "white"] } }, { colors: { $not: { $all: ["blue"] } } } ] } matches Canada and Mexico.

Assets 2

v5.30.1

17 Jul 19:32
@phillipskevin phillipskevin
v5.30.1
ec0ebbf
Compare
Choose a tag to compare
v5.30.1

Docs

Assets 2

v5.30.0

17 Jul 19:19
@phillipskevin phillipskevin
v5.30.0
5e986ab
Compare
Choose a tag to compare
v5.30.0

New Ecosystem Packages

StacheElement, ObservableObject, ObservableArray

These are renamed versions of StacheDefineElement, DefineObject, and DefineArray that support as static props instead of static define (static define is also still aliased for apps that were using this).

class Pet extends ObservableObject {
    static props = {
        name: {
          type: String,
          required: true
        }
    };
}

class Pets extends ObservableArray {
    static items = Pet;
}

class PetsApp extends StacheElement {
    static view = `
        {{#for(pet of pets)}}
            <p>{{pet.name}}</p>
        {{/for}}
    `;

    static props = {
        pets: {
            type: type.convert(Pets),
            get default() {
                return [{ name: "shadow" }, { name: "marshmallow" }];
            }
        }
    };
}
customElements.define("pets-app", PetsApp);

can-construct-super

This package already existed, but the constructSuper named export was added to the ecosystem module.

Removed Ecosystem Packages

  • can-stache-deifne-element - this was removed but the StacheDefineElement named export still exists (it is an alias for StacheElement)
  • can-define-object - this was removed but the DefineObject named export still exists (it is an alias for ObservableObject)
  • can-define-array - this was removed but the DefineArray named export still exists (it is an alias for ObservableArray)
Assets 2

v5.29.7

17 Jul 17:32
@phillipskevin phillipskevin
v5.29.7
3858996
Compare
Choose a tag to compare
v5.29.7

Bug fixes

Assets 2