@lion/core
Advanced tools
@lion/core - npm Package Compare versions
Comparing version 0.3.0 to 0.4.0
@@ -6,2 +6,18 @@ # Change Log | ||
| # [0.4.0](https://github.com/ing-bank/lion/compare/@lion/core@0.3.0...@lion/core@0.4.0) (2020-01-13) | ||
| ### Bug Fixes | ||
| * refactor slot selection ([5999ea9](https://github.com/ing-bank/lion/commit/5999ea956967b449f3f04935c7facb19e2889dc9)) | ||
| ### Features | ||
| * improved storybook demos ([89b835a](https://github.com/ing-bank/lion/commit/89b835a79998c45a28093de01f69216c35009a40)) | ||
| # [0.3.0](https://github.com/ing-bank/lion/compare/@lion/core@0.2.1...@lion/core@0.3.0) (2019-11-13) | ||
@@ -8,0 +24,0 @@ |
64
index.js
@@ -6,21 +6,39 @@ /** | ||
| // lit-element | ||
| export { | ||
| css, | ||
| CSSResult, | ||
| // decorators.js | ||
| customElement, | ||
| // updating-element.js | ||
| defaultConverter, | ||
| eventOptions, | ||
| LitElement, | ||
| notEqual, | ||
| property, | ||
| query, | ||
| queryAll, | ||
| // css-tag.js | ||
| supportsAdoptingStyleSheets, | ||
| unsafeCSS, | ||
| UpdatingElement, | ||
| } from 'lit-element'; | ||
| // lit-html | ||
| export { | ||
| html, | ||
| svg, | ||
| render, | ||
| noChange, | ||
| nothing, | ||
| directive, | ||
| isDirective, | ||
| TemplateResult, | ||
| SVGTemplateResult, | ||
| AttributePart, | ||
| BooleanAttributePart, | ||
| directive, | ||
| EventPart, | ||
| html, | ||
| isDirective, | ||
| isPrimitive, | ||
| noChange, | ||
| NodePart, | ||
| nothing, | ||
| PropertyPart, | ||
| isPrimitive, | ||
| render, | ||
| svg, | ||
| SVGTemplateResult, | ||
| TemplateResult, | ||
| } from 'lit-html'; | ||
| export { render as renderShady } from 'lit-html/lib/shady-render.js'; | ||
| export { asyncAppend } from 'lit-html/directives/async-append.js'; | ||
@@ -36,28 +54,10 @@ export { asyncReplace } from 'lit-html/directives/async-replace.js'; | ||
| export { until } from 'lit-html/directives/until.js'; | ||
| // lit-element | ||
| export { | ||
| LitElement, | ||
| // css-tag.js | ||
| supportsAdoptingStyleSheets, | ||
| CSSResult, | ||
| unsafeCSS, | ||
| css, | ||
| // updating-element.js | ||
| defaultConverter, | ||
| notEqual, | ||
| UpdatingElement, | ||
| // decorators.js | ||
| customElement, | ||
| property, | ||
| query, | ||
| queryAll, | ||
| eventOptions, | ||
| } from 'lit-element'; | ||
| export { render as renderShady } from 'lit-html/lib/shady-render.js'; | ||
| // ours | ||
| export { dedupeMixin } from './src/dedupeMixin.js'; | ||
| export { DelegateMixin } from './src/DelegateMixin.js'; | ||
| export { DisabledMixin } from './src/DisabledMixin.js'; | ||
| export { DisabledWithTabIndexMixin } from './src/DisabledWithTabIndexMixin.js'; | ||
| export { LionSingleton } from './src/LionSingleton.js'; | ||
| export { SlotMixin } from './src/SlotMixin.js'; | ||
| export { DisabledMixin } from './src/DisabledMixin.js'; | ||
| export { DisabledWithTabIndexMixin } from './src/DisabledWithTabIndexMixin.js'; | ||
| export { UpdateStylesMixin } from './src/UpdateStylesMixin.js'; |
| { | ||
| "name": "@lion/core", | ||
| "version": "0.3.0", | ||
| "version": "0.4.0", | ||
| "description": "Core functionality that is shared across all Lion Web Components", | ||
@@ -38,7 +38,7 @@ "author": "ing-bank", | ||
| "devDependencies": { | ||
| "@open-wc/demoing-storybook": "^0.2.0", | ||
| "@open-wc/demoing-storybook": "^1.6.1", | ||
| "@open-wc/testing": "^2.3.4", | ||
| "sinon": "^7.2.2" | ||
| }, | ||
| "gitHead": "90e6b4ef36bb5c49cfe7e4b2b8a00128334c84ab" | ||
| "gitHead": "ca48d6e79b911530f9c7561ebd13f3abb2725534" | ||
| } |
@@ -13,21 +13,22 @@ # Core | ||
| ## Deprecations | ||
| `lion-input-amount` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an amount. | ||
| Currently all deprecations are removed due to alpha state. | ||
| ## Live Demo/Documentation | ||
| ## Deduping of mixins | ||
| > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/core) for a live demo and API documentation | ||
| ### Why is deduping of mixins necessary? | ||
| ## How to use | ||
| Imagine you are developing web components and creating ES classes for Custom Elements. You have two generic mixins (let's say `M1` and `M2`) which require independently the same even more generic mixin (`BaseMixin`). `M1` and `M2` can be used independently, that means they have to inherit from `BaseMixin` also independently. But they can be also used in combination. Sometimes `M1` and `M2` are used in the same component and can mess up the inheritance chain if `BaseMixin` is applied twice. | ||
| In other words, this may happen to the protoype chain `... -> M2 -> BaseMixin -> M1 -> BaseMixin -> ...`. | ||
| ### Installation | ||
| An example of this may be a `LocalizeMixin` used across different components and mixins. Some mixins may need it and many components need it too and can not rely on other mixins to have it by default, so must inherit from it independently. | ||
| ```sh | ||
| npm i --save @lion/core | ||
| ``` | ||
| The more generic the mixin is, the higher the chance of being appliend more than once. As a mixin author you can't control how it is used, and can't always predict it. So as a safety measure it is always recommended to create deduping mixins. | ||
| ```js | ||
| import { dedupeMixin, LitElement } from '@lion/core'; | ||
| ``` | ||
| ### Usage of dedupeMixin() | ||
| ### Example | ||
| This is an example of how to make a conventional ES mixin deduping. | ||
| ```js | ||
@@ -37,24 +38,2 @@ const BaseMixin = dedupeMixin((superClass) => { | ||
| }); | ||
| // inherits from BaseMixin | ||
| const M1 = dedupeMixin((superClass) => { | ||
| return class extends BaseMixin(superClass) { ... }; | ||
| }); | ||
| // inherits from BaseMixin | ||
| const M2 = dedupeMixin((superClass) => { | ||
| return class extends BaseMixin(superClass) { ... }; | ||
| }); | ||
| // component inherits from M1 | ||
| // MyCustomElement -> M1 -> BaseMixin -> BaseCustomElement; | ||
| class MyCustomElement extends M1(BaseCustomElement) { ... } | ||
| // component inherits from M2 | ||
| // MyCustomElement -> M2 -> BaseMixin -> BaseCustomElement; | ||
| class MyCustomElement extends M2(BaseCustomElement) { ... } | ||
| // component inherits from both M1 and M2 | ||
| // MyCustomElement -> M2 -> M1 -> BaseMixin -> BaseCustomElement; | ||
| class MyCustomElement extends M2(M1(BaseCustomElement)) { ... } | ||
| ``` |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by5.02%
32733
- Number of package files
- increased by7.14%
15
Worsened metrics
- Number of lines in readme file
- decreased by-35.59%
38
No dependency changes