Update tsconfig.json and update all imports.

packages/create-remdx/index.tsx

@@ -4,6 +4,7 @@
 // MIT License – Copyright (c) 2020-2021 Anthony Fu
 import fs from 'node:fs';
 import path from 'node:path';
+// @ts-expect-error
 import { execa } from 'execa';
 import { blue, bold, dim, green, yellow } from 'kolorist';
 import prompts from 'prompts';

packages/create-remdx/template/slides.re.mdx

@@ -1,7 +1,7 @@
-import sights from './sights';
+import sights from './sights.tsx';
 
-export { Components } from './Components';
-export { Themes } from './Themes';
+export { Components } from './Components.tsx';
+export { Themes } from './Themes.tsx';
 
 --
 image: tokyo.jpg

packages/create-remdx/template/tsconfig.json

@@ -1,14 +1,15 @@
 {
   "compilerOptions": {
     "allowJs": true,
+    "allowImportingTsExtensions": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "incremental": true,
     "isolatedModules": true,
     "jsx": "preserve",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "noEmit": true,
     "noImplicitOverride": true,
     "noUnusedLocals": true,
@@ -23,7 +24,7 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2017"
+    "target": "es2022"
   },
   "exclude": ["dist/", "node_modules"],
   "include": ["**/*.ts", "**/*.tsx"]

packages/remdx/index.tsx

@@ -2,10 +2,10 @@ export type {
   ReMDXSlide,
   Themes,
   MDXComponents as ComponentList,
-} from './types';
+} from './types.tsx';
 
-export { default as Deck } from './src/deck';
-export { default as render } from './src/render';
-export { default as Slide } from './src/slide';
-export { default as slidesToComponent } from './src/slidesToComponent';
+export { default as Deck } from './src/deck.tsx';
+export { default as render } from './src/render.tsx';
+export { default as Slide } from './src/slide.tsx';
+export { default as slidesToComponent } from './src/slidesToComponent.tsx';
 export { useMDXComponents } from '@mdx-js/react';

packages/remdx/src/components/Components.tsx

@@ -0,0 +1,5 @@
+import { MDXComponents } from '../../types.tsx';
+import Image from './Image.tsx';
+
+const Components: MDXComponents = { img: Image };
+export default Components;

packages/remdx/src/deck.tsx

@@ -6,11 +6,11 @@ import {
   useEffect,
 } from 'react';
 import { SwipeEventData } from 'react-swipeable';
-import useAspectRatioFitting from './hooks/use-aspect-ratio-fitting';
-import useDeckState from './hooks/use-deck-state';
-import useLocationSync from './hooks/use-location-sync';
-import useMousetrap from './hooks/use-mousetrap';
-import { defaultTransition } from './transitions';
+import useAspectRatioFitting from './hooks/use-aspect-ratio-fitting.tsx';
+import useDeckState from './hooks/use-deck-state.tsx';
+import useLocationSync from './hooks/use-location-sync.tsx';
+import useMousetrap from './hooks/use-mousetrap.tsx';
+import { defaultTransition } from './transitions.tsx';
 
 export type SlideTransition = {
   enter?: CSSProperties;

packages/remdx/src/hooks/use-aspect-ratio-fitting.ts → packages/remdx/src/hooks/use-aspect-ratio-fitting.tsx

@@ -50,6 +50,7 @@ export default function useAspectRatioFitting(aspectRatio: number) {
     recalculate(rects[0]);
   }, [targetWidth, targetHeight, recalculate]);
 
