chore: Use .ts when importing (#3624)

We now use the real file name when importing.

This is less confusing.

apps/zbugs/src/comment-query.ts

@@ -1,5 +1,5 @@
 import type {Zero} from '@rocicorp/zero';
-import type {IssueRow, Schema} from '../schema.js';
+import type {IssueRow, Schema} from '../schema.ts';
 
 export function commentQuery(z: Zero<Schema>, displayed: IssueRow | undefined) {
   return z.query.comment

apps/zbugs/src/components/avatar-image.tsx

@@ -1,6 +1,6 @@
 import {memo, type ImgHTMLAttributes} from 'react';
-import type {UserRow} from '../../schema.js';
-import {avatarURLWithSize} from '../avatar-url-with-size.js';
+import type {UserRow} from '../../schema.ts';
+import {avatarURLWithSize} from '../avatar-url-with-size.ts';
 
 interface AvatarImageProps extends ImgHTMLAttributes<HTMLImageElement> {
   user: UserRow;

apps/zbugs/src/components/button-with-login-check.tsx

@@ -1,7 +1,7 @@
 import {forwardRef, useCallback, useState, type ForwardedRef} from 'react';
-import {useLogin} from '../hooks/use-login.js';
-import {Button, type ButtonProps} from './button.jsx';
-import {NotLoggedInModal} from './not-logged-in-modal.js';
+import {useLogin} from '../hooks/use-login.tsx';
+import {Button, type ButtonProps} from './button.tsx';
+import {NotLoggedInModal} from './not-logged-in-modal.tsx';
 
 interface Props extends ButtonProps {
   loginMessage: string;

apps/zbugs/src/components/button.tsx

@@ -5,8 +5,8 @@ import {
   type ForwardedRef,
   type ReactNode,
 } from 'react';
-import {isPrimaryMouseButton} from '../is-primary-mouse-button.js';
-import {umami} from '../umami.js';
+import {isPrimaryMouseButton} from '../is-primary-mouse-button.ts';
+import {umami} from '../umami.ts';
 
 export interface ButtonProps {
   onAction?: (() => void) | undefined;

apps/zbugs/src/components/can-edit.tsx

@@ -1,5 +1,5 @@
 import {memo} from 'react';
-import {useCanEdit} from '../hooks/use-can-edit.js';
+import {useCanEdit} from '../hooks/use-can-edit.ts';
 
 interface Props {
   children: React.ReactNode;

apps/zbugs/src/components/combobox.tsx

@@ -9,10 +9,10 @@ import {
   useState,
 } from 'react';
 import DropdownArrow from '../assets/icons/dropdown-arrow.svg?react';
-import {useClickOutside} from '../hooks/use-click-outside.js';
-import {umami} from '../umami.js';
+import {useClickOutside} from '../hooks/use-click-outside.ts';
+import {umami} from '../umami.ts';
 import styles from './combobox.module.css';
-import {fuzzySearch} from './fuzzySearch.js';
+import {fuzzySearch} from './fuzzy-search.ts';
 
 type Item<T> = {
   text: string;

apps/zbugs/src/components/confirm.tsx

@@ -1,6 +1,6 @@
 import {useCallback} from 'react';
-import {Button} from './button.js';
-import {Modal, ModalActions, ModalText} from './modal.jsx';
+import {Button} from './button.tsx';
+import {Modal, ModalActions, ModalText} from './modal.tsx';
 
 interface Props {
   isOpen: boolean;

apps/zbugs/src/components/emoji-panel.tsx

@@ -25,13 +25,13 @@ import {
   findEmojiForCreator,
   normalizeEmoji,
   type Emoji,
-} from '../emoji-utils.js';
-import {useLogin} from '../hooks/use-login.js';
-import {useZero} from '../hooks/use-zero.js';
-import {ButtonWithLoginCheck} from './button-with-login-check.js';
-import {type ButtonProps} from './button.js';
-import {EmojiPicker} from './emoji-picker.js';
-import {EmojiPill} from './emoji-pill.js';
+} from '../emoji-utils.ts';
+import {useLogin} from '../hooks/use-login.tsx';
+import {useZero} from '../hooks/use-zero.ts';
+import {ButtonWithLoginCheck} from './button-with-login-check.tsx';
+import {type ButtonProps} from './button.tsx';
+import {EmojiPicker} from './emoji-picker.tsx';
+import {EmojiPill} from './emoji-pill.tsx';
 
 const loginMessage = 'You need to be logged in to modify emoji reactions.';
 

apps/zbugs/src/components/emoji-picker.tsx

@@ -7,9 +7,9 @@ import type {
   SkinToneChangeEvent,
 } from 'emoji-picker-element/shared.js';
 import {createElement, memo, useRef, type RefCallback} from 'react';
-import {setUserPref, useUserPref} from '../hooks/use-user-pref.js';
-import {useZero} from '../hooks/use-zero.js';
-import {emojiDataSource} from './emoji-data-source.js';
+import {setUserPref, useUserPref} from '../hooks/use-user-pref.ts';
+import {useZero} from '../hooks/use-zero.ts';
+import {emojiDataSource} from './emoji-data-source.ts';
 
 export const SKIN_TONE_PREF = 'emojiSkinTone';
 

apps/zbugs/src/components/emoji-pill.tsx

@@ -1,19 +1,19 @@
 import classNames from 'classnames';
 import {memo, useEffect, useState} from 'react';
 import {useIntersectionObserver} from 'usehooks-ts';
-import type {Emoji} from '../emoji-utils.js';
+import type {Emoji} from '../emoji-utils.ts';
 import {
   findEmojiForCreator,
   formatEmojiCreatorList,
   setSkinTone,
-} from '../emoji-utils.js';
-import {useDocumentHasFocus} from '../hooks/use-document-has-focus.js';
-import {useNumericPref} from '../hooks/use-user-pref.js';
-import {useZero} from '../hooks/use-zero.js';
-import {AvatarImage} from './avatar-image.js';
-import {ButtonWithLoginCheck} from './button-with-login-check.js';
-import {SKIN_TONE_PREF} from './emoji-picker.js';
-import {Tooltip, TooltipContent, TooltipTrigger} from './tooltip.jsx';
+} from '../emoji-utils.ts';
+import {useDocumentHasFocus} from '../hooks/use-document-has-focus.ts';
+import {useNumericPref} from '../hooks/use-user-pref.ts';
+import {useZero} from '../hooks/use-zero.ts';
+import {AvatarImage} from './avatar-image.tsx';
+import {ButtonWithLoginCheck} from './button-with-login-check.tsx';
+import {SKIN_TONE_PREF} from './emoji-picker.tsx';
+import {Tooltip, TooltipContent, TooltipTrigger} from './tooltip.tsx';
 
 const loginMessage = 'You need to be logged in to modify emoji reactions.';
 

apps/zbugs/src/components/filter.tsx

@@ -2,10 +2,10 @@ import {useQuery} from '@rocicorp/zero/react';
 import classNames from 'classnames';
 import {memo, useMemo, useState} from 'react';
 import labelIcon from '../assets/icons/label.svg';
-import {useZero} from '../hooks/use-zero.js';
-import {Button} from './button.js';
-import {Combobox} from './combobox.js';
-import {UserPicker} from './user-picker.js';
+import {useZero} from '../hooks/use-zero.ts';
+import {Button} from './button.tsx';
+import {Combobox} from './combobox.tsx';
+import {UserPicker} from './user-picker.tsx';
 
 export type Selection =
   | {creator: string}

apps/zbugs/src/components/issue-link.tsx

@@ -1,5 +1,5 @@
-import {links, type ListContext} from '../routes.js';
-import {Link, type Props as LinkProps} from './link.js';
+import {links, type ListContext} from '../routes.ts';
+import {Link, type Props as LinkProps} from './link.tsx';
 
 export function IssueLink({
   issue,

apps/zbugs/src/components/label-picker.tsx

@@ -1,9 +1,9 @@
 import {useQuery} from '@rocicorp/zero/react';
 import classNames from 'classnames';
 import {useCallback, useRef, useState} from 'react';
-import {useClickOutside} from '../hooks/use-click-outside.js';
-import {useZero} from '../hooks/use-zero.js';
-import {Button} from './button.js';
+import {useClickOutside} from '../hooks/use-click-outside.ts';
+import {useZero} from '../hooks/use-zero.ts';
+import {Button} from './button.tsx';
 import style from './label-picker.module.css';
 
 const focusInput = (input: HTMLInputElement | null) => {

apps/zbugs/src/components/link.tsx

@@ -1,5 +1,5 @@
 import {memo, type ReactNode} from 'react';
-import type {ZbugsHistoryState} from '../routes.js';
+import type {ZbugsHistoryState} from '../routes.ts';
 
 export type Props = {
   children: ReactNode;

apps/zbugs/src/components/login-provider.tsx

@@ -1,7 +1,7 @@
 import {useCallback, useSyncExternalStore} from 'react';
-import {loginContext} from '../hooks/use-login.js';
-import {clearJwt} from '../jwt.js';
-import {authRef} from '../zero-setup.js';
+import {loginContext} from '../hooks/use-login.tsx';
+import {clearJwt} from '../jwt.ts';
+import {authRef} from '../zero-setup.ts';
 
 export function LoginProvider({children}: {children: React.ReactNode}) {
   const loginState = useSyncExternalStore(

apps/zbugs/src/components/modal.tsx

@@ -9,9 +9,9 @@ import React, {
 } from 'react';
 import ReactDOM from 'react-dom';
 import CloseIcon from '../assets/icons/close.svg?react';
-import {useKeypress} from '../hooks/use-keypress.js';
-import useLockBodyScroll from '../hooks/use-lock-body-scroll.js';
-import {Confirm} from './confirm.js';
+import {useKeypress} from '../hooks/use-keypress.ts';
+import useLockBodyScroll from '../hooks/use-lock-body-scroll.ts';
+import {Confirm} from './confirm.tsx';
 
 interface Props {
   title?: string | undefined;

apps/zbugs/src/components/nav.tsx

@@ -6,19 +6,19 @@ import {navigate, useHistoryState} from 'wouter/use-browser-location';
 import {useQuery} from 'zero-react/src/use-query.js';
 import logoURL from '../assets/images/logo.svg';
 import markURL from '../assets/images/mark.svg';
-import {useLogin} from '../hooks/use-login.js';
-import {useZero} from '../hooks/use-zero.js';
-import {IssueComposer} from '../pages/issue/issue-composer.js';
+import {useLogin} from '../hooks/use-login.tsx';
+import {useZero} from '../hooks/use-zero.ts';
+import {IssueComposer} from '../pages/issue/issue-composer.tsx';
 import {
   links,
   routes,
   type ListContext,
   type ZbugsHistoryState,
-} from '../routes.js';
-import {AvatarImage} from './avatar-image.js';
-import {ButtonWithLoginCheck} from './button-with-login-check.js';
-import {Button} from './button.js';
-import {Link} from './link.js';
+} from '../routes.ts';
+import {AvatarImage} from './avatar-image.tsx';
+import {ButtonWithLoginCheck} from './button-with-login-check.tsx';
+import {Button} from './button.tsx';
+import {Link} from './link.tsx';
 
 export const Nav = memo(() => {
   const search = useSearch();

apps/zbugs/src/components/not-logged-in-modal.tsx

@@ -1,5 +1,5 @@
-import {links} from '../routes.js';
-import {Modal, ModalActions, ModalText} from './modal.js';
+import {links} from '../routes.ts';
+import {Modal, ModalActions, ModalText} from './modal.tsx';
 
 export interface Props {
   onDismiss: () => void;

apps/zbugs/src/components/user-picker.tsx

@@ -1,11 +1,11 @@
 import {type Row} from '@rocicorp/zero';
 import {useQuery} from '@rocicorp/zero/react';
 import {useEffect, useMemo, useState} from 'react';
-import {type Schema} from '../../schema.js';
+import {type Schema} from '../../schema.ts';
 import avatarIcon from '../assets/icons/avatar-default.svg';
-import {avatarURLWithSize} from '../avatar-url-with-size.js';
-import {useZero} from '../hooks/use-zero.js';
-import {Combobox} from './combobox.js';
+import {avatarURLWithSize} from '../avatar-url-with-size.ts';
+import {useZero} from '../hooks/use-zero.ts';
+import {Combobox} from './combobox.tsx';
 
 type Props = {
   onSelect?: ((user: User | undefined) => void) | undefined;

apps/zbugs/src/emoji-utils.test.ts

@@ -1,7 +1,7 @@
 import type {Writable} from 'shared/src/writable.js';
 import {expect, test} from 'vitest';
-import type {Emoji} from './emoji-utils.js';
-import {formatEmojiCreatorList, formatEmojiTooltipText} from './emoji-utils.js';
+import type {Emoji} from './emoji-utils.ts';
+import {formatEmojiCreatorList, formatEmojiTooltipText} from './emoji-utils.ts';
 
 function makeEmoji(userID: string, login: string): Emoji {
   return {

apps/zbugs/src/emoji-utils.ts

@@ -1,6 +1,6 @@
 import type {Row} from '@rocicorp/zero';
 import {assert} from 'shared/src/asserts.js';
-import type {Schema} from '../schema.js';
+import type {Schema} from '../schema.ts';
 
 export type Emoji = Row<Schema['tables']['emoji']> & {
   readonly creator: Row<Schema['tables']['user']> | undefined;

apps/zbugs/src/hooks/use-can-edit.ts

@@ -1,6 +1,6 @@
 import {useQuery} from '@rocicorp/zero/react';
-import {useLogin} from './use-login.js';
-import {useZero} from './use-zero.js';
+import {useLogin} from './use-login.tsx';
+import {useZero} from './use-zero.ts';
 
 export function useCanEdit(ownerUserID: string | undefined): boolean {
   const login = useLogin();

apps/zbugs/src/hooks/use-emoji-data-source-preload.ts

@@ -1,6 +1,6 @@
 import Database from 'emoji-picker-element/database.js';
 import {useEffect} from 'react';
-import {emojiDataSource} from '../components/emoji-data-source.js';
+import {emojiDataSource} from '../components/emoji-data-source.ts';
 
 export function useEmojiDataSourcePreload() {
   useEffect(() => {

apps/zbugs/src/hooks/use-login.tsx

@@ -1,5 +1,5 @@
 import {createContext, useContext} from 'react';
-import {type LoginState} from '../zero-setup.js';
+import {type LoginState} from '../zero-setup.ts';
 
 export type LoginContext = {
   logout: () => void;

apps/zbugs/src/hooks/use-softnav.ts

@@ -1,7 +1,7 @@
 import {useEffect} from 'react';
 import {navigate} from 'wouter/use-browser-location';
-import {isPrimaryMouseButton} from '../is-primary-mouse-button.js';
-import {umami} from '../umami.js';
+import {isPrimaryMouseButton} from '../is-primary-mouse-button.ts';
+import {umami} from '../umami.ts';
 
 // Implements softnav for all links.
 // We do it this way rather than in the Link component so that links inside

apps/zbugs/src/hooks/use-user-pref.ts

@@ -1,7 +1,7 @@
 import type {Zero} from '@rocicorp/zero';
 import {useQuery} from '@rocicorp/zero/react';
-import type {Schema} from '../../schema.js';
-import {useZero} from './use-zero.js';
+import type {Schema} from '../../schema.ts';
+import {useZero} from './use-zero.ts';
 
 export function useUserPref(key: string): string | undefined {
   const z = useZero();

apps/zbugs/src/hooks/use-zero.ts

@@ -1,3 +1,3 @@
 import {createUseZero} from '@rocicorp/zero/react';
-import type {Schema} from '../../schema.js';
+import type {Schema} from '../../schema.ts';
 export const useZero = createUseZero<Schema>();

apps/zbugs/src/main.tsx

@@ -1,12 +1,12 @@
-import './zero-setup.js';
+import './zero-setup.ts';
 
 import {StrictMode} from 'react';
 import {createRoot} from 'react-dom/client';
 import 'react-toastify/dist/ReactToastify.css';
 import {must} from 'shared/src/must.js';
-import {LoginProvider} from './components/login-provider.js';
+import {LoginProvider} from './components/login-provider.tsx';
 import './index.css';
-import {Root} from './root.js';
+import {Root} from './root.tsx';
 
 createRoot(must(document.getElementById('root'))).render(
   <LoginProvider>

apps/zbugs/src/page-load-stats.ts

@@ -1,4 +1,4 @@
-import {umami} from './umami.js';
+import {umami} from './umami.ts';
 
 function assignLatencyToBucket(latencyMs: number): string {
   const buckets = [

apps/zbugs/src/pages/issue/comment-composer.tsx

@@ -1,10 +1,10 @@
 import {nanoid} from 'nanoid';
 import {useEffect, useState} from 'react';
-import {Button} from '../../components/button.js';
-import {useLogin} from '../../hooks/use-login.js';
-import {useZero} from '../../hooks/use-zero.js';
-import {isCtrlEnter} from './is-ctrl-enter.js';
-import {maxCommentLength} from '../../limits.js';
+import {Button} from '../../components/button.tsx';
+import {useLogin} from '../../hooks/use-login.tsx';
+import {useZero} from '../../hooks/use-zero.ts';
+import {maxCommentLength} from '../../limits.ts';
+import {isCtrlEnter} from './is-ctrl-enter.ts';
 
 export function CommentComposer({
   id,

apps/zbugs/src/pages/issue/comment.tsx

@@ -1,20 +1,20 @@
 import type {Row} from '@rocicorp/zero';
 import classNames from 'classnames';
 import {memo, useState} from 'react';
-import {makePermalink} from '../../comment-permalink.js';
-import type {commentQuery} from '../../comment-query.js';
-import {AvatarImage} from '../../components/avatar-image.js';
-import {Button} from '../../components/button.js';
-import {CanEdit} from '../../components/can-edit.js';
-import {Confirm} from '../../components/confirm.js';
-import {EmojiPanel} from '../../components/emoji-panel.js';
-import {Link} from '../../components/link.js';
-import {Markdown} from '../../components/markdown.js';
-import {RelativeTime} from '../../components/relative-time.js';
-import {useHash} from '../../hooks/use-hash.js';
-import {useLogin} from '../../hooks/use-login.js';
-import {useZero} from '../../hooks/use-zero.js';
-import {CommentComposer} from './comment-composer.js';
+import {makePermalink} from '../../comment-permalink.ts';
+import type {commentQuery} from '../../comment-query.ts';
+import {AvatarImage} from '../../components/avatar-image.tsx';
+import {Button} from '../../components/button.tsx';
+import {CanEdit} from '../../components/can-edit.tsx';
+import {Confirm} from '../../components/confirm.tsx';
+import {EmojiPanel} from '../../components/emoji-panel.tsx';
+import {Link} from '../../components/link.tsx';
+import {Markdown} from '../../components/markdown.tsx';
+import {RelativeTime} from '../../components/relative-time.tsx';
+import {useHash} from '../../hooks/use-hash.ts';
+import {useLogin} from '../../hooks/use-login.tsx';
+import {useZero} from '../../hooks/use-zero.ts';
+import {CommentComposer} from './comment-composer.tsx';
 import style from './comment.module.css';
 
 type Props = {