🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more →
Socket
DemoInstallSign in
Socket
DemoInstallSign in

create-interface

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

create-interface - npm Package Compare versions

Comparing version

0.0.2
to
0.0.3

4

create-interface.js
/**
* Extends a built-in interface.
* Extends an HTML interface.
* Similar to class someElement extends HTMLElement {}
*
* @param {string} name
* @param {string} name.
* @param {Object} newTarget - The target to create an instance from.

@@ -7,0 +7,0 @@ * @param {Object} callbacks - An object literal of declarative callback.

2

package.json
{
"name": "create-interface",
"version": "0.0.2",
"version": "0.0.3",
"main": "create-interface.js",

@@ -5,0 +5,0 @@ "jsnext:main": "create-interface.js",

62

README.md
# Create Interface
### Create custom elements for declarative and functional programming
_createInterface_ is a declarative method that creates a custom-element without using the _class_ syntax.
## Create custom elements for declarative and functional programming
_createInterface_ is preferred for declarative and functional programming paradigm styles. _createInterface_ inherits in the mannerism of
> #### _createInterface_ is a [declarative](https://en.wikipedia.org/wiki/Declarative_programming) method that creates a [custom-element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) without using the [_class_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) syntax.
_createInterface_ is preferred for declarative and [functional programming](https://wiki.haskell.org/Functional_programming#Features_of_functional_languages) paradigm styles. _createInterface_ inherits in the mannerism of
`Object.assign`. It will create a new custom element from a base element whilst inheriting the base element's callback functions.
There are two way to use _createInterface_.
## Create a Custom Element from a Built-in Element
### Install
`npm install create-interface` or `yarn add create-interface`
## Create an Autonomous/ Built-in Custom Element from an HTML Interface
```javascript
import createInterface from 'create-interface';
const newCustomElement = createInterface('new-cusomt-element', HTMLElement, {...callbacks});
const newCustomElement = createInterface(
'new-cusomt-element',
HTMLElement,
{...callbacks}
);

@@ -23,3 +31,7 @@ customElements.define('new-cusomt-element', newCustomElement);

const anotherCustomElement = createInterface('new-cusomt-element', newCustomElement, {...newCallbacks});
const anotherCustomElement = createInterface(
'new-cusomt-element',
newCustomElement,
{...newCallbacks}
);

@@ -31,28 +43,28 @@ customElements.define('another-cusomt-element', anotherCustomElement);

Lifecycle callbacks are smilar to native callbacks with some slight differences:
> The lifecycle callbacks are smilar to native _customElement_ callbacks but with some slight differences:
### adopted(element)
_adopted_ is the equivalence of _adoptedCallback_ but without context. Instead it provides the active _element_ as an argument.
### adopted(element)
> **_adopted_** is the equivalence of [**_adoptedCallback_**](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) but without context. Instead it provides the active _element_ as an argument.
### attributeChanged(element)
_attributeChanged_ is the equivalence of _attributeChangedCallback_ but without context. It provides the following argumetnts respectively:
- _element_
- _name_
- _oldValue_
- _newValue_
### attributeChanged(element)
> **_attributeChanged_** is the equivalence of [**_attributeChangedCallback_**](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) but without context. It provides the following argumetnts respectively:
> - _element_
> - _name_
> - _oldValue_
> - _newValue_
### disconnected(element)
_disconnected_ is the equivalence of _disconnectedCallback_ but without context. Instead it provides the active _element_ as an argument.
### disconnected(element)
> **_disconnected_** is the equivalence of [**_disconnectedCallback_**](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) but without context. Instead it provides the active _element_ as an argument.
### connected(element)
_connected_ is the equivalence of _connectedCallback_ but without context. Instead it provides the active _element_ as an argument.
### connected(element)
> **_connected_** is the equivalence of [**_connectedCallback_**](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) but without context. Instead it provides the active _element_ as an argument.
### observedAttributes(element)
_observedAttributes_ is the equivalence of _static get observedAttributes()_ but without context. It expects an array of attribute names as a return value.
### observedAttributes(element)
> **_observedAttributes_** is the equivalence of [**_static get observedAttributes()_**](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements#Using_the_lifecycle_callbacks) but without context. It expects an array of attribute names as a return value.
## Browser Support
This method does not provide polyfills. It is intended to support enviroments that support Custom Elements (V1).
Check for native support [here](https://caniuse.com/#feat=custom-elementsv1):
### Browser Support
> This method does not provide polyfills. It is intended to support enviroments that support Custom Elements (V1).
Check for native support [here](https://caniuse.com/#feat=custom-elementsv1):
MIT 2019 Julien Etienne
MIT 2019 Julien Etienne