slimjs / slim.js Goto Github PK

When an attribute is set using element.setAttribute(..), its auto-bound property is not updated properly, due to an incorrect call for autoBoundProperties.includes.

Since includes is a function, this.autoBoundAttributes.includes[attr] should be this.autoBoundAttributes.includes(attr)

If Slim.__WCSupported is false, replace in style nodes ":host" with the tag name and unique identifier as custom attr

Hi, I would like to know what is the purpose of having 2 same lines in the src file ?

Line: 855 self._boundChildren.push(child);
Line: 856 self._boundChildren.push(child);

Is it a typo ?

I'm using the approach described here: http://slimjs.com/#/plugins to supply the component with data.
The model is just a JS object.
When my components make changes, these are not being reflected in the model. The components are working with the changes (for example, an s:if condition will react when the value of the property changes), but I don't see that in the original model. Am I missing something?

Here's my usage scenario:

@tag('parent-component')
@template(`
<child-component bind:items="parentProp.path.items"></child-component>
`
export default class ParentComp extends Slim {
  parentProp = {}
}

My child component has a property items and its template contains a list with s:repeat="items as item".
Before the parent-component element is added to DOM, I do:

let data = {
  path: {
    items: [ ... ]
  }
}
Slim.plugin('create', element => {
  if (element.localName === 'parent-component') {
    element.parentProp = data
  }
})

Could it be because the binding to items in the child is too deep? i.e. parentProp.path.items. I have other scenarios where the binding is shallower (e.g. parentProp.prop) and this works.

https://plnkr.co/edit/hNVOfJX3CKuT8hIZXUsD?p=preview

bfcb464

If we are going to migrate to v1 registration I feel we can deprecate the hooks for the v0 callbacks (i.e. attached / detached) . Will make slim a touch slimmer. ;-) <3

Let me know if you need me to PR this.

Given

this.tests = ['a', 'b', 'c'];        
setTimeout(() => {
    this.tests = ['d', 'e'];
}, 1000);

and

    <div s:repeat="tests as test" bind>
        {{test}}
    </div>

it will show in Firefox:

a
b
c

in Chrome:

d
b

+

Is it possible to change the Slim.es6.js file ?
You are using an UMD module inside Slim.js
It could be better to export directly Slim class in Slim.es6.js, and add your UMD stuff during ES5 build.

on Firefox 61.0b11 (64-bit).
clicking this btn opens a tab with about:blank in the url.

Please consider the following form:

import {Slim} from "slim-js"
import {tag, template, useShadow} from "slim-js/Decorators"

@tag('my-tag')
@template(`
 <div role="main"> 
      my html 
 </div>
`)
@useShadow(`
  div[role="main"] {
      font-weight: bold
  }
`)
class _ extends Slim {}

Keep up the good work.
Thanks :)

Hi,
I am new to SlimJs and trying to use the data binding for some SVG attributes.

Slim.tag(
	'maze-board',
	`<svg class="maze-grid" bind:width="maxWidth" bind:height="maxHeight"></svg>`,
	class MazeBoard extends Slim {
		onBeforeCreated() {
			this.maxWidth = 1000;
			this.maxHeight = 1000;
		}
	});

But I a m getting the following error:

Slim.js:990 Uncaught TypeError: Cannot assign to read only property 'width' of object '#'
at Slim.js:990
at Function.commit (Slim.js:386)
at Function.commit (Slim.js:414)
at HTMLElement._executeBindings (Slim.js:528)
at doRender (Slim.js:647)

Am I doing something wrong here?

It would be very helpful if documentation (at main site) contained a link to Slim Webpack Biolerplate project.

Also, Web Components polyfill at the Getting Started page references version 1.0.17 of webcomponents-lite.js, and the Boilerplate project references version 1.2.7, while the last version is 1.3.3. Does it make sense to update to this version?

I am currently using Riot.js in my Web App Clibu and like the look off slim.js, especially as it doesn't require a compile step and child component access seems simpler.

Riot.js enables css to be specified along with the component markup, scoping it to the component.

I couldn't see any mention of css in your doc's - is this possible?

