Please notice: Breaking Changes

Slim is now rebuilt keeping the same functionality (and plenty of more added), and reduced the code by about 50%! It is 6404 Bytes only (gzipped).

Simplest syntax (ever)

Binding (PAP)

<some-element bind:user-data="myUser"></some-element>

will bind parent::myUser to child::userData (and the attribute user-data)

<some-element bind:user-data="getData(myUser)"></some-element>

will wrap any changes to parent::myUser with parent::getData function

Binding (Text)

<p bind>Hello {{myUser.name}}. You have {{messages.length}} unread messages</p>
<p bind>Here is one: {{getRandomMessage(messages)}}</p>

Repeaters

<ol><li s:repeat="items as item" bind>{{item.title}}</li></ol>

Conditional

<div slim-if="someBoolean">
  <p>Hello, Slim.js</p>
</div>

# Custom bindings (added in 3.0.0) :sparkles:
`[static]` Slim::bind(sourceElement, scopedElement, `string` expression, `function` executor)
Example usage:

```javascript
Slim.bind(this, other, 'user.name', (target, computedValue) => {
// user has changed
// computedValue = "John"
// do anything on target
})

Plugins :sparkles:

AOP style element management

Slim.plugin(phase, target => {
// element is now in phase
// possible phases are: "create", "added", "beforeRender", "afterRender", "removed"
})

Reduced clutter

no more underscored "private" properties. Everything is wrapped inside native Symbols.

Documentation

The documentation of Slim 3 is a work in progress. Collaborators are welcome.

Deprecated in 3.0.0

• on%Prop%Changedis no more. Developers can useSlim.bindorSlim.bindOwn` to handle changes in properties
• Array monkey patching removed. Slim encourages you to use immutable arrays. It's faster.

:sparkles:Brand new Slim.js!:sparkles:

<child-element prop="{model}"></child-element>

Slim.inject('model', element => {
  return someImportantObject(element);
});