canjs / can-23

A CanJS 2.3 stache built from mostly CanJS 6 parts.

CanJS

CanJS is a collection of client-side JavaScript architectural libraries.

Web Components

CanJS’s StacheElement allows you to create Web Components with observable properties and live-bound templates.

class Counter extends StacheElement {
	static view = `
		Count: <span>{{ this.count }}</span>
		<button on:click="this.increment()">+1</button>
	`;

	static props = {
		count: 0
	};

	increment() {
		this.count++;
	}
}
customElements.define("my-counter", Counter);

Model layer

Components shouldn’t be concerned with how data is fetched, updated, or cached.

CanJS provides the right abstractions for your model code to be cleanly separated from your UI code. Learn more…

Promises in templates

CanJS’s stache templating language can directly read the state and values from Promises.

No need to write any extra code to determine whether a Promise is pending, resolved, or rejected. Learn more…

{{# if(this.promise.isPending) }}
  Loading…
{{/ if }}
{{# if(this.promise.isRejected) }}
  Error: {{ this.promise.reason }}
{{/ if }}
{{# if(this.promise.isResolved) }}
  Result: {{ this.promise.value }}
{{/ if }}

Real-time list updating

After data is created, updated, or destroyed, CanJS automatically updates your lists for you.

Filtering and sorting are preserved, so you don’t have to manually update your lists or fetch the same data again. Learn more…

Getting Started

Ready to get started? See the Setting Up CanJS, API Docs and Guides pages.

Support / Contributing

Before you make an issue, please read our Contributing guide.

You can find the core team on Slack.

Release History

See Releases.

License

MIT License.

can-23's Issues

Unsupported Features

Stache

• {{3}} looking up the 4th item in an array (assuming there is an array in the scope)
• Skipping the protections around img srcs like: <img src="{{image}}"/>. These can be changed to src:from.
• @index being a helper that can add an offset like: <ul>{{#each list}}<li>{{@index 5}} {{.}}</li>{{/each}}</ul>
• @index use %index
• joinBase {{joinBase 'hello/' name}}
• options 2nd argument to stache .subtemplate (we should get a warning here). Also scope.options for both custom tags and attributes.
• call expressions

Utils

• jQuery can make normal objects "bindable". If this is something that's wanted, we might want to use SimpleMap or mixin eventQueue(object)

Component

• complex nesting of <content/> element. How common is <content>? I can spend time making some edge cases work, but I'm skipping for now.
• hyphen-less tag names <tabs> defined after the template.
• canjs/canjs#1803 Calling destroy before event handlers are unbound.
• p3='{{v3}}' use normal bindings instead ... don't rely on automatic attribute bindings.

Make .attr() keep properties defined as `serialize:false`

I've started a test for this here: https://github.com/canjs/can-23/pull/10/files. Will be fixed by #10

Support #for and other new helpers in can23's can-stache templates

list.attr doesn't seem to work

It seems like expando properties don't work because this._data isn't defined ...

Make fixtures work again

can-fixture isn't properly mapped

Support Firefox 108

Tests do not pass in latest Firefox 108 version.

Tests failing:
263 can/component dom: treecombo. Source: makeTest@http://localhost:3621/component/component_test.js:453:7 anonymous/
264 can/component dom: deferred grid Source: makeTest@http://localhost:3621/component/component_test.js:668:7 anonymous/
265 can/component dom: nextprev Source: makeTest@http://localhost:3621/component/component_test.js:782:7 anonymous/
266 can/component dom: page-count Source: makeTest@http://localhost:3621/component/component_test.js:815:7 anonymous/
267 can/component dom: hello-world and whitespace around custom elements Source: makeTest@http://localhost:3621/component/component_test.js:844:7 anonymous/
271 can/component dom: setting passed variables - two way binding Source: makeTest@http://localhost:3621/component/component_test.js:935:7 anonymous/
275 can/component dom: content in a list Source: makeTest@http://localhost:3621/component/component_test.js:1048:7 anonymous/
279 can/component dom: viewModel not rebound correctly (#550) Source: makeTest@http://localhost:3621/component/component_test.js:1149:7 anonymous/
280 can/component dom: inserted event fires twice if component inside live binding block Source: makeTest@http://localhost:3621/component/component_test.js:1205:7 anonymous/
284 can/component dom: Component events bind to window Source: makeTest@http://localhost:3621/component/component_test.js:1365:7 anonymous/
289 can/component dom: nested component within an #if is not live bound(#1025) test #2 Source: makeTest@http://localhost:3621/component/component_test.js:1473:7 anonymous/

Ended test on 291

Essentially the problem boils down to not specifying the Type of can.List in a new can.Map. The perfect example is: "can/component new bindings dom" "treecombo" the test fails when running all tests, but passes if you run just that test. the viewModel.selected property is initiated with [] but when the toggle method runs, this.attr('selected') is a reference to this If you change the viewModel from viewModel: {selected: []} to

const VM = can.Map.extend({
  define: {
    selected: {
      Type: can.List, 
      Value: can.List
    }
  }
}); 
...
viewModel: VM,
...

the tests for treecombo will now pass.

#each doesn't loop through keys with `.` in them correctly

x = new can.Map({ "foo.bar": "baz" });
y = can.stache(`{{#each this}}{{%key}} {{this}}<br>{{/each}}`)
$('<div>').append(y(x)).html(); 
// '\x3C!--Observation<{{#each this}}>-->foo.bar <br>\x3C!--/Observation<{{#each this}}>-->'

The value of "baz" won't be printed

Necessary features for client (Tt)

• stache helpers are using can.isFunction() to see if a passed in value is a compute and should be called for its value -- computes are functions but report false to can.isFunction(). This may need to be made an exception.
• getHelper in view/stache/helpers/core should allow a non-Scope as the scope argument (and wrap into a can.view.Scope)