From 39ffb8f69c047d836d0c9dff72e58541865a5403 Mon Sep 17 00:00:00 2001 From: cpojer Date: Wed, 18 Oct 2023 16:02:22 +0900 Subject: [PATCH] Update `tsconfig.json` and update all imports. --- packages/create-remdx/index.tsx | 1 + packages/create-remdx/template/slides.re.mdx | 6 +++--- packages/create-remdx/template/tsconfig.json | 7 ++++--- packages/remdx/index.tsx | 10 +++++----- packages/remdx/src/components/Components.tsx | 5 +++++ packages/remdx/src/components/index.tsx | 5 ----- packages/remdx/src/deck.tsx | 10 +++++----- ...ratio-fitting.ts => use-aspect-ratio-fitting.tsx} | 1 + .../hooks/{use-deck-state.ts => use-deck-state.tsx} | 0 .../{use-location-sync.ts => use-location-sync.tsx} | 2 +- .../hooks/{use-mousetrap.ts => use-mousetrap.tsx} | 0 packages/remdx/src/render.tsx | 4 ++-- packages/remdx/src/slide.tsx | 6 +++--- packages/remdx/src/slidesToComponent.tsx | 10 +++++----- packages/remdx/src/transitions.tsx | 2 +- packages/remdx/{types.ts => types.tsx} | 2 +- packages/vite-plugin-remdx/index.ts | 3 ++- .../{ColorReplacements.ts => ColorReplacements.tsx} | 0 tsconfig.json | 12 +++++++----- 19 files changed, 46 insertions(+), 40 deletions(-) create mode 100644 packages/remdx/src/components/Components.tsx delete mode 100644 packages/remdx/src/components/index.tsx rename packages/remdx/src/hooks/{use-aspect-ratio-fitting.ts => use-aspect-ratio-fitting.tsx} (98%) rename packages/remdx/src/hooks/{use-deck-state.ts => use-deck-state.tsx} (100%) rename packages/remdx/src/hooks/{use-location-sync.ts => use-location-sync.tsx} (97%) rename packages/remdx/src/hooks/{use-mousetrap.ts => use-mousetrap.tsx} (100%) rename packages/remdx/{types.ts => types.tsx} (91%) rename packages/vite-plugin-remdx/lib/{ColorReplacements.ts => ColorReplacements.tsx} (100%) diff --git a/packages/create-remdx/index.tsx b/packages/create-remdx/index.tsx index 0bfa8b3..a7f6128 100644 --- a/packages/create-remdx/index.tsx +++ b/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'; diff --git a/packages/create-remdx/template/slides.re.mdx b/packages/create-remdx/template/slides.re.mdx index 5928862..3606551 100644 --- a/packages/create-remdx/template/slides.re.mdx +++ b/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 diff --git a/packages/create-remdx/template/tsconfig.json b/packages/create-remdx/template/tsconfig.json index 3564317..b8bcd00 100644 --- a/packages/create-remdx/template/tsconfig.json +++ b/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"] diff --git a/packages/remdx/index.tsx b/packages/remdx/index.tsx index 0e7dbcb..7c8c7d9 100644 --- a/packages/remdx/index.tsx +++ b/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'; diff --git a/packages/remdx/src/components/Components.tsx b/packages/remdx/src/components/Components.tsx new file mode 100644 index 0000000..2ab7c76 --- /dev/null +++ b/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; diff --git a/packages/remdx/src/components/index.tsx b/packages/remdx/src/components/index.tsx deleted file mode 100644 index e1d922d..0000000 --- a/packages/remdx/src/components/index.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import { MDXComponents } from '../../types'; -import Image from './Image'; - -const Components: MDXComponents = { img: Image }; -export default Components; diff --git a/packages/remdx/src/deck.tsx b/packages/remdx/src/deck.tsx index 879a636..587b834 100644 --- a/packages/remdx/src/deck.tsx +++ b/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; diff --git a/packages/remdx/src/hooks/use-aspect-ratio-fitting.ts b/packages/remdx/src/hooks/use-aspect-ratio-fitting.tsx similarity index 98% rename from packages/remdx/src/hooks/use-aspect-ratio-fitting.ts rename to packages/remdx/src/hooks/use-aspect-ratio-fitting.tsx index 276a435..be8a612 100644 --- a/packages/remdx/src/hooks/use-aspect-ratio-fitting.ts +++ b/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, diff --git a/packages/remdx/src/hooks/use-deck-state.ts b/packages/remdx/src/hooks/use-deck-state.tsx similarity index 100% rename from packages/remdx/src/hooks/use-deck-state.ts rename to packages/remdx/src/hooks/use-deck-state.tsx diff --git a/packages/remdx/src/hooks/use-location-sync.ts b/packages/remdx/src/hooks/use-location-sync.tsx similarity index 97% rename from packages/remdx/src/hooks/use-location-sync.ts rename to packages/remdx/src/hooks/use-location-sync.tsx index 6a969c1..658bf5f 100644 --- a/packages/remdx/src/hooks/use-location-sync.ts +++ b/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; diff --git a/packages/remdx/src/hooks/use-mousetrap.ts b/packages/remdx/src/hooks/use-mousetrap.tsx similarity index 100% rename from packages/remdx/src/hooks/use-mousetrap.ts rename to packages/remdx/src/hooks/use-mousetrap.tsx diff --git a/packages/remdx/src/render.tsx b/packages/remdx/src/render.tsx index 220187f..535e43b 100644 --- a/packages/remdx/src/render.tsx +++ b/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(); diff --git a/packages/remdx/src/slide.tsx b/packages/remdx/src/slide.tsx index 6900df7..9681890 100644 --- a/packages/remdx/src/slide.tsx +++ b/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, diff --git a/packages/remdx/src/slidesToComponent.tsx b/packages/remdx/src/slidesToComponent.tsx index c50a12f..1016135 100644 --- a/packages/remdx/src/slidesToComponent.tsx +++ b/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) { const { Components, Themes, Transitions, default: slides } = await module; diff --git a/packages/remdx/src/transitions.tsx b/packages/remdx/src/transitions.tsx index 99d93e0..bdef56b 100644 --- a/packages/remdx/src/transitions.tsx +++ b/packages/remdx/src/transitions.tsx @@ -1,4 +1,4 @@ -import { SlideTransition } from './deck'; +import { SlideTransition } from './deck.tsx'; export const defaultTransition: SlideTransition = { enter: { diff --git a/packages/remdx/types.ts b/packages/remdx/types.tsx similarity index 91% rename from packages/remdx/types.ts rename to packages/remdx/types.tsx index de00e83..7549525 100644 --- a/packages/remdx/types.ts +++ b/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 ? Props diff --git a/packages/vite-plugin-remdx/index.ts b/packages/vite-plugin-remdx/index.ts index 9042b30..3fece30 100644 --- a/packages/vite-plugin-remdx/index.ts +++ b/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]; @@ -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]], }); } diff --git a/packages/vite-plugin-remdx/lib/ColorReplacements.ts b/packages/vite-plugin-remdx/lib/ColorReplacements.tsx similarity index 100% rename from packages/vite-plugin-remdx/lib/ColorReplacements.ts rename to packages/vite-plugin-remdx/lib/ColorReplacements.tsx diff --git a/tsconfig.json b/tsconfig.json index 90f2537..922ec57 100644 --- a/tsconfig.json +++ b/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": {