fit-html - npm Package Compare versions

Comparing version 0.5.4 to 0.6.0

.tmp/connect.d.ts

@@ -1,4 +0,4 @@
-import { render, TemplateResult } from 'lit-html';
 import { Dispatch, Store } from 'redux';
 import { ClassConstructor } from '.';
+import { FitDecorated, TemplateFunction } from './fit-element';
 /**
@@ -20,58 +20,24 @@ * The function that extracts required data out of the state and the passed props.
 /**
- * A lit-html rendering function.
+ * An element connected to the redux store.
  */
-export declare type RenderFunction = typeof render;
-/**
- * A 💪 web component.
- *
- * @template {S} The type of the redux state.
- * @template {P} The type of the view properties.
- * @template {OP} The type of the own properties passed to the element from the outside.
- */
-export declare class FitElement<S, P, OP> extends HTMLElement {
-    constructor(...args: any[]);
-    connectedCallback(): any;
-    disconnectedCallback(): any;
-    /**
-     * Enqueues the component for rendering at microtask timing.
-     *
-     * Multiple calls to this method within a microtask will be ignored.
-     */
-    enqueueRender(): any;
-    /**
-     * Obtains the redux store.
-     *
-     * The dom is traversed upwards until either another 💪-html element or
-     * the redux store provider element is found. As such, it may not be invoked
-     * until the component has been attached to the document (respectively only
-     * during / after connectedCallback has fired).
-     *
-     * @returns {Store<S>} The redux store.
-     */
+export interface ConnectElement<S> {
     getStore(): Store<S>;
-    /**
-     * Renders the elements content into its shadow root using props from
-     * {@ref getProps}.
-     *
-     * You probably want to use {@ref enqueueRender} instead.
-     */
-    render(): any;
-    /**
-     * Callback that computes the view properties from the redux store
-     * and the props passed to the component.
-     *
-     * @param {OP} ownProps Props passed to the component via attributes.
-     * @returns {P} Generated view properties.
-     */
-    getProps(ownProps?: OP): P;
 }
+export declare type ConnectedElement<S, SP, DP, OP, B extends ClassConstructor<HTMLElement>, T extends FitDecorated<B, OP, SP & DP>> = T & ClassConstructor<ConnectElement<S>>;
 /**
- * Creates a 💪 web component connected to the redux store.
+ * The type of decorator wrapping a templating function.
+ */
+export declare type TemplateDecorator<S, SP, DP, OP> = (fn: TemplateFunction<SP & DP>) => ConnectedElement<S, SP, DP, OP, typeof HTMLElement, FitDecorated<typeof HTMLElement, OP, SP & DP>>;
+/**
+ * The type of decorator wrapping a connected element.
+ */
+export declare type ElementDecorator<S, SP, DP, OP> = <B extends ClassConstructor<HTMLElement>, T extends FitDecorated<B, OP, SP & DP>>(base: T) => ConnectedElement<S, SP, DP, OP, B, T>;
+/**
+ * Creates a decorator to create 💪 web components using the given template function / base class.
  *
- * @param {MapStateToPropsFn<S, SP, OP>} mapStateToProps The MapStateToProps function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {MapDispatchToPropsFn<S, DP, OP>} mapDispatchToProps The MapStateToDispatch function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {(props: (SP & DP)) => TemplateResult} templateFn The 🔥-html templating function.
- * @returns {FitElement<S, SP & DP, OP>} A newly created 💪-element class.
+ * @param {MapStateToPropsFn<S, SP, OP>} mapStateToProps The MapStateToProps function or factory.
+ * @param {MapDispatchToPropsFn<S, DP, OP>} mapDispatchToProps The MapStateToDispatch function.
+ * @returns The decorator function.
  * @template S, SP, DP, OP
  */
-export default function connect<S, SP, DP, OP = {}>(mapStateToProps: MapStateToPropsFactory<S, SP, OP> | MapStateToPropsFn<S, SP, OP>, mapDispatchToProps: MapDispatchToPropsFn<S, DP, OP> | DP, templateFn: (props: SP & DP) => TemplateResult): ClassConstructor<FitElement<S, SP & DP, OP>>;
+export default function connect<S, SP, DP, OP = {}>(mapStateToProps: MapStateToPropsFactory<S, SP, OP> | MapStateToPropsFn<S, SP, OP>, mapDispatchToProps: MapDispatchToPropsFn<S, DP, OP> | DP): TemplateDecorator<S, SP, DP, OP> & ElementDecorator<S, SP, DP, OP>;

.tmp/index.d.ts

 export { default as connect } from './connect';
-export { default as createProvider } from './provider';
-export { default as withProps } from './with-props';
+export { default as withFit } from './fit-element';
+export { default as withStore } from './store';
 export * from './connect';
-export * from './provider';
+export * from './fit-element';
 /**
@@ -7,0 +7,0 @@ * A class constructor function.

.tmp/index.min.js

@@ -1,1 +0,1 @@
-(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports):'function'==typeof define&&define.amd?define(['exports'],b):b(a.FitHtml={})})(this,function(a){'use strict';function b(a){let b=m.get(a.type);void 0===b&&(b=new Map,m.set(a.type,b));let c=b.get(a.strings);return void 0===c&&(c=new s(a,a.getTemplateElement()),b.set(a.strings,c)),c}function c(a,c,d=b){const e=d(a);let f=c.__templateInstance;if(void 0!==f&&f.template===e&&f._partCallback===a.partCallback)return void f.update(a.values);f=new t(e,a.partCallback,d),c.__templateInstance=f;const g=f._clone();f.update(a.values),u(c,c.firstChild),c.appendChild(g)}function d(a,b,d){return c(a,b,v(d))}function e(a){return a&&a.__esModule&&Object.prototype.hasOwnProperty.call(a,'default')?a['default']:a}function f(a,b){return b={exports:{}},a(b,b.exports),b.exports}function g(a,b){return function(){return b(a.apply(void 0,arguments))}}function h(a,b){if('function'==typeof a)return g(a,b);if('object'!=typeof a||null===a)throw new Error('bindActionCreators expected an object or a function, instead received '+(null===a?'null':typeof a)+'. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?');for(var c=Object.keys(a),d={},e=0;e<c.length;e++){var f=c[e],h=a[f];'function'==typeof h&&(d[f]=g(h,b))}return d}function i(a){return 0===a.length}function j(a){return'function'==typeof a}function k(c,a){if(c===a)return!0;if(null==c||null==a)return!1;const b=Object.keys(c),d=Object.keys(a);if(b.length!==d.length)return!1;for(const d of b)if(c[d]!==a[d])return!1;return!0}function l(a,b){return class extends a{getStore(){return b}}}const m=new Map,n=`{{lit-${(Math.random()+'').slice(2)}}}`,o=`<!--${n}-->`,p=new RegExp(`${n}|${o}`),q=/[ \x09\x0a\x0c\x0d]([^\0-\x1F\x7F-\x9F \x09\x0a\x0c\x0d"'>=/]+)[ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*)$/;class r{constructor(a,b,c,d,e){this.type=a,this.index=b,this.name=c,this.rawName=d,this.strings=e}}class s{constructor(a,b){this.parts=[],this.element=b;const c=this.element.content,d=document.createTreeWalker(c,133,null,!1);let e=-1,f=0;const g=[];for(let c,h;d.nextNode();){e++,c=h;const b=h=d.currentNode;if(1===b.nodeType){if(!b.hasAttributes())continue;const c=b.attributes;let d=0;for(let a=0;a<c.length;a++)0<=c[a].value.indexOf(n)&&d++;for(;0<d--;){const d=a.strings[f],g=q.exec(d)[1],h=c.getNamedItem(g),i=h.value.split(p);this.parts.push(new r('attribute',e,h.name,g,i)),b.removeAttribute(h.name),f+=i.length-1}}else if(3===b.nodeType){const a=b.nodeValue;if(0>a.indexOf(n))continue;const c=b.parentNode,d=a.split(p),g=d.length-1;f+=g,b.textContent=d[g];for(let a=0;a<g;a++)c.insertBefore(document.createTextNode(d[a]),b),this.parts.push(new r('node',e++))}else if(8===b.nodeType&&b.nodeValue===n){const a=b.parentNode,d=b.previousSibling;null===d||d!==c||d.nodeType!==Node.TEXT_NODE?a.insertBefore(document.createTextNode(''),b):e--,this.parts.push(new r('node',e++)),g.push(b),null===b.nextSibling?a.insertBefore(document.createTextNode(''),b):e--,h=c,f++}}for(const c of g)c.parentNode.removeChild(c)}}class t{constructor(a,b,c){this._parts=[],this.template=a,this._partCallback=b,this._getTemplate=c}update(a){let b=0;for(const c of this._parts)void 0===c.size?(c.setValue(a[b]),b++):(c.setValue(a,b),b+=c.size)}_clone(){const a=document.importNode(this.template.element.content,!0),b=this.template.parts;if(0<b.length){const c=document.createTreeWalker(a,133,null,!1);let d=-1;for(let a=0;a<b.length;a++){const e=b[a];for(;d<e.index;)d++,c.nextNode();this._parts.push(this._partCallback(this,e,c.currentNode))}}return a}}const u=(a,b,c=null)=>{for(let d=b;d!==c;){const b=d.nextSibling;a.removeChild(d),d=b}},v=(a)=>(b)=>{const c=`${b.type}--${a}`;let d=m.get(c);d===void 0&&(d=new Map,m.set(c,d));let e=d.get(b.strings);if(e===void 0){const c=b.getTemplateElement();'object'==typeof window.ShadyCSS&&window.ShadyCSS.prepareTemplate(c,a),e=new s(b,c),d.set(b.strings,e)}return e};var w='object'==typeof global&&global&&global.Object===Object&&global,x='object'==typeof self&&self&&self.Object===Object&&self,y=w||x||Function('return this')(),z=y.Symbol,A=z?z.toStringTag:void 0,B=z?z.toStringTag:void 0,C=Function.prototype,D=C.toString,E=D.call(Object),F='undefined'==typeof window?'undefined'==typeof global?'undefined'==typeof self?{}:self:global:window,G=f(function(a,b){Object.defineProperty(b,'__esModule',{value:!0}),b['default']=function(a){var b,c=a.Symbol;return'function'==typeof c?c.observable?b=c.observable:(b=c('observable'),c.observable=b):b='@@observable',b}});e(G);var H=f(function(a,b){Object.defineProperty(b,'__esModule',{value:!0});var c,d=function(a){return a&&a.__esModule?a:{default:a}}(G);c='undefined'==typeof self?'undefined'==typeof window?'undefined'==typeof F?a:F:window:self;var e=(0,d['default'])(c);b['default']=e});e(H);a.connect=function(a,b,e){return class extends HTMLElement{constructor(){super(),this._isConnected=!1,this._nodeName=this.nodeName.toLowerCase(),this._previousProps=null,this._renderEnqueued=!1,this.attachShadow({mode:'open'}),this._preparedMapStateToProps=i(a)?a():a}connectedCallback(){this._isConnected=!0;const a=this.getStore();this._preparedDispatch=j(b)?b:h(b,a.dispatch),this._unsubscribe=a.subscribe(()=>this.enqueueRender()),window.ShadyCSS&&window.ShadyCSS.styleElement(this),this.enqueueRender()}disconnectedCallback(){this._isConnected=!1,this._unsubscribe(),this._store=void 0}enqueueRender(){this._renderEnqueued||(this._renderEnqueued=!0,Promise.resolve().then(()=>{this._renderEnqueued=!1,this._isConnected&&this.render()}))}getStore(){if(this._store)return this._store;for(let a=this;a=a.parentNode||a.host;)if(j(a.getStore))return this._store=a.getStore(),this._store;throw new Error('\uD83D\uDCAA-html: Missing redux store.\nSeems like you\'re using fit-html without a redux store. Please use a provider component to provide one to the element tree.')}getProps(a={}){const b=this.getStore();return Object.assign({},this._preparedMapStateToProps(b.getState(),a),j(this._preparedDispatch)?this._preparedDispatch(b.dispatch,a):this._preparedDispatch)}render(){if(this._isConnected){const a=this.getProps();k(a,this._previousProps)||(this._previousProps=a,window.ShadyCSS?d(e(a),this.shadowRoot,this._nodeName):c(e(a),this.shadowRoot))}}}},a.createProvider=(a)=>l(HTMLElement,a),a.withProps=function(a,b){const c=Object.keys(b);return class extends a{constructor(...a){super(a),this._ownProps={};const b={};for(const d of c)b[d]={configurable:!0,enumerable:!0,get:()=>this._ownProps[d],set:(a)=>{this._ownProps[d]===a||(this._ownProps[d]=a,this.enqueueRender())}};Object.defineProperties(this,b)}static get observedAttributes(){return c}attributeChangedCallback(a,c,d){if(a in b&&c!==d){const c=b[a];this[a]=c?c===Boolean?null!==d:c(d):d}}getProps(){return super.getProps(this._ownProps)}}},a.withStore=l,Object.defineProperty(a,'__esModule',{value:!0})});
+(function(a,b){'object'==typeof exports&&'undefined'!=typeof module?b(exports):'function'==typeof define&&define.amd?define(['exports'],b):b(a.FitHtml={})})(this,function(a){'use strict';function b(a,b){return function(){return b(a.apply(void 0,arguments))}}function c(a,c){if('function'==typeof a)return b(a,c);if('object'!=typeof a||null===a)throw new Error('bindActionCreators expected an object or a function, instead received '+(null===a?'null':typeof a)+'. Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?');for(var d=Object.keys(a),e={},f=0;f<d.length;f++){var g=d[f],h=a[g];'function'==typeof h&&(e[g]=b(h,c))}return e}function d(a){let b=v.get(a.type);void 0===b&&(b=new Map,v.set(a.type,b));let c=b.get(a.strings);return void 0===c&&(c=new B(a,a.getTemplateElement()),b.set(a.strings,c)),c}function e(a,b,c=d){const e=c(a);let f=b.__templateInstance;if(void 0!==f&&f.template===e&&f._partCallback===a.partCallback)return void f.update(a.values);f=new C(e,a.partCallback,c),b.__templateInstance=f;const g=f._clone();f.update(a.values),D(b,b.firstChild),b.appendChild(g)}function f(a,b,c){return e(a,b,E(c))}function g(a){return'function'==typeof a}function h(c,a){if(c==a)return!0;if(null==c||null==a)return!1;const b=Object.keys(c),d=Object.keys(a);if(b.length!==d.length)return!1;for(const d of b)if(c[d]!==a[d])return!1;return!0}function i(a,b){return(c)=>{const d=class extends c{constructor(...a){super(...a),this._isConnected=!1,this._nodeName=this.nodeName.toLowerCase(),this._renderEnqueued=!1;for(const b of Object.keys(d.properties))Object.defineProperty(this,b,{configurable:!0,enumerable:!0,get:()=>this.ownProps?this.ownProps[b]:void 0,set:(a)=>{this[b]===a||(this.ownProps=Object.assign({},this.ownProps,{[b]:a}))}});this.attachShadow({mode:'open'})}static get observedAttributes(){const a=Object.keys(this.properties);return(c.observedAttributes||[]).filter((b)=>-1===a.indexOf(b)).concat(a)}static get properties(){return b||{}}get ownProps(){return this.renderProps}set ownProps(a){this.renderProps=a}get renderProps(){return this._renderProps}set renderProps(a){h(a,this._renderProps)||(this._renderProps=a,this.enqueueRender())}get template(){return a}attributeChangedCallback(a,b,c){if(g(super.attributeChangedCallback)&&super.attributeChangedCallback(a,b,c),a in d.properties&&b!==c){const b=d.properties[a];this[a]=b?b===Boolean?null!=c:b(c):c}}connectedCallback(){g(super.connectedCallback)&&super.connectedCallback(),window.ShadyCSS&&window.ShadyCSS.styleElement(this),this._isConnected=!0}disconnectedCallback(){g(super.disconnectedCallback)&&super.disconnectedCallback(),this._isConnected=!1}enqueueRender(){this._renderEnqueued||(this._renderEnqueued=!0,Promise.resolve().then(()=>{this._renderEnqueued=!1,this._isConnected&&this.render()}))}render(){f(this.template(this.renderProps),this.shadowRoot,this._nodeName)}};return d}}function j(a){return 0===a.length}function k(a){return!(a.prototype instanceof HTMLElement)}var l,m='object'==typeof global&&global&&global.Object===Object&&global,n='object'==typeof self&&self&&self.Object===Object&&self,o=m||n||Function('return this')(),p=o.Symbol,q=p?p.toStringTag:void 0,r=p?p.toStringTag:void 0,s=Function.prototype,t=s.toString,u=t.call(Object);l='undefined'==typeof self?'undefined'==typeof window?'undefined'==typeof global?'undefined'==typeof module?Function('return this')():module:global:window:self;(function(a){var b,c=a.Symbol;return'function'==typeof c?c.observable?b=c.observable:(b=c('observable'),c.observable=b):b='@@observable',b})(l);const v=new Map,w=`{{lit-${(Math.random()+'').slice(2)}}}`,x=`<!--${w}-->`,y=new RegExp(`${w}|${x}`),z=/[ \x09\x0a\x0c\x0d]([^\0-\x1F\x7F-\x9F \x09\x0a\x0c\x0d"'>=/]+)[ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*)$/;class A{constructor(a,b,c,d,e){this.type=a,this.index=b,this.name=c,this.rawName=d,this.strings=e}}class B{constructor(a,b){this.parts=[],this.element=b;const c=this.element.content,d=document.createTreeWalker(c,133,null,!1);let e=-1,f=0;const g=[];for(let c,h;d.nextNode();){e++,c=h;const b=h=d.currentNode;if(1===b.nodeType){if(!b.hasAttributes())continue;const c=b.attributes;let d=0;for(let a=0;a<c.length;a++)0<=c[a].value.indexOf(w)&&d++;for(;0<d--;){const d=a.strings[f],g=z.exec(d)[1],h=c.getNamedItem(g),i=h.value.split(y);this.parts.push(new A('attribute',e,h.name,g,i)),b.removeAttribute(h.name),f+=i.length-1}}else if(3===b.nodeType){const a=b.nodeValue;if(0>a.indexOf(w))continue;const c=b.parentNode,d=a.split(y),g=d.length-1;f+=g,b.textContent=d[g];for(let a=0;a<g;a++)c.insertBefore(document.createTextNode(d[a]),b),this.parts.push(new A('node',e++))}else if(8===b.nodeType&&b.nodeValue===w){const a=b.parentNode,d=b.previousSibling;null===d||d!==c||d.nodeType!==Node.TEXT_NODE?a.insertBefore(document.createTextNode(''),b):e--,this.parts.push(new A('node',e++)),g.push(b),null===b.nextSibling?a.insertBefore(document.createTextNode(''),b):e--,h=c,f++}}for(const c of g)c.parentNode.removeChild(c)}}class C{constructor(a,b,c){this._parts=[],this.template=a,this._partCallback=b,this._getTemplate=c}update(a){let b=0;for(const c of this._parts)void 0===c.size?(c.setValue(a[b]),b++):(c.setValue(a,b),b+=c.size)}_clone(){const a=document.importNode(this.template.element.content,!0),b=this.template.parts;if(0<b.length){const c=document.createTreeWalker(a,133,null,!1);let d=-1;for(let a=0;a<b.length;a++){const e=b[a];for(;d<e.index;)d++,c.nextNode();this._parts.push(this._partCallback(this,e,c.currentNode))}}return a}}const D=(a,b,c=null)=>{for(let d=b;d!==c;){const b=d.nextSibling;a.removeChild(d),d=b}},E=(a)=>(b)=>{const c=`${b.type}--${a}`;let d=v.get(c);d===void 0&&(d=new Map,v.set(c,d));let e=d.get(b.strings);if(e===void 0){const c=b.getTemplateElement();'object'==typeof window.ShadyCSS&&window.ShadyCSS.prepareTemplate(c,a),e=new B(b,c),d.set(b.strings,e)}return e};a.connect=function(a,b){return(d)=>{const e=k(d)?i(d)(HTMLElement):d;return class extends e{constructor(...b){super(...b),this._propsEnqueued=!1,this._preparedMapStateToProps=j(a)?a():a}get ownProps(){return this._ownProps}set ownProps(a){this._ownProps=a,this._computeProps()}connectedCallback(){super.connectedCallback();const a=this.getStore();this._preparedDispatch=g(b)?b:c(b,a.dispatch),this._unsubscribe=a.subscribe(()=>this._computeProps()),this._computeProps()}disconnectedCallback(){super.disconnectedCallback(),this._unsubscribe(),this._store=void 0}getStore(){if(this._store)return this._store;if(g(super.getStore))return super.getStore();for(let a=this;a=a.parentNode||a.host;)if(g(a.getStore))return this._store=a.getStore(),this._store;throw new Error('\uD83D\uDCAA-html: Missing redux store.\nSeems like you\'re using fit-html without a redux store. Please use a provider component to provide one to the element tree.')}_computeProps(){this._propsEnqueued||(this._propsEnqueued=!0,Promise.resolve().then(()=>{this._propsEnqueued=!1;const a=this.getStore(),b=this._preparedMapStateToProps(a.getState(),this.ownProps),c=g(this._preparedDispatch)?this._preparedDispatch(a.dispatch,this.ownProps):this._preparedDispatch;this.renderProps=Object.assign({},b,c)}))}}}},a.withFit=i,a.withStore=function(a){return(b)=>class extends b{getStore(){return a}}},Object.defineProperty(a,'__esModule',{value:!0})});

dist/connect.d.ts

@@ -1,4 +0,4 @@
-import { render, TemplateResult } from 'lit-html';
 import { Dispatch, Store } from 'redux';
 import { ClassConstructor } from '.';
+import { FitDecorated, TemplateFunction } from './fit-element';
 /**
@@ -20,58 +20,24 @@ * The function that extracts required data out of the state and the passed props.
 /**
- * A lit-html rendering function.
+ * An element connected to the redux store.
  */
-export declare type RenderFunction = typeof render;
-/**
- * A 💪 web component.
- *
- * @template {S} The type of the redux state.
- * @template {P} The type of the view properties.
- * @template {OP} The type of the own properties passed to the element from the outside.
- */
-export declare class FitElement<S, P, OP> extends HTMLElement {
-    constructor(...args: any[]);
-    connectedCallback(): any;
-    disconnectedCallback(): any;
-    /**
-     * Enqueues the component for rendering at microtask timing.
-     *
-     * Multiple calls to this method within a microtask will be ignored.
-     */
-    enqueueRender(): any;
-    /**
-     * Obtains the redux store.
-     *
-     * The dom is traversed upwards until either another 💪-html element or
-     * the redux store provider element is found. As such, it may not be invoked
-     * until the component has been attached to the document (respectively only
-     * during / after connectedCallback has fired).
-     *
-     * @returns {Store<S>} The redux store.
-     */
+export interface ConnectElement<S> {
     getStore(): Store<S>;
-    /**
-     * Renders the elements content into its shadow root using props from
-     * {@ref getProps}.
-     *
-     * You probably want to use {@ref enqueueRender} instead.
-     */
-    render(): any;
-    /**
-     * Callback that computes the view properties from the redux store
-     * and the props passed to the component.
-     *
-     * @param {OP} ownProps Props passed to the component via attributes.
-     * @returns {P} Generated view properties.
-     */
-    getProps(ownProps?: OP): P;
 }
+export declare type ConnectedElement<S, SP, DP, OP, B extends ClassConstructor<HTMLElement>, T extends FitDecorated<B, OP, SP & DP>> = T & ClassConstructor<ConnectElement<S>>;
 /**
- * Creates a 💪 web component connected to the redux store.
+ * The type of decorator wrapping a templating function.
+ */
+export declare type TemplateDecorator<S, SP, DP, OP> = (fn: TemplateFunction<SP & DP>) => ConnectedElement<S, SP, DP, OP, typeof HTMLElement, FitDecorated<typeof HTMLElement, OP, SP & DP>>;
+/**
+ * The type of decorator wrapping a connected element.
+ */
+export declare type ElementDecorator<S, SP, DP, OP> = <B extends ClassConstructor<HTMLElement>, T extends FitDecorated<B, OP, SP & DP>>(base: T) => ConnectedElement<S, SP, DP, OP, B, T>;
+/**
+ * Creates a decorator to create 💪 web components using the given template function / base class.
  *
- * @param {MapStateToPropsFn<S, SP, OP>} mapStateToProps The MapStateToProps function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {MapDispatchToPropsFn<S, DP, OP>} mapDispatchToProps The MapStateToDispatch function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {(props: (SP & DP)) => TemplateResult} templateFn The 🔥-html templating function.
- * @returns {FitElement<S, SP & DP, OP>} A newly created 💪-element class.
+ * @param {MapStateToPropsFn<S, SP, OP>} mapStateToProps The MapStateToProps function or factory.
+ * @param {MapDispatchToPropsFn<S, DP, OP>} mapDispatchToProps The MapStateToDispatch function.
+ * @returns The decorator function.
  * @template S, SP, DP, OP
  */
-export default function connect<S, SP, DP, OP = {}>(mapStateToProps: MapStateToPropsFactory<S, SP, OP> | MapStateToPropsFn<S, SP, OP>, mapDispatchToProps: MapDispatchToPropsFn<S, DP, OP> | DP, templateFn: (props: SP & DP) => TemplateResult): ClassConstructor<FitElement<S, SP & DP, OP>>;
+export default function connect<S, SP, DP, OP = {}>(mapStateToProps: MapStateToPropsFactory<S, SP, OP> | MapStateToPropsFn<S, SP, OP>, mapDispatchToProps: MapDispatchToPropsFn<S, DP, OP> | DP): TemplateDecorator<S, SP, DP, OP> & ElementDecorator<S, SP, DP, OP>;

dist/connect.js

@@ -1,116 +0,78 @@
-import { render } from 'lit-html';
-import { render as shadyRender } from 'lit-html/lib/shady-render';
 import { bindActionCreators } from 'redux';
-/* tslint:disable:max-line-length */
-/**
- * Creates a 💪 web component connected to the redux store.
- *
- * @param {MapStateToPropsFn<S, SP, OP>} mapStateToProps The MapStateToProps function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {MapDispatchToPropsFn<S, DP, OP>} mapDispatchToProps The MapStateToDispatch function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {(props: (SP & DP)) => TemplateResult} templateFn The 🔥-html templating function.
- * @returns {FitElement<S, SP & DP, OP>} A newly created 💪-element class.
- * @template S, SP, DP, OP
- */
-export default function connect(mapStateToProps, mapDispatchToProps, templateFn) {
-    return class extends HTMLElement {
-        constructor() {
-            super();
-            this._isConnected = false;
-            this._nodeName = this.nodeName.toLowerCase();
-            this._previousProps = null;
-            this._renderEnqueued = false;
-            this.attachShadow({ mode: 'open' });
-            this._preparedMapStateToProps = isFactory(mapStateToProps)
-                ? mapStateToProps()
-                : mapStateToProps;
-        }
-        connectedCallback() {
-            this._isConnected = true;
-            const store = this.getStore();
-            this._preparedDispatch = isFunction(mapDispatchToProps)
-                ? mapDispatchToProps
-                : bindActionCreators(mapDispatchToProps, store.dispatch);
-            this._unsubscribe = store.subscribe(() => this.enqueueRender());
-            if (window.ShadyCSS) {
-                window.ShadyCSS.styleElement(this);
+import withFit from './fit-element';
+import { isFunction } from './util';
+// We declare the exported typings separately for now (above).
+export default function connect(mapStateToProps, mapDispatchToProps) {
+    return (b) => {
+        const base = isTemplateFunction(b) ? withFit(b)(HTMLElement) : b;
+        return class extends base {
+            constructor(...args) {
+                super(...args);
+                this._propsEnqueued = false;
+                this._preparedMapStateToProps = isFactory(mapStateToProps)
+                    ? mapStateToProps()
+                    : mapStateToProps;
             }
-            this.enqueueRender();
-        }
-        disconnectedCallback() {
-            this._isConnected = false;
-            this._unsubscribe();
-            this._store = undefined;
-        }
-        enqueueRender() {
-            if (this._renderEnqueued) {
-                return;
+            get ownProps() {
+                return this._ownProps;
             }
-            this._renderEnqueued = true;
-            Promise.resolve().then(() => {
-                this._renderEnqueued = false;
-                if (this._isConnected) {
-                    this.render();
-                }
-            });
-        }
-        getStore() {
-            if (this._store) {
-                return this._store;
+            set ownProps(props) {
+                this._ownProps = props;
+                this._computeProps();
             }
-            let node = this;
-            while (node = node.parentNode || node.host) {
-                if (isFunction(node.getStore)) {
-                    this._store = node.getStore();
+            connectedCallback() {
+                super.connectedCallback();
+                const store = this.getStore();
+                this._preparedDispatch = isFunction(mapDispatchToProps)
+                    ? mapDispatchToProps
+                    : bindActionCreators(mapDispatchToProps, store.dispatch);
+                this._unsubscribe = store.subscribe(() => this._computeProps());
+                this._computeProps();
+            }
+            disconnectedCallback() {
+                super.disconnectedCallback();
+                this._unsubscribe();
+                this._store = undefined;
+            }
+            getStore() {
+                if (this._store) {
                     return this._store;
                 }
+                if (isFunction(super.getStore)) {
+                    return super.getStore();
+                }
+                let node = this;
+                while (node = node.parentNode || node.host) {
+                    if (isFunction(node.getStore)) {
+                        this._store = node.getStore();
+                        return this._store;
+                    }
+                }
+                throw new Error("💪-html: Missing redux store.\nSeems like you're using fit-html without a redux store. Please use a provider component to provide one to the element tree.");
             }
-            throw new Error("💪-html: Missing redux store.\nSeems like you're using fit-html without a redux store. Please use a provider component to provide one to the element tree.");
-        }
-        getProps(ownProps = {}) {
-            const store = this.getStore();
-            return Object.assign({}, this._preparedMapStateToProps(store.getState(), ownProps), isFunction(this._preparedDispatch)
-                ? this._preparedDispatch(store.dispatch, ownProps)
-                : this._preparedDispatch);
-        }
-        render() {
-            if (!this._isConnected) {
-                return;
+            _computeProps() {
+                if (this._propsEnqueued) {
+                    return;
+                }
+                this._propsEnqueued = true;
+                Promise.resolve().then(() => {
+                    this._propsEnqueued = false;
+                    const store = this.getStore();
+                    const props = this._preparedMapStateToProps(store.getState(), this.ownProps);
+                    const dispatch = isFunction(this._preparedDispatch)
+                        ? this._preparedDispatch(store.dispatch, this.ownProps)
+                        : this._preparedDispatch;
+                    this.renderProps = Object.assign({}, props, dispatch);
+                });
             }
-            const props = this.getProps();
-            if (shallowEqual(props, this._previousProps)) {
-                return;
-            }
-            this._previousProps = props;
-            window.ShadyCSS
-                ? shadyRender(templateFn(props), this.shadowRoot, this._nodeName)
-                : render(templateFn(props), this.shadowRoot);
-        }
+        };
     };
 }
+/* tslint:enable */
 function isFactory(fn) {
     return fn.length === 0;
 }
-// tslint:disable-next-line:ban-types
-function isFunction(f) {
-    return typeof f === 'function';
+function isTemplateFunction(base) {
+    return !(base.prototype instanceof HTMLElement);
 }
-function shallowEqual(a, b) {
-    if (a === b) {
-        return true;
-    }
-    if (a == null || b == null) {
-        return false;
-    }
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-    if (aKeys.length !== bKeys.length) {
-        return false;
-    }
-    for (const key of aKeys) {
-        if (a[key] !== b[key]) {
-            return false;
-        }
-    }
-    return true;
-}
 //# sourceMappingURL=connect.js.map

dist/index.d.ts

 export { default as connect } from './connect';
-export { default as createProvider } from './provider';
-export { default as withProps } from './with-props';
+export { default as withFit } from './fit-element';
+export { default as withStore } from './store';
 export * from './connect';
-export * from './provider';
+export * from './fit-element';
 /**
@@ -7,0 +7,0 @@ * A class constructor function.

dist/index.js

 export { default as connect } from './connect';
-export { default as createProvider } from './provider';
-export { default as withProps } from './with-props';
+export { default as withFit } from './fit-element';
+export { default as withStore } from './store';
 export * from './connect';
-export * from './provider';
+export * from './fit-element';
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "fit-html",
-  "version": "0.5.4",
-  "description": "5KB functional Web Components without bloat",
+  "version": "0.6.0",
+  "description": "3KB functional Web Components without bloat",
   "main": "dist/index.js",
@@ -18,4 +18,3 @@ "types": "dist/index.d.ts",
   "devDependencies": {
-    "@types/lodash-es": "^4.17.0",
-    "bundlesize": "^0.16.0",
+    "bundlesize": "^0.17.0",
     "rollup": "^0.57.0",
@@ -26,7 +25,7 @@ "rollup-plugin-babel-minify": "^4.0.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rollup-plugin-typescript2": "^0.12.0",
+    "rollup-plugin-typescript2": "^0.13.0",
     "tslint": "^5.9.1",
-    "typescript": "^2.5.3"
+    "typescript": "^2.8.1"
   },
-  "dependencies": {
+  "peerDependencies": {
     "lit-html": "^0.9.0",
@@ -33,0 +32,0 @@ "redux": "^3.7.2"

README.md

 # 💪 fit-html
 
+[![npm](https://img.shields.io/npm/v/fit-html.svg)](https://www.npmjs.com/package/fit-html)
 [![Travis](https://img.shields.io/travis/Festify/fit-html.svg)](https://travis-ci.org/Festify/fit-html)
@@ -57,5 +58,4 @@ [![Bundle Size](http://img.badgesize.io/https://unpkg.com/fit-html/.tmp/index.min.js?compression=gzip)](https://www.npmjs.com/package/fit-html)
   state => ({ todos: state }),
-  { addTodo },
-  render
-);
+  { addTodo }
+)(render);
 
@@ -66,3 +66,3 @@ // Define the custom element.
 // app. All other 💪-elements will get the redux store from that element.
-customElements.define('todo-app', withStore(TodosApp, store));
+customElements.define('todo-app', withStore(store)(TodosApp));
 ```
@@ -69,0 +69,0 @@

src/connect.ts

@@ -1,6 +0,6 @@
-import { render, PartCallback, TemplateResult } from 'lit-html';
-import { render as shadyRender } from 'lit-html/lib/shady-render';
 import { bindActionCreators, ActionCreatorsMapObject, Dispatch, Store, Unsubscribe } from 'redux';
 
 import { ClassConstructor } from '.';
+import withFit, { FitDecorated, TemplateFunction } from './fit-element';
+import { isFunction } from './util';
 
@@ -26,65 +26,43 @@ /**
 /**
- * A lit-html rendering function.
+ * An element connected to the redux store.
  */
-export type RenderFunction = typeof render;
+export interface ConnectElement<S> {
+    getStore(): Store<S>;
+}
 
+/*
+ * A 💪-html element that is connected to the redux store.
+ */
+export type ConnectedElement<
+    S, SP, DP, OP,
+    B extends ClassConstructor<HTMLElement>,
+    T extends FitDecorated<B, OP, SP & DP>
+>
+    = T & ClassConstructor<ConnectElement<S>>;
+
 /**
- * A 💪 web component.
- *
- * @template {S} The type of the redux state.
- * @template {P} The type of the view properties.
- * @template {OP} The type of the own properties passed to the element from the outside.
+ * The type of decorator wrapping a templating function.
  */
-export declare class FitElement<S, P, OP> extends HTMLElement {
-    constructor(...args: any[]);
+export type TemplateDecorator<S, SP, DP, OP> = (fn: TemplateFunction<SP & DP>) => ConnectedElement<
+    S, SP, DP, OP,
+    typeof HTMLElement,
+    FitDecorated<typeof HTMLElement, OP, SP & DP>
+>;
 
-    connectedCallback();
-    disconnectedCallback();
+/**
+ * The type of decorator wrapping a connected element.
+ */
+export type ElementDecorator<S, SP, DP, OP> = <
+    B extends ClassConstructor<HTMLElement>,
+    T extends FitDecorated<B, OP, SP & DP>
+>(base: T) => ConnectedElement<S, SP, DP, OP, B, T>;
 
-    /**
-     * Enqueues the component for rendering at microtask timing.
-     *
-     * Multiple calls to this method within a microtask will be ignored.
-     */
-    enqueueRender();
-
-    /**
-     * Obtains the redux store.
-     *
-     * The dom is traversed upwards until either another 💪-html element or
-     * the redux store provider element is found. As such, it may not be invoked
-     * until the component has been attached to the document (respectively only
-     * during / after connectedCallback has fired).
-     *
-     * @returns {Store<S>} The redux store.
-     */
-    getStore(): Store<S>;
-
-    /**
-     * Renders the elements content into its shadow root using props from
-     * {@ref getProps}.
-     *
-     * You probably want to use {@ref enqueueRender} instead.
-     */
-    render();
-
-    /**
-     * Callback that computes the view properties from the redux store
-     * and the props passed to the component.
-     *
-     * @param {OP} ownProps Props passed to the component via attributes.
-     * @returns {P} Generated view properties.
-     */
-    getProps(ownProps?: OP): P;
-}
-
 /* tslint:disable:max-line-length */
 
 /**
- * Creates a 💪 web component connected to the redux store.
+ * Creates a decorator to create 💪 web components using the given template function / base class.
  *
- * @param {MapStateToPropsFn<S, SP, OP>} mapStateToProps The MapStateToProps function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {MapDispatchToPropsFn<S, DP, OP>} mapDispatchToProps The MapStateToDispatch function. If you want to use ownProps, pass the return value through the {@link withProps} mixin.
- * @param {(props: (SP & DP)) => TemplateResult} templateFn The 🔥-html templating function.
- * @returns {FitElement<S, SP & DP, OP>} A newly created 💪-element class.
+ * @param {MapStateToPropsFn<S, SP, OP>} mapStateToProps The MapStateToProps function or factory.
+ * @param {MapDispatchToPropsFn<S, DP, OP>} mapDispatchToProps The MapStateToDispatch function.
+ * @returns The decorator function.
  * @template S, SP, DP, OP
@@ -95,106 +73,103 @@ */
     mapDispatchToProps: MapDispatchToPropsFn<S, DP, OP> | DP,
-    templateFn: (props: SP & DP) => TemplateResult,
-): ClassConstructor<FitElement<S, SP & DP, OP>> {
-    return class extends HTMLElement {
-        private _isConnected: boolean = false;
-        private _nodeName: string = this.nodeName.toLowerCase();
-        private _preparedDispatch: MapDispatchToPropsFn<S, DP, OP> | ActionCreatorsMapObject;
-        private _preparedMapStateToProps: MapStateToPropsFn<S, SP, OP>;
-        private _previousProps: SP & DP | null = null;
-        private _renderEnqueued: boolean = false;
-        private _store: Store<S>;
-        private _unsubscribe: Unsubscribe;
+): TemplateDecorator<S, SP, DP, OP> & ElementDecorator<S, SP, DP, OP>;
 
-        constructor() {
-            super();
+// We declare the exported typings separately for now (above).
 
-            this.attachShadow({ mode: 'open' });
+export default function connect<S, SP, DP, OP = {}>(
+    mapStateToProps: MapStateToPropsFactory<S, SP, OP> | MapStateToPropsFn<S, SP, OP>,
+    mapDispatchToProps: MapDispatchToPropsFn<S, DP, OP> | DP,
+) {
+    return <
+        B extends ClassConstructor<HTMLElement>,
+        T extends FitDecorated<B, OP, SP & DP>,
+    >(b: T | TemplateFunction<SP & DP>) => {
+        const base: ClassConstructor<any> = isTemplateFunction(b) ? withFit(b)(HTMLElement) : b;
 
-            this._preparedMapStateToProps = isFactory(mapStateToProps)
-                ? mapStateToProps()
-                : mapStateToProps;
-        }
+        return class extends base {
+            _propsEnqueued: boolean = false;
+            _ownProps: OP;
+            _preparedDispatch: MapDispatchToPropsFn<S, DP, OP> | ActionCreatorsMapObject;
+            _preparedMapStateToProps: MapStateToPropsFn<S, SP, OP>;
+            _store: Store<S>;
+            _unsubscribe: Unsubscribe;
 
-        connectedCallback() {
-            this._isConnected = true;
+            get ownProps() {
+                return this._ownProps;
+            }
 
-            const store = this.getStore();
-            this._preparedDispatch = isFunction(mapDispatchToProps)
-                ? mapDispatchToProps
-                : bindActionCreators(mapDispatchToProps as any as ActionCreatorsMapObject, store.dispatch);
-            this._unsubscribe = store.subscribe(() => this.enqueueRender());
+            set ownProps(props: OP) {
+                this._ownProps = props;
+                this._computeProps();
+            }
 
-            if (window.ShadyCSS) {
-                window.ShadyCSS.styleElement(this);
+            constructor(...args: any[]) {
+                super(...args);
+
+                this._preparedMapStateToProps = isFactory(mapStateToProps)
+                    ? mapStateToProps()
+                    : mapStateToProps;
             }
-            this.enqueueRender();
-        }
 
-        disconnectedCallback() {
-            this._isConnected = false;
+            connectedCallback() {
+                super.connectedCallback();
 
-            this._unsubscribe();
-            this._store = undefined!;
-        }
+                const store = this.getStore();
+                this._preparedDispatch = isFunction(mapDispatchToProps)
+                    ? mapDispatchToProps
+                    : bindActionCreators(mapDispatchToProps as any as ActionCreatorsMapObject, store.dispatch);
+                this._unsubscribe = store.subscribe(() => this._computeProps());
 
-        enqueueRender() {
-            if (this._renderEnqueued) {
-                return;
+                this._computeProps();
             }
 
-            this._renderEnqueued = true;
-            Promise.resolve().then(() => {
-                this._renderEnqueued = false;
-                if (this._isConnected) {
-                    this.render();
-                }
-            });
-        }
+            disconnectedCallback() {
+                super.disconnectedCallback();
 
-        getStore(): Store<S> {
-            if (this._store) {
-                return this._store;
+                this._unsubscribe();
+                this._store = undefined!;
             }
 
-            let node: any = this;
-            while (node = node.parentNode || node.host) {
-                if (isFunction(node.getStore)) {
-                    this._store = node.getStore();
+            getStore(): Store<S> {
+                if (this._store) {
                     return this._store;
                 }
+                if (isFunction(super.getStore)) {
+                    return super.getStore();
+                }
+
+                let node: any = this;
+                while (node = node.parentNode || node.host) {
+                    if (isFunction(node.getStore)) {
+                        this._store = node.getStore();
+                        return this._store;
+                    }
+                }
+
+                throw new Error("💪-html: Missing redux store.\nSeems like you're using fit-html without a redux store. Please use a provider component to provide one to the element tree.");
             }
 
-            throw new Error("💪-html: Missing redux store.\nSeems like you're using fit-html without a redux store. Please use a provider component to provide one to the element tree.");
-        }
+            _computeProps() {
+                if (this._propsEnqueued) {
+                    return;
+                }
 
-        getProps(ownProps = {} as OP): SP & DP {
-            const store = this.getStore();
-            return Object.assign(
-                {},
-                this._preparedMapStateToProps(store.getState(), ownProps),
-                isFunction(this._preparedDispatch)
-                    ? this._preparedDispatch(store.dispatch, ownProps)
-                    : this._preparedDispatch,
-            ) as SP & DP;
-        }
+                this._propsEnqueued = true;
+                Promise.resolve().then(() => {
+                    this._propsEnqueued = false;
 
-        render() {
-            if (!this._isConnected) {
-                return;
-            }
+                    const store = this.getStore();
+                    const props = this._preparedMapStateToProps(store.getState(), this.ownProps);
+                    const dispatch = isFunction(this._preparedDispatch)
+                        ? this._preparedDispatch(store.dispatch, this.ownProps)
+                        : this._preparedDispatch;
 
-            const props = this.getProps();
-
-            if (shallowEqual(props, this._previousProps)) {
-                return;
+                    this.renderProps = Object.assign({}, props, dispatch) as SP & DP;
+                });
             }
-
-            this._previousProps = props;
-            window.ShadyCSS
-                ? shadyRender(templateFn(props), this.shadowRoot!, this._nodeName)
-                : render(templateFn(props), this.shadowRoot!);
-        }
+        };
     };
 }
 
+/* tslint:enable */
+
 function isFactory<S, P, OP>(
@@ -206,29 +181,12 @@ fn: MapStateToPropsFactory<S, P, OP> | MapStateToPropsFn<S, P, OP>,
 
-// tslint:disable-next-line:ban-types
-function isFunction(f: any): f is Function {
-    return typeof f === 'function';
+function isTemplateFunction<
+    B extends ClassConstructor<HTMLElement>,
+    T extends FitDecorated<B, OP, SP & DP>,
+    OP,
+    SP,
+    DP
+>(
+    base: T | TemplateFunction<SP & DP>,
+): base is TemplateFunction<SP & DP> {
+    return !(base.prototype instanceof HTMLElement);
 }
-
-function shallowEqual(a, b) {
-    if (a === b) {
-        return true;
-    }
-    if (a == null || b == null) {
-        return false;
-    }
-
-    const aKeys = Object.keys(a);
-    const bKeys = Object.keys(b);
-
-    if (aKeys.length !== bKeys.length) {
-        return false;
-    }
-
-    for (const key of aKeys) {
-        if (a[key] !== b[key]) {
-            return false;
-        }
-    }
-
-    return true;
-}

src/index.ts

 export { default as connect } from './connect';
-export { default as createProvider } from './provider';
-export { default as withProps } from './with-props';
+export { default as withFit } from './fit-element';
+export { default as withStore } from './store';
 
 export * from './connect';
-export * from './provider';
+export * from './fit-element';
 
@@ -8,0 +8,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dev dependency count

9

decreased by-10%

Number of package files

32

increased by18.52%

Worsened metrics

Total package byte prevSize

130811

decreased by-42.41%

Lines of code

1167

decreased by-47.43%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedlit-html@^0.9.0

• - Removedredux@^3.7.2