fix(kit-headless): fix the TS2742 errors on dts generation

gparlakov · gparlakov · commit b71d1d01729e · 2023-09-14T19:55:05.000+03:00
Fix the TS2742 errors by
- adding a afterDiagnostic to make sure such errors break the build (vite.config.ts)
- fixing the few outstanding instances of ts2742 manually (Toggle, Progress, Checkbox, Button,
Radio, Toast, Toggle, useOrdinal)
- remove redundant exports from index.ts
- rename 3 instances of preventedKeys to fix error
`Conflicting namespaces: "packages/kit-headless/src/index.ts" re-exports "_auto_preventedKeys" from
one of the modules "packages/kit-headless/src/components/autocomplete/index.ts" and
 "packages/kit-headless/src/components/combobox/index.ts" (will be ignored)`
diff --git a/packages/kit-headless/src/components/autocomplete/autocomplete-listbox.tsx b/packages/kit-headless/src/components/autocomplete/autocomplete-listbox.tsx
@@ -12,7 +12,7 @@ import AutocompleteContextId from './autocomplete-context-id';
 
 import { KeyCode } from '../../utils/key-code.type';
 
-const preventedKeys = [
+const listPreventedKeys = [
   KeyCode.Home,
   KeyCode.End,
   KeyCode.PageDown,
@@ -31,7 +31,7 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {
 
   useVisibleTask$(function preventDefaultTask({ cleanup }) {
     function keyHandler(e: KeyboardEvent) {
-      if (preventedKeys.includes(e.key as KeyCode)) {
+      if (listPreventedKeys.includes(e.key as KeyCode)) {
         e.preventDefault();
       }
     }
diff --git a/packages/kit-headless/src/components/checkbox/checkbox.tsx b/packages/kit-headless/src/components/checkbox/checkbox.tsx
@@ -1,4 +1,5 @@
 import {
+  Component,
   PropFunction,
   QwikChangeEvent,
   QwikIntrinsicElements,
@@ -10,7 +11,7 @@ export type LabelProps = QwikIntrinsicElements['label'] & {
   htmlFor?: string;
 };
 
-export const Label = component$(({ ...props }: LabelProps) => {
+export const Label: Component<LabelProps> = component$(({ ...props }: LabelProps) => {
   return (
     <label {...props}>
       <Slot />
@@ -31,7 +32,7 @@ export type CheckboxProps = QwikIntrinsicElements['input'] & {
   >;
 };
 
-export const Root = component$(
+export const Root: Component<CheckboxProps> = component$(
   ({
     checked,
     disabled,
diff --git a/packages/kit-headless/src/components/combobox/combobox-input.tsx b/packages/kit-headless/src/components/combobox/combobox-input.tsx
@@ -18,7 +18,7 @@ import {
   getPrevEnabledOptionIndex,
 } from './utils';
 
-const preventedKeys = [KeyCode.Home, KeyCode.End, KeyCode.PageDown, KeyCode.ArrowUp];
+const comboPreventedKeys = [KeyCode.Home, KeyCode.End, KeyCode.PageDown, KeyCode.ArrowUp];
 
 export type ComboboxInputProps = {
   disableOnBlur?: boolean;
@@ -123,7 +123,7 @@ export const ComboboxInput = component$(
 
     useVisibleTask$(function preventDefaultTask({ cleanup }) {
       function keyHandler(e: KeyboardEvent) {
-        if (preventedKeys.includes(e.key as KeyCode)) {
+        if (comboPreventedKeys.includes(e.key as KeyCode)) {
           e.preventDefault();
         }
       }
diff --git a/packages/kit-headless/src/components/tabs/tab.tsx b/packages/kit-headless/src/components/tabs/tab.tsx
@@ -27,7 +27,7 @@ export type TabProps = {
   /** @deprecated Internal use only */
 } & QwikIntrinsicElements['button'];
 
-export const preventedKeys = [
+const tabPreventedKeys = [
   KeyCode.Home,
   KeyCode.End,
   KeyCode.PageDown,
@@ -57,7 +57,7 @@ export const Tab = component$(
 
     useVisibleTask$(function preventDefaultOnKeysVisibleTask({ cleanup }) {
       function handler(event: KeyboardEvent) {
-        if (preventedKeys.includes(event.key as KeyCode)) {
+        if (tabPreventedKeys.includes(event.key as KeyCode)) {
           event.preventDefault();
         }
         contextService.onTabKeyDown$(event.key as KeyCode, tabId!);
diff --git a/packages/kit-headless/src/index.ts b/packages/kit-headless/src/index.ts
@@ -2,9 +2,8 @@ export * from './components/accordion/';
 export * from './components/badge/badge';
 export * from './components/button-group/button-group';
 export * from './components/card';
-export * from './components/autocomplete/autocomplete-root';
-export * from './components/autocomplete/';
-export * from './components/combobox/';
+export * from './components/autocomplete';
+export * from './components/combobox';
 export * as Carousel from './components/carousel/carousel';
 export * from './components/carousel/use';
 export * from './components/pagination/pagination';
diff --git a/packages/kit-headless/vite.config.ts b/packages/kit-headless/vite.config.ts
@@ -15,6 +15,16 @@ export default defineConfig({
     tsconfigPaths({ root: '../../' }),
     dts({
       tsconfigPath: join(dirname(fileURLToPath(import.meta.url)), 'tsconfig.lib.json'),
+
+      afterDiagnostic(ds) {
+        const nonPortableTypeErrors = ds.filter((d) => d.code === 2742);
+        if (nonPortableTypeErrors.length > 0) {
+          // stop the build - yes with an empty promise - that's what the func expects
+          return Promise.reject(nonPortableTypeErrors);
+        }
+
+        return;
+      },
     }),
   ],
   server: {
diff --git a/packages/primitives/src/lib/button/button.tsx b/packages/primitives/src/lib/button/button.tsx
@@ -1,9 +1,10 @@
 import { QwikIntrinsicElements, JSXChildren } from '@builder.io/qwik';
+import { JSX } from '@builder.io/qwik/jsx-runtime';
 
 export type ButtonProps = QwikIntrinsicElements['button'] & {
   children: JSXChildren;
 };
 
-export const Button = ({ children, ...props }: ButtonProps) => {
+export const Button = ({ children, ...props }: ButtonProps): JSX.Element => {
   return <button {...props}>{children}</button>;
 };
diff --git a/packages/primitives/src/lib/progress/progress.tsx b/packages/primitives/src/lib/progress/progress.tsx
@@ -1,7 +1,11 @@
-import { QwikIntrinsicElements } from '@builder.io/qwik';
+import { ProgressHTMLAttributes, QwikIntrinsicElements } from '@builder.io/qwik';
+import { JSX } from '@builder.io/qwik/jsx-runtime';
+export type { ProgressHTMLAttributes } from '@builder.io/qwik/core';
 
 export type ProgressProps = QwikIntrinsicElements['progress'];
 
-export const Progress = (props: ProgressProps) => {
+export const Progress: (
+  props: ProgressHTMLAttributes<HTMLProgressElement>,
+) => JSX.Element = (props) => {
   return <progress {...props} />;
 };
diff --git a/packages/primitives/src/lib/radio/radio.tsx b/packages/primitives/src/lib/radio/radio.tsx
@@ -1,5 +1,8 @@
-import { QwikIntrinsicElements } from '@builder.io/qwik';
+import { InputHTMLAttributes, QwikIntrinsicElements } from '@builder.io/qwik';
+import { JSX } from '@builder.io/qwik/jsx-runtime';
 
 export type RadioProps = QwikIntrinsicElements['input'];
 
-export const Radio = (props: RadioProps) => <input {...props} type="radio" />;
+export const Radio: (props: InputHTMLAttributes<HTMLInputElement>) => JSX.Element = (
+  props,
+) => <input {...props} type="radio" />;
diff --git a/packages/primitives/src/lib/toast/toast.tsx b/packages/primitives/src/lib/toast/toast.tsx
@@ -1,10 +1,14 @@
 import { QwikIntrinsicElements } from '@builder.io/qwik';
+import { JSX } from '@builder.io/qwik/jsx-runtime';
 
 export type ToastProps = QwikIntrinsicElements['div'] & {
   label?: string;
 };
 
-export const Toast = ({ label = 'New Message', ...toastProps }: ToastProps) => {
+export const Toast = ({
+  label = 'New Message',
+  ...toastProps
+}: ToastProps): JSX.Element => {
   return (
     <div {...toastProps}>
       <span>{label}</span>
diff --git a/packages/primitives/src/lib/toggle/toggle.tsx b/packages/primitives/src/lib/toggle/toggle.tsx
@@ -1,19 +1,18 @@
-import { component$, useSignal, QwikIntrinsicElements } from '@builder.io/qwik';
+import {
+  component$,
+  useSignal,
+  QwikIntrinsicElements,
+  Component,
+} from '@builder.io/qwik';
 
 export type ToggleProps = {
   disabled?: boolean;
   pressed?: boolean;
   defaultPressed?: boolean;
 } & QwikIntrinsicElements['input'];
 
-export const Toggle = component$(
-  ({
-    onClick$,
-    pressed,
-    defaultPressed = false,
-    disabled,
-    ...toggleProps
-  }: ToggleProps) => {
+export const Toggle: Component<ToggleProps> = component$(
+  ({ pressed, defaultPressed = false, disabled, ...toggleProps }: ToggleProps) => {
     const pressedState = useSignal(pressed || defaultPressed);
 
     // event handlers seem to break toggle when exported from qwik-ui primitive
@@ -25,14 +24,6 @@ export const Toggle = component$(
         data-state={pressedState.value ? 'on' : 'off'}
         data-disabled={disabled ? '' : undefined}
         checked={pressedState.value}
-        // onClick$={[
-        //   () => {
-        //     if (!disabled) {
-        //       pressedState.value = !pressedState.value;
-        //     }
-        //   },
-        //   onClick$,
-        // ]}
         {...toggleProps}
       />
     );
diff --git a/packages/shared/src/utils/use-ordinal.ts b/packages/shared/src/utils/use-ordinal.ts
@@ -1,7 +1,7 @@
-import { noSerialize } from '@builder.io/qwik';
+import { NoSerialize, noSerialize } from '@builder.io/qwik';
 
-export const useOrdinal = () => {
-  return noSerialize((n: number) => {
+export const useOrdinal: () => NoSerialize<(n: number) => string> = () => {
+  return noSerialize((n) => {
     const pr = new Intl.PluralRules('en-GB', { type: 'ordinal' });
     const suffixes = new Map([
       ['one', 'st'],

Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@ import AutocompleteContextId from './autocomplete-context-id';`
`12`	`12`
`13`	`13`	`import { KeyCode } from '../../utils/key-code.type';`
`14`	`14`
`15`		`-const preventedKeys = [`
	`15`	`+const listPreventedKeys = [`
`16`	`16`	`KeyCode.Home,`
`17`	`17`	`KeyCode.End,`
`18`	`18`	`KeyCode.PageDown,`
`@@ -31,7 +31,7 @@ export const AutocompleteListbox = component$((props: ListboxProps) => {`
`31`	`31`
`32`	`32`	`useVisibleTask$(function preventDefaultTask({ cleanup }) {`
`33`	`33`	`function keyHandler(e: KeyboardEvent) {`
`34`		`- if (preventedKeys.includes(e.key as KeyCode)) {`
	`34`	`+ if (listPreventedKeys.includes(e.key as KeyCode)) {`
`35`	`35`	`e.preventDefault();`
`36`	`36`	`}`
`37`	`37`	`}`
Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ import {`
`18`	`18`	`getPrevEnabledOptionIndex,`
`19`	`19`	`} from './utils';`
`20`	`20`
`21`		`-const preventedKeys = [KeyCode.Home, KeyCode.End, KeyCode.PageDown, KeyCode.ArrowUp];`
	`21`	`+const comboPreventedKeys = [KeyCode.Home, KeyCode.End, KeyCode.PageDown, KeyCode.ArrowUp];`
`22`	`22`
`23`	`23`	`export type ComboboxInputProps = {`
`24`	`24`	`disableOnBlur?: boolean;`
`@@ -123,7 +123,7 @@ export const ComboboxInput = component$(`
`123`	`123`
`124`	`124`	`useVisibleTask$(function preventDefaultTask({ cleanup }) {`
`125`	`125`	`function keyHandler(e: KeyboardEvent) {`
`126`		`- if (preventedKeys.includes(e.key as KeyCode)) {`
	`126`	`+ if (comboPreventedKeys.includes(e.key as KeyCode)) {`
`127`	`127`	`e.preventDefault();`
`128`	`128`	`}`
`129`	`129`	`}`