lit-element - npm Package Compare versions

Comparing version 0.4.11 to 0.4.12

lit-element-extended.js

 import { svg, TemplateResult } from '../lit-html/lit-html.js';
 import { html, render } from '../lit-html/lib/lit-extended.js';
 import { LitLite, camelCaseToKebab } from './lit-lite.js';
-export const LitElementExtended = (superclass = HTMLElement) => LitLite(superclass, html, render);
+export const LitElementExtended = (superclass = HTMLElement) => LitLite(superclass, render);
 export { html, svg, TemplateResult };
 export { camelCaseToKebab };
 //# sourceMappingURL=lit-element-extended.js.map

lit-element.js

 import { html, svg, render, TemplateResult } from '../lit-html/lit-html.js';
 import { LitLite, camelCaseToKebab } from './lit-lite.js';
-export const LitElement = (superclass = HTMLElement) => LitLite(superclass, html, render);
+export const LitElement = (superclass = HTMLElement) => LitLite(superclass, render);
 export { html, svg, TemplateResult };
 export { camelCaseToKebab };
 //# sourceMappingURL=lit-element.js.map

lit-lite.d.ts

@@ -1,2 +0,3 @@
-import { TemplateResult, TemplateFactory } from '../lit-html/lit-html.js';
+import { camelCaseToKebab } from './lib/helpers/camel-to-kebab-case.js';
+export { camelCaseToKebab };
 export interface Properties {
@@ -26,11 +27,3 @@ [propName: string]: PropConfig | Type;
 /**
- * Coverts a camelCase string to kebab-case.
  *
- * @export
- * @param {string} str The camelCaseString
- * @returns {string} The kebab-version of the string
- */
-export declare function camelCaseToKebab(str: string): string;
-/**
- *
  * @param {string} prop The name of the property to create
@@ -41,3 +34,3 @@ * @param {string} attr The name of the attribute
  */
-export declare function createProperty(prop: string, attr: string, context: any, info: PropConfig): void;
+export declare function createProperty(prop: string, context: any, info: PropConfig): void;
 /**
@@ -47,6 +40,6 @@ * Returns a class with the Lit-Element features, that extends `superclass`.
  */
-export declare const LitLite: (superclass: {
+export declare const LitLite: <T, U>(superclass: {
     new (): HTMLElement;
     prototype: HTMLElement;
-}, html: (strings: TemplateStringsArray, ...values: any[]) => TemplateResult, renderFunction: (result: TemplateResult, container: Element | DocumentFragment, templateFactory?: TemplateFactory) => void) => {
+}, renderFunction: (result: T, container: Element | DocumentFragment, templateFactory?: U) => void) => {
     new (): {
@@ -72,3 +65,3 @@ [key: string]: any;
         refresh(callback?: () => any): Promise<void>;
-        render(data?: object): TemplateResult;
+        render(data?: object): T;
         readonly $: HTMLCollectionByID;
@@ -75,0 +68,0 @@ accessKey: string;

lit-lite.js

@@ -9,14 +9,6 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 };
+import { camelCaseToKebab } from './lib/helpers/camel-to-kebab-case.js';
+export { camelCaseToKebab };
 /**
- * Coverts a camelCase string to kebab-case.
  *
- * @export
- * @param {string} str The camelCaseString
- * @returns {string} The kebab-version of the string
- */
-export function camelCaseToKebab(str) {
-    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-}
-/**
- *
  * @param {string} prop The name of the property to create
@@ -27,3 +19,3 @@ * @param {string} attr The name of the attribute
  */
-export function createProperty(prop, attr, context, info) {
+export function createProperty(prop, context, info) {
     // get value that was already set on the property (if any)
@@ -73,3 +65,3 @@ const setVal = context[prop];
  */
-export const LitLite = (superclass = HTMLElement, html, renderFunction) => class extends superclass {
+export const LitLite = (superclass = HTMLElement, renderFunction) => class extends superclass {
     constructor() {
@@ -127,4 +119,3 @@ super();
     __makeGetterSetter(prop, info) {
-        const attr = this.__propAttr.get(prop);
-        createProperty(prop, attr, this, info);
+        createProperty(prop, this, info);
     }
@@ -292,3 +283,3 @@ /**
     render(data) {
-        return html ``;
+        throw Error('render function not defined');
     }
@@ -295,0 +286,0 @@ /**

package.json

@@ -6,3 +6,3 @@ {
   "name": "lit-element",
-  "version": "0.4.11",
+  "version": "0.4.12",
   "description": "Implements lit-html via a LitElement class. Made for custom Elements.",
@@ -9,0 +9,0 @@ "main": "lit-element.js",

src/lit-decorators.ts

@@ -1,7 +0,6 @@
-import { createProperty, PropConfig, camelCaseToKebab } from './lit-lite.js'
+import { createProperty, PropConfig } from './lit-lite.js'
 
 export function property(config: PropConfig = { type: String }) {
     return (prototype: any, propName: string) => {
-        const attrName = camelCaseToKebab(propName);
-        createProperty(propName, attrName, prototype, config);
+        createProperty(propName, prototype, config);
     }
@@ -11,8 +10,7 @@ }
 export function attribute(config: PropConfig = { type: String, reflectToAttribute: true }) {
-    if(! ('reflectToAttribute' in config))
+    if (!('reflectToAttribute' in config))
         config.reflectToAttribute = true;
     return (prototype: any, propName: string) => {
-        const attrName = camelCaseToKebab(propName);
-        createProperty(propName, attrName, prototype, config);
+        createProperty(propName, prototype, config);
     }
 }

src/lit-element-extended.ts

@@ -5,5 +5,5 @@ import { svg, TemplateResult } from '../node_modules/lit-html/lit-html.js';
 
-export const LitElementExtended = (superclass = HTMLElement) => LitLite(superclass, html, render);
+export const LitElementExtended = (superclass = HTMLElement) => LitLite(superclass, render);
 
 export { html, svg, TemplateResult };
 export { HTMLCollectionByID, Data, PropConfig, Properties, camelCaseToKebab, MethodsToCall };

src/lit-element.ts

 import { html, svg, render, TemplateResult } from '../node_modules/lit-html/lit-html.js';
 import { LitLite, HTMLCollectionByID, Data, PropConfig, Properties, camelCaseToKebab, MethodsToCall } from './lit-lite.js';
 
-export const LitElement = (superclass = HTMLElement) => LitLite(superclass, html, render);
+export const LitElement = (superclass = HTMLElement) => LitLite(superclass, render);
 
 export { html, svg, TemplateResult };
 export { HTMLCollectionByID, Data, PropConfig, Properties, camelCaseToKebab };

src/lit-lite.ts

@@ -1,3 +0,5 @@
-import { TemplateResult, TemplateFactory } from '../node_modules/lit-html/lit-html.js';
+import { camelCaseToKebab } from './lib/helpers/camel-to-kebab-case.js';
 
+export { camelCaseToKebab };
+
 export interface Properties {
@@ -34,13 +36,2 @@ [propName: string]: PropConfig | Type;
 /**
- * Coverts a camelCase string to kebab-case.
- *
- * @export
- * @param {string} str The camelCaseString
- * @returns {string} The kebab-version of the string
- */
-export function camelCaseToKebab(str: string): string {
-    return str.replace(/([A-Z])/g, '-$1').toLowerCase();
-}
-
-/**
  * 
@@ -52,3 +43,3 @@ * @param {string} prop The name of the property to create
  */
-export function createProperty(prop: string, attr: string, context: any, info: PropConfig) {
+export function createProperty(prop: string, context: any, info: PropConfig) {
     // get value that was already set on the property (if any)
@@ -99,5 +90,4 @@ const setVal = context[prop];
 export const LitLite =
-    (superclass = HTMLElement,
-        html: (strings: TemplateStringsArray, ...values: any[]) => TemplateResult,
-        renderFunction: (result: TemplateResult, container: Element | DocumentFragment, templateFactory?: TemplateFactory) => void) =>
+    <T, U>(superclass = HTMLElement,
+        renderFunction: (result: T, container: Element | DocumentFragment, templateFactory?: U) => void) =>
         class extends superclass {
@@ -127,3 +117,3 @@ static properties: Properties;
 
-            constructor() {
+            protected constructor() {
                 super();
@@ -171,4 +161,3 @@ this.attachShadow({ mode: 'open' });
             __makeGetterSetter(prop: string, info: PropConfig) {
-                const attr = <string>this.__propAttr.get(prop);
-                createProperty(prop, attr, this, info);
+                createProperty(prop, this, info);
             }
@@ -343,4 +332,4 @@
              */
-            render(data?: object): TemplateResult {
-                return html``;
+            render(data?: object): T {
+                throw Error('render function not defined');
             }
@@ -347,0 +336,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

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

Number of package files

18

increased by12.5%

Worsened metrics

Total package byte prevSize

144100

decreased by-0.46%

Lines of code

1681

decreased by-0.24%

No dependency changes