fix(tools): update dev server ts target

.changeset/eighty-cheetahs-join.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": minor
+---
+
+Adds tsconfig option to dev server config

.changeset/eleven-toys-unite.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": patch
+---
+
+Update the TS target in dev server

core/pfe-core/controllers/color-context.ts

@@ -1,6 +1,7 @@
-import { ReactiveController, ReactiveElement } from 'lit';
+import type { ReactiveController } from 'lit';
 import type { Context, ContextCallback, UnknownContext } from '../context.js';
 
+import { ReactiveElement } from 'lit';
 import { ContextEvent, createContext } from '../context.js';
 import { bound } from '../decorators/bound.js';
 import { Logger } from './logger.js';

core/pfe-core/decorators/color-context.ts

@@ -1,9 +1,7 @@
 import type { ReactiveElement } from 'lit';
-import {
-  ColorContextOptions,
-  ColorContextConsumer,
-  ColorContextProvider,
-} from '../controllers/color-context.js';
+import type { ColorContextOptions } from '../controllers/color-context.js';
+
+import { ColorContextConsumer, ColorContextProvider } from '../controllers/color-context.js';
 
 export function colorContextProvider<T extends ReactiveElement>(options?: ColorContextOptions) {
   return function(proto: T, _key: string) {

elements/pfe-accordion/pfe-accordion-header.ts

@@ -1,8 +1,10 @@
+import type { ColorTheme } from '@patternfly/pfe-core';
+
 import { LitElement, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { unsafeStatic, html as staticH } from 'lit/static-html.js';
 
-import { ColorTheme, ComposedEvent } from '@patternfly/pfe-core';
+import { ComposedEvent } from '@patternfly/pfe-core';
 import { pfelement, bound, observed, initializer, colorContextConsumer } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';

elements/pfe-accordion/pfe-accordion.ts

@@ -1,4 +1,5 @@
 import type { TemplateResult } from 'lit';
+import type { ColorPalette, ColorTheme } from '@patternfly/pfe-core';
 
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
@@ -14,7 +15,7 @@ import {
   pfelement,
 } from '@patternfly/pfe-core/decorators.js';
 
-import { NumberListConverter, ComposedEvent, ColorPalette, ColorTheme } from '@patternfly/pfe-core';
+import { NumberListConverter, ComposedEvent } from '@patternfly/pfe-core';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';
 import { Logger } from '@patternfly/pfe-core/controllers/logger.js';
 

elements/pfe-autocomplete/package.json

@@ -10,8 +10,7 @@
   "types": "./pfe-autocomplete.d.ts",
   "exports": {
     ".": "./pfe-autocomplete.js",
-    "./*": "./*.js",
-    "./*.js": "./*.js"
+    "./*": "./*"
   },
   "publishConfig": {
     "access": "public",

elements/pfe-autocomplete/pfe-autocomplete.ts

@@ -1,17 +1,14 @@
-import type { DroplistSelectEvent, PfeSearchDroplist } from './pfe-search-droplist';
+import type { DroplistSelectEvent, PfeSearchDroplist } from './pfe-search-droplist.js';
+import type { ColorPalette, ColorTheme } from '@patternfly/pfe-core';
 
 import { LitElement, html } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 
-import { ColorPalette, ColorTheme } from '@patternfly/pfe-core';
-
 import { ComposedEvent } from '@patternfly/pfe-core';
 import { pfelement, bound, observed, colorContextConsumer, colorContextProvider, deprecation } from '@patternfly/pfe-core/decorators.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';
 
-
-import './pfe-search-droplist';
-
+import './pfe-search-droplist.js';
 
 import style from './pfe-autocomplete.scss';
 

elements/pfe-autocomplete/pfe-search-droplist.ts

@@ -1,9 +1,11 @@
+import type { ColorTheme } from '@patternfly/pfe-core';
+
 import { LitElement, html } from 'lit';
 import { customElement, property, state, query } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { repeat } from 'lit/directives/repeat.js';
 
-import { ComposedEvent, ColorTheme } from '@patternfly/pfe-core';
+import { ComposedEvent } from '@patternfly/pfe-core';
 
 import { pfelement, bound, observed, colorContextConsumer } from '@patternfly/pfe-core/decorators.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';

elements/pfe-clipboard/pfe-clipboard.ts

@@ -1,7 +1,9 @@
+import type { ColorTheme } from '@patternfly/pfe-core';
+
 import { LitElement, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 
-import { ColorTheme, ComposedEvent } from '@patternfly/pfe-core';
+import { ComposedEvent } from '@patternfly/pfe-core';
 import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller.js';
 import { pfelement, bound, observed, colorContextConsumer } from '@patternfly/pfe-core/decorators.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';

elements/pfe-clipboard/test/pfe-clipboard.spec.ts

@@ -1,5 +1,7 @@
+import type { SinonStub } from 'sinon';
+
 import { expect, aTimeout, oneEvent, nextFrame, html } from '@open-wc/testing';
-import { spy, stub, SinonStub } from 'sinon';
+import { spy, stub } from 'sinon';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { getComposedText } from '@patternfly/pfe-tools/test/get-composed-text.js';
 import { hexToRgb } from '@patternfly/pfe-tools/test/hex-to-rgb.js';

elements/pfe-dropdown/package.json

@@ -10,7 +10,7 @@
   "types": "./pfe-dropdown.d.ts",
   "exports": {
     ".": "./pfe-dropdown.js",
-    "./*": "./*.js"
+    "./*": "./*"
   },
   "publishConfig": {
     "access": "public",

elements/pfe-dropdown/test/pfe-dropdown.spec.ts

@@ -1,9 +1,11 @@
+import type { ActionOption, PfeDropdownOption, DropdownChangeEvent } from '@patternfly/pfe-dropdown';
+import type { PfeDropdownItem } from '@patternfly/pfe-dropdown/pfe-dropdown-item.js';
+
 import { expect, html, oneEvent } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 import { sendKeys } from '@web/test-runner-commands';
 
-import { PfeDropdown, PfeDropdownOption, DropdownChangeEvent, ActionOption } from '@patternfly/pfe-dropdown';
-import { PfeDropdownItem } from '@patternfly/pfe-dropdown/pfe-dropdown-item.js';
+import { PfeDropdown } from '@patternfly/pfe-dropdown';
 
 describe('<pfe-dropdown>', function() {
   it('should upgrade', async function() {

elements/pfe-health-index/package.json

@@ -9,7 +9,7 @@
   "module": "./pfe-health-index.js",
   "exports": {
     ".": "./pfe-health-index.js",
-    "./*": "./*.js"
+    "./*": "./*"
   },
   "publishConfig": {
     "access": "public",

elements/pfe-health-index/test/pfe-health-index.spec.ts

@@ -1,9 +1,11 @@
+import type { SinonSpy } from 'sinon';
+
 import { expect, html, nextFrame } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 
 import { PfeHealthIndex } from '@patternfly/pfe-health-index';
 
-import { spy, SinonSpy } from 'sinon';
+import { spy } from 'sinon';
 
 describe('<pfe-health-index>', function() {
   let consoleSpy: SinonSpy;

elements/pfe-icon/pfe-icon.ts

@@ -1,3 +1,4 @@
+import type { ColorTheme } from '@patternfly/pfe-core';
 import type { IconNameResolverFn } from './icon-set.js';
 
 import { LitElement, html, svg } from 'lit';
@@ -13,7 +14,6 @@ import { PfeIconSet } from './icon-set.js';
 import { addBuiltIns } from './builtin-icon-sets.js';
 
 import style from './pfe-icon.scss';
-import { ColorTheme } from '@patternfly/pfe-core';
 
 export type IconColor = (
   | 'accent'

elements/pfe-jump-links/pfe-jump-links-nav.ts

@@ -1,8 +1,10 @@
+import type { ColorPalette, ColorTheme } from '@patternfly/pfe-core';
+
 import { LitElement, html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { customElement, property, query, state } from 'lit/decorators.js';
 
-import { ColorPalette, ColorTheme, ComposedEvent } from '@patternfly/pfe-core';
+import { ComposedEvent } from '@patternfly/pfe-core';
 import { pfelement, bound, observed, colorContextConsumer, deprecation, colorContextProvider } from '@patternfly/pfe-core/decorators.js';
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { deprecatedCustomEvent } from '@patternfly/pfe-core/functions/deprecatedCustomEvent.js';

elements/pfe-jump-links/test/pfe-jump-links.spec.ts

@@ -1,11 +1,12 @@
 import type { LitElement } from 'lit';
+import type { SinonSpy } from 'sinon';
 
 import { expect, html, oneEvent } from '@open-wc/testing';
 import { createFixture } from '@patternfly/pfe-tools/test/create-fixture.js';
 
 import { PfeJumpLinks, PfeJumpLinksPanel } from '@patternfly/pfe-jump-links';
 
-import { spy, SinonSpy } from 'sinon';
+import { spy } from 'sinon';
 import { ChangeEvent } from '../pfe-jump-links-nav';
 
 describe('<pfe-jump-links>', function() {

elements/pfe-tooltip/BaseTooltip.ts

@@ -1,8 +1,10 @@
-/* eslint-disable no-console */
+import type { Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { FloatingDOMController } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
+
 import style from './BaseTooltip.scss';
-import { FloatingDOMController, Placement } from '@patternfly/pfe-core/controllers/floating-dom-controller.js';
 
 export abstract class BaseTooltip extends LitElement {
   static readonly styles = [style];

tools/pfe-tools/dev-server.ts

@@ -43,6 +43,7 @@ export interface PfeDevServerConfigOptions extends Base {
   hostname?: string;
   importMap?: InjectSetting['importMap'];
   litcssOptions?: LitCSSOptions,
+  tsconfig?: string;
   /** Extra dev server plugins */
   loadDemo?: boolean;
   plugins?: Plugin[];
@@ -236,6 +237,8 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
     .replace(/\/node_modules$/, '/')
     .replace('//', '/');
 
+  const tsconfig = options?.tsconfig;
+
   return {
     rootDir,
 
@@ -267,8 +270,8 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
       // serve typescript sources as javascript
       esbuildPlugin({
         ts: true,
-        // see https://github.com/evanw/esbuild/issues/2220
-        target: 'es2020'
+        target: 'es2022',
+        tsconfig,
       }),
 
       // load .scss files as lit CSSResult modules

web-dev-server.config.js

@@ -13,6 +13,7 @@ export function fakePrismModule() {
 }
 
 export default pfeDevServerConfig({
+  tsconfig: 'tsconfig.settings.json',
   plugins: [
     fakePrismModule(),
   ],

web-test-runner.config.js

@@ -2,6 +2,7 @@ import { pfeTestRunnerConfig } from '@patternfly/pfe-tools/test-runner.js';
 import { fakePrismModule } from './web-dev-server.config.js';
 
 export default pfeTestRunnerConfig({
+  tsconfig: 'tsconfig.settings.json',
   files: ['!tools/create-element/templates/**/*'],
   // uncomment to get default wtr reporter
   // reporter: 'default',