lithiumjs - npm Package Compare versions

Comparing version 0.0.14 to 0.0.15

dist/index.d.ts

 import { html } from 'lit-html/lib/lit-extended';
+import { repeat } from 'lit-html/lib/repeat';
 import { TemplateResult } from 'lit-html';
-export { html, TemplateResult };
+export { html, repeat, TemplateResult };
 export declare class LithiumComponent extends HTMLElement {
     props: {};
-    protected styles: any;
     private _props;
@@ -8,0 +8,0 @@ static readonly tagName: string;

dist/index.js

@@ -1,1 +0,1 @@
-import{html,render}from'lit-html/lib/lit-extended';import{TemplateResult}from'lit-html';export{html,TemplateResult};export class LithiumComponent extends HTMLElement{constructor(){super(),this.props={},this._props={},this.attachShadow({mode:'open'})}static get tagName(){throw new Error('Element must have tag name')}connectedCallback(){this._render(),this.onInit(),this.makeGetterSetters()}disconnectedCallback(){this.onDestroy()}attributeChangedCallback(a,b,c){const d=a.replace(/-([a-z])/g,(a)=>a[1].toUpperCase());this.props[d]=c,this.onChange(d,b,c)}emit(a,b){this.dispatchEvent(new CustomEvent(a,{detail:b}))}render(){return html`Render Function not defined`}onInit(){}onDestroy(){}onChange(){}_render(){render(this.render(),this.shadowRoot)}makeGetterSetters(){for(const a in this.props)this._props[a]=this.props[a],Object.defineProperty(this.props,a,{set:(b)=>{this._props[a]!==b&&(this._props[a]=b,this._render())},get:()=>this._props[a],enumerable:!0,configurable:!0})}}
+import{html,render}from'lit-html/lib/lit-extended';import{repeat}from'lit-html/lib/repeat';import{TemplateResult}from'lit-html';export{html,repeat,TemplateResult};export class LithiumComponent extends HTMLElement{constructor(){super(),this.props={},this._props={},this.attachShadow({mode:'open'})}static get tagName(){throw new Error('Element must have tag name')}connectedCallback(){this._render(),this.onInit(),this.makeGetterSetters()}disconnectedCallback(){this.onDestroy()}attributeChangedCallback(a,b,c){const d=a.replace(/-([a-z])/g,(a)=>a[1].toUpperCase());this.props[d]=c,this.onChange(d,b,c)}emit(a,b){this.dispatchEvent(new CustomEvent(a,{detail:b}))}render(){return html`Render Function not defined`}onInit(){}onDestroy(){}onChange(){}_render(){render(this.render(),this.shadowRoot)}makeGetterSetters(){for(const a in this.props)this._props[a]=this.props[a],Object.defineProperty(this.props,a,{set:(b)=>{this._props[a]!==b&&(this._props[a]=b,this._render())},get:()=>this._props[a],enumerable:!0,configurable:!0})}}

package.json

 {
   "name": "lithiumjs",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "",
@@ -5,0 +5,0 @@ "main": "./dist/index.js",

README.md

 # LithiumJS
 
-LithiumJS is a lightweight base class to easily create Web Components 
+LithiumJS is a lightweight (~3kb gzip) micro library to easily create Web Components 
 using [lit-html](https://github.com/PolymerLabs/lit-html) templates.
 
+This library is still very much experimental.
+
 ```typescript
@@ -76,5 +78,7 @@ import { html, LithiumComponent } from 'lithiumjs';
 
+<img src="https://github.com/coryrylan/lithiumjs/blob/master/assets/demo.gif" alt="demo">
+
 ### VSCode
 
 There is a helpful VSCode add on that helps syntax highlighting
-with Lit-HTML templates. [VSCode lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html)
+with Lit-HTML templates. [VSCode lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html)

No alert changes

Improved metrics

Total package byte prevSize

406577

increased by3550.69%

Number of package files

13

increased by8.33%

Number of lines in readme file

84

increased by6.33%

No dependency changes