I get a SyntaxError: An invalid or illegal string was specified exception when I try to use

@tag('app')
@template('<p>App</p>')
@useShadow(true)
export default class App extends Slim {
  //
}

or

@tag('main')
@template('<p>App</p>')
@useShadow(true)
export default class App extends Slim {
  //
}

while

@tag('my-app')
@template('<p>App</p>')
@useShadow(true)
export default class MyApp extends Slim {
  //
}

works fine.

I don't understand why "app" and "main" tags cause exception, but if it can't be fixed it should at least be reflected in the documentation, I think, because these names are the first ones to come to mind for the whole application component. :)

Might be in more browsers, but onAdded gets triggered once in Chrome and twice in Firefox.

Any ideas on how to implement a custom directive like angular’s ng-class?

Hi, I was wondering if slimjs could consider components with Storybook or simply is possible with Storybook for HTML (storybook allow reuse components in development time with elegant UI and drag and drop).
I think slimjs proposal is great. I can imagine mixed with Storybook would be so cool.
Thanks any way.

dns not setup? I see the domain was updated in the past 24 hours, but even google doesn't have an IP for the domain

dig @8.8.8.8 slimjs.com

; <<>> DiG 9.2.4 <<>> @8.8.8.8 slimjs.com
; (1 server found)
;; global options:  printcmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: SERVFAIL, id: 16042
;; flags: qr rd ra; QUERY: 1, ANSWER: 0, AUTHORITY: 0, ADDITIONAL: 0

;; QUESTION SECTION:
;slimjs.com.                    IN      A

;; Query time: 145 msec
;; SERVER: 8.8.8.8#53(8.8.8.8)
;; WHEN: Thu Nov  9 22:49:53 2017
;; MSG SIZE  rcvd: 28

I understood right, recursive repeaters are not possible?
this is the use case.

@tag('sws-navigation-item')
@useShadow(true)
@template(`
<ul>
    <li slim-repeat="items" slim-repeat-as="item">
        <a bind href="[[item.url]]">[[item.title.text]]</a>
        <sws-navigation-item interactive item="[[item.childLayer]]" click="openItem" id="[[item.id]]"></sws-navigation-item>
    </li>
</ul>
`)
export class NavigationItem extends Slim {}

Hello,

I wanted to know if slim.js supports server side rendering. I have been looking at the documentation to see if this feature was available but I could not find any mention of it.

Thank you for your help and good job.

Linvi

In Firefox I need to do

const purpose = ev.target['_slim_internals_'].repeater.purpose;

to access something from the repeater scope, whilst in Chrome I can do

const purpose = ev.target.purpose

Consider a slim control with <style> tag in the end of the template.
Consider that an element before that <style> is a slim-control.
Consider the current control to have an input with an input event:

<span>
  <input s:id="queryInput" type="text" input="handleInput">
 </span>
 <child-slim-control s:repeat="somestuff"></child-slim-control>
<style>
 .foo{ color: blue }
</style>

When the input event is processed - I get:

Slim.min.js:1 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at HTMLElement._render (Slim.min.js:1)
    at HTMLElement.render (Slim.min.js:1)
    at HTMLElement.createdCallback (Slim.min.js:1)
    at init (Slim.min.js:1)

comes with log waring:

TypeError: Could not respond to event "input" on input -> "handleInput" on lab-search ... Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
    at HTMLElement._render (Slim.min.js:1)
    at HTMLElement.render (Slim.min.js:1)
    at HTMLElement.createdCallback (Slim.min.js:1)
    at Slim.min.js:1
    at Array.forEach (<anonymous>)
    at Slim.min.js:1
    at Array.forEach (<anonymous>)
    at Slim.min.js:1
    at Function.commit (Slim.min.js:1)
    at Function.commit (Slim.min.js:1)

consider the following template:

<ol>
  <li s:repeat="receipt.products">
    <span>{{data.name}}</span>
    <br>{{data.effects.length}}
    <ol>
      <li s:repeat="data.effects as effect">{{effect.name}}</li>
    </ol>
  </li>
</ol>

the data.effects.length prints correctly the number of elements, but the nested repeater does not see the data 😢

