@rxdi/ui-kit
Version:
UI Components for building graphql-server website
191 lines • 7.18 kB
JavaScript
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.GraphComponent = void 0;
const lit_html_1 = require("@rxdi/lit-html");
const graphql_tag_1 = __importDefault(require("graphql-tag"));
const base_service_1 = require("./base.service");
const core_1 = require("@rxdi/core");
const operators_1 = require("rxjs/operators");
const rxjs_1 = require("rxjs");
const tokens_1 = require("./tokens");
require("./fetch.component");
require("./render.component");
require("./monad.component");
require("./lens.component");
require("./options.component");
require("./state.component");
require("./style.component");
/**
* @customElement rx-graph
*/
let GraphComponent = class GraphComponent extends lit_html_1.LitElement {
constructor() {
super(...arguments);
this.options = {
fetch: '',
state: new rxjs_1.BehaviorSubject({}),
render: (res) => (0, lit_html_1.html) ` ${res} `,
loading: () => (0, lit_html_1.html) ``,
error: () => (0, lit_html_1.html) ``,
style: (0, lit_html_1.css) ``,
settings: {},
defaultConfig: true,
};
this.loading = true;
this.error = '';
}
OnInit() {
this.result = new rxjs_1.ReplaySubject();
}
OnUpdateFirst() {
let task;
if (this.options.state) {
if ((0, rxjs_1.isObservable)(this.options.state)) {
task = this.options.state;
}
else {
this.result.next(this.options.state);
}
}
else {
try {
task = this.query();
}
catch (e) {
this.result.error(e);
this.result.complete();
}
}
if (this.options.subscribe) {
this.pubsubSubscription = this.graphql
.subscribe({
query: (0, graphql_tag_1.default) `
${this.options.subscribe}
`,
})
.subscribe((data) => this.result.next(data), (e) => this.result.error(e));
}
if (!task) {
return;
}
this.subscription = task.subscribe((detail) => {
this.result.next(detail);
this.dispatchEvent(new CustomEvent('onData', { detail }));
}, (error) => {
if (error.networkError) {
error.message = `${JSON.stringify(error.networkError.result.errors)} ${error.message}`;
}
this.result.error(error);
this.dispatchEvent(new CustomEvent('onError', { detail: error }));
});
// const monad = this.getRootNode().host.getRootNode();
// monad.append(this.shadowRoot)
// const monad = this.getRootNode().host;
// if (monad.parentElement) {
// monad.parentElement.prepend(this.shadowRoot)
// }
}
OnDestroy() {
if (this.subscription) {
this.subscription.unsubscribe();
}
if (this.pubsubSubscription) {
this.pubsubSubscription.unsubscribe();
}
this.result.complete();
}
query() {
let fetch = this.options.fetch;
this.options.settings = this.options.settings || {};
this.options.fetch = this.options.fetch || '';
if (this.options.fetch.loc && this.options.fetch.loc.source) {
fetch = this.options.fetch.loc.source.body;
}
if (typeof fetch === 'string' && fetch.includes('mutation')) {
this.options.settings.mutation = (0, graphql_tag_1.default) `
${fetch}
`;
return this.graphql.mutate(this.options.settings);
}
this.options.settings.query =
typeof fetch !== 'string'
? fetch
: (0, graphql_tag_1.default) `
${fetch}
`;
if (typeof fetch === 'string' && fetch.includes('subscription')) {
return this.graphql.subscribe(this.options.settings);
}
return this.graphql.query(this.options.settings);
}
isPrimitive(test) {
return test !== Object(test);
}
};
__decorate([
(0, lit_html_1.property)({ type: Object }),
__metadata("design:type", Object)
], GraphComponent.prototype, "options", void 0);
__decorate([
(0, core_1.Inject)(base_service_1.BaseService),
__metadata("design:type", base_service_1.BaseService)
], GraphComponent.prototype, "graphql", void 0);
__decorate([
(0, lit_html_1.property)({ type: Boolean }),
__metadata("design:type", Object)
], GraphComponent.prototype, "loading", void 0);
__decorate([
(0, lit_html_1.property)({ type: String }),
__metadata("design:type", Object)
], GraphComponent.prototype, "error", void 0);
GraphComponent = __decorate([
(0, lit_html_1.Component)({
selector: 'rx-graph',
template() {
var _a;
return (0, lit_html_1.html) `
<style>
${(_a = this.options) === null || _a === void 0 ? void 0 : _a.style}
</style>
${(0, lit_html_1.async)(this.result.pipe((0, operators_1.map)((state) => {
return this.options.render
? this.options.render(state, (data) => this.result.next(data), this.shadowRoot)
: state;
}), (0, operators_1.tap)(() => (this.loading = false)), (0, operators_1.catchError)((e) => {
this.error = e;
this.loading = false;
return (0, rxjs_1.of)('');
})))}
${this.loading
? (0, lit_html_1.html) `
${typeof this.options.loading === 'function'
? this.options.loading()
: core_1.Container.get(tokens_1.DEFAULTS).loading()}
`
: ''}
${this.error
? (0, lit_html_1.html) `
${typeof this.options.error === 'function'
? this.options.error(this.error)
: core_1.Container.get(tokens_1.DEFAULTS).error(this.error)}
`
: ''}
<slot></slot>
`;
},
})
], GraphComponent);
exports.GraphComponent = GraphComponent;
//# sourceMappingURL=graph.component.js.map