@marcoms/make-element - npm Package Compare versions

Comparing version 4.1.4 to 4.1.5

build/src/index.d.ts

 export interface ArbitraryFn {
-    (...args: any[]): any;
+    (this: CustomElement, ...args: any[]): any;
 }
 export interface GetFn {
-    (val: any): void;
+    (this: CustomElement, val: any): void;
 }
 export interface SetFn {
-    (val: any): any;
+    (this: CustomElement, val: any): any;
 }
 export interface CoerceFn {
-    (val: any): any;
+    (this: CustomElement, val: any): any;
 }
 export interface FromAttrFn {
-    (val: string): any;
+    (this: CustomElement, val: string): any;
 }
 export interface ToAttrFn {
-    (val: any): string;
+    (this: CustomElement, val: any): string;
 }
@@ -19,0 +19,0 @@ export declare type ReadyFn = ArbitraryFn;

package.json

 {
     "name": "@marcoms/make-element",
-    "version": "4.1.4",
+    "version": "4.1.5",
     "description": "Create custom elements without boilerplate",
@@ -5,0 +5,0 @@ "main": "build/make-element.js",

src/index.ts

@@ -1,7 +0,7 @@
-export interface ArbitraryFn { (...args: any[]): any; }
-export interface GetFn { (val: any): void; }
-export interface SetFn { (val: any): any; }
-export interface CoerceFn { (val: any): any; }
-export interface FromAttrFn { (val: string): any; }
-export interface ToAttrFn { (val: any): string; }
+export interface ArbitraryFn { (this: CustomElement, ...args: any[]): any; }
+export interface GetFn { (this: CustomElement, val: any): void; }
+export interface SetFn { (this: CustomElement, val: any): any; }
+export interface CoerceFn { (this: CustomElement, val: any): any; }
+export interface FromAttrFn { (this: CustomElement, val: string): any; }
+export interface ToAttrFn { (this: CustomElement, val: any): string; }
 
@@ -233,9 +233,2 @@ export type ReadyFn = ArbitraryFn;
 
-				// bind property methods to element context
-				internalProp.toAttr = internalProp.toAttr.bind(this);
-				internalProp.fromAttr = internalProp.fromAttr.bind(this);
-				internalProp.get = internalProp.get.bind(this);
-				internalProp.set = internalProp.set.bind(this);
-				internalProp.coerce = internalProp.coerce.bind(this);
-
 				Object.defineProperty(this, propName, {
@@ -245,3 +238,3 @@ set(val) {
 
-						propVal = internalProp.coerce(propVal);
+						propVal = internalProp.coerce.call(this, propVal);
 
@@ -253,3 +246,3 @@ if (internalProp.settingInitialValue) {
 						internalProp.val = propVal;
-						internalProp.set(propVal);
+						internalProp.set.call(this, propVal);
 
@@ -268,3 +261,3 @@ /*
 						if (hasLinkedAttr && !beingInitialized) {
-							const attrVal = internalProp.toAttr(propVal);
+							const attrVal = internalProp.toAttr.call(this, propVal);
 
@@ -287,3 +280,3 @@ // prevent the attribute from reflowing back to the
 					get() {
-						const propVal = internalProp.get(internalProp.val);
+						const propVal = internalProp.get.call(this, internalProp.val);
 						return propVal;
@@ -390,3 +383,3 @@ },
 
-					const propVal = internalProp.fromAttr(val);
+					const propVal = internalProp.fromAttr.call(this, val);
 					this[propName] = propVal;
@@ -393,0 +386,0 @@ }

test/cacheIds.ts

@@ -1,8 +0,8 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
 describe('cacheIds', () => {
-	it('should store elements with id attributes on the $ object', () => {
+	it('should store elements with ids in $', () => {
 		const El = me({
@@ -24,3 +24,3 @@ template: `
 
-	it('should store elements with id attributes on the $ object, with shadow DOM enabled', () => {
+	it('should store elements with ids in $, with shadow DOM enabled', () => {
 		const El = me({
@@ -27,0 +27,0 @@ shadowDom: true,

test/makeElement.ts

@@ -1,5 +0,5 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
@@ -11,5 +11,5 @@ describe('makeElement', () => {
 
-	it('should run with an empty definition', () => {
+	it('should run with empty definition', () => {
 		const El = me({});
 	});
 });

test/methods.ts

@@ -1,8 +0,8 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
 describe('methods', () => {
-	it('should attach a single method to the element prototype', () => {
+	it('should attach method to prototype', () => {
 		let calledMethod = false;
@@ -27,3 +27,3 @@
 
-	it('should attach multiple methods to the element prototype', () => {
+	it('should attach multiple methods to prototype', () => {
 		let calledMethodA = false;
@@ -64,2 +64,16 @@ let calledMethodB = false;
 	});
+
+	it('should run methods with element context', () => {
+		const El = me({
+			methods: {
+				method() {
+					assert.instanceOf(this, El);
+				},
+			},
+		});
+
+		customElements.define(customElName(), El);
+		const el = new El();
+		el.method();
+	});
 });

test/props.ts

@@ -1,8 +0,8 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
 describe('props', () => {
-	it('should work with an empty definition', () => {
+	it('should work with empty definition', () => {
 		const El = me({
@@ -13,3 +13,3 @@ props: {},
 
-	it('should work with one property defined', () => {
+	it('should work with property defined', () => {
 		const El = me({
@@ -28,3 +28,3 @@ props: {
 
-	it('should call the setter function after updating the value', () => {
+	it('should call setter after updating value', () => {
 		const El = me({
@@ -46,6 +46,22 @@ props: {
 
-	it('should use the getter function when retrieving the value', () => {
+	it('should call setter with element context', () => {
 		const El = me({
 			props: {
 				prop: {
+					set() {
+						assert.instanceOf(this, El);
+					},
+				},
+			},
+		});
+
+		customElements.define(customElName(), El);
+		const el = new El();
+		el.prop = 24;
+	});
+
+	it('should use getter when retrieving value', () => {
+		const El = me({
+			props: {
+				prop: {
 					get(val) {
@@ -65,6 +81,25 @@ return val + 24;
 
-	it('should flow to a linked attribute', () => {
+	it('should call getter with element context', () => {
 		const El = me({
 			props: {
 				prop: {
+					get() {
+						assert.instanceOf(this, El);
+						return 24;
+					},
+				},
+			},
+		});
+
+		customElements.define(customElName(), El);
+		const el = new El();
+
+		// tslint:disable-next-line no-unused-expression
+		el.prop;
+	});
+
+	it('should flow to linked attribute', () => {
+		const El = me({
+			props: {
+				prop: {
 					attr: 'prop',
@@ -86,3 +121,3 @@ },
 
-	it('should be initialized from a linked attribute', () => {
+	it('should be initialized from linked attribute', () => {
 		const El = me({
@@ -105,3 +140,3 @@ props: {
 
-	it('should properly reflect truthiness for a boolean attribute', () => {
+	it('should properly reflect truthiness for boolean attribute', () => {
 		const El = me({
@@ -123,3 +158,3 @@ props: {
 
-	it('should properly reflect falsiness for a boolean attribute', () => {
+	it('should properly reflect falsiness for boolean attribute', () => {
 		const El = me({
@@ -141,3 +176,3 @@ props: {
 
-	it('should serialize the property value with the toAttr function', () => {
+	it('should serialize value with toAttr', () => {
 		const El = me({
@@ -157,7 +192,7 @@ props: {
 
-		el.prop = 'hello';
-		assert.strictEqual(el.getAttribute('prop'), 'hello-toAttr');
+		el.prop = 24;
+		assert.strictEqual(el.getAttribute('prop'), '24-toAttr');
 	});
 
-	it('should deserialize the attribute value with the fromAttr function', () => {
+	it('should call toAttr with element context', () => {
 		const El = me({
@@ -167,2 +202,20 @@ props: {
 					attr: 'prop',
+					toAttr() {
+						assert.instanceOf(this, El);
+						return '24';
+					},
+				},
+			},
+		});
+
+		customElements.define(customElName(), El);
+		const el = new El();
+		el.prop = 24;
+	});
+
+	it('should deserialize attribute value with fromAttr', () => {
+		const El = me({
+			props: {
+				prop: {
+					attr: 'prop',
 					fromAttr(val) {
@@ -185,6 +238,24 @@ return Number.parseInt(val, 10);
 
-	it('should use the coerce function return value as the property value', () => {
+	it('should call fromAttr with element context', () => {
 		const El = me({
 			props: {
 				prop: {
+					attr: 'prop',
+					fromAttr() {
+						assert.instanceOf(this, El);
+						return 24;
+					},
+				},
+			},
+		});
+
+		const elName = customElName();
+		const el = document.createElement(elName);
+		el.setAttribute('prop', '24');
+	});
+
+	it('should use coerce return value as property value', () => {
+		const El = me({
+			props: {
+				prop: {
 					coerce(val) {
@@ -204,3 +275,3 @@ return String(val) + '-coerce';
 
-	it('should initialize the property value with init', () => {
+	it('should initialize property value with init', () => {
 		const El = me({
@@ -219,3 +290,3 @@ props: {
 
-	it('should be prefer a linked attribute initialization value over one from init', () => {
+	it('should prefer initialization from linked attribute vs init', () => {
 		const El = me({
@@ -241,3 +312,3 @@ props: {
 
-	it('should coerce the initial property value', () => {
+	it('should coerce initial value', () => {
 		const El = me({
@@ -244,0 +315,0 @@ props: {

test/ready.ts

@@ -1,8 +0,8 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
 describe('ready', () => {
-	it('should run the ready function after the template and properties have been set up', () => {
+	it('should call ready after template and properties are done', () => {
 		const El = me({
@@ -43,2 +43,13 @@ props: {
 	});
+
+	it('should call ready with element context', () => {
+		const El = me({
+			ready() {
+				assert.instanceOf(this, El);
+			},
+		});
+
+		customElements.define(customElName(), El);
+		const el = new El();
+	});
 });

test/shadowDom.ts

@@ -1,8 +0,8 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
 describe('shadowDom', () => {
-	it('should attach a shadow root if true', () => {
+	it('should attach shadow root if true', () => {
 		const El = me({
@@ -17,3 +17,3 @@ shadowDom: true,
 
-	it('should not attach a shadow root if false', () => {
+	it('should not attach shadow root if false', () => {
 		const El = me({
@@ -20,0 +20,0 @@ shadowDom: false,

test/template.ts

@@ -1,8 +0,8 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
 describe('template', () => {
-	it('should write the template to the element', () => {
+	it('should write template to element', () => {
 		const El = me({
@@ -17,3 +17,3 @@ template: 'template',
 
-	it('should write the template to the shadow DOM, if enabled', () => {
+	it('should write template to shadow DOM, if enabled', () => {
 		const El = me({
@@ -20,0 +20,0 @@ shadowDom: true,

test/templateUrl.ts

@@ -1,8 +0,8 @@
-import {assert} from 'chai';
+import { assert } from 'chai';
 
 import me from 'src/index';
-import {customElName} from './tools';
+import { customElName } from './tools';
 
 describe('templateUrl', () => {
-	it('should write the contents of a local template file to the element', () => {
+	it('should write contents of local template file to element', () => {
 		const El = me({
@@ -23,3 +23,3 @@ templateUrl: '/base/test/template.html',
 
-	it('should write the contents of a remote template file to the element', () => {
+	it('should write contents of remote template file to element', () => {
 		if (!navigator.onLine) {
@@ -47,3 +47,3 @@ throw new Error('network connectivity is required');
 
-	it('should write the contents of a template file to the shadow DOM, if enabled', () => {
+	it('should write contents of template file to shadow DOM, if enabled', () => {
 		const El = me({
@@ -50,0 +50,0 @@ template: 'template',

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

Total package byte prevSize

204467

increased by0.72%

Number of package files

36

increased by2.86%

Lines of code

1417

increased by6.38%

No dependency changes