Hi,

Considering this array :

let list = [[1], [1,1], [1,2,1]]

How can i iterate to the elements ?

<div s:repeat="list as line">
    <triangle-item s:repeat="line as item" text="{{item}}"></triangle-item>
</div>

I correctly got the first list rendered, but inside each first line, i got <!--triangle-item s:repeat="line as item"-->

Thanks

What the title says.

I ended up needing a Reflect and Symbol polyfill, and it was an absolute pain getting it up and running (still need to do some debugging), but it would be good to document this better.

Notes: Only polyfill that ended up working for me was the one included in the babel-polyfill package. Directly including Reflect from both v5 and v6 of core-js didn't work, nor did harmony-reflect work for me.

Hi,
I am wondering if it is possible to evaluate the bindings when using a shadow dom.

The attached fiddle shows what I want to achieve.

http://jsfiddle.net/wmoL2v81/13/

Or is this not possible with slim.js

https://semaphoreci.com/eavichay/slim-js/branches/master/builds/251

Per title

I’m having some trouble using the slim-repeat and slim-repeat-as attributes with <option> elements in Safari.

Here’s an example…

Slim.tag('test-binding',
`
  <ul><li s:repeat="items" bind>{{data}}</li></ul>
  <select><option s:repeat="items" bind>{{data}}</option></select>
`,
class extends Slim {
  onBeforeCreated() {
    this.items = ['one', 'two', 'three'];
  }
});

When viewing this example in Safari, the <li> elements render correctly but there are no options available when interacting with the <select> element. The console does show the iterated elements but they are not accessible to the user (screenshot here).

This appears to be a problem for Safari on both iOS and OSX. Other major, modern browsers render both elements as expected.

Any thoughts? Thanks for your help.

works

• i.e data is accessible in the click handler

<span
    s:repeat="ingredients" 
    bind:item="data"
    click="click"
  >{{data.name}}</span>

does't work

• i.e data is NOT accessible in the click handler

<span
    s:repeat="ingredients as item" 
    bind:item="item"
    click="click"
  >{{item.name}}</span>

Is there a list of changes / are they completely in switching to typescript or are there API changes as well? I got a ding from resolve bot about new version existing but I don't see anything mentioned about it here as far as release notes.

Thanks

I just released an adapted version of the interactive react lifecycle methods diagram for custom element reactions:
https://andyogo.github.io/custom-element-reactions-diagram/

If you have time, I would appreciate your feedback very much.

This makes bundlers to fail unless they fallback to the main property.
IMHO, should be removed or pointed to Slim.js like for main property.
Cheers

Hi,

I have created a benchmark suite for Web Components librairies. slim.js is implemented, and you can see the raw results here : vogloblinsky.github.io/web-components-benchmark

I will release soon a blog post explaining in detail that, but i want a feedback of many librairies authors before, to be sure i am not wrong in my implementations.

Source code here : vogloblinsky/web-components-benchmark

Can you have a look and give me some feedbacks ?

Thanks

I want to do custom templates through a by overwriting the template getter.
And I want to inject an EventManager (potentially I will inject other things as well)

I get a Illegal constructor TypeError if I do that.

example.ts

import { Slim } from "slim-js";
import { tag, useShadow, template } from "slim-js/Decorators";
import { TemplateProvider } from './../../utilities/templates'
import { EventManager} from './../../utilities/events'

@tag('sws-example')
@useShadow(false)
export class ExampleComponent extends Slim {

    public events: EventManager

    name: string;
    
    items: any[]
    
    public onBeforeCreated(): void {
        this.name = "example";
        this.items = [
            {name: 'Apple', id: 1},
            {name: 'Orange', id: 2},
            {name: 'Banana', id: 3}
        ];
    }

    public selectItem(event: Event): void {
        // invoked!
        let itemId = $(event.target).attr('id');
        alert('Selected item '+itemId);
    }
    
}

@tag('sws-item')
@useShadow(true)
@template(`
<button><slim-content></slim-content></button>
`)
export class ChildComponent extends Slim {

}

and in main.ts I create the component like this:

