0.0.132 • Published 1 month ago
@rhtml/component v0.0.132
Strange component representing more functional approach of defining decorators
import { DefineDependencies, Component } from '@rhtml/component';
import { Container, Injectable } from '@rxdi/core';
import { html, LitElement, property } from '@rxdi/lit-html';
import { interval } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable()
class CounterService {
counter = 55;
}
const Providers = DefineDependencies(CounterService)(Container);
@Component<{ counter: number }, typeof Providers, CounterComponent>({
Settings: {
selector: 'counter-component'
},
Providers,
State: function(this, [counterService]) {
return interval(1000).pipe(
map(value => ({ counter: this.counter + counterService.counter + value }))
);
},
Render: ([counterService]) =>
function(this, { counter }) {
return html`
${counter} ${counterService.counter}
`;
}
})
export class CounterComponent extends LitElement {
@property({ type: Number })
counter: number;
}
/*
<counter-component .counter=${1000}></counter-component>
*/
Functional composition
import { Partial } from '@rhtml/component';
const compose = <T, D = []>(selector: string, styles?: CSSResult[], deps?: D) =>
Partial<T, D>({
selector,
styles
})(deps);
const state = () => interval(1000).pipe(map(() => new Date().getSeconds()));
@(compose<number>('date-component')(state)(() => date => date))
export class DateComponent extends LitElement {}
@(compose<number, typeof Dependencies>(
'date-component2',
null,
Dependencies
)(([appService]) => state().pipe(map(res => res)))(() => date => date))
export class DateComponent2 extends LitElement {}
@(compose<number>('date-component3')(state)(() => date =>
html`
${date}
`
))
export class DateComponent3 extends LitElement {}
Usage inside DOM
<date-component></date-component>
<date-component2></date-component2>
<date-component3></date-component3>
import { Component } from '@rhtml/component';
/**
* @customElement counter-component
*/
@Component<{ counter: number }, [], CounterComponent>({
Settings: {
selector: 'counter-component',
style: css`
.counter {
background: red;
color: white;
}
`
},
Providers: [],
State: function(this) {
return combineLatest([this.counter, this.mega]).pipe(
map(([value, v2]) => ({ counter: value + v2 }))
);
},
Render: () =>
function(this, { counter }, setState) {
return html`
<p>${counter}</p>
<button @click=${() => setState({ counter: counter + counter })}>
CLICK ME
</button>
`;
}
})
export class CounterComponent extends LitElement {
@property({ type: Object })
counter: Observable<number>;
@property({ type: Object })
mega: Observable<number>;
}
import { Component, DefineDependencies } from '@rhtml/component';
@Component({
Settings: {
selector: 'date-component'
},
Providers: DefineDependencies(AppsService, SocialService)(Container),
State: ([appService, socialService]) =>
interval(1000).pipe(map(() => new Date().getSeconds())),
Render: ([appService, socialService]) => seconds => seconds
})
export class ComposableComponent extends LitElement {}
0.0.131
1 month ago
0.0.132
1 month ago
0.0.129
2 months ago
0.0.130
2 months ago
0.0.128
2 months ago
0.0.127
2 months ago
0.0.126
3 months ago
0.0.125
5 months ago
0.0.120
1 year ago
0.0.124
1 year ago
0.0.123
1 year ago
0.0.122
1 year ago
0.0.121
1 year ago
0.0.119
1 year ago
0.0.118
1 year ago
0.0.117
2 years ago
0.0.116
2 years ago
0.0.115
2 years ago
0.0.114
2 years ago
0.0.113
2 years ago
0.0.112
2 years ago
0.0.111
2 years ago
0.0.87
2 years ago
0.0.88
2 years ago
0.0.89
2 years ago
0.0.110
2 years ago
0.0.106
2 years ago
0.0.95
2 years ago
0.0.105
2 years ago
0.0.96
2 years ago
0.0.104
2 years ago
0.0.97
2 years ago
0.0.103
2 years ago
0.0.98
2 years ago
0.0.99
2 years ago
0.0.109
2 years ago
0.0.108
2 years ago
0.0.107
2 years ago
0.0.90
2 years ago
0.0.102
2 years ago
0.0.91
2 years ago
0.0.101
2 years ago
0.0.92
2 years ago
0.0.100
2 years ago
0.0.93
2 years ago
0.0.94
2 years ago
0.0.85
3 years ago
0.0.86
3 years ago
0.0.84
3 years ago
0.0.83
3 years ago
0.0.81
3 years ago
0.0.82
3 years ago
0.0.75
3 years ago
0.0.76
3 years ago
0.0.77
3 years ago
0.0.78
3 years ago
0.0.79
3 years ago
0.0.80
3 years ago
0.0.74
3 years ago
0.0.73
3 years ago
0.0.72
3 years ago
0.0.71
3 years ago
0.0.70
3 years ago
0.0.69
3 years ago