+  // @ts-expect-error
   useResizeObserver({
     onResize: recalculate,
     ref: containerRef,

packages/remdx/src/hooks/use-location-sync.ts → packages/remdx/src/hooks/use-location-sync.tsx

@@ -1,6 +1,6 @@
 import { createBrowserHistory, Location } from 'history';
 import { useCallback, useEffect, useState } from 'react';
-import { DeckView, GOTO_FINAL_STEP } from '../hooks/use-deck-state';
+import { DeckView, GOTO_FINAL_STEP } from './use-deck-state.tsx';
 
 export type SlideState = {
   slideIndex?: number;

packages/remdx/src/render.tsx

@@ -1,6 +1,6 @@
 import { createRoot, Root } from 'react-dom/client';
-import { ReMDXModule } from '../types';
-import slidesToComponent from './slidesToComponent';
+import { ReMDXModule } from '../types.tsx';
+import slidesToComponent from './slidesToComponent.tsx';
 
 const roots = new WeakMap<HTMLElement, Root>();
 

packages/remdx/src/slide.tsx

@@ -9,9 +9,9 @@ import {
 } from 'react';
 import { animated, useSpring } from 'react-spring';
 import { useSwipeable } from 'react-swipeable';
-import { DeckContext, SlideTransition } from './deck';
-import { GOTO_FINAL_STEP } from './hooks/use-deck-state';
-import { Transitions } from './transitions';
+import { DeckContext, SlideTransition } from './deck.tsx';
+import { GOTO_FINAL_STEP } from './hooks/use-deck-state.tsx';
+import { Transitions } from './transitions.tsx';
 
 export default function Slide({
   children,

packages/remdx/src/slidesToComponent.tsx

@@ -1,9 +1,9 @@
 import { MDXProvider } from '@mdx-js/react';
-import { ReMDXModule } from '../types';
-import DefaultComponents from './components';
-import Deck from './deck';
-import Slide from './slide';
-import { Transitions as DefaultTransitions } from './transitions';
+import { ReMDXModule } from '../types.tsx';
+import DefaultComponents from './components/Components.tsx';
+import Deck from './deck.tsx';
+import Slide from './slide.tsx';
+import { Transitions as DefaultTransitions } from './transitions.tsx';
 
 export default async function slidesToComponent(module: Promise<ReMDXModule>) {
   const { Components, Themes, Transitions, default: slides } = await module;

packages/remdx/src/transitions.tsx

@@ -1,4 +1,4 @@
-import { SlideTransition } from './deck';
+import { SlideTransition } from './deck.tsx';
 
 export const defaultTransition: SlideTransition = {
   enter: {

packages/remdx/types.ts → packages/remdx/types.tsx

@@ -1,6 +1,6 @@
 import { MDXProvider } from '@mdx-js/react';
 import { CSSProperties } from 'react';
-import { SlideTransition } from './src/deck';
+import { SlideTransition } from './src/deck.tsx';
 
 type MDXProps = typeof MDXProvider extends React.FC<infer Props>
   ? Props

packages/vite-plugin-remdx/index.ts

@@ -5,7 +5,7 @@ import normalizeNewline from 'normalize-newline';
 import rehypeRaw from 'rehype-raw';
 import shikiTwoslash, { setupForFile } from 'remark-shiki-twoslash';
 import type { Plugin } from 'vite';
-import ColorReplacements from './lib/ColorReplacements';
+import ColorReplacements from './lib/ColorReplacements.tsx';
 
 type Slide = [string, Record<string, unknown>];
 
@@ -169,6 +169,7 @@ export default function remdx(): Plugin {
         return await transform(code, {
           // @ts-expect-error
           rehypePlugins: [[rehypeRaw, { passThrough: nodeTypes }]],
+          // @ts-expect-error
           remarkPlugins: [[shikiTwoslashFn, shikiOptions]],
         });
       }

tsconfig.json

@@ -1,16 +1,17 @@
 {
   "compilerOptions": {
-    "allowImportingTsExtensions": true,
     "allowJs": true,
+    "allowImportingTsExtensions": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "incremental": true,
     "isolatedModules": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "lib": ["dom", "dom.iterable", "esnext"],
-    "module": "esnext",
-    "moduleResolution": "node",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
     "noEmit": true,
+    "noImplicitOverride": true,
     "noUnusedLocals": true,
     "plugins": [
       {
@@ -23,7 +24,8 @@
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "es2020"
+    "target": "es2022",
+    "types": ["vite/client"]
   },
   "exclude": ["dist/", "node_modules", "packages/create-remdx/template"],
   "ts-node": {