import { template } from 'slim-js/Decorators'
...


        template(templateProvider.templates['sws-example'])(ExampleComponent)
        let eC = new ExampleComponent()
// Setter injection trying alternatives
        eC.events = events

This error message I still get:

Slim.min.js:1 Uncaught TypeError: Illegal constructor
    at ExampleComponent._CustomElement (Slim.min.js:1)
    at ExampleComponent.Slim (Slim.min.js:1)
    at new ExampleComponent (example.ts:8)
    at main.ts:25
    at HTMLDocument.<anonymous> (zepto.js:446)

Is there any way to achieve something like this?

Thank you very much,

Tilman

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
is the new way to do it in V2 spec, talks ref 1.x

There is no event-binding for transitionend.

https://stackoverflow.com/questions/52596322/transitionend-event-binding-with-slim-js

this.shadowRoot.querySelector works. Alter the method to work with shadow root if exists

I created a fiddle to show an error (or misunderstanding on my side :)).
After pressing the update button, which only calls this.render() I got following exception Cannot read property 'chain' of undefined.

Is that an issue or is it not intended to call render() within the component?

https://jsfiddle.net/wmoL2v81/66/ (I know the binding will be updated after the value is changed. In my real component, there is some logic in the onRender() method. That's the reason I thought calling this.render() is a smart idea :) )

Hi again,
trying to use computed bindings inside a s:repeat. See line {{calcPercentage}}

@tag('custom-table')
@template(`
<div>
 <table>
    <tbody>
      <tr s:repeat="items as item">
        <th>
          <a click="navToEdit(item)" bind>{{item.name}}</a>
        </th>
        <td bind>{{item.status}}</td>
        <td bind>{{calcPercentage(item)}}%</td>
      </tr>
    </tbody>
  </table>
</div>`
export default class TableComponent extends Slim {
  items = []
  onBeforeCreated() {
    items = [
      { name: 'first', status: 'ok', num: 50 },
      { name: 'second', status: 'ok', num: 80 },
    ]
  }
  calcPercentage(item) {
    // item is 'undefined'
    return ( item.num / 100 ) * 100 // just an example of trying to access props in 'item'
  }
  ...
}

calcPercentage is not getting passed the item from s:repeat. item is undefined in the method. Why is item not passed to the function in the computed binding?

I'm not sure if this is a missing feature or just missing documentation. Is there any possibility to transclude the content inside a component into a slot inside the template or create a component without template that preserves the content inside?

Style encapsulation seems to be an important part missing in slim.js . Considering the "slim" nature I think it's good to leave it out by default, but an optional decorator allowing one to use it would be amazing.

It's fairly easy to 'trick' shadyCSS with

const templateEl = document.createElement('template');
templateEl.innerHTML = templateContent;

etc.

@eavichay

https://github.com/slimjs/slim.js/blob/master/.semaphore/semaphore.yml

Semaphore jobs are executed in separate (totally independent) VMs, so commands in Job "Install":

 checkout
 npm install

are executed in one VM and comand in job "Test":

npm run test

is executed in other VM.

Thus, job "Test" fails.

Hope this helps.

This is in combination with Webpack and Babel, using the following code

@tag('some-element')
class A extends Slim {
  @attribute
  myProperty // bounds to my-property attribute automatically.
}

I found the use of deprecated document.registerElement() caused slim.min.js to throw an error in the following function.

I fixed the issue by uncommenting the new window.customElements.define().

Is there a specific reason why this is uncommented in the first place? Thank you very much.

    /**
     * Declares a slim component
     *
     * @param {String} tag html tag name
     * @param {String|class|function} clazzOrTemplate the template string or the class itself
     * @param {class|function} clazz if not given as second argument, mandatory after the template
     */
    static tag(tag, clazzOrTemplate, clazz) {
        if (clazz === undefined) {
            clazz = clazzOrTemplate;
        } else {
            Slim.__templateDict[tag] = clazzOrTemplate;
        }
        Slim.__prototypeDict[tag] = clazz;
        window.customElements.define(tag, clazz);
        // document.registerElement(tag, clazz);
    }