| 1 | {"version":3,"file":"connect-mixin.js","sourceRoot":"","sources":["src/connect-mixin.ts"],"names":[],"mappings":"AAAA;;;;;;;;EAQE;AAsBF;;;;;;;;;;;;;;EAcE;AACF,MAAM,CAAC,MAAM,OAAO,GAClB,CAAI,KAAe,EAAE,EAAE,CACvB,CAAuC,WAAc,EAAE,EAAE,CACzD,KAAM,SAAQ,WAAW;IAGvB,iBAAiB;QACf,IAAI,KAAK,CAAC,iBAAiB,EAAE;YAC3B,KAAK,CAAC,iBAAiB,EAAE,CAAC;SAC3B;QAED,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;QACpF,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,CAAC;IACtC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QAEzB,IAAI,KAAK,CAAC,oBAAoB,EAAE;YAC9B,KAAK,CAAC,oBAAoB,EAAE,CAAC;SAC9B;IACH,CAAC;IAED;;OAEG;IACH,YAAY,CAAC,MAAS,IAAG,CAAC;CAC3B,CAAC","sourcesContent":["/**\n@license\nCopyright (c) 2018 The Polymer Project Authors. All rights reserved.\nThis code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt\nThe complete set of authors may be found at http://polymer.github.io/AUTHORS.txt\nThe complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt\nCode distributed by Google as part of the polymer project is also\nsubject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt\n*/\n\nimport { Store, Unsubscribe } from 'redux';\n\ntype Constructor<T> = new(...args: any[]) => T;\n\n/**\n By using this `CustomElement` interface instead of `HTMLElement`, we avoid\n having the generated typings include most DOM API already provided by\n TypeScript. This is particularly useful since different versions of\n TypeScript may have different DOM API typings (e.g. TS 3.0.3 and TS 3.1.1).\n The required `isConnected` property is included to avoid the following\n TypeScript error:\n\n Type 'HTMLElement' has no properties in common with type 'CustomElement'.\n*/\ninterface CustomElement {\n connectedCallback?(): void;\n disconnectedCallback?(): void;\n readonly isConnected: boolean;\n}\n\n/**\n This is a JavaScript mixin that you can use to connect a Custom Element base\n class to a Redux store. The `stateChanged(state)` method will be called when\n the state is updated.\n\n Example:\n\n import { connect } from 'pwa-helpers/connect-mixin.js';\n\n class MyElement extends connect(store)(HTMLElement) {\n stateChanged(state) {\n this.textContent = state.data.count.toString();\n }\n }\n*/\nexport const connect =\n <S>(store: Store<S>) =>\n <T extends Constructor<CustomElement>>(baseElement: T) =>\n class extends baseElement {\n _storeUnsubscribe!: Unsubscribe;\n\n connectedCallback() {\n if (super.connectedCallback) {\n super.connectedCallback();\n }\n\n this._storeUnsubscribe = store.subscribe(() => this.stateChanged(store.getState()));\n this.stateChanged(store.getState());\n }\n\n disconnectedCallback() {\n this._storeUnsubscribe();\n\n if (super.disconnectedCallback) {\n super.disconnectedCallback();\n }\n }\n\n /**\n * The `stateChanged(state)` method will be called when the state is updated.\n */\n stateChanged(_state: S) {}\n };\n"]} |