fit-html - npm Package Compare versions

Comparing version 0.4.3 to 0.5.0

dist/connect.d.ts

@@ -1,2 +0,2 @@
-import { html, render, TemplateResult } from 'lit-html';
+import { render, TemplateResult } from 'lit-html';
 import { Dispatch, Store } from 'redux';
@@ -31,12 +31,2 @@ import { ClassConstructor } from '.';
 export declare class FitElement<S, P, OP> extends HTMLElement {
-    /**
-     * The 🔥-html function used to render to the dom.
-     *
-     * Can be either the one from lit-html or lit-html/extended.
-     */
-    renderFunction: RenderFunction;
-    /**
-     * The 🔥-html templating function.
-     */
-    templateFunction: (props: P) => TemplateResult;
     constructor(...args: any[]);
@@ -78,3 +68,2 @@ connectedCallback(): any;
 }
-export { html };
 /**
@@ -81,0 +70,0 @@ * Creates a 💪 web component connected to the redux store.

dist/connect.js

@@ -1,5 +0,5 @@
-import { html, render } from 'lit-html';
+import { render } from 'lit-html';
+import { render as shadyRender } from 'lit-html/lib/shady-render';
 import isFunction from 'lodash-es/isFunction';
 import { bindActionCreators } from 'redux';
-export { html };
 /* tslint:disable:max-line-length */
@@ -20,2 +20,3 @@ /**
             this._isConnected = false;
+            this._nodeName = this.nodeName.toLowerCase();
             this._previousProps = null;
@@ -28,8 +29,2 @@ this._renderEnqueued = false;
         }
-        get renderFunction() {
-            return render;
-        }
-        get templateFunction() {
-            return templateFn;
-        }
         connectedCallback() {
@@ -67,12 +62,8 @@ this._isConnected = true;
             while (node = node.parentNode || node.host) {
-                if (isProvider(node)) {
-                    this._store = node.reduxStore;
+                if (isReduxStore(node._store || node.reduxStore)) {
+                    this._store = node._store || node.reduxStore;
                     return this._store;
                 }
-                else if (isReduxStore(node._store)) {
-                    this._store = node._store;
-                    return this._store;
-                }
             }
-            throw new Error("Missing redux store.\nSeems like you're using fit-html without a redux store. Please use the 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 the provider component to provide one to the element tree.");
         }
@@ -94,3 +85,5 @@ getProps(ownProps = {}) {
             this._previousProps = props;
-            this.renderFunction(templateFn(props), this.shadowRoot);
+            window.ShadyCSS
+                ? shadyRender(templateFn(props), this.shadowRoot, this._nodeName)
+                : render(templateFn(props), this.shadowRoot);
         }
@@ -102,5 +95,2 @@ };
 }
-function isProvider(elem) {
-    return elem && !!elem.reduxStore;
-}
 function isReduxStore(obj) {
@@ -107,0 +97,0 @@ return obj && obj.getState && obj.dispatch && obj.subscribe;

dist/index.d.ts

 export { default as connect } from './connect';
 export { default as createProvider } from './provider';
-export { default as withExtended } from './with-extended';
 export { default as withProps } from './with-props';
@@ -5,0 +4,0 @@ export * from './connect';

dist/index.js

 export { default as connect } from './connect';
 export { default as createProvider } from './provider';
-export { default as withExtended } from './with-extended';
 export { default as withProps } from './with-props';
@@ -5,0 +4,0 @@ export * from './connect';

dist/provider.d.ts

@@ -5,2 +5,33 @@ import { Store } from 'redux';
  * A 💪 redux store provider element.
+ *
+ * This element supplies the redux store to the 💪-html elements below it.
+ * It works much like {@see https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store}.
+ *
+ * When connected to the document, 💪-elements walk the dom upwards until they
+ * either find another 💪-element that already has an initialized redux store
+ * or the store provider element. They then take the store from that given
+ * element, subscribe to it for rendering and cache it for further lookups
+ * or potential 💪-children.
+ *
+ * You usually only need one per application as you would usually only use one
+ * redux store per application. You're free to use as many as you like though.
+ *
+ * You can also nest them into each other. 💪-html components will always use
+ * the store from the closest provider element above them. See the following
+ * example:
+ *
+ * @example
+ * ```html
+ * <redux-provider-top-level>
+ *     <!-- These two elements use the store from redux-provider-top-level -->
+ *     <fit-element-1></fit-element-1>
+ *     <fit-element-2></fit-element-2>
+ *
+ *     <redux-provider-sub-level>
+ *         <!-- These two elements use the store from redux-provider-sub-level -->
+ *         <fit-element-2></fit-element-1>
+ *         <fit-element-2></fit-element-2>
+ *     </redux-provider-sub-level>
+ * </redux-provider-top-level>
+ * ```
  */
