slimjs / slim.js Goto Github PK
View Code? Open in Web Editor NEWFast & Robust Front-End Micro-framework based on modern standards
Home Page: http://slimjs.com
License: MIT License
Fast & Robust Front-End Micro-framework based on modern standards
Home Page: http://slimjs.com
License: MIT License
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);
}
data
is accessible in the click handler<span
s:repeat="ingredients"
bind:item="data"
click="click"
>{{data.name}}</span>
data
is NOT accessible in the click handler<span
s:repeat="ingredients as item"
bind:item="item"
click="click"
>{{item.name}}</span>
Might be in more browsers, but onAdded
gets triggered once in Chrome and twice in Firefox.
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?
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.
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
If Slim.__WCSupported is false, replace in style nodes ":host" with the tag name and unique identifier as custom attr
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?
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.
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 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?
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.
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.
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
What the title says.
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.
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 :)
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
on Firefox 61.0b11 (64-bit).
clicking this btn opens a tab with about:blank in the url.
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
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
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
is the new way to do it in V2 spec, talks ref 1.x
this.shadowRoot.querySelector works. Alter the method to work with shadow root if exists
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’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.
Any ideas on how to implement a custom directive like angular’s ng-class?
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. :)
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
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 ?
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.
There is no event-binding for transitionend.
https://stackoverflow.com/questions/52596322/transitionend-event-binding-with-slim-js
Per title
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.
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 😢
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?
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
When an attribute is set using element.setAttribute(..)
, its auto-bound property is not updated properly, due to an incorrect call for autoBoundProperties.includes
.
Line 343 in 282ba02
Since includes
is a function, this.autoBoundAttributes.includes[attr]
should be this.autoBoundAttributes.includes(attr)
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 :) )
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 {}
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)
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.
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.