diff --git a/.changeset/little-owls-perform.md b/.changeset/little-owls-perform.md new file mode 100644 index 000000000..324a8971a --- /dev/null +++ b/.changeset/little-owls-perform.md @@ -0,0 +1,46 @@ +--- +'@lion/accordion': minor +'@lion/ajax': minor +'@lion/button': minor +'@lion/calendar': minor +'@lion/checkbox-group': minor +'@lion/collapsible': minor +'@lion/combobox': minor +'@lion/core': minor +'@lion/dialog': minor +'@lion/fieldset': minor +'@lion/form': minor +'@lion/form-core': minor +'@lion/form-integrations': minor +'@lion/helpers': minor +'@lion/icon': minor +'@lion/input': minor +'@lion/input-amount': minor +'@lion/input-date': minor +'@lion/input-datepicker': minor +'@lion/input-email': minor +'@lion/input-iban': minor +'@lion/input-range': minor +'@lion/input-stepper': minor +'@lion/listbox': minor +'@lion/localize': minor +'@lion/overlays': minor +'@lion/pagination': minor +'@lion/progress-indicator': minor +'@lion/radio-group': minor +'@lion/select': minor +'@lion/select-rich': minor +'@lion/steps': minor +'@lion/switch': minor +'@lion/tabs': minor +'@lion/textarea': minor +'@lion/tooltip': minor +'@lion/validate-messages': minor +'providence-analytics': patch +--- + +Upgrade to latest Typescript. Keep in mind, some @ts-ignores were necessary, also per TS maintainer's advice. Use skipLibCheck in your TSConfig to ignore issues coming from Lion, the types are valid. + +**We also unfixed lion's dependencies (now using caret ^) on its own packages**, because it caused a lot of problems with duplicate installations for end users as well as subclassers and its end users. Both of these changes may affect subclassers in a breaking manner, hence the minor bump. + +Be sure to [read our Rationale on this change](https://lion-web.netlify.app/docs/rationales/versioning/) and what this means for you as a user. diff --git a/.changeset/odd-suns-shake.md b/.changeset/odd-suns-shake.md new file mode 100644 index 000000000..610669fdf --- /dev/null +++ b/.changeset/odd-suns-shake.md @@ -0,0 +1,5 @@ +--- +'@lion/overlays': minor +--- + +BREAKING: elevation property setter on OverlayController accepts numbers only, previously this was a number as a string. This syncs it with the getter which returns a number. diff --git a/docs/components/inputs/select-rich/features.md b/docs/components/inputs/select-rich/features.md index e722e6250..58e384e6f 100644 --- a/docs/components/inputs/select-rich/features.md +++ b/docs/components/inputs/select-rich/features.md @@ -3,7 +3,6 @@ ```js script import { LitElement, html } from '@mdjs/mdjs-preview'; import '@lion/listbox/define'; -import '@lion/listbox/define'; import '@lion/select-rich/define'; ``` diff --git a/docs/docs/rationales/TypeScript.md b/docs/docs/rationales/TypeScript.md new file mode 100644 index 000000000..58f6a1ccc --- /dev/null +++ b/docs/docs/rationales/TypeScript.md @@ -0,0 +1,18 @@ +# Rationales >> TypeScript ||30 + +[TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript. + +We've ensured that the entire Lion library is typed so that you can use it in TypeScript, but there are some caveats. + +In Lion, we rely heavily on [Mixins](https://lit.dev/docs/composition/mixins/#mixin-basics) as a pattern for abstracting certain behaviors and properties into implementable interfaces. +Since JavaScript has a one-dimensional inheritance chain, inheriting from multiple ancestors has always been tricky, the Mixin pattern is used to get around that. + +Here's the thing, Mixins have been notoriously difficult to type properly in TypeScript and in addition, we did not feel happy about adding an adhoc compilation step in our developer workflow. Therefore, we opted for typing our code with [JSDoc](https://jsdoc.app/) and using TypeScript to lint our types and generate type definition files. + +Consuming Lion as `.js` typed by JSDoc is not much different from consuming it as when they were `.ts` files, but due to Mixins being very tricky to type, we've had to use `@ts-ignore` in a couple of places, most importantly, in many of our mixins. + +For context, here's a [thread on the issue](https://github.com/microsoft/TypeScript/issues/36821) of inheritance type constraints in mixins, where a user suggested allowing to ignore the rule that causes problems. +This suggestion was declined and in [this comment](https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051), Ryan Cavanaugh explained that using `@ts-ignore` is the right way to get around the limitation here. +As a user of Lion this means that because we've got `@ts-ignore`s in our source code, you may get type errors that originate from Lion, and there's nothing we can do about that, TypeScript's stance is that sometimes rules are too conservative, and ignoring them is the correct answer. + +In order to ignore type issues coming from Lion, please use the [skipLibCheck](https://www.typescriptlang.org/tsconfig#skipLibCheck) option in your `ts.config.json`, this will ignore issues that aren't coming from your code. diff --git a/docs/docs/rationales/versioning.md b/docs/docs/rationales/versioning.md new file mode 100644 index 000000000..7128444e0 --- /dev/null +++ b/docs/docs/rationales/versioning.md @@ -0,0 +1,35 @@ +# Rationales >> Versioning Lion ||20 + +Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages. + +For example, `@lion/dialog` has a dependency on `@lion/overlays`. + +The way we now version those is with `^` carets, for example: + +```json +{ + "dependencies": { + "@lion/overlays": "^0.30.0" + } +} +``` + +This means: + +- For versions >= 1.0.0, get the latest minor of a certain major, major upgrades may contain breaking changes +- For versions < 1.0.0, get the latest patch of a certain minor, minor upgrades may contain breaking changes + +See also, [Semantic Versioning](https://semver.org/). + +In the past, we used to have fixed versioning, our rationale was as follows: + +> Given there is a subclasser that consumes lion and publishes their own component set, each installation of a certain version of that component set must have the exact same versions of lion installed, so that the experience of the end user is consistent. + +**However**, if semver is followed properly, users should never get the situation where they get diverging experiences, because that would only happen in a breaking change. +Additionally, fixing the versions led to other problems: + +- Undedupable installations of the same package. If there are two installations of `@lion/button` and one is installed as a dependency of another lion package, this installation will never be able to be deduped to another version, even if they're on the same minor. This is because the dependency is set to a fixed version, so NPM will see the two installations as incompatible and not dedupe them. For Lion, this can definitely lead to problems, especially with packages like `@lion/form-core`, `@lion/localize`, `@lion/overlays`, due to the singleton nature of some of the parts in those packages. +- Importing directly from lion as an end user when consuming a subclasser package that uses lion under the hood is dangerous. This is because you will need to always match, **exactly**, the version that is installed by the subclasser package. This means syncing your lion version with the subclasser's installed lion version every time you upgrade. +- Changesets will see (correctly) every bump in a `@lion` dependency as a semver-incompatible change for its `@lion` dependents and bump them as a result. This means a change to `@lion/core`, no matter how tiny, will bump almost every other `@lion` package "unnecessarily". This results in large changelogs that are mostly meaningless noise, hardly "human readable" which is the goal of changesets when used correctly. + +Given all this, we changed our approach to versioning and went back to using `^` carets in our versions and **our new recommendation is to depend on `@lion` with `^` carets**. This should prevent majority of undedupable installation problems our users were having, allow importing from `@lion` directly, more safely, make our changelogs cleaner and reduce our publishing bloat. diff --git a/package.json b/package.json index 819fc6d93..69ca8ecc8 100644 --- a/package.json +++ b/package.json @@ -94,7 +94,7 @@ "rollup": "^2.0.0", "sinon": "^7.2.2", "ssl-root-cas": "^1.3.1", - "typescript": "3.9.7", + "typescript": "4.5.5", "whatwg-fetch": "^3.0.0" }, "bundlesize": [ diff --git a/packages-node/providence-analytics/package.json b/packages-node/providence-analytics/package.json index 02987c144..0259d2cc5 100644 --- a/packages-node/providence-analytics/package.json +++ b/packages-node/providence-analytics/package.json @@ -53,7 +53,7 @@ "parse5": "^5.1.1", "read-package-tree": "5.3.1", "semver": "^7.1.3", - "typescript": "3.9.7" + "typescript": "4.5.5" }, "keywords": [ "analysis", diff --git a/packages/accordion/package.json b/packages/accordion/package.json index dd265e6ab..f1866d9c7 100644 --- a/packages/accordion/package.json +++ b/packages/accordion/package.json @@ -36,7 +36,7 @@ "lion-accordion.js" ], "dependencies": { - "@lion/core": "0.20.0" + "@lion/core": "^0.20.0" }, "keywords": [ "accordion", diff --git a/packages/ajax/test/Ajax.test.js b/packages/ajax/test/Ajax.test.js index 786931b9a..47954f346 100644 --- a/packages/ajax/test/Ajax.test.js +++ b/packages/ajax/test/Ajax.test.js @@ -84,9 +84,11 @@ describe('Ajax', () => { try { await ajax.fetch('/foo'); } catch (e) { - expect(e).to.be.an.instanceOf(AjaxFetchError); - expect(e.request).to.be.an.instanceOf(Request); - expect(e.response).to.be.an.instanceOf(Response); + // https://github.com/microsoft/TypeScript/issues/20024 open issue, can't type catch clause in param + const _e = /** @type {AjaxFetchError} */ (e); + expect(_e).to.be.an.instanceOf(AjaxFetchError); + expect(_e.request).to.be.an.instanceOf(Request); + expect(_e.response).to.be.an.instanceOf(Response); thrown = true; } expect(thrown).to.be.true; @@ -99,9 +101,11 @@ describe('Ajax', () => { try { await ajax.fetch('/foo'); } catch (e) { - expect(e).to.be.an.instanceOf(AjaxFetchError); - expect(e.request).to.be.an.instanceOf(Request); - expect(e.response).to.be.an.instanceOf(Response); + // https://github.com/microsoft/TypeScript/issues/20024 open issue, can't type catch clause in param + const _e = /** @type {AjaxFetchError} */ (e); + expect(_e).to.be.an.instanceOf(AjaxFetchError); + expect(_e.request).to.be.an.instanceOf(Request); + expect(_e.response).to.be.an.instanceOf(Response); thrown = true; } expect(thrown).to.be.true; @@ -344,7 +348,7 @@ describe('Ajax', () => { 'Request signal is aborted', // webkit ]; - expect(errors.includes(err.message)).to.be.true; + expect(errors.includes(/** @type {Error} */ (err).message)).to.be.true; }); }); }); diff --git a/packages/button/package.json b/packages/button/package.json index fa8f08e02..05c654bd6 100644 --- a/packages/button/package.json +++ b/packages/button/package.json @@ -39,7 +39,7 @@ "define.js" ], "dependencies": { - "@lion/core": "0.20.0" + "@lion/core": "^0.20.0" }, "keywords": [ "button", diff --git a/packages/calendar/package.json b/packages/calendar/package.json index c8845415e..96c152614 100644 --- a/packages/calendar/package.json +++ b/packages/calendar/package.json @@ -36,8 +36,8 @@ "lion-calendar.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/localize": "0.22.0" + "@lion/core": "^0.20.0", + "@lion/localize": "^0.22.0" }, "keywords": [ "calendar", diff --git a/packages/checkbox-group/package.json b/packages/checkbox-group/package.json index 442f75774..b6eaa70f8 100644 --- a/packages/checkbox-group/package.json +++ b/packages/checkbox-group/package.json @@ -39,9 +39,9 @@ "lion-checkbox-indeterminate.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8" }, "keywords": [ "checkbox-group", diff --git a/packages/collapsible/package.json b/packages/collapsible/package.json index 51e95cc11..9c837afab 100644 --- a/packages/collapsible/package.json +++ b/packages/collapsible/package.json @@ -38,7 +38,7 @@ "demo/custom-collapsible.js" ], "dependencies": { - "@lion/core": "0.20.0" + "@lion/core": "^0.20.0" }, "keywords": [ "collapsible", diff --git a/packages/combobox/package.json b/packages/combobox/package.json index 6c4868851..9d306b5e6 100644 --- a/packages/combobox/package.json +++ b/packages/combobox/package.json @@ -45,10 +45,10 @@ "docs/google-combobox/google-combobox.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/listbox": "0.11.0", - "@lion/overlays": "0.30.0" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/listbox": "^0.11.0", + "@lion/overlays": "^0.30.0" }, "keywords": [ "combobox", diff --git a/packages/core/src/DelegateMixin.js b/packages/core/src/DelegateMixin.js index 0a97e0292..4eea4e2d0 100644 --- a/packages/core/src/DelegateMixin.js +++ b/packages/core/src/DelegateMixin.js @@ -18,6 +18,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin'; */ const DelegateMixinImplementation = superclass => // eslint-disable-next-line + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends superclass { constructor() { super(); diff --git a/packages/core/src/DisabledMixin.js b/packages/core/src/DisabledMixin.js index 82c959d9e..f0ad97e46 100644 --- a/packages/core/src/DisabledMixin.js +++ b/packages/core/src/DisabledMixin.js @@ -10,6 +10,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin'; */ const DisabledMixinImplementation = superclass => // eslint-disable-next-line no-shadow + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends superclass { static get properties() { return { diff --git a/packages/core/src/DisabledWithTabIndexMixin.js b/packages/core/src/DisabledWithTabIndexMixin.js index d088b2482..f6c76ed71 100644 --- a/packages/core/src/DisabledWithTabIndexMixin.js +++ b/packages/core/src/DisabledWithTabIndexMixin.js @@ -11,6 +11,7 @@ import { DisabledMixin } from './DisabledMixin.js'; */ const DisabledWithTabIndexMixinImplementation = superclass => // eslint-disable-next-line no-shadow + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends DisabledMixin(superclass) { static get properties() { return { diff --git a/packages/core/src/SlotMixin.js b/packages/core/src/SlotMixin.js index 68403adb7..4b8e04bb4 100644 --- a/packages/core/src/SlotMixin.js +++ b/packages/core/src/SlotMixin.js @@ -14,6 +14,7 @@ import { isTemplateResult } from 'lit/directive-helpers.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const SlotMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class SlotMixin extends superclass { /** * @return {SlotsMap} diff --git a/packages/core/src/UpdateStylesMixin.js b/packages/core/src/UpdateStylesMixin.js index 9b3634ecf..267838576 100644 --- a/packages/core/src/UpdateStylesMixin.js +++ b/packages/core/src/UpdateStylesMixin.js @@ -12,6 +12,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin'; */ const UpdateStylesMixinImplementation = superclass => // eslint-disable-next-line no-shadow + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends superclass { /** * @example diff --git a/packages/core/types/DelegateMixinTypes.d.ts b/packages/core/types/DelegateMixinTypes.d.ts index 48b078efa..d4845c120 100644 --- a/packages/core/types/DelegateMixinTypes.d.ts +++ b/packages/core/types/DelegateMixinTypes.d.ts @@ -10,7 +10,7 @@ export type Delegations = { }; export declare class DelegateHost { - delegations: Delegations; + protected get delegations(): Delegations; protected _connectDelegateMixin(): void; diff --git a/packages/dialog/package.json b/packages/dialog/package.json index e9ecc66fe..2b7dd50b2 100644 --- a/packages/dialog/package.json +++ b/packages/dialog/package.json @@ -37,8 +37,8 @@ "./docs/styled-dialog-content.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/overlays": "0.30.0" + "@lion/core": "^0.20.0", + "@lion/overlays": "^0.30.0" }, "keywords": [ "dialog", diff --git a/packages/fieldset/package.json b/packages/fieldset/package.json index 2058b7ea1..02bc6fff1 100644 --- a/packages/fieldset/package.json +++ b/packages/fieldset/package.json @@ -37,8 +37,8 @@ "./docs/helpers/demo-fieldset-child.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5" }, "keywords": [ "fieldset", diff --git a/packages/form-core/package.json b/packages/form-core/package.json index 8fe684f73..c8f468103 100644 --- a/packages/form-core/package.json +++ b/packages/form-core/package.json @@ -38,8 +38,8 @@ "lion-validation-feedback.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/localize": "0.22.0" + "@lion/core": "^0.20.0", + "@lion/localize": "^0.22.0" }, "keywords": [ "field", diff --git a/packages/form-core/src/FocusMixin.js b/packages/form-core/src/FocusMixin.js index 6fbf3a8db..4b46f7d59 100644 --- a/packages/form-core/src/FocusMixin.js +++ b/packages/form-core/src/FocusMixin.js @@ -20,6 +20,7 @@ function applyFocusVisiblePolyfillWhenNeeded(node) { * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const FocusMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class FocusMixin extends superclass { /** @type {any} */ static get properties() { diff --git a/packages/form-core/src/FormControlMixin.js b/packages/form-core/src/FormControlMixin.js index 3805aa014..21eb8b63a 100644 --- a/packages/form-core/src/FormControlMixin.js +++ b/packages/form-core/src/FormControlMixin.js @@ -35,6 +35,7 @@ function uuid(prefix) { */ const FormControlMixinImplementation = superclass => // eslint-disable-next-line no-shadow, no-unused-vars + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class FormControlMixin extends FormRegisteringMixin(DisabledMixin(SlotMixin(superclass))) { /** @type {any} */ static get properties() { diff --git a/packages/form-core/src/FormatMixin.js b/packages/form-core/src/FormatMixin.js index ce80012de..62ce2f2e8 100644 --- a/packages/form-core/src/FormatMixin.js +++ b/packages/form-core/src/FormatMixin.js @@ -58,6 +58,7 @@ import { ValidateMixin } from './validate/ValidateMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const FormatMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class FormatMixin extends ValidateMixin(FormControlMixin(superclass)) { /** @type {any} */ static get properties() { diff --git a/packages/form-core/src/InteractionStateMixin.js b/packages/form-core/src/InteractionStateMixin.js index 314e591b6..92e9bb58b 100644 --- a/packages/form-core/src/InteractionStateMixin.js +++ b/packages/form-core/src/InteractionStateMixin.js @@ -19,6 +19,7 @@ import { FormControlMixin } from './FormControlMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const InteractionStateMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class InteractionStateMixin extends FormControlMixin(superclass) { /** @type {any} */ static get properties() { @@ -210,6 +211,7 @@ const InteractionStateMixinImplementation = superclass => * @param {string} type * @param {InteractionStates} meta */ + // @ts-expect-error FIXME: istatemixin should implement validatemixin, then @override is valid // eslint-disable-next-line class-methods-use-this, no-unused-vars _showFeedbackConditionFor(type, meta) { return (meta.touched && meta.dirty) || meta.prefilled || meta.submitted; diff --git a/packages/form-core/src/NativeTextFieldMixin.js b/packages/form-core/src/NativeTextFieldMixin.js index 37726237a..c4f39931a 100644 --- a/packages/form-core/src/NativeTextFieldMixin.js +++ b/packages/form-core/src/NativeTextFieldMixin.js @@ -9,6 +9,7 @@ import { FormatMixin } from './FormatMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass} superclass */ const NativeTextFieldMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class NativeTextFieldMixin extends FormatMixin(FocusMixin(FormControlMixin(superclass))) { /** @type {any} */ static get properties() { diff --git a/packages/form-core/src/choice-group/ChoiceGroupMixin.js b/packages/form-core/src/choice-group/ChoiceGroupMixin.js index 5985e985d..770955a03 100644 --- a/packages/form-core/src/choice-group/ChoiceGroupMixin.js +++ b/packages/form-core/src/choice-group/ChoiceGroupMixin.js @@ -21,6 +21,7 @@ import { InteractionStateMixin } from '../InteractionStateMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const ChoiceGroupMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class ChoiceGroupMixin extends FormRegistrarMixin(InteractionStateMixin(superclass)) { /** @type {any} */ static get properties() { diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index a34ac0e35..f49e0656a 100644 --- a/packages/form-core/src/choice-group/ChoiceInputMixin.js +++ b/packages/form-core/src/choice-group/ChoiceInputMixin.js @@ -21,6 +21,7 @@ const hasChanged = (nw, old = {}) => nw.value !== old.value || nw.checked !== ol * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const ChoiceInputMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class ChoiceInputMixin extends FormatMixin(superclass) { /** @type {any} */ static get properties() { @@ -335,6 +336,7 @@ const ChoiceInputMixinImplementation = superclass => * @override * Overridden from LionField, since the modelValue should not be cleared. */ + // @ts-expect-error FIXME: @override gives error because LionField is not superclass type, this mixin should only allow LionField extensions clear() { this.checked = false; } diff --git a/packages/form-core/src/form-group/FormGroupMixin.js b/packages/form-core/src/form-group/FormGroupMixin.js index d455d9b3b..e55c7475a 100644 --- a/packages/form-core/src/form-group/FormGroupMixin.js +++ b/packages/form-core/src/form-group/FormGroupMixin.js @@ -28,6 +28,7 @@ import { FormElementsHaveNoError } from './FormElementsHaveNoError.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const FormGroupMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class FormGroupMixin extends FormRegistrarMixin( FormControlMixin(ValidateMixin(DisabledMixin(SlotMixin(superclass)))), ) { diff --git a/packages/form-core/src/registration/FormRegisteringMixin.js b/packages/form-core/src/registration/FormRegisteringMixin.js index 540a84548..73f592116 100644 --- a/packages/form-core/src/registration/FormRegisteringMixin.js +++ b/packages/form-core/src/registration/FormRegisteringMixin.js @@ -18,6 +18,7 @@ import { dedupeMixin } from '@lion/core'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const FormRegisteringMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends superclass { constructor() { super(); diff --git a/packages/form-core/src/registration/FormRegistrarMixin.js b/packages/form-core/src/registration/FormRegistrarMixin.js index a499fd8b9..60abcd31d 100644 --- a/packages/form-core/src/registration/FormRegistrarMixin.js +++ b/packages/form-core/src/registration/FormRegistrarMixin.js @@ -25,6 +25,7 @@ import { FormRegisteringMixin } from './FormRegisteringMixin.js'; */ const FormRegistrarMixinImplementation = superclass => // eslint-disable-next-line no-shadow, no-unused-vars + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends FormRegisteringMixin(superclass) { /** @type {any} */ static get properties() { diff --git a/packages/form-core/src/registration/FormRegistrarPortalMixin.js b/packages/form-core/src/registration/FormRegistrarPortalMixin.js index ca0751138..9e9e768c9 100644 --- a/packages/form-core/src/registration/FormRegistrarPortalMixin.js +++ b/packages/form-core/src/registration/FormRegistrarPortalMixin.js @@ -21,6 +21,7 @@ import { dedupeMixin } from '@lion/core'; */ const FormRegistrarPortalMixinImplementation = superclass => // eslint-disable-next-line no-shadow, no-unused-vars + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends superclass { constructor() { super(); diff --git a/packages/form-core/src/utils/SyncUpdatableMixin.js b/packages/form-core/src/utils/SyncUpdatableMixin.js index 3b7edd1df..28c8b3c39 100644 --- a/packages/form-core/src/utils/SyncUpdatableMixin.js +++ b/packages/form-core/src/utils/SyncUpdatableMixin.js @@ -24,6 +24,7 @@ import { dedupeMixin } from '@lion/core'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const SyncUpdatableMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends superclass { constructor() { super(); diff --git a/packages/form-core/src/validate/ValidateMixin.js b/packages/form-core/src/validate/ValidateMixin.js index 65f8ea1e5..ea1883990 100644 --- a/packages/form-core/src/validate/ValidateMixin.js +++ b/packages/form-core/src/validate/ValidateMixin.js @@ -35,6 +35,7 @@ function arrayDiff(array1 = [], array2 = []) { * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ export const ValidateMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class extends FormControlMixin( SyncUpdatableMixin(DisabledMixin(SlotMixin(ScopedElementsMixin(superclass)))), ) { diff --git a/packages/form-core/test-suites/form-group/FormGroupMixin.suite.js b/packages/form-core/test-suites/form-group/FormGroupMixin.suite.js index 171dc4bf3..2ea4177f0 100644 --- a/packages/form-core/test-suites/form-group/FormGroupMixin.suite.js +++ b/packages/form-core/test-suites/form-group/FormGroupMixin.suite.js @@ -149,7 +149,7 @@ export function runFormGroupMixinSuite(cfg = {}) { error = err; } expect(error).to.be.instanceOf(TypeError); - expect(error.message).to.equal('You need to define a name'); + expect(/** @type {TypeError} */ (error).message).to.equal('You need to define a name'); console.info = orig; // restore original console }); @@ -172,7 +172,9 @@ export function runFormGroupMixinSuite(cfg = {}) { error = err; } expect(error).to.be.instanceOf(TypeError); - expect(error.message).to.equal('You can not have the same name "foo" as your parent'); + expect(/** @type {TypeError} */ (error).message).to.equal( + 'You can not have the same name "foo" as your parent', + ); console.info = orig; // restore original console }); @@ -200,7 +202,7 @@ export function runFormGroupMixinSuite(cfg = {}) { error = err; } expect(error).to.be.instanceOf(TypeError); - expect(error.message).to.equal( + expect(/** @type {TypeError} */ (error).message).to.equal( 'Name "fooBar" is already registered - if you want an array add [] to the end', ); diff --git a/packages/form-core/test/validate/Validator.test.js b/packages/form-core/test/validate/Validator.test.js index 3886ab386..b24abc89c 100644 --- a/packages/form-core/test/validate/Validator.test.js +++ b/packages/form-core/test/validate/Validator.test.js @@ -17,7 +17,7 @@ async function expectThrowsAsync(method, errorMessage) { } expect(error).to.be.an('Error', 'No error was thrown'); if (errorMessage) { - expect(error.message).to.equal(errorMessage); + expect(/** @type {Error} */ (error).message).to.equal(errorMessage); } } /** diff --git a/packages/form-integrations/package.json b/packages/form-integrations/package.json index 7ba31a791..40e93cf7a 100644 --- a/packages/form-integrations/package.json +++ b/packages/form-integrations/package.json @@ -32,29 +32,29 @@ "test": "cd ../../ && npm run test:browser -- --group form-integrations" }, "dependencies": { - "@lion/button": "0.15.0", - "@lion/checkbox-group": "0.18.8", - "@lion/combobox": "0.8.7", - "@lion/core": "0.20.0", - "@lion/fieldset": "0.19.10", - "@lion/form": "0.12.8", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8", - "@lion/input-amount": "0.14.8", - "@lion/input-date": "0.12.10", - "@lion/input-datepicker": "0.23.10", - "@lion/input-email": "0.13.10", - "@lion/input-iban": "0.16.8", - "@lion/input-range": "0.10.9", - "@lion/input-stepper": "0.6.8", - "@lion/listbox": "0.11.0", - "@lion/localize": "0.22.0", - "@lion/radio-group": "0.18.8", - "@lion/select": "0.14.8", - "@lion/select-rich": "0.28.0", - "@lion/switch": "0.18.3", - "@lion/textarea": "0.13.8", - "@lion/validate-messages": "0.7.8" + "@lion/button": "^0.15.0", + "@lion/checkbox-group": "^0.18.8", + "@lion/combobox": "^0.8.7", + "@lion/core": "^0.20.0", + "@lion/fieldset": "^0.19.10", + "@lion/form": "^0.12.8", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8", + "@lion/input-amount": "^0.14.8", + "@lion/input-date": "^0.12.10", + "@lion/input-datepicker": "^0.23.10", + "@lion/input-email": "^0.13.10", + "@lion/input-iban": "^0.16.8", + "@lion/input-range": "^0.10.9", + "@lion/input-stepper": "^0.6.8", + "@lion/listbox": "^0.11.0", + "@lion/localize": "^0.22.0", + "@lion/radio-group": "^0.18.8", + "@lion/select": "^0.14.8", + "@lion/select-rich": "^0.28.0", + "@lion/switch": "^0.18.3", + "@lion/textarea": "^0.13.8", + "@lion/validate-messages": "^0.7.8" }, "keywords": [ "form", diff --git a/packages/form/package.json b/packages/form/package.json index 28922cdf9..7cb7c8ea1 100644 --- a/packages/form/package.json +++ b/packages/form/package.json @@ -36,7 +36,7 @@ "lion-form.js" ], "dependencies": { - "@lion/fieldset": "0.19.10" + "@lion/fieldset": "^0.19.10" }, "keywords": [ "form", diff --git a/packages/helpers/package.json b/packages/helpers/package.json index 9bda47e4a..de1bf9b6f 100644 --- a/packages/helpers/package.json +++ b/packages/helpers/package.json @@ -35,7 +35,7 @@ "sb-locale-switcher.js" ], "dependencies": { - "@lion/core": "0.20.0" + "@lion/core": "^0.20.0" }, "keywords": [ "action logger", diff --git a/packages/icon/package.json b/packages/icon/package.json index 206e41a7f..0fdbf4d8c 100644 --- a/packages/icon/package.json +++ b/packages/icon/package.json @@ -37,8 +37,8 @@ "./docs/icon-resolvers.js" ], "dependencies": { - "@lion/core": "0.20.0", - "singleton-manager": "1.4.3" + "@lion/core": "^0.20.0", + "singleton-manager": "^1.4.3" }, "keywords": [ "icon", diff --git a/packages/icon/test/IconManager.test.js b/packages/icon/test/IconManager.test.js index 460a116e6..564e9b1a1 100644 --- a/packages/icon/test/IconManager.test.js +++ b/packages/icon/test/IconManager.test.js @@ -1,4 +1,4 @@ -import { nothing } from '@lion/core'; +import { nothing, html } from '@lion/core'; import { expect } from '@open-wc/testing'; import { stub } from 'sinon'; import { IconManager } from '../src/IconManager.js'; @@ -42,9 +42,9 @@ describe('IconManager', () => { it('does not allow adding a resolve for the same namespace twice', () => { const manager = new IconManager(); - manager.addIconResolver('foo', () => {}); + manager.addIconResolver('foo', () => html``); - expect(() => manager.addIconResolver('foo', () => {})).to.throw(); + expect(() => manager.addIconResolver('foo', () => html``)).to.throw(); }); it('can resolve an icon, specifying separate parameters', async () => { diff --git a/packages/input-amount/package.json b/packages/input-amount/package.json index c9e33660c..8083e313e 100644 --- a/packages/input-amount/package.json +++ b/packages/input-amount/package.json @@ -36,11 +36,11 @@ "lion-input-amount.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8", - "@lion/localize": "0.22.0", - "@lion/validate-messages": "0.7.8" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8", + "@lion/localize": "^0.22.0", + "@lion/validate-messages": "^0.7.8" }, "keywords": [ "input-amount", diff --git a/packages/input-date/package.json b/packages/input-date/package.json index 32ed0f72b..930602140 100644 --- a/packages/input-date/package.json +++ b/packages/input-date/package.json @@ -36,11 +36,11 @@ "lion-input-date.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8", - "@lion/localize": "0.22.0", - "@lion/validate-messages": "0.7.8" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8", + "@lion/localize": "^0.22.0", + "@lion/validate-messages": "^0.7.8" }, "keywords": [ "input-date", diff --git a/packages/input-datepicker/package.json b/packages/input-datepicker/package.json index 7026a65dd..43c200708 100644 --- a/packages/input-datepicker/package.json +++ b/packages/input-datepicker/package.json @@ -36,13 +36,13 @@ "lion-input-datepicker.js" ], "dependencies": { - "@lion/calendar": "0.17.0", - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input-date": "0.12.10", - "@lion/localize": "0.22.0", - "@lion/overlays": "0.30.0", - "@lion/validate-messages": "0.7.8" + "@lion/calendar": "^0.17.0", + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input-date": "^0.12.10", + "@lion/localize": "^0.22.0", + "@lion/overlays": "^0.30.0", + "@lion/validate-messages": "^0.7.8" }, "keywords": [ "calendar", diff --git a/packages/input-datepicker/test/lion-input-datepicker.test.js b/packages/input-datepicker/test/lion-input-datepicker.test.js index 984b1dde0..e04e60b5c 100644 --- a/packages/input-datepicker/test/lion-input-datepicker.test.js +++ b/packages/input-datepicker/test/lion-input-datepicker.test.js @@ -575,14 +575,15 @@ describe('', () => { const myTag = defineCE( class extends LionInputDatepicker { - /** @override */ - _calendarOverlayTemplate() { - return html` - - ${this.calendarHeading} - - `; - } + // TODO: this method doesn't exist on LionInputDatepicker, so if we re-enable these tests, they should be redone + // /** @override */ + // _calendarOverlayTemplate() { + // return html` + // + // ${this.calendarHeading} + // + // `; + // } /** @override */ _onCalendarOverlayOpened() { diff --git a/packages/input-email/package.json b/packages/input-email/package.json index 565668490..bc08d0682 100644 --- a/packages/input-email/package.json +++ b/packages/input-email/package.json @@ -36,11 +36,11 @@ "lion-input-email.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8", - "@lion/localize": "0.22.0", - "@lion/validate-messages": "0.7.8" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8", + "@lion/localize": "^0.22.0", + "@lion/validate-messages": "^0.7.8" }, "keywords": [ "input-email", diff --git a/packages/input-iban/package.json b/packages/input-iban/package.json index f13e5e237..84beccce5 100644 --- a/packages/input-iban/package.json +++ b/packages/input-iban/package.json @@ -36,11 +36,11 @@ "lion-input-iban.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8", - "@lion/localize": "0.22.0", - "@lion/validate-messages": "0.7.8", + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8", + "@lion/localize": "^0.22.0", + "@lion/validate-messages": "^0.7.8", "ibantools": "^2.2.0" }, "keywords": [ diff --git a/packages/input-range/package.json b/packages/input-range/package.json index ef3d95022..5cbf9022d 100644 --- a/packages/input-range/package.json +++ b/packages/input-range/package.json @@ -36,9 +36,9 @@ "lion-input-range.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/input": "0.15.8", - "@lion/localize": "0.22.0" + "@lion/core": "^0.20.0", + "@lion/input": "^0.15.8", + "@lion/localize": "^0.22.0" }, "keywords": [ "input-range", diff --git a/packages/input-stepper/package.json b/packages/input-stepper/package.json index 0be1fb395..ebc76bdc8 100644 --- a/packages/input-stepper/package.json +++ b/packages/input-stepper/package.json @@ -36,9 +36,9 @@ "lion-input-stepper.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8" }, "keywords": [ "input", diff --git a/packages/input/package.json b/packages/input/package.json index 90402fb55..920cc1c7b 100644 --- a/packages/input/package.json +++ b/packages/input/package.json @@ -36,7 +36,7 @@ "lion-input.js" ], "dependencies": { - "@lion/form-core": "0.15.5" + "@lion/form-core": "^0.15.5" }, "keywords": [ "input", diff --git a/packages/listbox/package.json b/packages/listbox/package.json index 7819f99dc..f95ef0932 100644 --- a/packages/listbox/package.json +++ b/packages/listbox/package.json @@ -39,8 +39,8 @@ "lion-options.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5" }, "keywords": [ "form", diff --git a/packages/listbox/src/LionOption.js b/packages/listbox/src/LionOption.js index a3be6b12d..344cbbc15 100644 --- a/packages/listbox/src/LionOption.js +++ b/packages/listbox/src/LionOption.js @@ -1,5 +1,5 @@ import { ChoiceInputMixin, FormRegisteringMixin } from '@lion/form-core'; -import { css, DisabledMixin, html, LitElement } from '@lion/core'; +import { css, DisabledMixin, html, LitElement, SlotMixin } from '@lion/core'; /** * @typedef {import('@lion/core').TemplateResult } TemplateResult @@ -14,7 +14,9 @@ import { css, DisabledMixin, html, LitElement } from '@lion/core'; * Element gets state supplied externally, reflects this to attributes, * enabling SubClassers to style based on those states */ -export class LionOption extends DisabledMixin(ChoiceInputMixin(FormRegisteringMixin(LitElement))) { +export class LionOption extends DisabledMixin( + ChoiceInputMixin(FormRegisteringMixin(SlotMixin(LitElement))), +) { /** @type {any} */ static get properties() { return { diff --git a/packages/listbox/src/ListboxMixin.js b/packages/listbox/src/ListboxMixin.js index 69e2d11fb..450e3c2b5 100644 --- a/packages/listbox/src/ListboxMixin.js +++ b/packages/listbox/src/ListboxMixin.js @@ -60,6 +60,7 @@ function uuid() { * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const ListboxMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class ListboxMixin extends FormControlMixin( ScopedElementsMixin(ChoiceGroupMixin(SlotMixin(FormRegistrarMixin(superclass)))), ) { diff --git a/packages/listbox/test-suites/ListboxMixin.suite.js b/packages/listbox/test-suites/ListboxMixin.suite.js index 22ab53ab1..eaa56ad9b 100644 --- a/packages/listbox/test-suites/ListboxMixin.suite.js +++ b/packages/listbox/test-suites/ListboxMixin.suite.js @@ -1380,7 +1380,7 @@ export function runListboxMixinSuite(customConfig = {}) { el.appendChild(optionsEl); properlyInstantiated = true; } catch (e) { - throw Error(e); + throw Error(/** @type {Error} */ (e).message); } expect(properlyInstantiated).to.be.true; diff --git a/packages/localize/package.json b/packages/localize/package.json index 9b4db5bc2..ecb29a342 100644 --- a/packages/localize/package.json +++ b/packages/localize/package.json @@ -34,8 +34,8 @@ "sideEffects": false, "dependencies": { "@bundled-es-modules/message-format": "6.0.4", - "@lion/core": "0.20.0", - "singleton-manager": "1.4.3" + "@lion/core": "^0.20.0", + "singleton-manager": "^1.4.3" }, "keywords": [ "lion", diff --git a/packages/localize/src/LocalizeMixin.js b/packages/localize/src/LocalizeMixin.js index 5ae8a8df2..3c637fe56 100644 --- a/packages/localize/src/LocalizeMixin.js +++ b/packages/localize/src/LocalizeMixin.js @@ -9,8 +9,10 @@ import { localize } from './localize.js'; /** * # LocalizeMixin - for self managed templates * @type {LocalizeMixin} + * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ const LocalizeMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class LocalizeMixin extends superclass { /** * @returns {Object.[]} diff --git a/packages/localize/src/date/getMonthNames.js b/packages/localize/src/date/getMonthNames.js index 72c2997c7..361b1df47 100644 --- a/packages/localize/src/date/getMonthNames.js +++ b/packages/localize/src/date/getMonthNames.js @@ -8,10 +8,10 @@ const monthsLocaleCache = {}; * @desc Returns month names for locale * @param {Object} [options] * @param {string} [options.locale] locale - * @param {string} [options.style=long] long, short or narrow + * @param {"long" | "numeric" | "2-digit" | "short" | "narrow"} [options.style=long] long, short or narrow * @returns {string[]} like: ['January', 'February', ...etc]. */ -export function getMonthNames({ locale, style = 'long' } = {}) { +export function getMonthNames({ locale = 'en-GB', style = 'long' } = {}) { let months = monthsLocaleCache[locale] && monthsLocaleCache[locale][style]; if (months) { diff --git a/packages/localize/src/date/getWeekdayNames.js b/packages/localize/src/date/getWeekdayNames.js index e4bb00c6a..c01d0392d 100644 --- a/packages/localize/src/date/getWeekdayNames.js +++ b/packages/localize/src/date/getWeekdayNames.js @@ -22,7 +22,9 @@ function getCachedWeekdayNames(locale) { narrow: [], }; - ['long', 'short', 'narrow'].forEach(style => { + /** @type {Array<"long" | "short" | "narrow">} style */ + const styles = ['long', 'short', 'narrow']; + styles.forEach(style => { weekdays = weekdayNamesCache[locale][style]; const formatter = new Intl.DateTimeFormat(locale, { weekday: style, @@ -48,7 +50,7 @@ function getCachedWeekdayNames(locale) { * @param {number} [options.firstDayOfWeek=0] 0 (Sunday), 1 (Monday), etc... * @returns {string[]} like: ['Sunday', 'Monday', 'Tuesday', ...etc]. */ -export function getWeekdayNames({ locale, style = 'long', firstDayOfWeek = 0 } = {}) { +export function getWeekdayNames({ locale = 'en-GB', style = 'long', firstDayOfWeek = 0 } = {}) { const weekdays = getCachedWeekdayNames(locale)[style]; const orderedWeekdays = []; for (let i = firstDayOfWeek; i < firstDayOfWeek + 7; i += 1) { diff --git a/packages/localize/test/LocalizeManager.test.js b/packages/localize/test/LocalizeManager.test.js index 7cd880741..decd6f54c 100644 --- a/packages/localize/test/LocalizeManager.test.js +++ b/packages/localize/test/LocalizeManager.test.js @@ -296,7 +296,7 @@ describe('LocalizeManager', () => { }); } catch (e) { expect(e).to.be.instanceof(Error); - expect(e.message).to.equal( + expect(/** @type {Error} */ (e).message).to.equal( 'Data for namespace "my-component" and locale "en-GB" could not be loaded. ' + 'Make sure you have data for locale "en-GB" (and/or generic language "en").', ); @@ -356,7 +356,7 @@ describe('LocalizeManager', () => { }); } catch (e) { expect(e).to.be.instanceof(Error); - expect(e.message).to.equal( + expect(/** @type {Error} */ (e).message).to.equal( 'Data for namespace "my-component" and current locale "nl-NL" or fallback locale "en-GB" could not be loaded. ' + 'Make sure you have data either for locale "nl-NL" (and/or generic language "nl") or for fallback "en-GB" (and/or "en").', ); diff --git a/packages/localize/test/date/formatDate.test.js b/packages/localize/test/date/formatDate.test.js index 86008878a..fef92ef11 100644 --- a/packages/localize/test/date/formatDate.test.js +++ b/packages/localize/test/date/formatDate.test.js @@ -39,6 +39,10 @@ const SUPPORTED_LOCALES = { 'zh-Hant-TW': 'Chinese (Traditional Han, Taiwan)', }; +/** + * @typedef {import('../../types/LocalizeMixinTypes').FormatDateOptions} FormatDateOptions + */ + describe('formatDate', () => { beforeEach(() => { localizeTearDown(); @@ -64,6 +68,7 @@ describe('formatDate', () => { it('displays the date based on options', async () => { const testDate = new Date('2012/05/21'); + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -83,6 +88,7 @@ describe('formatDate', () => { }); it('displays Hungarian dates correctly', async () => { + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -99,6 +105,7 @@ describe('formatDate', () => { }); it('displays Bulgarian dates correctly', async () => { + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -118,6 +125,7 @@ describe('formatDate', () => { }); it('displays US dates correctly', async () => { + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -137,6 +145,7 @@ describe('formatDate', () => { }); it('handles locales in options', async () => { + /** @type {FormatDateOptions} */ let options = { weekday: 'long', year: 'numeric', @@ -195,6 +204,7 @@ describe('formatDate', () => { Object.keys(SUPPORTED_LOCALES).forEach(locale => { it(`handles options without year for locale: ${locale}`, async () => { + /** @type {FormatDateOptions} */ const options = { weekday: 'long', month: 'long', @@ -208,6 +218,7 @@ describe('formatDate', () => { }); it('handles options without month', async () => { + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -218,6 +229,7 @@ describe('formatDate', () => { }); it('handles options without day', async () => { + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -256,6 +268,7 @@ describe('formatDate', () => { postProcessors.set('nl-NL', upperCaseProcessor); postProcessors.set('de-DE', lowerCaseProcessor); + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -276,6 +289,7 @@ describe('formatDate', () => { it('displays the appropriate date after post processor set in localize', async () => { const testDate = new Date('2012/05/21'); + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', @@ -306,6 +320,7 @@ describe('formatDate', () => { postProcessors.set('nl-NL', upperCaseProcessor); postProcessors.set('de-DE', upperCaseProcessor); + /** @type {FormatDateOptions} */ const options = { weekday: 'long', year: 'numeric', diff --git a/packages/overlays/package.json b/packages/overlays/package.json index 6968eb56a..204f7e7d3 100644 --- a/packages/overlays/package.json +++ b/packages/overlays/package.json @@ -37,9 +37,9 @@ "./docs/applyDemoOverlayStyles.js" ], "dependencies": { - "@lion/core": "0.20.0", + "@lion/core": "^0.20.0", "@popperjs/core": "^2.5.4", - "singleton-manager": "1.4.3" + "singleton-manager": "^1.4.3" }, "keywords": [ "lion", diff --git a/packages/overlays/src/ArrowMixin.js b/packages/overlays/src/ArrowMixin.js index 6006dacd7..4636ecf34 100644 --- a/packages/overlays/src/ArrowMixin.js +++ b/packages/overlays/src/ArrowMixin.js @@ -14,6 +14,7 @@ import { OverlayMixin } from './OverlayMixin.js'; * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ export const ArrowMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class ArrowMixin extends OverlayMixin(superclass) { static get properties() { return { diff --git a/packages/overlays/src/OverlayController.js b/packages/overlays/src/OverlayController.js index e8b83902f..7e0f54eaa 100644 --- a/packages/overlays/src/OverlayController.js +++ b/packages/overlays/src/OverlayController.js @@ -416,14 +416,14 @@ export class OverlayController extends EventTargetShim { } /** - * @param {string} value + * @param {number} value */ set elevation(value) { if (this.contentWrapperNode) { - this.contentWrapperNode.style.zIndex = value; + this.contentWrapperNode.style.zIndex = `${value}`; } if (this.backdropNode) { - this.backdropNode.style.zIndex = value; + this.backdropNode.style.zIndex = `${value}`; } } diff --git a/packages/overlays/src/OverlayMixin.js b/packages/overlays/src/OverlayMixin.js index c207da793..65224fdcb 100644 --- a/packages/overlays/src/OverlayMixin.js +++ b/packages/overlays/src/OverlayMixin.js @@ -10,8 +10,10 @@ import { isEqualConfig } from './utils/is-equal-config.js'; /** * @type {OverlayMixin} + * @param {import('@open-wc/dedupe-mixin').Constructor} superclass */ export const OverlayMixinImplementation = superclass => + // @ts-ignore https://github.com/microsoft/TypeScript/issues/36821#issuecomment-588375051 class OverlayMixin extends superclass { static get properties() { return { @@ -155,7 +157,7 @@ export const OverlayMixinImplementation = superclass => if (this._overlayContentNode) { this._overlayContentNode.removeEventListener( 'close-overlay', - this.__closeEventInContentNodeHandler, + /** @type {EventListener} */ (this.__closeEventInContentNodeHandler), ); } } @@ -173,16 +175,16 @@ export const OverlayMixinImplementation = superclass => } disconnectedCallback() { - if (super.disconnectedCallback) { - super.disconnectedCallback(); - } + super.disconnectedCallback(); if (this._overlayCtrl) { this._teardownOverlayCtrl(); } } get _overlayInvokerNode() { - return Array.from(this.children).find(child => child.slot === 'invoker'); + return /** @type {HTMLElement | undefined} */ ( + Array.from(this.children).find(child => child.slot === 'invoker') + ); } /** @@ -194,7 +196,9 @@ export const OverlayMixinImplementation = superclass => } get _overlayBackdropNode() { - return Array.from(this.children).find(child => child.slot === 'backdrop'); + return /** @type {HTMLElement | undefined} */ ( + Array.from(this.children).find(child => child.slot === 'backdrop') + ); } get _overlayContentNode() { @@ -203,11 +207,13 @@ export const OverlayMixinImplementation = superclass => Array.from(this.children).find(child => child.slot === 'content') || this.config.contentNode; } - return this._cachedOverlayContentNode; + return /** @type {HTMLElement} */ (this._cachedOverlayContentNode); } get _overlayContentWrapperNode() { - return this.shadowRoot.querySelector('#overlay-content-node-wrapper'); + return /** @type {HTMLElement | undefined} */ ( + this.shadowRoot?.querySelector('#overlay-content-node-wrapper') + ); } /** @protected */ diff --git a/packages/overlays/test/OverlayController.test.js b/packages/overlays/test/OverlayController.test.js index 68857ea40..de1f4e41e 100644 --- a/packages/overlays/test/OverlayController.test.js +++ b/packages/overlays/test/OverlayController.test.js @@ -1367,7 +1367,7 @@ describe('OverlayController', () => { }); properlyInstantiated = true; } catch (e) { - throw new Error(e); + throw new Error(/** @type {Error} */ (e).message); } expect(properlyInstantiated).to.be.true; }); diff --git a/packages/overlays/types/OverlayMixinTypes.d.ts b/packages/overlays/types/OverlayMixinTypes.d.ts index f506a4699..e8d0cd580 100644 --- a/packages/overlays/types/OverlayMixinTypes.d.ts +++ b/packages/overlays/types/OverlayMixinTypes.d.ts @@ -5,7 +5,7 @@ import { OverlayController } from '../src/OverlayController.js'; export interface DefineOverlayConfig { /** The interactive element (usually a button) invoking the dialog or tooltip */ - invokerNode: HTMLElement; + invokerNode?: HTMLElement; /** The element that is used to position the overlay content relative to. Usually, this is the same element as invokerNode. Should only be provided when invokerNode should not be positioned against */ referenceNode?: HTMLElement; /** The most important element: the overlay itself */ diff --git a/packages/pagination/package.json b/packages/pagination/package.json index 612ee7948..e43f978c3 100644 --- a/packages/pagination/package.json +++ b/packages/pagination/package.json @@ -36,8 +36,8 @@ "lion-pagination.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/localize": "0.22.0" + "@lion/core": "^0.20.0", + "@lion/localize": "^0.22.0" }, "keywords": [ "lion", diff --git a/packages/progress-indicator/package.json b/packages/progress-indicator/package.json index 0464db022..08080b6a4 100644 --- a/packages/progress-indicator/package.json +++ b/packages/progress-indicator/package.json @@ -36,8 +36,8 @@ "lion-progress-indicator.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/localize": "0.22.0" + "@lion/core": "^0.20.0", + "@lion/localize": "^0.22.0" }, "keywords": [ "lion", diff --git a/packages/radio-group/package.json b/packages/radio-group/package.json index 74edb57dd..bda3255bf 100644 --- a/packages/radio-group/package.json +++ b/packages/radio-group/package.json @@ -38,9 +38,9 @@ "lion-radio-group.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/input": "0.15.8" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/input": "^0.15.8" }, "keywords": [ "lion", diff --git a/packages/select-rich/index.js b/packages/select-rich/index.js index d3f128537..0b34f75aa 100644 --- a/packages/select-rich/index.js +++ b/packages/select-rich/index.js @@ -1,10 +1,11 @@ /** - * @deprecated + * !deprecated * Import here for backwards compatibility */ export { LionOptions } from '@lion/listbox'; + /** - * @deprecated + * !deprecated * Import here for backwards compatibility */ export { LionOption } from '@lion/listbox'; diff --git a/packages/select-rich/lion-option.js b/packages/select-rich/lion-option.js index 81413b3fb..690748366 100644 --- a/packages/select-rich/lion-option.js +++ b/packages/select-rich/lion-option.js @@ -1,5 +1,5 @@ /** - * @deprecated + * !deprecated * Import here for backwards compatibility */ import '@lion/listbox/define-option'; diff --git a/packages/select-rich/lion-options.js b/packages/select-rich/lion-options.js index f42e14d2d..314c4e49a 100644 --- a/packages/select-rich/lion-options.js +++ b/packages/select-rich/lion-options.js @@ -1,5 +1,5 @@ /** - * @deprecated + * !deprecated * Import here for backwards compatibility */ import '@lion/listbox/define-options'; diff --git a/packages/select-rich/package.json b/packages/select-rich/package.json index f5fff6689..ea25c5b1f 100644 --- a/packages/select-rich/package.json +++ b/packages/select-rich/package.json @@ -40,11 +40,11 @@ "lion-select-rich.js" ], "dependencies": { - "@lion/button": "0.15.0", - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/listbox": "0.11.0", - "@lion/overlays": "0.30.0" + "@lion/button": "^0.15.0", + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/listbox": "^0.11.0", + "@lion/overlays": "^0.30.0" }, "keywords": [ "field", diff --git a/packages/select-rich/test/lion-select-rich-dialog-integration.test.js b/packages/select-rich/test/lion-select-rich-dialog-integration.test.js index 4dbbb7130..d9cc88c3b 100644 --- a/packages/select-rich/test/lion-select-rich-dialog-integration.test.js +++ b/packages/select-rich/test/lion-select-rich-dialog-integration.test.js @@ -50,7 +50,7 @@ describe('Select Rich Integration tests', () => { `); properlyInstantiated = true; } catch (e) { - throw new Error(e); + throw new Error(/** @type {Error} */ (e).message); } expect(properlyInstantiated).to.be.true; diff --git a/packages/select-rich/test/lion-select-rich-interaction.test.js b/packages/select-rich/test/lion-select-rich-interaction.test.js index eeb1a9d06..4ba4f70e2 100644 --- a/packages/select-rich/test/lion-select-rich-interaction.test.js +++ b/packages/select-rich/test/lion-select-rich-interaction.test.js @@ -14,13 +14,18 @@ import '@lion/select-rich/define'; * @param {LionSelectRich} lionSelectEl */ function getNodes(lionSelectEl) { - // @ts-ignore protected members allowed in test const { + // @ts-ignore protected members allowed in test _invokerNode: invoker, + // @ts-ignore protected members allowed in test _feedbackNode: feedback, + // @ts-ignore protected members allowed in test _labelNode: label, + // @ts-ignore protected members allowed in test _helpTextNode: helpText, + // @ts-ignore protected members allowed in test _listboxNode: listbox, + // @ts-ignore protected members allowed in test } = lionSelectEl; return { invoker, diff --git a/packages/select/package.json b/packages/select/package.json index 6108b4be7..cdad7578d 100644 --- a/packages/select/package.json +++ b/packages/select/package.json @@ -36,8 +36,8 @@ "lion-select.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5" }, "keywords": [ "lion", diff --git a/packages/steps/package.json b/packages/steps/package.json index 692171f68..329e9e135 100644 --- a/packages/steps/package.json +++ b/packages/steps/package.json @@ -38,7 +38,7 @@ "lion-steps.js" ], "dependencies": { - "@lion/core": "0.20.0" + "@lion/core": "^0.20.0" }, "keywords": [ "lion", diff --git a/packages/steps/test/lion-steps.test.js b/packages/steps/test/lion-steps.test.js index 1fc3213ff..37ba286db 100644 --- a/packages/steps/test/lion-steps.test.js +++ b/packages/steps/test/lion-steps.test.js @@ -18,6 +18,7 @@ const fixture = /** @type {(arg: TemplateResult) => Promise} */ (_fix * @param {Object} expected * @param {string} expected.transitions * @param {string} expected.statuses + * @returns {Promise} */ async function checkWorkflow(steps, expected) { return new Promise(resolve => { diff --git a/packages/switch/package.json b/packages/switch/package.json index 5a03c4ebd..79d6c5fd3 100644 --- a/packages/switch/package.json +++ b/packages/switch/package.json @@ -38,9 +38,9 @@ "lion-switch-button.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", - "@lion/helpers": "0.9.6" + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", + "@lion/helpers": "^0.9.6" }, "keywords": [ "lion", diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 2a75fd3f1..16c54aabd 100644 --- a/packages/tabs/package.json +++ b/packages/tabs/package.json @@ -36,7 +36,7 @@ "lion-tabs.js" ], "dependencies": { - "@lion/core": "0.20.0" + "@lion/core": "^0.20.0" }, "keywords": [ "lion", diff --git a/packages/textarea/package.json b/packages/textarea/package.json index 19ac3c27d..920d8f171 100644 --- a/packages/textarea/package.json +++ b/packages/textarea/package.json @@ -36,8 +36,8 @@ "lion-textarea.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/form-core": "0.15.5", + "@lion/core": "^0.20.0", + "@lion/form-core": "^0.15.5", "@types/autosize": "^3.0.7", "autosize": "4.0.2" }, diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index ee5c72efb..4e4468677 100644 --- a/packages/tooltip/package.json +++ b/packages/tooltip/package.json @@ -36,8 +36,8 @@ "lion-tooltip.js" ], "dependencies": { - "@lion/core": "0.20.0", - "@lion/overlays": "0.30.0" + "@lion/core": "^0.20.0", + "@lion/overlays": "^0.30.0" }, "keywords": [ "lion", diff --git a/packages/validate-messages/package.json b/packages/validate-messages/package.json index ae9f13d64..7fd0fdb1d 100644 --- a/packages/validate-messages/package.json +++ b/packages/validate-messages/package.json @@ -32,8 +32,8 @@ "test": "cd ../../ && npm run test:browser -- --group validate-messages" }, "dependencies": { - "@lion/form-core": "0.15.5", - "@lion/localize": "0.22.0" + "@lion/form-core": "^0.15.5", + "@lion/localize": "^0.22.0" }, "keywords": [ "feedback", diff --git a/scripts/lint-versions.js b/scripts/lint-versions.js index 9d6c330f9..344910ede 100644 --- a/scripts/lint-versions.js +++ b/scripts/lint-versions.js @@ -38,7 +38,13 @@ function compareVersions(versionsA, versionsB) { let output = ''; const newVersions = { ...versionsA }; Object.keys(versionsB).forEach(dep => { - if (versionsA[dep] && versionsB[dep] && versionsA[dep] !== versionsB[dep]) { + if ( + versionsA[dep] && + versionsB[dep] && + `^${versionsA[dep]}` !== versionsB[dep] && // allow carets + `~${versionsA[dep]}` !== versionsB[dep] && // allow tildes + versionsA[dep] !== versionsB[dep] // allow fixed + ) { output += ` - "${dep}" should be "${versionsA[dep]}" but is "${versionsB[dep]}"\n`; } if (!newVersions[dep]) { diff --git a/yarn.lock b/yarn.lock index dbd86e98c..748fd6954 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11734,10 +11734,10 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@3.9.7: - version "3.9.7" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.7.tgz#98d600a5ebdc38f40cb277522f12dc800e9e25fa" - integrity sha512-BLbiRkiBzAwsjut4x/dsibSTB6yWpwT5qWmC2OfuCg3GgVQCSgMs4vEctYPhsaGtd0AeuuHMkjZ2h2WG8MSzRw== +typescript@4.5.5: + version "4.5.5" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.5.5.tgz#d8c953832d28924a9e3d37c73d729c846c5896f3" + integrity sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA== typescript@~4.3.2: version "4.3.5"