Dominik Lubański
smalluban
source: webcomponents.org
class syntax ● complex lifecycle callbacks ● stateful architecture
class MyElement extends HTMLElement {
constructor() {
super();
...
}
get text() {
return 'ConFrontJS' || this._text;
}
set text(val) {
this._text = val;
}
someMethod() { ... }
}
customElements.define('my-element', MyElement);
class MyElement extends HTMLElement {}
Object.defineProperty(MyElement.prototype, 'text', {
get: function get() {
return 'ConFrontJS' || this._text;
},
set: function set(val) {
this._text = val;
},
configurable: true,
});
Object.defineProperty(MyElement.prototype, 'someMethod', {
get: () => function someMethod() { ... },
configurable: true,
});
customElements.define('my-element', MyElement);
const MyElement = {
text: {
get: function get() {
return 'ConFrontJS' || this._text;
},
set: function set(val) {
this._text = val;
},
},
someMethod: {
get: () => function someMethod() { ... },
},
};
defineElement('my-element', MyElement);
const MyElement = {
text: {
get: ({ _text }) => 'ConFrontJS' || _text,
set: (host, val) => { host._text = val; },
},
someMethod: {
get: (host) => () => { ... },
},
};
defineElement('my-element', MyElement);
const MyElement = {
text: {
get: (host, lastValue = 'ConfrontJS') => lastValue,
set: (host, newVal, lastValue) => newVal,
},
someMethod: {
get: (host) => () => { ... },
},
};
defineElement('my-element', MyElement);
function myFactory(defaultValue) {
return {
get: (host, lastValue = defaultValue) => lastValue,
set: (host, newVal, lastValue) => newVal,
};
}
const MyElement = {
text: myFactory('ConFrontJS'),
otherText: myFactory('It is super cool!'),
someMethod: {
get: (host) => () => { ... },
},
};
defineElement('my-element', MyElement);
const MyElementOrig = {
text: myFactory('ConFrontJS'),
someMethod: {
get: (host) => () => { ... },
},
};
const MyElementCompact = {
text: 'ConFrontJS',
someMethod: (host) => () => { ... },
};
defineElement('my-element', MyElementCompact);
class MyElement extends HTMLElement {
constructor() {
super();
...
}
get text() {
return 'ConFrontJS' || this._text;
}
set text(val) {
this._text = val;
}
someMethod() { ... }
}
customElements.define('my-element', MyElement);
const MyElement = {
text: 'ConFrontJS',
someMethod: (host) => () => { ... },
};
defineElement('my-element', MyElement);
const GithubStars = {
user: 'hybridsjs',
repo: 'hybrids',
stars: ({ user, repo }) => {
return getGitHubStars(user, repo);
},
render: ({ stars }) => {...},
};
defineElement('github-stars', GithubStars);
render requires stars property
Cache calls stars getter, which requires user and repo properties
Cache calls user and repo getters, and save them as dependencies
of stars getter
Cache returns stars getter result
const GithubStars = {
user: 'hybridsjs',
repo: 'hybrids',
stars: ({ user, repo }) => {
return getGitHubStars(user, repo);
},
render: ({ stars }) => {...},
};
defineElement('github-stars', GithubStars);
render requires stars property
Cache checks if dependencies (user or repo) cache state has changed
Yes - cache clears dependencies, calls stars getter, saves new dependencies and returns result
No - cache returns last calculated stars getter result
import { getGithubStars } from 'github-super-api';
const GithubStars = {
user: 'hybridsjs',
repo: 'hybrids',
stars: ({ user, repo }) => {
return getGithubStars(user, repo);
},
render: renderFactory(({ stars }) => {
// do stuff to update DOM
}),
};
const MyElement = {
propertyName: {
get: (host, lastValue) => {...},
set: (host, newValue, lastValue) => {...},
connect: (host, key, invalidate) => {
// initalize code
return () => {
// clean up code
};
},
};
import store from './my-redux-store';
function connect(store, mapState) {
return {
get: mapState
? () => mapState(store.getState())
: () => store.getState(),
connect: (host, key, invalidate) => {
return store.subscribe(invalidate);
},
};
};
const MyElement = {
value: connect(store, ({ value }) => value),
};
npm i hybrids