Skip to content

Releases: canjs/canjs

Updating can-debug docs and demos

09 Aug 17:47
@phillipskevin phillipskevin
v5.4.1
cff6a79
Compare
Choose a tag to compare
Updating can-debug docs and demos

#4398

Assets 2

v5.4.0

08 Aug 18:45
@phillipskevin phillipskevin
v5.4.0
fc88ac7
Compare
Choose a tag to compare
v5.4.0

New Features

can-debug v2.0.0 - v2.0.0

can-debug now exports a function that can be used like:

import debug from "can-debug";
debug();

or

import { debug } from "can";
debug();

debug.drawGraph has also been removed

This method doesn't work in many build formats (ES modules, bundled global builds, webpack). It also requires the large vis.js file. Since the graph is available in CanJS devtools, this functionality was removed.

can-vdom v4.4.0 - Set document.defaultView to be the window

Bug Fixes

Assets 2

v5.3.1

02 Aug 01:12
@phillipskevin phillipskevin
v5.3.1
48b7b9e
Compare
Choose a tag to compare
v5.3.1

can-connect

can-vdom

Assets 2

v5.3.0

31 Jul 19:44
@phillipskevin phillipskevin
v5.3.0
32a635b
Compare
Choose a tag to compare
v5.3.0

New Features

import {QueryLogic} from "can-query-logic";
var gt1 = new QueryLogic.GreaterThan(1);
var lte1 = new QueryLogic.LessThanEqual(1);

QueryLogic.intersection(gt1, lte1) //-> QueryLogic.EMPTY

Bug Fixes

Assets 2

5.2.2

11 Jul 19:42
@matthewp matthewp
v5.2.2
37de411
Compare
Choose a tag to compare
5.2.2

This release adds back in global builds at dist/global/can.js and dist/global/can.all.js to fix global build usage.

Assets 2

v5.2.1

11 Jul 17:04
@chasenlehara chasenlehara
v5.2.1
61fdc24
Compare
Choose a tag to compare
v5.2.1

This release includes can-component v4.2.4, which fixed adding a programmatically-instantiated component that has already been torn down.

Assets 2

v5.2.0

11 Jul 03:36
@chasenlehara chasenlehara
v5.2.0
dc21d1f
Compare
Choose a tag to compare
v5.2.0

Notable changes

This release includes:

  • Strict mode in more modules
  • Bug fixes to make programmatically-instantiated components be torn down correctly

All changes

can-ajax

can-child-nodes

can-cid

can-component

can-data-types

can-diff

can-fragment

can-key

can-make-map

can-query-logic

can-route-mock

can-stache

can-string-to-any

can-view-nodelist

Assets 2

5.1.0

06 Jul 20:58
@matthewp matthewp
v5.1.0
c08442a
Compare
Choose a tag to compare
5.1.0

New Features

can-route-mock is now included as an ecosystem package.

import { route, RouteMock } from "//unpkg.com/can@5/ecosystem.mjs";

route.urlData = new RouteMock();
route.register("{page}", { page: "home" });
route.start();

Updates to individual packages

can-define

also fixes a problem where type converters were not being called with the right this #349

This fixes a problem where expando properties were not able to be added again after being deleted.

can-make-map

canjs/can-make-map@v1.0.0...v1.0.1

can-super-model

Fix documentation to put this pkg into can-ecosystem

can-super-model is an ecosystem package but is listed on the website as
core. This patch release fixes that.

Assets 2

5.0.0

06 Jul 13:56
@matthewp matthewp
v5.0.0
75b6c64
Compare
Choose a tag to compare
5.0.0

Big changes

This release includes:

  • can-query-logic, a simplified replacement for can-set.
  • New service layer packages, moving can-connect to an infrastructure project
  • Support for tree-shaking.
  • Builds of core and ecosystem modules that can be used directly in the browser.
  • Routing broken into separate modules, paving the way for future improvements.

can-query-logic

The can-query-logic package exports a constructor function that builds query logic
from:

  • an optional schema or type argument, and
  • an optional options argument used to convert alternate parameters to
    the expected query format.

For example, the following builds query logic from a DefineMap:

import { DefineMap, QueryLogic } from "can";

const Todo = DefineMap.extend({
    id: {
        identity: true,
        type: "number"
    },
    name: "string",
    complete: "boolean"
});

var todoQueryLogic = new QueryLogic(Todo);

New service layer packages

can-connect is the backbone for integrating with your service layer. But most never take advantage of the flexibility using can-connect directly provides.

To make things easier, the following new packages were created which bundles together various connect behaviors:

  • can-realtime-rest-model. This allows you to build models that are connected to your service layer and can receive realtime updates (using Socket.io, WebSockets, or any other real-time library).
  • can-rest-model. Contains the most basic features needed for connecting a map to your service layer. It is like can-realtime-rest-model but without the realtime.
  • can-super-model. The kitchen sink. This model layer contains real-time, fall through caching, and everything else that can-connect contains.

Tree-shaking

Using a bundler / module loader capable of tree-shaking, such as steal 2.0, webpack, or rollup you can import items from the can package directly, and anything not used will be removed from your production build.

import { DefineMap, fixture } from "can";

DefineMap.extend("ViewModel", { ... });

In the above example, can-define, can-fixture, and any packages they rely upon will be included in the build. Other unrelated packages, such as can-observe, will not.

Web compatible ES module builds