@@ -16,3 +47,4 @@ export declare class ProviderElement<S> extends HTMLElement {
  *
- * All 💪-elements must be a child of this element.
+ * This element supplies the redux store to the 💪-html elements below it.
+ * Thus, all 💪-elements must be a child of this element.
  *
@@ -19,0 +51,0 @@ * @param {Store<S>} store The redux store.

dist/provider.js

 /**
  * Creates a new redux store provider element using the given store.
  *
- * All 💪-elements must be a child of this element.
+ * This element supplies the redux store to the 💪-html elements below it.
+ * Thus, all 💪-elements must be a child of this element.
  *
@@ -6,0 +7,0 @@ * @param {Store<S>} store The redux store.

dist/with-props.js

@@ -47,4 +47,4 @@ /* tslint:disable:max-line-length */
         }
-        attributeChangedCallback(name, _, newValue) {
-            if (!(name in attributeDescriptors)) {
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (!(name in attributeDescriptors) || oldValue === newValue) {
                 return;
@@ -51,0 +51,0 @@ }

package.json

 {
   "name": "fit-html",
-  "version": "0.4.3",
+  "version": "0.5.0",
   "description": "5KB functional Web Components without bloat",
@@ -17,3 +17,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "lit-html": "^0.8.0",
+    "lit-html": "^0.9.0",
     "lodash-es": "^4.17.4",
@@ -20,0 +20,0 @@ "redux": "^3.7.2"

src/connect.ts

@@ -1,2 +0,3 @@
-import { html, render, PartCallback, TemplateResult } from 'lit-html';
+import { render, PartCallback, TemplateResult } from 'lit-html';
+import { render as shadyRender } from 'lit-html/lib/shady-render';
 import isFunction from 'lodash-es/isFunction';
@@ -39,14 +40,2 @@ import { bindActionCreators, ActionCreatorsMapObject, Dispatch, Store, Unsubscribe } from 'redux';
 export declare class FitElement<S, P, OP> extends HTMLElement {
-    /**
-     * The 🔥-html function used to render to the dom.
-     *
-     * Can be either the one from lit-html or lit-html/extended.
-     */
-    renderFunction: RenderFunction;
-
-    /**
-     * The 🔥-html templating function.
-     */
-    templateFunction: (props: P) => TemplateResult;
-
     constructor(...args: any[]);
@@ -94,4 +83,2 @@
 
-export { html };
-
 /* tslint:disable:max-line-length */
@@ -115,2 +102,3 @@
         private _isConnected: boolean = false;
+        private _nodeName: string = this.nodeName.toLowerCase();
         private _preparedDispatch: MapDispatchToPropsFn<S, DP, OP> | ActionCreatorsMapObject;
@@ -123,10 +111,2 @@ private _preparedMapStateToProps: MapStateToPropsFn<S, SP, OP>;
 
-        get renderFunction(): RenderFunction {
-            return render;
-        }
-
-        get templateFunction(): (props: SP & DP) => TemplateResult {
-            return templateFn;
-        }
-
         constructor() {
@@ -182,12 +162,9 @@ super();
             while (node = node.parentNode || node.host) {
-                if (isProvider<S>(node)) {
-                    this._store = node.reduxStore;
+                if (isReduxStore<S>(node._store || node.reduxStore)) {
+                    this._store = node._store || node.reduxStore;
                     return this._store;
-                } else if (isReduxStore<S>(node._store)) {
-                    this._store = node._store;
-                    return this._store;
                 }
             }
 
-            throw new Error("Missing redux store.\nSeems like you're using fit-html without a redux store. Please use the 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 the provider component to provide one to the element tree.");
         }
@@ -218,3 +195,5 @@
             this._previousProps = props;
-            this.renderFunction(templateFn(props), this.shadowRoot!);
+            window.ShadyCSS
+                ? shadyRender(templateFn(props), this.shadowRoot!, this._nodeName)
+                : render(templateFn(props), this.shadowRoot!);
         }
@@ -230,6 +209,2 @@ };
 
-function isProvider<S>(elem: any): elem is ProviderElement<S> {
-    return elem && !!(elem as ProviderElement<S>).reduxStore;
-}
-
 function isReduxStore<S>(obj: any): obj is Store<S> {
@@ -236,0 +211,0 @@ return obj && obj.getState && obj.dispatch && obj.subscribe;

src/index.ts

 export { default as connect } from './connect';
 export { default as createProvider } from './provider';
-export { default as withExtended } from './with-extended';
 export { default as withProps } from './with-props';
@@ -5,0 +4,0 @@

src/provider.ts

@@ -7,2 +7,33 @@ import { Store } from 'redux';
  * A 💪 redux store provider element.
+ *
+ * This element supplies the redux store to the 💪-html elements below it.
+ * It works much like {@see https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store}.
+ *
+ * When connected to the document, 💪-elements walk the dom upwards until they
+ * either find another 💪-element that already has an initialized redux store
+ * or the store provider element. They then take the store from that given
+ * element, subscribe to it for rendering and cache it for further lookups
+ * or potential 💪-children.
+ *
+ * You usually only need one per application as you would usually only use one
+ * redux store per application. You're free to use as many as you like though.
+ *
+ * You can also nest them into each other. 💪-html components will always use
+ * the store from the closest provider element above them. See the following
+ * example:
+ *
+ * @example
+ * ```html
+ * <redux-provider-top-level>
+ *     <!-- These two elements use the store from redux-provider-top-level -->
+ *     <fit-element-1></fit-element-1>
+ *     <fit-element-2></fit-element-2>
+ *
+ *     <redux-provider-sub-level>
+ *         <!-- These two elements use the store from redux-provider-sub-level -->
+ *         <fit-element-2></fit-element-1>
+ *         <fit-element-2></fit-element-2>
+ *     </redux-provider-sub-level>
+ * </redux-provider-top-level>
+ * ```
  */
@@ -19,3 +50,4 @@ export declare class ProviderElement<S> extends HTMLElement {
  *
- * All 💪-elements must be a child of this element.
+ * This element supplies the redux store to the 💪-html elements below it.
+ * Thus, all 💪-elements must be a child of this element.
  *
@@ -22,0 +54,0 @@ * @param {Store<S>} store The redux store.

src/with-props.ts

@@ -88,4 +88,4 @@ import { ClassConstructor } from '.';
 
-        attributeChangedCallback(name: string, _: string, newValue: string) {
-            if (!(name in attributeDescriptors)) {
+        attributeChangedCallback(name: string, oldValue: string, newValue: string) {
+            if (!(name in attributeDescriptors) || oldValue === newValue) {
                 return;
@@ -92,0 +92,0 @@ }

tsconfig.json

@@ -15,6 +15,5 @@ {
   },
-  "exclude": [
-    "node_modules",
-    "dist"
+  "files": [
+    "src/index.ts"
   ]
 }

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

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

Worsened metrics

Total package byte prevSize

48852

decreased by-1.02%

Number of package files

23

decreased by-14.81%

Lines of code

783

decreased by-3.57%

Dependency changes

• + Addedlit-html@0.9.0(transitive)

• - Removedlit-html@0.8.0(transitive)

• Updatedlit-html@^0.9.0