<commit_before># ce-mixinprops

[![NPM Version][npm-image]][npm-url]
[![Downloads Stats][npm-downloads]][npm-url]

Mixin for Custom Elements (Web Components) to handle/sync properties and attributes.

## What is this?

This class mixin adds functionality to your web component (custom element) to help javascript properties and DOM element attributes be synchronised/reflected where configured. This allows for data-binding from both attributes and properties for a web component.

No hidden or internal properties/methods are added to your class(es). The only property/method that is not part of the web component standards is the `static get properties()` method (can be named anything you like) used for configuring properties. This mixin makes use of the `observedAttributes` and `attributeChangedCallback` web component methods.

This JavaScript Module (ESM) exports a `mixinPropertiesAttributes(base)` method that will return a class which extends the provided `base` class.

This was designed to help your web components follow the best practices mentioned on the [Google Developers Web Fundamentals Website](https://developers.google.com/web/fundamentals/web-components/customelements#properties_and_attributes).

## Installation

Note: This project is written with new ECMAScript features such as ESM, arrow functions, object destructuring and etc. You may need to use a transpiler / bundling application to have this be compatible on older browsers.

Install via [NPM][npm-url]
```
npm install ce-mixinprops --save
```

Or use via `import` with a CDN
```js
import { mixinPropertiesAttributes } from 'https://unpkg.com/ce-mixinprops'; // or https://cdn.jsdelivr.net/npm/ce-mixinprops
```

Or [download the latest release][github-releases], or git clone the [repository on GitHub][github-branch].

## Example

Javascript Module:

Using [lit-html](https://github.com/PolymerLabs/lit-html) as the renderer.

```js
// Before running this example, install and specify the correct import paths
import { html, render as litRender } from 'lit-html/lit-html.js';
import { mixinPropertiesAttributes } from 'ce-mixinprops/index.js';

export class exampleHello extends mixinPropertiesAttributes(HTMLElement) {
	<commit_msg>Add simple display toggle example<commit_after># ce-mixinprops

[![NPM Version][npm-image]][npm-url]
[![Downloads Stats][npm-downloads]][npm-url]

Mixin for Custom Elements (Web Components) to handle/sync properties and attributes.

## What is this?

This class mixin adds functionality to your web component (custom element) to help javascript properties and DOM element attributes be synchronised/reflected where configured. This allows for data-binding from both attributes and properties for a web component.

No hidden or internal properties/methods are added to your class(es). The only property/method that is not part of the web component standards is the `static get properties()` method (can be named anything you like) used for configuring properties. This mixin makes use of the `observedAttributes` and `attributeChangedCallback` web component methods.

This JavaScript Module (ESM) exports a `mixinPropertiesAttributes(base)` method that will return a class which extends the provided `base` class.

This was designed to help your web components follow the best practices mentioned on the [Google Developers Web Fundamentals Website](https://developers.google.com/web/fundamentals/web-components/customelements#properties_and_attributes).

## Installation

Note: This project is written with new ECMAScript features such as ESM, arrow functions, object destructuring and etc. You may need to use a transpiler / bundling application to have this be compatible on older browsers.

Install via [NPM][npm-url]
```
npm install ce-mixinprops --save
```

Or use via `import` with a CDN
```js
import { mixinPropertiesAttributes } from 'https://unpkg.com/ce-mixinprops'; // or https://cdn.jsdelivr.net/npm/ce-mixinprops
```

Or [download the latest release][github-releases], or git clone the [repository on GitHub][github-branch].

## Example 1

Javascript Module:

Simple display toggle.

```js
// Before running this example, install and specify the correct import paths
import { mixinPropertiesAttributes } from 'ce-mixinprops/index.js';

export class exampleToggle extends mixinPropertiesAttributes(HTMLElement) {
	
	static get properties() {
		return {
			show: {
				type: Boolean,
				value: true
			},
			hide: {
				type: Boolean,
				value: false
			}
		};
	}
	
	// Toggle .style.display between none and previous value
	set show(show){
		if(show) this.style.display = this._previousDisplay;
		else {
			this._previousDisplay = this.style.display || '';
			if(this._previousDisplay==='none') this._previousDisplay = '';
			this.style.display = 'none';
		}
		this.hide = !show;
	}
	
	set hide(hide){
		this.show = !hide;
	}
	
	constructor() {
		super();
		this._previousDisplay = this.style.display || '';
	}
	
}

customElements.define('example-toggle',exampleToggle);
```

HTML: (the `show` attribute will be set upon construction due to the default configured value above)

```html
Hello, <example-toggle>Beautiful</example-toggle> World!
```

Rendered Result:

```
Hello, Beautiful World!
```

Freely remove the `show` or `hide` attributes in your browser developer tools and watch the property and rendered result change. Also change the `show` and/or `hide` properties on the element object itself via your developer tools console and watch the attribute and rendered result change.

## Example 2

Javascript Module:

Using [lit-html](https://github.com/PolymerLabs/lit-html) as the renderer.

```js
// Before running this example, install and specify the correct import paths
import { html, render as litRender } from 'lit-html/lit-html.js';
import { mixinPropertiesAttributes } from 'ce-mixinprops/index.js';

export class exampleHello extends mixinPropertiesAttributes(HTMLElement) {
	
{'fraction_non_alphanumeric': 0.09143049932523617, 'fraction_numerical': 0.00033738191632928474, 'mean_word_length': 4.887785501489573, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 5, 'https://': 8, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 8, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1106278', 'n_tokens_mistral': 1673, 'n_tokens_neox': 1567, 'n_words': 647}