Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: update to lit@3.0 #4292

Merged
merged 2 commits into from
Apr 29, 2024
Merged

chore: update to lit@3.0 #4292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3f6c830
chore: use latest lit dependencies
Westbrook Apr 23, 2024
f55f882
refactor: update implementation for new lit timing
Westbrook Apr 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions package.json
View file
Open in desktop
Expand Up @@ -98,10 +98,10 @@
"@commitlint/config-lerna-scopes": "^19.0.0",
"@custom-elements-manifest/analyzer": "^0.9.0",
"@geometricpanda/storybook-addon-badges": "^2.0.2",
"@lit/react": "^1.0.2",
"@lit/react": "^1.0.4",
"@netlify/build": "^29.1.0",
"@open-wc/dev-server-hmr": "^0.2.0",
"@open-wc/testing": "^3.2.0",
"@open-wc/testing": "^4.0.0",
"@playwright/test": "^1.43.1",
"@rollup/plugin-commonjs": "^25.0.7",
"@rollup/plugin-json": "^6.0.1",
Expand Down Expand Up @@ -165,9 +165,9 @@
"latest-version": "^7.0.0",
"lerna": "^6.6.2",
"lightningcss": "^1.24.0",
"lit": "^2.5.0",
"lit": "^2.5.0 || ^3.1.3",
"lit-analyzer": "^2.0.3",
"lit-html": "^2.4.0",
"lit-html": "^2.4.0 || ^3.1.3",
"mocha-junit-reporter": "^2.0.2",
"netlify-cli": "^15.9.0",
"next": "^14",
Expand Down
2 changes: 1 addition & 1 deletion packages/alert-dialog/package.json
View file
Open in desktop
Expand Up @@ -57,7 +57,7 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^2.0.0",
"@lit-labs/observers": "^2.0.2",
"@spectrum-web-components/base": "^0.42.2",
"@spectrum-web-components/button": "^0.42.2",
"@spectrum-web-components/button-group": "^0.42.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/menu/package.json
View file
Open in desktop
Expand Up @@ -84,7 +84,7 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^2.0.0",
"@lit-labs/observers": "^2.0.2",
"@spectrum-web-components/action-button": "^0.42.2",
"@spectrum-web-components/base": "^0.42.2",
"@spectrum-web-components/divider": "^0.42.2",
Expand Down
26 changes: 15 additions & 11 deletions packages/menu/test/submenu.test.ts
View file
Open in desktop
Expand Up @@ -197,13 +197,21 @@ describe('Submenu', () => {
await sendKeys({
press: 'Tab',
});
await elementUpdated(this.el);
await nextFrame();
await nextFrame();
await sendKeys({
press: 'ArrowDown',
});
await elementUpdated(this.rootItem);
expect(this.rootItem.active).to.be.false;
expect(this.rootItem.focused).to.be.true;
expect(this.rootItem.open).to.be.false;
await elementUpdated(this.el);
await nextFrame();
await nextFrame();
expect(this.rootItem.active, 'not active').to.be.false;
expect(
this.rootItem.focused,
`focused: ${document.activeElement?.localName}`
).to.be.true;
expect(this.rootItem.open, 'not open').to.be.false;

const opened = oneEvent(this.rootItem, 'sp-opened');
await sendKeys({
Expand Down Expand Up @@ -541,12 +549,10 @@ describe('Submenu', () => {
</sp-menu>
`);
await elementUpdated(this.el);
await nextFrame();
await nextFrame();

this.rootItem = this.el.querySelector('.root') as MenuItem;
await elementUpdated(this.rootItem);
});
describe('selects', () => {
describe.skip('selects', () => {
selectWithPointer();
selectsWithKeyboardData.map((testData) => {
selectsWithKeyboard(testData);
Expand Down Expand Up @@ -583,10 +589,8 @@ describe('Submenu', () => {
</sp-menu>
`);
await elementUpdated(this.el);
await nextFrame();
await nextFrame();

this.rootItem = this.el.querySelector('.root') as MenuItem;
await elementUpdated(this.rootItem);
});
describe('selects', () => {
selectWithPointer();
Expand Down
5 changes: 1 addition & 4 deletions packages/overlay/src/Overlay.ts
View file
Open in desktop
Expand Up @@ -562,10 +562,7 @@ export class Overlay extends OverlayFeatures {
`${this.tagName.toLowerCase()}-${randomID()}`
);
}
if (
changes.has('open') &&
(typeof changes.get('open') !== 'undefined' || this.open)
) {
if (changes.has('open') && (this.hasUpdated || this.open)) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if we already trying to find 'open' attributes from the PropertyValues do we also need a check on this.open ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This specific says, when open has changed, but NOT when open has changed from undefined (its initial value) to false (its default value). That was the if only returns true when it's not the first update or the end user applied open === true in the DOM of the element before it was upgraded.

this.manageOpen(changes.get('open'));
}
if (changes.has('trigger')) {
Expand Down
25 changes: 11 additions & 14 deletions packages/overlay/test/index.ts
View file
Open in desktop
Expand Up @@ -31,7 +31,6 @@ import { Popover } from '@spectrum-web-components/popover';
import '@spectrum-web-components/theme/sp-theme.js';
import { sendMouse } from '../../../test/plugins/browser.js';
import { sendKeys } from '@web/test-runner-commands';
import { isChrome } from '@spectrum-web-components/shared';

export const runOverlayTriggerTests = (type: string): void => {
describe(`Overlay Trigger - ${type}`, () => {
Expand All @@ -47,6 +46,7 @@ export const runOverlayTriggerTests = (type: string): void => {
justify-content: center;
}
</style>
<input type="text" />
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this deliberate?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, the test was giving issues getting into "focus visible", and this makes it easier to enforce that by allowing the test to Tab from the input to the test element.

<overlay-trigger id="trigger" placement="top">
<sp-button
id="outer-button"
Expand Down Expand Up @@ -106,12 +106,6 @@ export const runOverlayTriggerTests = (type: string): void => {
</div>
`
);
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();
await nextFrame();

this.innerTrigger = this.testDiv.querySelector(
'#inner-trigger'
Expand All @@ -134,6 +128,16 @@ export const runOverlayTriggerTests = (type: string): void => {
this.hoverContent = this.testDiv.querySelector(
'#hover-content'
) as HTMLDivElement;

await Promise.all([
this.innerTrigger.updateComplete,
this.outerTrigger.updateComplete,
this.innerButton.updateComplete,
this.outerButton.updateComplete,
this.innerClickContent.updateComplete,
this.outerClickContent.updateComplete,
]);
this.testDiv.querySelector('input').focus();
});

it('opens a popover', async function () {
Expand Down Expand Up @@ -451,13 +455,6 @@ export const runOverlayTriggerTests = (type: string): void => {
});

it('escape closes an open popover', async function () {
if (isChrome()) {
// Does a werid test time bleed that allows the `Escape` press through to the
// parent modal. Manual testing does not exhibit this interaction, which seems
// to step from how long the `Escape` button in down.
this.skip();
}

this.outerTrigger.type = 'modal';
this.innerTrigger.type = 'modal';
const outerOpen = oneEvent(this.outerButton, 'sp-opened');
Expand Down
9 changes: 5 additions & 4 deletions packages/overlay/test/overlay-element.test.ts
View file
Open in desktop
Expand Up @@ -38,6 +38,7 @@ import {
SlottableRequestEvent,
} from '../src/slottable-request-event.js';
import { stub } from 'sinon';
import { OverlayStateEvent } from '@spectrum-web-components/overlay/src/events.js';

const OVERLAY_TYPES = ['modal', 'page', 'hint', 'auto', 'manual'] as const;
type OverlayTypes = typeof OVERLAY_TYPES[number];
Expand Down Expand Up @@ -950,7 +951,7 @@ describe('sp-overlay', () => {

expect(el.open).to.be.false;

const opened = oneEvent(el, 'sp-opened');
const opened = oneEvent<OverlayStateEvent>(el, 'sp-opened');
el.open = true;
let { overlay } = await opened;
expect(el === overlay).to.be.true;
Expand All @@ -968,7 +969,7 @@ describe('sp-overlay', () => {

expect(el.open).to.be.true;

const closed = oneEvent(el, 'sp-closed');
const closed = oneEvent<OverlayStateEvent>(el, 'sp-closed');
el.open = false;
({ overlay } = await closed);
expect(el === overlay).to.be.true;
Expand All @@ -992,7 +993,7 @@ describe('sp-overlay', () => {

expect(el.open).to.be.false;

const opened = oneEvent(el, 'sp-opened');
const opened = oneEvent<OverlayStateEvent>(el, 'sp-opened');
el.open = true;
let { overlay } = await opened;
expect(el === overlay).to.be.true;
Expand All @@ -1005,7 +1006,7 @@ describe('sp-overlay', () => {

expect(el.open).to.be.true;

const closed = oneEvent(el, 'sp-closed');
const closed = oneEvent<OverlayStateEvent>(el, 'sp-closed');
el.open = false;
({ overlay } = await closed);
expect(el === overlay).to.be.true;
Expand Down
1 change: 1 addition & 0 deletions packages/overlay/test/overlay-update.test.ts
View file
Open in desktop
Expand Up @@ -28,6 +28,7 @@ describe('sp-update-overlays event', () => {
) as AccordionItem;

el.content = 'click';
await elementUpdated(item);

const opened = oneEvent(el, 'sp-opened');
el.open = 'click';
Expand Down
3 changes: 2 additions & 1 deletion packages/overlay/test/overlay-v1.test.ts
View file
Open in desktop
Expand Up @@ -369,7 +369,8 @@ describe('Overlays, v1', () => {
});
});

it('closes via events', async () => {
it('closes via events', async function () {
this.retries(0);
const test = await fixture<HTMLDivElement>(html`
<div>
<sp-popover id="root">
Expand Down
2 changes: 1 addition & 1 deletion packages/swatch/package.json
View file
Open in desktop
Expand Up @@ -66,7 +66,7 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^2.0.0",
"@lit-labs/observers": "^2.0.2",
"@spectrum-web-components/base": "^0.42.2",
"@spectrum-web-components/icon": "^0.42.2",
"@spectrum-web-components/icons-ui": "^0.42.2",
Expand Down
4 changes: 2 additions & 2 deletions packages/table/package.json
View file
Open in desktop
Expand Up @@ -115,8 +115,8 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^2.0.0",
"@lit-labs/virtualizer": "^2.0.6",
"@lit-labs/observers": "^2.0.2",
"@lit-labs/virtualizer": "^2.0.12",
"@spectrum-web-components/base": "^0.42.2",
"@spectrum-web-components/checkbox": "^0.42.2",
"@spectrum-web-components/icon": "^0.42.2",
Expand Down
2 changes: 1 addition & 1 deletion packages/tabs/package.json
View file
Open in desktop
Expand Up @@ -85,7 +85,7 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^2.0.0",
"@lit-labs/observers": "^2.0.2",
"@spectrum-web-components/base": "^0.42.2",
"@spectrum-web-components/icon": "^0.42.2",
"@spectrum-web-components/icons-ui": "^0.42.2",
Expand Down
38 changes: 26 additions & 12 deletions packages/tooltip/test/tooltip.test.ts
View file
Open in desktop
Expand Up @@ -214,19 +214,33 @@ describe('Tooltip', () => {

expect(typeof el.tipElement).to.not.equal('undefined');
});
describe('self-managed', () => {
let documentEventsSpy!: ReturnType<typeof spy>;
before(() => {
documentEventsSpy = spy(document, 'addEventListener');
});
afterEach(() => {
documentEventsSpy.resetHistory();
});
after(() => {
documentEventsSpy.restore();
});
it('does not attach event listeners if no trigger was found', async function () {
const el = await fixture<Tooltip>(
html`
<sp-tooltip self-managed>Help text.</sp-tooltip>
`
);

it('self managed does not attach event listeners if no trigger was found', async () => {
const documentEventsSpy = spy(document, 'addEventListener');
const el = await fixture<Tooltip>(
html`
<sp-tooltip self-managed>Help text.</sp-tooltip>
`
);

await elementUpdated(el);
expect(documentEventsSpy.callCount).to.equal(0);
expect(el.overlayElement?.triggerElement).to.be.null;
documentEventsSpy.restore();
await elementUpdated(el);
let calls = documentEventsSpy.callCount;
while (calls) {
calls -= 1;
const call = documentEventsSpy.getCall(calls);
expect(call.args[0]).to.not.equal('pointerenter');
}
expect(el.overlayElement?.triggerElement).to.be.null;
});
});
describe('dev mode', () => {
let consoleWarnStub!: ReturnType<typeof stub>;
Expand Down
2 changes: 1 addition & 1 deletion packages/top-nav/package.json
View file
Open in desktop
Expand Up @@ -65,7 +65,7 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^2.0.0",
"@lit-labs/observers": "^2.0.2",
"@spectrum-web-components/base": "^0.42.2",
"@spectrum-web-components/shared": "^0.42.2",
"@spectrum-web-components/tabs": "^0.42.2"
Expand Down
6 changes: 3 additions & 3 deletions projects/css-custom-vars-viewer/package.json
View file
Open in desktop
Expand Up @@ -44,12 +44,12 @@
"@spectrum-web-components/theme": "^0.42.2",
"@spectrum-web-components/toast": "^0.42.2",
"@web/dev-server-rollup": "^0.6.1",
"lit": "^2.5.0"
"lit": "^2.5.0 || ^3.1.3"
},
"devDependencies": {
"@custom-elements-manifest/analyzer": "^0.9.0",
"@open-wc/eslint-config": "^12.0.0",
"@open-wc/testing": "^3.2.0",
"@open-wc/eslint-config": "^12.0.3",
"@open-wc/testing": "^4.0.0",
"@storybook/addon-a11y": "^7.5.0",
"@storybook/addon-essentials": "^7.5.0",
"@storybook/addon-links": "^7.5.0",
Expand Down
4 changes: 2 additions & 2 deletions projects/documentation/package.json
View file
Open in desktop
Expand Up @@ -40,7 +40,7 @@
"@web/rollup-plugin-copy": "^0.5.1",
"@web/rollup-plugin-html": "^2.1.2",
"alex": "^11.0.1",
"esbuild-plugin-lit-css": "^2.0.5",
"esbuild-plugin-lit-css": "^3.0.0",
"lunr": "^2.3.9",
"markdown-it": "^14.0.0",
"markdown-it-anchor": "^8.4.1",
Expand All @@ -51,7 +51,7 @@
"prismjs": "^1.29.0",
"rimraf": "^5.0.1",
"rollup": "^4.12.0",
"rollup-plugin-lit-css": "^4.0.1",
"rollup-plugin-lit-css": "^5.0.0",
"rollup-plugin-minify-html-literals": "^1.2.6",
"rollup-plugin-styles": "^4.0.0",
"rollup-plugin-visualizer": "^5.12.0",
Expand Down
2 changes: 1 addition & 1 deletion projects/example-project-rollup/package.json
View file
Open in desktop
Expand Up @@ -29,7 +29,7 @@
},
"devDependencies": {
"@open-wc/building-rollup": "^3.0.2",
"@open-wc/eslint-config": "^12.0.0",
"@open-wc/eslint-config": "^12.0.3",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is this updated required in this PR?

"@rollup/plugin-commonjs": "^25.0.7",
"@types/node": "^20.11.11",
"@typescript-eslint/eslint-plugin": "^6.15.0",
Expand Down
2 changes: 1 addition & 1 deletion projects/example-project-webpack/package.json
View file
Open in desktop
Expand Up @@ -18,7 +18,7 @@
"@spectrum-web-components/menu": "^0.42.2",
"@spectrum-web-components/picker": "^0.42.2",
"@spectrum-web-components/styles": "^0.42.2",
"lit": "^2.5.0"
"lit": "^2.5.0 || ^3.1.3"
},
"devDependencies": {
"clean-webpack-plugin": "^4.0.0",
Expand Down
2 changes: 1 addition & 1 deletion tools/base/package.json
View file
Open in desktop
Expand Up @@ -109,7 +109,7 @@
"lit-html"
],
"dependencies": {
"lit": "^2.5.0"
"lit": "^2.5.0 || ^3.1.3"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
6 changes: 3 additions & 3 deletions tools/grid/package.json
View file
Open in desktop
Expand Up @@ -62,11 +62,11 @@
"lit-html"
],
"dependencies": {
"@lit-labs/observers": "^2.0.0",
"@lit-labs/virtualizer": "^2.0.6",
"@lit-labs/observers": "^2.0.2",
"@lit-labs/virtualizer": "^2.0.12",
"@spectrum-web-components/base": "^0.42.2",
"@spectrum-web-components/reactive-controllers": "^0.42.2",
"lit": "^2.5.0"
"lit": "^2.5.0 || ^3.1.3"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down
2 changes: 1 addition & 1 deletion tools/reactive-controllers/package.json
View file
Open in desktop
Expand Up @@ -76,7 +76,7 @@
"reactive controllers"
],
"dependencies": {
"lit": "^2.5.0"
"lit": "^3.1.3"
},
"types": "./src/index.d.ts",
"customElements": "custom-elements.json",
Expand Down