The can package now contains 2 modules that can be consumed directly from the browser. They can be used like:

<script type="module">
import { Component } from "//unpkg.com/can@5/core.mjs";

Component.extend({
    tag: "my-app",
    view: `CanJS {{feels}} modules`,
    ViewModel: {
        feels: { default: "😍" }
    }
});
</script>

Both core and ecosystem packages include these ES module builds (available via can/core.mjs and can/ecosystem.mjs respectively). Minified versions are available as well.

This is useful for building demos, demonstrating bugs, or even for small apps. See the Setting Up CanJS guide for more information on using these packages.

route.urlData and can-route-pushstate 5.0

Due to adding support for tree-shaking, we needed a way to make can-route-pushstate not have side-effects, otherwise simply importing can would result in pushstate routing being enabled.

We added a new .urlData property that can be set in can-route, that works similarly to the .data property for connecting a view model. To enable pushstate do this:

import { route, RoutePushstate } from "can";

route.urlData = new RoutePushstate();
route.register("{page}", { page: "home" });
route.start();

Updates to individual packages

can-ajax

can-assign

can-attribute-encoder

See canjs/can-attribute-encoder#21

can-attribute-observable

can-bind

can-child-nodes

can-cid

can-component

can-compute

  • Unbinding temporary computes now uses (polyfilled) setImmediate instead of a 10ms timeout. This is to make dependent events happen in queue more consistently with mutation observer events (which also use setImmediate in vdom, and native immediate timeouts with real DOM).
  • COMPUTE.truthy now doesn't automatically evaluate functions if computes return them as values. This supports using "@" expressions (which do not evaluate a reference function to its returned value) with {{#if}} in can-stache.
  • So...
Read more
Assets 2

v4.3.0

06 Jul 05:20
@chasenlehara chasenlehara
v4.3.0
95c46ab
Compare
Choose a tag to compare
v4.3.0

Big changes

This release has three big things:

  • Improved compatibility with webpack
  • Components can be programmatically instantiated with new
  • Strict mode in modules

Improved compatibility with webpack

Most of the packages are compatible with the process.env.NODE_ENV checks that other bundlers (like webpack) use to remove code from production builds.

Find more information in this issue: Make CanJS compatible with how webpack strips out dev code.

Components can be programmatically instantiated with new

This release implements everything from the proposal to improve routing to components (and testing), including updates to can-component and can-stache, and a new can-value package.

can-component 4.2.0

In short, the can-component changes make it possible to create new component instances with new, without rendering the instances in a template. This is useful when you:

  • have complex logic for switching between different components (e.g. routing)
  • want to create components without adding them to the page (e.g. testing)

The following defines a MyGreeting component and creates a my-greeting element by calling new on the component’s constructor function:

const HelloWorld = Component.extend({
	tag: "hello-world",
	view: `
		<can-slot name="greetingTemplate" />
		<content>world</content>
		<ul>{{#each(items)}} {{this}} {{/each}}</ul>
	`,
	ViewModel: {
		items: {}
	}
});

// Create a new instance of our component
const componentInstance = new HelloWorld({

	// values with which to initialize the component’s view model
	viewModel: {
		items: ["eat"]
	},

	// can-stache template to replace any <content> elements in the component’s view
	content: "<em>{{message}}</em>",

	// <can-template> strings rendered by can-stache with the scope
	templates: {
		greetingTemplate: "{{greeting}}"
	},

	// scope with which to render the <content> and templates
	scope: {
		greeting: "Hello",
		message: "friend"
	}
});

myGreetingInstance.element; // is like <my-greeting>Hello <em>friend</em> <ul> <li>eat</li> </ul></my-greeting>

myGreetingInstance.viewModel; // is HelloWorld.ViewModel{items: ["eat"]}

Changing the component’s view model will cause its element and any bindings to be updated:

myGreetingInstance.viewModel.items.push("sleep");

myGreetingInstance.element; // is like <my-greeting>Hello <em>friend</em> <ul> <li>eat</li> <li>sleep</li> </ul></my-greeting>

can-stache 4.9.0

This release makes it possible to render component instances in a template with the “unescaped” (triple-curly) tags:

import Component from "can-component";
import stache from "can-stache";

const MyGreeting = Component.extend({
  tag: "my-greeting",
  view: "<p>Hello {{subject}}</p>",
  ViewModel: {
    subject: "string"
  }
});

const myGreetingInstance = new MyGreeting({
  viewModel: {
    subject: "friend"
  }
});

const template = stache("<div>{{{componentInstance}}}</div>");

const fragment = template({
  componentInstance: myGreetingInstance
});

fragment; //-> <div><my-greeting><p>Hello friend</p></my-greeting></div>

can-value 1.0

can-value makes it possible to create new observables:

  • from any object or primitive value
  • with the return value of a function (that updates when the observables inside it change)
  • bound to a specific key in another observable

Find examples in the docs for can-value and each of its methods: bind, from, returnedBy, to, and with.

Strict mode in modules

Almost every module now opts into strict mode with a "use strict" at the top of the file.

Updates to individual packages

can-ajax

can-assign

can-attribute-encoder

See canjs/can-attribute-encoder#21

can-attribute-observable

can-bind

can-component

can-compute

  • Unbinding temporary computes now uses (polyfilled) setImmediate instead of a 10ms timeout. This is to make dependent events happen in queue more consistently with mutation observe...
Read more
Assets 2