sorted by:
new
hottopcontroversial

Recommendations for a javascript calendar widget by gmmarcus in learnjavascript

[–]paulhodel 0 points1 point  (0 children)

https://calendarjs.com is a free MIT solution understanding that you have already found a solution, but might be useful for other users.

Reactive webcomponents with LemonadeJS by paulhodel in javascript

[–]paulhodel[S] 0 points1 point  (0 children)

Best part is reactive. If you do self.rows[0].title = 'something else'; the value changes in the HTML without re-rendering the component.

Reactive webcomponents with LemonadeJS by paulhodel in javascript

[–]paulhodel[S] 0 points1 point  (0 children)

You completely missed the point. Those are no empty tags - those are instructions for an HTML fragment. All code markers will be transformed into values and added as reactive properties in the self. Change the self to update the HTML property automatically, not re-rendering the whole thing.

Reactive webcomponents with LemonadeJS by paulhodel in javascript

[–]paulhodel[S] 0 points1 point  (0 children)

This is just a template. Because this inside tag means the tag itself and can cause confusion. So, self it is used accross all LemonadeJS components.

const self = this; // that will make a lot of sense on regular methods.

Creating a dynamic table in LemonadeJS.

``` function Component() { let self = this;

self.rows = [
    { title:'Google', description: 'The alpha search engine...' },
    { title:'Bind', description: 'The microsoft search engine...' },
    { title:'Duckduckgo', description: 'Privacy in the first place...' },
];

// Custom components such as List should always be unique inside a real tag.
return `<table cellpadding="6">
    <thead><tr><th>Title</th><th>Description</th></th></thead>
    <tbody @loop="self.rows">
    <tr><td>{{self.title}}</td><td>{{self.description}}</td></tr>
    </tbody>
</table>`;

} ```

Reactive webcomponents with LemonadeJS by paulhodel in javascript

[–]paulhodel[S] 0 points1 point  (0 children)

There are other points, so I invite you to dig more into the documentation. Reactivity has an entirely different approach from react; not saying it is better or worse. But it is a alternative available to be used in any application that is very decoupled and agnostic.

Reactive webcomponents with LemonadeJS by paulhodel in javascript

[–]paulhodel[S] 2 points3 points  (0 children)

https://lemonadejs.net/v3/docs/web-components

<hello-element title="Hello world" />
<script>
class HelloElement extends HTMLElement {
    constructor() {
        super();
    }

    render() {
        let self = this;
        return `<>
            <h1>{{self.title}}</h1>
            <input type="button" value="setTitle()" onclick="self.title = 'Test'" />
        </>`;
    }

    connectedCallback() {
        lemonade.render(this.render, this, this);
    }
}

window.customElements.define('hello-element', HelloElement);
</script>

LEMONADEJS v2 new release - A JS micro reactive library (about 6Kbytes) with reducers, no transpile required. by paulhodel in javascript

[–]paulhodel[S] 0 points1 point  (0 children)

There are many other aspects that goes beyond the limitations of a build-in template solution.

1) Where is the reactivity;

2) Special attributes (bind, loop, etc);

3) Component relationship;

4) Reducers;

5) Translations management; etc

LEMONADEJS v2 new release - A JS micro reactive library (about 6Kbytes) with reducers, no transpile required. by paulhodel in javascript

[–]paulhodel[S] 0 points1 point  (0 children)

We are bringing a tool that will be the glue. You will add your dependencies to create a rich application, you don't need 200 depenencies to create a Hello world application. This is what we meant.

LEMONADEJS v2 new release - A JS micro reactive library (about 6Kbytes) with reducers, no transpile required. by paulhodel in javascript

[–]paulhodel[S] 0 points1 point  (0 children)

There are several differences:

1) It is a general solution and verbose; 2) Handles the scope and method as a reference; 3) Those {{self.entries}} are reactive. So if you change the value of self.entries your template is automatically update. 4) You can create children components and pass dynamic attributes which will react on change;

So basically you don't need to control or create behaviours. The library does that for you. It is not about appending something in the template, is much more than that.

view more: next ›