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

Convert element-library to TypeScript #13503

Merged
merged 20 commits into from
Jul 1, 2024
Merged

Convert element-library to TypeScript #13503

merged 20 commits into from
Jul 1, 2024

Conversation

swissspidy
Copy link
Collaborator

@swissspidy swissspidy commented Nov 22, 2023 •
edited
Loading

Summary

Converts the element-library package to TypeScript.

No functional changes besides some bug fixes for things that were uncovered during the migration.

All tests should pass.

User-facing changes

Testing Instructions

  • This is a non-user-facing change and requires no QA

This PR can be tested by following these steps:

Reviews

Does this PR have a security-related impact?

Does this PR change what data or activity we track or use?

Does this PR have a legal-related impact?

Checklist

  • This PR addresses an existing issue and I have linked this PR to it
  • I have tested this code to the best of my abilities
  • I have verified accessibility to the best of my abilities (docs)
  • I have verified i18n and l10n (translation, right-to-left layout) to the best of my abilities
  • This code is covered by automated tests (unit, integration, and/or e2e) to verify it works as intended (docs)
  • I have added documentation where necessary
  • I have added a matching Type: XYZ label to the PR

Fixes #12558

@swissspidy swissspidy added Type: Infrastructure Changes impacting testing infrastructure or build tooling Package: Elements /packages/elements Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️ Package: Element Library /packages/element-library and removed Package: Elements /packages/elements labels Nov 22, 2023
@swissspidy swissspidy mentioned this pull request Nov 22, 2023
Closed
@swissspidy swissspidy mentioned this pull request Apr 5, 2024
Merged
7 tasks
@swissspidy
Copy link
Collaborator Author

Unfortunately this 1 test is currently failing:

web-stories-wp/packages/story-editor/src/karma/element-library/text/edit.karma.js

Lines 230 to 283 in 04aa809

