Migration/typescript - #141
Draft
Kallyan01 wants to merge 10 commits into
Draft
Conversation
…ents dir to TypeScript with tests
Contributor
There was a problem hiding this comment.
Pull request overview
This PR migrates OneDesign’s frontend source under assets/src from JavaScript to TypeScript and introduces a Jest unit-testing scaffold aligned with the shared OneSearch dev baseline (TypeScript/ESLint/@wordpress/scripts upgrades), while keeping existing webpack build outputs/bundle names stable for PHP enqueues.
Changes:
- Convert
assets/srcmodules (admin apps, components, hooks, store, utilities) from.jsto.ts/.tsxwith stricter typing. - Add/extend the TypeScript and linting toolchain (
tsconfig.base.json, flateslint.config.mjs) and update webpack entries to point at TS/TSX sources. - Add Jest unit test scaffold and initial test suites, plus Jest config/setup for
@/path aliasing and browser/global mocks.
Reviewed changes
Copilot reviewed 72 out of 78 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| webpack.config.js | Updates entrypoints to .ts/.tsx and tweaks plugin/minimizer formatting. |
| tsconfig.json | Switches to a shared base config and adds repo-wide TS includes/types. |
| tsconfig.base.json | Introduces shared strict TS compiler settings baseline. |
| package.json | Bumps toolchain deps and adds JS test/format scripts. |
| jest.config.js | Adds Jest configuration, setup file, alias mapping, and coverage settings. |
| eslint.config.mjs | Replaces legacy ESLint config with flat config + TS/Jest overrides. |
| babel.config.js | Minor formatting change in Babel config export. |
| assets/src/types/wordpress-block-editor.d.ts | Adds ambient module typing for @wordpress/block-editor. |
| assets/src/store/index.ts | Types the WP data store and exports internals for unit tests. |
| assets/src/js/utils.ts | Converts utilities to TS with typed signatures and safer guards. |
| assets/src/js/constants.ts | Replaces constants.js with typed constants resolution from window.*. |
| assets/src/js/constants.js | Removes legacy JS constants module. |
| assets/src/js/main.ts | Converts main entry to TS (empty module export). |
| assets/src/js/editor.ts | Converts editor entry to TS (empty module export). |
| assets/src/js/admin.ts | Converts admin entry to TS (empty module export). |
| assets/src/hooks/useSitesManagement.ts | Adds types and refactors health-check/site-fetch logic for TS. |
| assets/src/components/SiteTable.tsx | Converts SiteTable to TSX with typed props/state. |
| assets/src/components/SiteTable.js | Removes legacy JS SiteTable implementation. |
| assets/src/components/SiteSettings.tsx | Converts SiteSettings to TSX and improves typing/formatting. |
| assets/src/components/SiteModal.tsx | Adds TSX version of SiteModal with typed submit/media handling. |
| assets/src/components/SiteModal.js | Removes legacy JS SiteModal implementation. |
| assets/src/components/MultiSites.tsx | Converts MultiSites to TSX with typed data flow. |
| assets/src/components/MultiSites.js | Removes legacy JS MultiSites implementation. |
| assets/src/components/Dashicons.tsx | Converts dashicon helper to TSX with typed props. |
| assets/src/components/Dashicons.js | Removes legacy JS dashicon helper. |
| assets/src/admin/templates/index.ts | TS entry wiring for templates admin app. |
| assets/src/admin/templates/App.tsx | TSX tweak to return null from plugin render. |
| assets/src/admin/templates/template-event.ts | Converts template button/event wiring to TS with minimal typing. |
| assets/src/admin/templates/template-event.js | Removes legacy JS template event wiring. |
| assets/src/admin/templates/components/SiteSelection.tsx | Converts site selection UI to TSX and tightens types/a11y attrs. |
| assets/src/admin/templates/components/SiteSelection.js | Removes legacy JS SiteSelection. |
| assets/src/admin/templates/components/MemoizedTemplatePreview.tsx | Converts memoized template preview card to TSX with typed props. |
| assets/src/admin/templates/components/MemoizedTemplatePreview.js | Removes legacy JS memoized template preview. |
| assets/src/admin/templates/components/BrandSiteTemplates.tsx | Types BrandSiteTemplates and refactors formatting/guards. |
| assets/src/admin/templates/components/BaseSiteTemplates.tsx | Converts BaseSiteTemplates to TSX with typed props. |
| assets/src/admin/templates/components/BaseSiteTemplates.js | Removes legacy JS BaseSiteTemplates. |
| assets/src/admin/patterns/index.ts | TS entry wiring for patterns admin app. |
| assets/src/admin/patterns/App.tsx | TSX tweak to return null from plugin render. |
| assets/src/admin/patterns/pattern-event.ts | Converts pattern button/event wiring to TS with minimal typing. |
| assets/src/admin/patterns/pattern-event.js | Removes legacy JS pattern event wiring. |
| assets/src/admin/patterns/components/MemoizedPatternPreview.tsx | Converts memoized pattern preview card to TSX with typed props. |
| assets/src/admin/patterns/components/MemoizedPatternPreview.js | Removes legacy JS memoized pattern preview. |
| assets/src/admin/patterns/components/Category.tsx | Types pattern categories sidebar and tightens data handling. |
| assets/src/admin/patterns/components/BasePatternsTab.tsx | Adds TS types and refactors pattern-apply flow/UI. |
| assets/src/admin/patterns/components/AppliedPatternsTab.tsx | Adds TS types and refactors applied-pattern removal flow/UI. |
| assets/src/admin/settings/index.tsx | Types governing/brand settings page state and API interactions. |
| assets/src/admin/plugin/index.tsx | Types site-type selection UI and extracts stable options array. |
| assets/src/admin/onboarding/index.tsx | TSX import/doc section tweaks around onboarding entry. |
| assets/src/admin/onboarding/page.tsx | TSX typing/formatting adjustments in onboarding flow. |
| assets/src/admin/multisite-plugin/index.tsx | Converts multisite governing-site selector app to TSX. |
| assets/src/admin/multisite-plugin/index.js | Removes legacy JS multisite-plugin entry. |
| tests/js/setup.ts | Adds Jest setup for fetch and window.OneDesignSettings mocks. |
| tests/js/tsconfig.json | Adds TS config for JS unit tests. |
| tests/js/utils.test.ts | Adds unit tests for shared JS utilities. |
| tests/js/constants.test.ts | Adds tests for constants resolution/precedence from window.*. |
| tests/js/useSitesManagement.test.tsx | Adds hook tests for site fetch + health-check behavior. |
| tests/js/store.test.ts | Adds reducer/actions/selectors/generator tests for the store. |
| tests/js/SiteTable.test.tsx | Adds component tests for SiteTable flows. |
| tests/js/SiteSettings.test.tsx | Adds tests for SiteSettings fetch/error rendering. |
| tests/js/SiteModal.test.tsx | Adds tests for SiteModal validation behavior. |
| tests/js/MultiSites.test.tsx | Adds tests around MultiSites UI + error notice. |
| tests/js/TemplateModal.test.tsx | Adds smoke test for TemplateModal with mocked children/WP deps. |
| tests/js/TemplatesSiteSelection.test.tsx | Adds tests for templates site selection rendering/empty state. |
| tests/js/PatternModal.test.tsx | Adds smoke test for PatternModal with mocked children/WP deps. |
| tests/js/PatternsSiteSelection.test.tsx | Adds tests for patterns site selection behavior with mocks. |
| tests/js/MemoizedTemplatePreview.test.tsx | Adds tests for template preview card UI behaviors. |
| tests/js/MemoizedPatternPreview.test.tsx | Adds tests for pattern preview card UI behaviors. |
| tests/js/BasePatternsTab.test.tsx | Adds basic tests for BasePatternsTab loading/empty states. |
| tests/js/AppliedPatternsTab.test.tsx | Adds basic tests for AppliedPatternsTab empty/selection UI. |
| tests/js/Category.test.tsx | Adds tests for pattern category filtering and error handling. |
| tests/js/BrandSiteTemplates.test.tsx | Adds tests for BrandSiteTemplates empty/selection UI. |
| .eslintrc.json | Removes legacy ESLint config (migrated to flat config). |
| .eslintignore | Removes legacy ignore file (handled via flat config ignores). |
Comments suppressed due to low confidence (2)
assets/src/hooks/useSitesManagement.ts:59
- Health-check results are keyed by
String(site?.id), which becomes the literal string "undefined" whensite.idis missing. SincesiteInfois already keyed bysiteId, this can collapse multiple sites into the same "undefined" entry and make downstream lookups inconsistent.
assets/src/components/SiteSettings.tsx:39 - State name
showDisconectionModal/setShowDisconectionModalcontains a typo ("Disconection"). Renaming toshowDisconnectionModalimproves readability and avoids propagating the misspelling in future code.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Collaborator
Author
|
Note on remaining failing checks (PHPCS, PHP static analysis, Stylelint): these are pre-existing issues in code this PR doesn't touch (no changes to inc/*.php or any .scss/.css), surfaced by the toolchain bump's stricter rules. Leaving them for a separate follow-up PR rather than expanding this one's scope. |
Comment on lines
+17
to
+27
| const renderIcon = ( { | ||
| sitesHealthCheckResult, | ||
| id, | ||
| }: RenderIconProps ): JSX.Element => { | ||
| return sitesHealthCheckResult?.[ id ] && | ||
| ! sitesHealthCheckResult?.[ id ]?.success ? ( | ||
| <span className="dashicons dashicons-warning"></span> | ||
| ) : ( | ||
| <span className="dashicons dashicons-yes-alt"></span> | ||
| ); | ||
| }; |
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render, screen } from '@testing-library/react'; |
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render, screen } from '@testing-library/react'; |
| /** | ||
| * External dependencies | ||
| */ | ||
| import { render, screen } from '@testing-library/react'; |
…rove renderIcon function
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Migrate the plugin's
assets/srcto TypeScript and add a Jest unit-testscaffold, bringing OneDesign onto the shared OneSearch dev baseline.
Changes
tsconfig, flateslint.config.mjs,and a toolchain bump to the shared baseline (
@wordpress/scripts32,TypeScript 6, ESLint 9, wp-prettier).
assets/srcconverted to.ts/.tsx(0
.jsremaining) — components, hooks, store, and admin apps/bootstraps.(18 suites / 70 tests, ~48% statement coverage).
webpack.config.jsbuild (OneDesign isn't block-based);build output and bundle names are unchanged, so PHP enqueues are unaffected.