Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@apollo-elements/fast
Advanced tools
@apollo-elements/fast - npm Package Compare versions
Comparing version 1.0.0 to 1.1.0
| import type { GraphQLError } from 'graphql'; | ||
| import type { ApolloClient, ApolloError, NormalizedCacheObject } from '@apollo/client/core'; | ||
| import type { ApolloElementInterface } from '@apollo-elements/interfaces/apollo-element'; | ||
| import type { Constructor, CustomElement } from '@apollo-elements/interfaces'; | ||
| import { FASTElement } from '@microsoft/fast-element'; | ||
| declare const ApolloElement_base: { | ||
| new (..._: any[]): { | ||
| new <TData_1 = unknown, TVariables_1 = unknown>(): { | ||
| context?: Record<string, unknown>; | ||
| data: unknown; | ||
| data: TData_1; | ||
| variables: TVariables_1; | ||
| error: Error | ApolloError; | ||
@@ -13,7 +15,15 @@ errors: readonly GraphQLError[]; | ||
| client: ApolloClient<NormalizedCacheObject>; | ||
| __document: import("graphql").DocumentNode; | ||
| __mo: MutationObserver; | ||
| _document: import("graphql").DocumentNode; | ||
| _documentSetByJS: boolean; | ||
| _variables: TVariables_1; | ||
| _variablesSetByJS: boolean; | ||
| mo: MutationObserver; | ||
| document: import("graphql").DocumentNode; | ||
| connectedCallback(): void; | ||
| disconnectedCallback(): void; | ||
| documentChanged?(document: import("graphql").DocumentNode): void; | ||
| variablesChanged?(variables: TVariables_1): void; | ||
| onMutation(): void; | ||
| getDOMGraphQLDocument(): import("graphql").DocumentNode; | ||
| getDOMVariables(): TVariables_1; | ||
| attributeChangedCallback?(name: string, oldValue: string, newValue: string): void; | ||
@@ -38,5 +48,5 @@ adoptedCallback?(): void; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -281,12 +291,8 @@ readonly assignedSlot: HTMLSlotElement; | ||
| }; | ||
| } & (new () => HTMLElement & FASTElement) & { | ||
| from<TBase extends { | ||
| new (): HTMLElement; | ||
| prototype: HTMLElement; | ||
| }>(BaseType: TBase): new () => InstanceType<TBase> & FASTElement; | ||
| define<TType extends Function>(type: TType, nameOrDef?: string | import("@microsoft/fast-element").PartialFASTElementDefinition): TType; | ||
| }; | ||
| export declare class ApolloElement<Data = unknown> extends ApolloElement_base implements ApolloElementInterface<Data> { | ||
| documentType: string; | ||
| } & Constructor<CustomElement & FASTElement>; | ||
| export declare class ApolloElement<TData = unknown, TVariables = unknown> extends ApolloElement_base<TData, TVariables> implements ApolloElementInterface<TData> { | ||
| context?: Record<string, unknown>; | ||
| data: Data; | ||
| data: TData; | ||
| variables: TVariables; | ||
| error: ApolloError | Error; | ||
@@ -293,0 +299,0 @@ errors: readonly GraphQLError[]; |
@@ -8,2 +8,3 @@ import { __decorate } from "tslib"; | ||
| this.data = null; | ||
| this.variables = null; | ||
| this.error = null; | ||
@@ -20,2 +21,5 @@ this.errors = null; | ||
| observable | ||
| ], ApolloElement.prototype, "variables", void 0); | ||
| __decorate([ | ||
| observable | ||
| ], ApolloElement.prototype, "error", void 0); | ||
@@ -22,0 +26,0 @@ __decorate([ |
| import type { GraphQLError } from 'graphql'; | ||
| import type { ApolloClient, ApolloError, NormalizedCacheObject } from '@apollo/client/core'; | ||
| import type { ApolloElementInterface } from '@apollo-elements/interfaces/apollo-element'; | ||
| import type { Constructor, CustomElement } from '@apollo-elements/interfaces'; | ||
@@ -8,9 +9,13 @@ import { ApolloElementMixin } from '@apollo-elements/mixins/apollo-element-mixin'; | ||
| export class ApolloElement<Data = unknown> | ||
| extends ApolloElementMixin(FASTElement) | ||
| implements ApolloElementInterface<Data> { | ||
| export class ApolloElement<TData = unknown, TVariables = unknown> | ||
| extends ApolloElementMixin( | ||
| FASTElement as Constructor<CustomElement & FASTElement> | ||
| )<TData, TVariables> | ||
| implements ApolloElementInterface<TData> { | ||
| declare context?: Record<string, unknown>; | ||
| @observable data: Data = null; | ||
| @observable data: TData = null; | ||
| @observable variables: TVariables = null; | ||
| @observable error: ApolloError | Error = null; | ||
@@ -17,0 +22,0 @@ |
@@ -31,7 +31,15 @@ import type { MutationOptions, MutationUpdaterFn, FetchResult } from '@apollo/client/core'; | ||
| onMutationError(error: import("@apollo/client/errors").ApolloError, mutationId: number): never; | ||
| __document: DocumentNode; | ||
| __mo: MutationObserver; | ||
| _document: DocumentNode; | ||
| _documentSetByJS: boolean; | ||
| _variables: TVariables_1; | ||
| _variablesSetByJS: boolean; | ||
| mo: MutationObserver; | ||
| document: DocumentNode; | ||
| connectedCallback: (() => void) & (() => void); | ||
| disconnectedCallback: (() => void) & (() => void); | ||
| documentChanged?(document: DocumentNode): void; | ||
| variablesChanged?(variables: TVariables_1): void; | ||
| onMutation(): void; | ||
| getDOMGraphQLDocument(): DocumentNode; | ||
| getDOMVariables(): TVariables_1; | ||
| attributeChangedCallback?(name: string, oldValue: string, newValue: string): void; | ||
@@ -56,5 +64,5 @@ adoptedCallback?(): void; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -299,3 +307,4 @@ readonly assignedSlot: HTMLSlotElement; | ||
| }; | ||
| } & Constructor<ApolloElement<unknown>>; | ||
| documentType: string; | ||
| } & Constructor<ApolloElement<unknown, unknown>>; | ||
| /** | ||
@@ -302,0 +311,0 @@ * `ApolloMutation` |
@@ -17,3 +17,5 @@ import { __decorate } from "tslib"; | ||
| */ | ||
| export class ApolloMutation extends ApolloMutationMixin(ApolloElement) { | ||
| export class ApolloMutation | ||
| // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin | ||
| extends ApolloMutationMixin(ApolloElement) { | ||
| constructor() { | ||
@@ -20,0 +22,0 @@ super(...arguments); |
@@ -153,2 +153,3 @@ import { __decorate } from "tslib"; | ||
| ], Klass); | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
@@ -172,2 +173,3 @@ const attrVal = 'QueryA, QueryB,QueryC, QueryD'; | ||
| ], Klass); | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
@@ -174,0 +176,0 @@ element = |
@@ -190,2 +190,4 @@ import type { | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
@@ -215,2 +217,4 @@ | ||
| Klass; | ||
| const tag = unsafeStatic(name); | ||
@@ -217,0 +221,0 @@ |
@@ -24,2 +24,3 @@ import type { MutationOptions, MutationUpdaterFn, FetchResult } from '@apollo/client/core'; | ||
| export class ApolloMutation<TData, TVariables> | ||
| // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin | ||
| extends ApolloMutationMixin(ApolloElement as Constructor<ApolloElement>)<TData, TVariables> | ||
@@ -26,0 +27,0 @@ implements ApolloMutationInterface<TData, TVariables> { |
@@ -24,5 +24,6 @@ /// <reference types="zen-observable" /> | ||
| errorPolicy: import("@apollo/client/core").ErrorPolicy; | ||
| __variables: TVariables; | ||
| __options: Partial<import("@apollo/client/core").WatchQueryOptions<Record<string, any>, any>>; | ||
| connectedCallback(): void; | ||
| documentChanged(query: import("graphql/language/ast").DocumentNode): void; | ||
| variablesChanged(variables: TVariables): void; | ||
| refetch(variables: TVariables): Promise<import("@apollo/client/core").ApolloQueryResult<TData>>; | ||
@@ -43,6 +44,12 @@ canSubscribe(options?: Partial<import("@apollo/client/core").SubscriptionOptions<Record<string, any>, any>>): boolean; | ||
| client: import("@apollo/client/core").ApolloClient<import("@apollo/client/core").NormalizedCacheObject>; | ||
| __document: import("graphql/language/ast").DocumentNode; | ||
| __mo: MutationObserver; | ||
| _document: import("graphql/language/ast").DocumentNode; | ||
| _documentSetByJS: boolean; | ||
| _variables: TVariables; | ||
| _variablesSetByJS: boolean; | ||
| mo: MutationObserver; | ||
| document: import("graphql/language/ast").DocumentNode; | ||
| disconnectedCallback: (() => void) & (() => void); | ||
| onMutation(): void; | ||
| getDOMGraphQLDocument(): import("graphql/language/ast").DocumentNode; | ||
| getDOMVariables(): TVariables; | ||
| attributeChangedCallback?(name: string, oldValue: string, newValue: string): void; | ||
@@ -67,5 +74,5 @@ adoptedCallback?(): void; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -310,3 +317,4 @@ readonly assignedSlot: HTMLSlotElement; | ||
| }; | ||
| } & Constructor<ApolloElement<unknown>>; | ||
| documentType: string; | ||
| } & Constructor<ApolloElement<unknown, unknown>>; | ||
| /** | ||
@@ -313,0 +321,0 @@ * `ApolloQuery` |
@@ -10,3 +10,5 @@ import { __decorate } from "tslib"; | ||
| */ | ||
| export class ApolloQuery extends ApolloQueryMixin(ApolloElement) { | ||
| export class ApolloQuery | ||
| // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin | ||
| extends ApolloQueryMixin(ApolloElement) { | ||
| } | ||
@@ -13,0 +15,0 @@ __decorate([ |
@@ -77,3 +77,3 @@ import { __decorate } from "tslib"; | ||
| const name = 'renders-by-default'; | ||
| const template = html `${x => 'RENDERED'}`; | ||
| const template = html `${() => 'RENDERED'}`; | ||
| let Test = class Test extends ApolloQuery { | ||
@@ -80,0 +80,0 @@ }; |
@@ -12,3 +12,3 @@ import type { | ||
| import { fixture, unsafeStatic, expect, html as fhtml, nextFrame } from '@open-wc/testing'; | ||
| import { fixture, unsafeStatic, expect, html as fhtml } from '@open-wc/testing'; | ||
@@ -91,3 +91,3 @@ import { ApolloQuery } from './apollo-query'; | ||
| const name = 'renders-by-default'; | ||
| const template = html<Test>`${x => 'RENDERED'}`; | ||
| const template = html<Test>`${() => 'RENDERED'}`; | ||
| @customElement({ name, template }) class Test extends ApolloQuery<unknown, unknown> { } | ||
@@ -94,0 +94,0 @@ const tag = unsafeStatic(name); |
@@ -14,2 +14,3 @@ import type { NetworkStatus } from '@apollo/client/core'; | ||
| export class ApolloQuery<Data, Variables> | ||
| // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin | ||
| extends ApolloQueryMixin(ApolloElement as Constructor<ApolloElement>)<Data, Variables> | ||
@@ -16,0 +17,0 @@ implements ApolloQueryInterface<Data, Variables> { |
@@ -20,5 +20,6 @@ /// <reference types="zen-observable" /> | ||
| onError?(error: import("@apollo/client/errors").ApolloError): void; | ||
| __variables: TVariables_1; | ||
| connectedCallback(): void; | ||
| disconnectedCallback(): void; | ||
| documentChanged(document: import("graphql").DocumentNode): void; | ||
| variablesChanged(variables: TVariables_1): void; | ||
| subscribe(params?: Partial<import("@apollo-elements/interfaces").SubscriptionDataOptions<TData_1, TVariables_1>>): void; | ||
@@ -38,5 +39,11 @@ cancel(): void; | ||
| client: import("@apollo/client/core").ApolloClient<import("@apollo/client/cache").NormalizedCacheObject>; | ||
| __document: import("graphql").DocumentNode; | ||
| __mo: MutationObserver; | ||
| _document: import("graphql").DocumentNode; | ||
| _documentSetByJS: boolean; | ||
| _variables: unknown; | ||
| _variablesSetByJS: boolean; | ||
| mo: MutationObserver; | ||
| document: import("graphql").DocumentNode; | ||
| onMutation(): void; | ||
| getDOMGraphQLDocument(): import("graphql").DocumentNode; | ||
| getDOMVariables(): unknown; | ||
| attributeChangedCallback?(name: string, oldValue: string, newValue: string): void; | ||
@@ -61,5 +68,5 @@ adoptedCallback?(): void; | ||
| click(): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener<K extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; | ||
| addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "input" | "progress" | "select" | "apollo-element-connected" | "apollo-element-disconnected" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener<K_1 extends "error" | "close" | "change" | "pause" | "abort" | "reset" | "resize" | "apollo-element-connected" | "apollo-element-disconnected" | "input" | "progress" | "select" | "blur" | "focus" | "scroll" | "waiting" | "toggle" | "load" | "fullscreenchange" | "fullscreenerror" | "animationcancel" | "animationend" | "animationiteration" | "animationstart" | "auxclick" | "cancel" | "canplay" | "canplaythrough" | "click" | "contextmenu" | "cuechange" | "dblclick" | "drag" | "dragend" | "dragenter" | "dragexit" | "dragleave" | "dragover" | "dragstart" | "drop" | "durationchange" | "emptied" | "ended" | "focusin" | "focusout" | "gotpointercapture" | "invalid" | "keydown" | "keypress" | "keyup" | "loadeddata" | "loadedmetadata" | "loadstart" | "lostpointercapture" | "mousedown" | "mouseenter" | "mouseleave" | "mousemove" | "mouseout" | "mouseover" | "mouseup" | "play" | "playing" | "pointercancel" | "pointerdown" | "pointerenter" | "pointerleave" | "pointermove" | "pointerout" | "pointerover" | "pointerup" | "ratechange" | "securitypolicyviolation" | "seeked" | "seeking" | "selectionchange" | "selectstart" | "stalled" | "submit" | "suspend" | "timeupdate" | "touchcancel" | "touchend" | "touchmove" | "touchstart" | "transitioncancel" | "transitionend" | "transitionrun" | "transitionstart" | "volumechange" | "wheel" | "copy" | "cut" | "paste">(type: K_1, listener: (this: HTMLElement, ev: HTMLElementEventMap[K_1]) => any, options?: boolean | EventListenerOptions): void; | ||
| removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; | ||
@@ -304,3 +311,4 @@ readonly assignedSlot: HTMLSlotElement; | ||
| }; | ||
| } & Constructor<ApolloElement<unknown>>; | ||
| documentType: string; | ||
| } & Constructor<ApolloElement<unknown, unknown>>; | ||
| /** | ||
@@ -307,0 +315,0 @@ * `ApolloSubscription` |
@@ -9,4 +9,6 @@ import { ApolloElement } from './apollo-element'; | ||
| */ | ||
| export class ApolloSubscription extends ApolloSubscriptionMixin(ApolloElement) { | ||
| export class ApolloSubscription | ||
| // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin | ||
| extends ApolloSubscriptionMixin(ApolloElement) { | ||
| } | ||
| //# sourceMappingURL=apollo-subscription.js.map |
@@ -14,3 +14,3 @@ import type { | ||
| import { ApolloSubscription } from './apollo-subscription'; | ||
| import { FASTElement, customElement, html } from '@microsoft/fast-element'; | ||
| import { FASTElement, customElement } from '@microsoft/fast-element'; | ||
| import { assertType, isApolloError } from '@apollo-elements/test-helpers'; | ||
@@ -17,0 +17,0 @@ |
@@ -12,4 +12,5 @@ import { ApolloElement } from './apollo-element'; | ||
| export class ApolloSubscription<TData, TVariables> | ||
| // have to cast because of the TypeScript bug which causes the error in apollo-element-mixin | ||
| extends ApolloSubscriptionMixin(ApolloElement as Constructor<ApolloElement>)<TData, TVariables> | ||
| implements ApolloSubscriptionInterface<TData, TVariables> { | ||
| } |
@@ -6,2 +6,13 @@ # Change Log | ||
| # [1.1.0](https://github.com/apollo-elements/apollo-elements/compare/@apollo-elements/fast@1.0.0...@apollo-elements/fast@1.1.0) (2020-10-25) | ||
| ### Features | ||
| * **mixins:** query the DOM for variables ([2df637e](https://github.com/apollo-elements/apollo-elements/commit/2df637e1babd35b5e0dc3af9d2de11f03e920938)) | ||
| # 1.0.0 (2020-10-21) | ||
@@ -8,0 +19,0 @@ |
| { | ||
| "name": "@apollo-elements/fast", | ||
| "version": "1.0.0", | ||
| "version": "1.1.0", | ||
| "description": "👩🚀🌛 FastElements for Apollo GraphQL 🚀👨🚀", | ||
| "main": "index.js", | ||
| "module": "index.js", | ||
| "type": "module", | ||
| "typings": "index.d.ts", | ||
| "type": "module", | ||
| "exports": [ | ||
| "./index.js", | ||
| "./apollo-element.js", | ||
| "./apollo-mutation.js", | ||
| "./apollo-query.js", | ||
| "./apollo-subscription.js" | ||
| ], | ||
| "scripts": { | ||
@@ -44,7 +51,7 @@ "prepublishOnly": "tsc -b .", | ||
| "dependencies": { | ||
| "@apollo-elements/mixins": "^3.0.5", | ||
| "@apollo-elements/mixins": "^3.1.0", | ||
| "@microsoft/fast-element": "^0.18.0", | ||
| "tslib": "^2.0.1" | ||
| }, | ||
| "gitHead": "3900a8266f673ddeb07f7a0f65398b8ee0774a7c" | ||
| "gitHead": "87b018f7d76920263a1b92ed90493806ccaf0344" | ||
| } |
@@ -15,7 +15,7 @@ # @apollo-elements/fast | ||
| - [👩🚀 Usage](#-usage) | ||
| - [🍹 Mixins](#-mixins) | ||
| - [📚 Other Libraries](#-other-libraries) | ||
| - [👷♂️ Maintainers](#-maintainers) | ||
| ## 🔧 Installation | ||
| Apollo elements' `fast` is distributed through `npm`, the node package manager. To install a copy of the latest version in your project's `node_modules` directory, [install npm on your system](https://www.npmjs.com/get-npm) then run the following command in your project's root directory: | ||
| Apollo elements' `fast` is distributed through `npm`, the node package manager. To install a copy of the latest version in your project's `node_modules` directory, [install npm on your computer](https://www.npmjs.com/get-npm) then run the following command in your project's root directory: | ||
@@ -27,26 +27,9 @@ ```bash | ||
| ## 👩🚀 Usage | ||
| You'll need to bundle the Apollo library with a tool like Rollup. See [instructions for bundling Apollo](https://github.com/apollo-elements/apollo-elements#-bundling) for advice on how to build a working Apollo client. | ||
| > See our [docs on setting up Apollo client](https://apolloelements.dev/pages/guides/getting-started/apollo-client.html) so your components can fetch their data. | ||
| We recommend assigning your `ApolloClient` instance to the `__APOLLO_CLIENT__` global variables. This not only automatically gives you [dev tools support](https://github.com/apollographql/apollo-client-devtools), but also lets all of your apollo elements connect to the client without needing to configure them. | ||
| First, let's define our component's [GraphQL query](https://graphql.org/learn/queries/). | ||
| ```js | ||
| import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'; | ||
| ```graphql | ||
| # src/components/hello-query/Hello.query.graphql | ||
| const cache = | ||
| new InMemoryCache(); | ||
| const link = | ||
| new HttpLink({ uri: '/graphql' }); | ||
| export const client = | ||
| new ApolloClient({ cache, link }); | ||
| window.__APOLLO_CLIENT__ = client; | ||
| ``` | ||
| Once that's been accomplished, import the base class and extend from it to define your component. | ||
| Use [@apollo-elements/rollup-plugin-graphql](https://npm.im/@apollo-elements/rollup-plugin-graphql) during bundling, and [@web/dev-server-rollup](https://npm.im/@web/dev-server-rollup) during development to allow importing graphql documents. | ||
| ```graphql | ||
| query HelloQuery { | ||
@@ -60,3 +43,14 @@ helloWorld { | ||
| > Read our [docs on working with GraphQL files during development](https://apolloelements.dev/pages/guides/getting-started/buildless-development.html) and [in production](https://apolloelements.dev/pages/guides/getting-started/building-for-production.html) for more info, and be sure to read about [generating TypeScript types from GraphQL](https://apolloelements.dev/pages/guides/getting-started/codegen.html) to enhance your developer experience and reduce bugs. | ||
| Next, we'll define our UI component. Import the base class and helpers, query, and types: | ||
| ```ts | ||
| // src/components/hello-query/hello-query.ts | ||
| import { ApolloQuery, html, customElement } from '@apollo-elements/fast'; | ||
| import HelloQuery from './Hello.query.graphql'; | ||
| import type { | ||
@@ -66,27 +60,25 @@ HelloQueryData as Data, | ||
| } from '../codegen/schema'; | ||
| ``` | ||
| import { ApolloQuery, html, customElement } from '@apollo-elements/fast'; | ||
| Then define your component's template. Make sure to set the `query` field, so your component starts fetching data automatically. | ||
| import HelloQuery from './Hello.query.graphql'; | ||
| > Read more about [working with Queries](https://apolloelements.dev/pages/using%20apollo/queries) | ||
| @customElement({ | ||
| name: 'hello-query', | ||
| template: html<HelloQueryElement>` | ||
| <what-spin-such-loader ?active="${x => x.loading}"></what-spin-such-loader> | ||
| ${x => ( | ||
| x.error ? html` | ||
| <h1>😢 Such Sad, Very Error! 😰</h1> | ||
| <pre> | ||
| <code>${error.message}</code> | ||
| </pre>` | ||
| : html` | ||
| <p> | ||
| ${x.data?.helloWorld?.greeting ?? 'Hello'}, | ||
| ${x.data?.helloWorld?.name ?? 'Friend'}! | ||
| </p>` | ||
| )} | ||
| ` | ||
| }) | ||
| export class HelloQueryElement | ||
| extends ApolloQuery<Data, Variables> { | ||
| ```ts | ||
| const template = html<HelloQueryElement>` | ||
| <what-spin-such-loader ?active="${x => x.loading}"></what-spin-such-loader> | ||
| ${x => ( | ||
| x.error ? html` | ||
| <h1>😢 Such Sad, Very Error! 😰</h1> | ||
| <pre><code>${error.message}</code></pre>` | ||
| : html` | ||
| <p> | ||
| ${x.data?.helloWorld?.greeting ?? 'Hello'}, | ||
| ${x.data?.helloWorld?.name ?? 'Friend'}! | ||
| </p>` | ||
| )} | ||
| `; | ||
| @customElement({ name: 'hello-query', template }) | ||
| export class HelloQueryElement extends ApolloQuery<Data, Variables> { | ||
| query = HelloQuery; | ||
@@ -96,4 +88,4 @@ } | ||
| ## 🍹 Mixins | ||
| You don't need to use `FASTElement` base class for your components if you use the [mixins](https://apolloelements.dev/modules/_apollo_elements_mixins.html). You just have to handle the state, reactivity, and rendering part on your own: e.g. for a query component, you'd implement yourself what happens after `data`, `error`, `loading`, or `networkStatus` change. | ||
| ## 📚 Other Libraries | ||
| Looking for other libraries? Want to use Apollo with vanilla `extends HTMLElement` components? Check out our [docs site](https://apolloelement.dev) | ||
@@ -100,0 +92,0 @@ ## 👷♂️ Maintainers |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.44%
194539
- Lines of code
- increased by2.08%
2551
Worsened metrics
- Number of lines in readme file
- decreased by-8.08%
91