it('should not change height when entering and exiting edit mode', async () => {
await fixture.editor.library.textTab.click();
await fixture.events.click(
fixture.editor.library.text.preset('Paragraph')
);
await waitFor(() => {
const node = fixture.editor.canvas.framesLayer.frames[1].node;
if (!node) {
throw new Error('node not ready');
}
expect(node).toBeTruthy();
frame = fixture.editor.canvas.framesLayer.frames[1].node;
});
const { width } = frame.getBoundingClientRect();
// Enter edit mode.
await fixture.events.keyboard.press('Enter');
await fixture.events.sleep(300);
await fixture.events.keyboard.type('This is some test text.');
await fixture.events.keyboard.press('Enter');
await fixture.events.keyboard.press('Enter');
await fixture.events.keyboard.type('This is more test text.');
await fixture.events.keyboard.press('Enter');
// Get the initial height.
textElement = await fixture.screen.findByTestId('textEditor');
initialHeight = textElement.getBoundingClientRect()?.height;
await fixture.snapshot('Trailing and leading newlines, in edit mode');
// Exit edit mode using the Esc key
await fixture.events.keyboard.press('Esc');
await fixture.snapshot(
'Trailing and leading newlines, after edit mode'
);
const { height: heightAfterExitingEditMode } =
frame.getBoundingClientRect();
expect(initialHeight).toBeCloseTo(heightAfterExitingEditMode, 0);
// Reenter edit mode
await fixture.events.mouse.clickOn(
frame,
width / 2,
heightAfterExitingEditMode / 2
);
textElement = await fixture.screen.findByTestId('textEditor');
const { height: heightAfterReenteringEditMode } =
textElement.getBoundingClientRect();
expect(heightAfterReenteringEditMode).toBeCloseTo(initialHeight, 0);

To reproduce locally:

  1. Replace describe and it in that section with fdescribe and fit
  2. Run npm run test:karma:story-editor:watch -- --viewport=1600:1000 --slowMo=100

Maybe related to some of the changes to packages/element-library/src/text/edit.tsx, but not sure.

Besides this, the PR is ready.

@swissspidy swissspidy marked this pull request as ready for review June 30, 2024 16:18
@swissspidy swissspidy requested a review from Swanand01 June 30, 2024 16:18
@swissspidy swissspidy changed the title Convert element-library to TypeScript Convert element-library to TypeScript Jun 30, 2024
@github-actions GitHub Actions
Copy link
Contributor

Size Change: +198 B (+0.01%)

Total Size: 2.76 MB

Filename Size Change
assets/js/web-stories-editor.js 1.45 MB +199 B (+0.01%)
ℹ️ View Unchanged
Filename Size Change
assets/css/web-stories-block-rtl.css 4.65 kB 0 B
assets/css/web-stories-block.css 4.69 kB 0 B
assets/css/web-stories-carousel-rtl.css 711 B 0 B
assets/css/web-stories-carousel.css 711 B 0 B
assets/css/web-stories-dashboard-rtl.css 657 B 0 B
assets/css/web-stories-dashboard.css 659 B 0 B
assets/css/web-stories-editor-rtl.css 767 B 0 B
assets/css/web-stories-editor.css 769 B 0 B
assets/css/web-stories-embed-rtl.css 662 B 0 B
assets/css/web-stories-embed.css 664 B 0 B
assets/css/web-stories-list-styles-rtl.css 2.43 kB 0 B
assets/css/web-stories-list-styles.css 2.46 kB 0 B
assets/css/web-stories-theme-style-twentyeleven-rtl.css 102 B 0 B
assets/css/web-stories-theme-style-twentyeleven.css 102 B 0 B
assets/css/web-stories-theme-style-twentyfifteen-rtl.css 253 B 0 B
assets/css/web-stories-theme-style-twentyfifteen.css 253 B 0 B
assets/css/web-stories-theme-style-twentyfourteen-rtl.css 286 B 0 B
assets/css/web-stories-theme-style-twentyfourteen.css 286 B 0 B
assets/css/web-stories-theme-style-twentyseventeen-rtl.css 310 B 0 B
assets/css/web-stories-theme-style-twentyseventeen.css 310 B 0 B
assets/css/web-stories-theme-style-twentysixteen-rtl.css 241 B 0 B
assets/css/web-stories-theme-style-twentysixteen.css 241 B 0 B
assets/css/web-stories-theme-style-twentyten-rtl.css 142 B 0 B
assets/css/web-stories-theme-style-twentyten.css 142 B 0 B
assets/css/web-stories-theme-style-twentytwelve-rtl.css 265 B 0 B
assets/css/web-stories-theme-style-twentytwelve.css 265 B 0 B
assets/css/web-stories-theme-style-twentytwenty-rtl.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwenty.css 86 B 0 B
assets/css/web-stories-theme-style-twentytwentyone-rtl.css 324 B 0 B
assets/css/web-stories-theme-style-twentytwentyone.css 324 B 0 B
assets/css/web-stories-widget-rtl.css 459 B 0 B
assets/css/web-stories-widget.css 459 B 0 B
assets/js/3768.js 13.9 kB 0 B
assets/js/3933.js 27.3 kB 0 B
assets/js/4032.js 4.74 kB 0 B
assets/js/5380.js 8.18 kB 0 B
assets/js/7830.js 38.2 kB 0 B
assets/js/911.js 218 kB 0 B
assets/js/9391.js 95 B 0 B
assets/js/945.js 49.5 kB 0 B
assets/js/9947.js 97.6 kB 0 B
assets/js/chunk-colorthief.js 2.63 kB 0 B
assets/js/chunk-ffmpeg.js 5.98 kB 0 B
assets/js/chunk-html-to-image.js 4.51 kB 0 B
assets/js/chunk-media-gallery.js 6.12 kB -1 B (-0.02%)
assets/js/chunk-mediainfo.js 95 B 0 B
assets/js/chunk-opentype.js 97 B 0 B
assets/js/chunk-react-calendar.js 10.9 kB 0 B
assets/js/chunk-react-color.js 25.9 kB 0 B
assets/js/chunk-selfie-segmentation.js 16.3 kB 0 B
assets/js/chunk-web-stories-template-0-metaData.js 546 B 0 B
assets/js/chunk-web-stories-template-0.js 10.8 kB 0 B
assets/js/chunk-web-stories-template-1-metaData.js 537 B 0 B
assets/js/chunk-web-stories-template-1.js 9.16 kB 0 B
assets/js/chunk-web-stories-template-10-metaData.js 531 B 0 B
assets/js/chunk-web-stories-template-10.js 7.18 kB 0 B
assets/js/chunk-web-stories-template-11-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-11.js 8.77 kB 0 B
assets/js/chunk-web-stories-template-12-metaData.js 494 B 0 B
assets/js/chunk-web-stories-template-12.js 8.55 kB 0 B
assets/js/chunk-web-stories-template-13-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-13.js 6.84 kB 0 B
assets/js/chunk-web-stories-template-14-metaData.js 580 B 0 B
assets/js/chunk-web-stories-template-14.js 7.2 kB 0 B
assets/js/chunk-web-stories-template-15-metaData.js 541 B 0 B
assets/js/chunk-web-stories-template-15.js 8.68 kB 0 B
assets/js/chunk-web-stories-template-16-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-16.js 10.4 kB 0 B
assets/js/chunk-web-stories-template-17-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-17.js 8.96 kB 0 B
assets/js/chunk-web-stories-template-18-metaData.js 582 B 0 B
assets/js/chunk-web-stories-template-18.js 9.19 kB 0 B
assets/js/chunk-web-stories-template-19-metaData.js 501 B 0 B
assets/js/chunk-web-stories-template-19.js 9.05 kB 0 B
assets/js/chunk-web-stories-template-2-metaData.js 584 B 0 B
assets/js/chunk-web-stories-template-2.js 8.93 kB 0 B
assets/js/chunk-web-stories-template-20-metaData.js 548 B 0 B
assets/js/chunk-web-stories-template-20.js 8.61 kB 0 B
assets/js/chunk-web-stories-template-21-metaData.js 536 B 0 B
assets/js/chunk-web-stories-template-21.js 9.36 kB 0 B
assets/js/chunk-web-stories-template-22-metaData.js 523 B 0 B
assets/js/chunk-web-stories-template-22.js 7.37 kB 0 B
assets/js/chunk-web-stories-template-23-metaData.js 600 B 0 B
assets/js/chunk-web-stories-template-23.js 6.9 kB 0 B
assets/js/chunk-web-stories-template-24-metaData.js 516 B 0 B
assets/js/chunk-web-stories-template-24.js 11.1 kB 0 B
assets/js/chunk-web-stories-template-25-metaData.js 541 B 0 B
assets/js/chunk-web-stories-template-25.js 6.74 kB 0 B
assets/js/chunk-web-stories-template-26-metaData.js 598 B 0 B
assets/js/chunk-web-stories-template-26.js 6.89 kB 0 B
assets/js/chunk-web-stories-template-27-metaData.js 541 B 0 B
assets/js/chunk-web-stories-template-27.js 7.6 kB 0 B
assets/js/chunk-web-stories-template-28-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-28.js 8.69 kB 0 B
assets/js/chunk-web-stories-template-29-metaData.js 561 B 0 B
assets/js/chunk-web-stories-template-29.js 8.84 kB 0 B
assets/js/chunk-web-stories-template-3-metaData.js 533 B 0 B
assets/js/chunk-web-stories-template-3.js 8.16 kB 0 B
assets/js/chunk-web-stories-template-30-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-30.js 7.35 kB 0 B
assets/js/chunk-web-stories-template-31-metaData.js 503 B 0 B
assets/js/chunk-web-stories-template-31.js 9.83 kB 0 B
assets/js/chunk-web-stories-template-32-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-32.js 12.1 kB 0 B
assets/js/chunk-web-stories-template-33-metaData.js 491 B 0 B
assets/js/chunk-web-stories-template-33.js 8.83 kB 0 B
assets/js/chunk-web-stories-template-34-metaData.js 570 B 0 B
assets/js/chunk-web-stories-template-34.js 7.35 kB 0 B
assets/js/chunk-web-stories-template-35-metaData.js 565 B 0 B
assets/js/chunk-web-stories-template-35.js 8.61 kB 0 B
assets/js/chunk-web-stories-template-36-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-36.js 11.9 kB 0 B
assets/js/chunk-web-stories-template-37-metaData.js 528 B 0 B
assets/js/chunk-web-stories-template-37.js 6.09 kB 0 B
assets/js/chunk-web-stories-template-38-metaData.js 568 B 0 B
assets/js/chunk-web-stories-template-38.js 7.55 kB 0 B
assets/js/chunk-web-stories-template-39-metaData.js 586 B 0 B
assets/js/chunk-web-stories-template-39.js 7.7 kB 0 B
assets/js/chunk-web-stories-template-4-metaData.js 562 B 0 B
assets/js/chunk-web-stories-template-4.js 11.6 kB 0 B
assets/js/chunk-web-stories-template-40-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-40.js 9.73 kB 0 B
assets/js/chunk-web-stories-template-41-metaData.js 569 B 0 B
assets/js/chunk-web-stories-template-41.js 7.39 kB 0 B
assets/js/chunk-web-stories-template-42-metaData.js 521 B 0 B
assets/js/chunk-web-stories-template-42.js 6.79 kB 0 B
assets/js/chunk-web-stories-template-43-metaData.js 555 B 0 B
assets/js/chunk-web-stories-template-43.js 8.41 kB 0 B
assets/js/chunk-web-stories-template-44-metaData.js 579 B 0 B
assets/js/chunk-web-stories-template-44.js 10.6 kB 0 B
assets/js/chunk-web-stories-template-45-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-45.js 7.09 kB 0 B
assets/js/chunk-web-stories-template-46-metaData.js 532 B 0 B
assets/js/chunk-web-stories-template-46.js 5.08 kB 0 B
assets/js/chunk-web-stories-template-47-metaData.js 589 B 0 B
assets/js/chunk-web-stories-template-47.js 8.84 kB 0 B
assets/js/chunk-web-stories-template-48-metaData.js 554 B 0 B
assets/js/chunk-web-stories-template-48.js 8.68 kB 0 B
assets/js/chunk-web-stories-template-49-metaData.js 515 B 0 B
assets/js/chunk-web-stories-template-49.js 8.5 kB 0 B
assets/js/chunk-web-stories-template-5-metaData.js 557 B 0 B
assets/js/chunk-web-stories-template-5.js 9.43 kB 0 B
assets/js/chunk-web-stories-template-50-metaData.js 504 B 0 B
assets/js/chunk-web-stories-template-50.js 8.83 kB 0 B
assets/js/chunk-web-stories-template-51-metaData.js 527 B 0 B
assets/js/chunk-web-stories-template-51.js 9.92 kB 0 B
assets/js/chunk-web-stories-template-52-metaData.js 603 B 0 B
assets/js/chunk-web-stories-template-52.js 9.89 kB 0 B
assets/js/chunk-web-stories-template-53-metaData.js 553 B 0 B
assets/js/chunk-web-stories-template-53.js 5.61 kB 0 B
assets/js/chunk-web-stories-template-54-metaData.js 544 B 0 B
assets/js/chunk-web-stories-template-54.js 7.4 kB 0 B
assets/js/chunk-web-stories-template-55-metaData.js 574 B 0 B
assets/js/chunk-web-stories-template-55.js 6.88 kB 0 B
assets/js/chunk-web-stories-template-56-metaData.js 542 B 0 B
assets/js/chunk-web-stories-template-56.js 9.45 kB 0 B
assets/js/chunk-web-stories-template-57-metaData.js 527 B 0 B
assets/js/chunk-web-stories-template-57.js 14.2 kB 0 B
assets/js/chunk-web-stories-template-58-metaData.js 551 B 0 B
assets/js/chunk-web-stories-template-58.js 5.4 kB 0 B
assets/js/chunk-web-stories-template-59-metaData.js 588 B 0 B
assets/js/chunk-web-stories-template-59.js 8.66 kB 0 B
assets/js/chunk-web-stories-template-6-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-6.js 6.87 kB 0 B
assets/js/chunk-web-stories-template-60-metaData.js 513 B 0 B
assets/js/chunk-web-stories-template-60.js 8.83 kB 0 B
assets/js/chunk-web-stories-template-7-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-7.js 7.08 kB 0 B
assets/js/chunk-web-stories-template-8-metaData.js 566 B 0 B
assets/js/chunk-web-stories-template-8.js 8.28 kB 0 B
assets/js/chunk-web-stories-template-9-metaData.js 577 B 0 B
assets/js/chunk-web-stories-template-9.js 8.17 kB 0 B
assets/js/chunk-web-stories-templates.js 584 B 0 B
assets/js/chunk-web-stories-textset-0.js 4.57 kB 0 B
assets/js/chunk-web-stories-textset-1.js 5.57 kB 0 B
assets/js/chunk-web-stories-textset-2.js 6.79 kB 0 B
assets/js/chunk-web-stories-textset-3.js 12.6 kB 0 B
assets/js/chunk-web-stories-textset-4.js 3.88 kB 0 B
assets/js/chunk-web-stories-textset-5.js 5.24 kB 0 B
assets/js/chunk-web-stories-textset-6.js 4.96 kB 0 B
assets/js/chunk-web-stories-textset-7.js 8.77 kB 0 B
assets/js/generateBlurhash.worker.worker.js 1.16 kB 0 B
assets/js/web-stories-activation-notice.js 22.7 kB 0 B
assets/js/web-stories-block.js 27.5 kB 0 B
assets/js/web-stories-carousel.js 9.87 kB 0 B
assets/js/web-stories-dashboard.js 63.5 kB 0 B
assets/js/web-stories-embed.js 20 B 0 B
assets/js/web-stories-lightbox.js 7.31 kB 0 B
assets/js/web-stories-tinymce-button.js 9.78 kB 0 B
assets/js/web-stories-widget.js 554 B 0 B

compressed-size-action

@googleforcreators-bot
Copy link
Collaborator

Plugin builds for f30df1f are ready 🛎️!

@swissspidy
Copy link
Collaborator Author

swissspidy commented Jun 30, 2024 •
edited
Loading

Oh, looks like the test is passing now?! Even better!

Swanand01
Swanand01 approved these changes Jul 1, 2024
View reviewed changes
Copy link
Collaborator

@Swanand01 Swanand01 left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@swissspidy swissspidy added this to the 1.38.0 milestone Jul 1, 2024
@swissspidy swissspidy merged commit ce3047d into main Jul 1, 2024
47 of 71 checks passed
@swissspidy swissspidy deleted the try/element-library-ts branch July 1, 2024 06:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Swanand01 Swanand01 Swanand01 approved these changes

@AnuragVasanwala AnuragVasanwala Awaiting requested review from AnuragVasanwala

Assignees
No one assigned
Labels
Package: Element Library /packages/element-library Type: Code Quality Things that need a refactor, rewrite or just some good old developer ❤️ Type: Infrastructure Changes impacting testing infrastructure or build tooling
Projects
None yet
Milestone
1.38.0
Development

Successfully merging this pull request may close these issues.

Convert element-library package to TypeScript
3 participants
@swissspidy @googleforcreators-bot @Swanand01