Merge pull request #83 from agneym/82-upgrade-typescript

agneym · web-flow · commit 595094f518ac · 2025-12-20T13:23:08.000+05:30
82-upgrade-typescript
diff --git a/.changeset/solid-lands-crash.md b/.changeset/solid-lands-crash.md
@@ -0,0 +1,7 @@
+---
+"@agney/playground": major
+---
+
+- Update TypeScript to tsgo and fix type errors
+- Migrate from Microbundle to Tsdown
+- Migrate from Jest to Vitest
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["typescriptteam.native-preview"]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.experimental.useTsgo": true
 }
diff --git a/lefthook.yml b/lefthook.yml
@@ -2,4 +2,3 @@ pre-commit:
   parallel: true
   jobs:
     - run: pnpm format {staged_files}
-      glob: "*"
diff --git a/package.json b/package.json
@@ -15,11 +15,13 @@
     "version": "changeset version",
     "release": "pnpm build && changeset publish",
     "format": "oxfmt --no-error-on-unmatched-pattern",
-    "format:check": "oxfmt --check"
+    "format:check": "oxfmt --check",
+    "type:check": "pnpm --filter @agney/playground type:check"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.5.2",
     "@changesets/cli": "^2.29.8",
+    "@typescript/native-preview": "7.0.0-dev.20251219.1",
     "lefthook": "^2.0.12",
     "oxfmt": "^0.19.0",
     "typescript": "^4.4.4"
diff --git a/playground/.babelrc b/playground/.babelrc
diff --git a/playground/package.json b/playground/package.json
@@ -39,10 +39,12 @@
     "access": "public"
   },
   "scripts": {
-    "start": "microbundle watch --jsx React.createElement",
-    "build": "microbundle --jsx React.createElement",
-    "test": "jest",
-    "prepublishOnly": "pnpm build"
+    "start": "tsdown --watch",
+    "build": "tsdown",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "prepublishOnly": "pnpm build",
+    "type:check": "tsgo --noEmit"
   },
   "dependencies": {
     "@agney/react-inspector": "^4.0.0",
@@ -54,30 +56,23 @@
     "react-simple-code-editor": "^0.11.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-react": "^7.14.5",
-    "@babel/preset-typescript": "^7.15.0",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@rollup/plugin-babel": "^6.1.0",
     "@testing-library/react": "^12.1.2",
-    "@types/jest": "^27.0.2",
     "@types/lodash": "^4.14.175",
     "@types/lodash-es": "^4.17.5",
     "@types/lodash.merge": "^4.6.6",
     "@types/react": "^17.0.29",
     "@types/react-dom": "^17.0.9",
     "@types/react-inspector": "^4.0.2",
-    "jest": "^27.2.5",
-    "microbundle": "^0.14.0",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "jsdom": "^26.0.0",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react-dom": "^17.0.2",
+    "tsdown": "^0.18.1",
+    "vitest": "^3.0.0"
   },
   "peerDependencies": {
     "react": ">=16",
     "react-dom": ">=16"
-  },
-  "jest": {
-    "rootDir": "src",
-    "testEnvironment": "jsdom"
   }
 }
diff --git a/playground/scripts/test-utils.tsx b/playground/scripts/test-utils.tsx
@@ -1,22 +1,25 @@
-import React, { createElement, FC, ReactElement } from "react";
-import { render, RenderOptions } from "@testing-library/react";
+import { createElement } from "react";
+import type { FC, ReactElement, ReactNode } from "react";
+import * as testingLibrary from "@testing-library/react";
+import type { RenderOptions } from "@testing-library/react";
 import { setup } from "goober";
 
 import { ThemeProvider, useTheme } from "../src/utils/ThemeProvider";
 import getTheme from "../src/utils/theme";
 
 setup(createElement, undefined, useTheme);
 
-const AllProviders: FC = ({ children }) => {
+const AllProviders: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <ThemeProvider mode="light" userTheme={getTheme()}>
       {children}
     </ThemeProvider>
   );
 };
 
-const customRender = (ui: ReactElement, options?: Omit<RenderOptions, "queries">) =>
-  render(ui, { wrapper: AllProviders, ...options });
+function customRender(ui: ReactElement, options?: Omit<RenderOptions, "queries">) {
+  return testingLibrary.render(ui, { wrapper: AllProviders, ...options });
+}
 
 export * from "@testing-library/react";
 
diff --git a/playground/src/Draggable/index.tsx b/playground/src/Draggable/index.tsx
@@ -1,4 +1,5 @@
-import React, { FC, ReactNode, useRef, forwardRef } from "react";
+import { useRef, forwardRef } from "react";
+import type { FC, ReactNode } from "react";
 import { styled } from "goober";
 
 import useDrag from "./useDrag";
diff --git a/playground/src/Draggable/useDrag.ts b/playground/src/Draggable/useDrag.ts
@@ -1,4 +1,5 @@
-import { useState, useEffect, useCallback, RefObject } from "react";
+import { useState, useEffect, useCallback } from "react";
+import type { RefObject } from "react";
 
 interface IProps {
   containerRef: RefObject<HTMLDivElement | null>;
diff --git a/playground/src/Editor/EditorSetup.tsx b/playground/src/Editor/EditorSetup.tsx
@@ -1,10 +1,11 @@
-import React, { FC, Fragment } from "react";
+import { Fragment } from "react";
+import type { FC } from "react";
 import SimpleEditor from "react-simple-code-editor";
 import Highlight, { defaultProps } from "prism-react-renderer";
 import theme from "prism-react-renderer/themes/nightOwl";
 import { styled } from "goober";
 
-import { IEditorTabs } from "../types";
+import type { IEditorTabs } from "../types";
 
 const EditorWrapper = styled("div")`
   background-color: ${(props) => props.theme.editor.backgroundColor};
@@ -30,7 +31,7 @@ const EditorSetup: FC<IProps> = ({ code, language, onChange }) => {
         style={{ height: "100%" }}
         highlight={(code) => (
           <Highlight {...defaultProps} theme={theme} code={code} language={language}>
-            {({ className, style, tokens, getLineProps, getTokenProps }) => (
+            {({ tokens, getLineProps, getTokenProps }) => (
               <Fragment>
                 {tokens.map((line, i) => (
                   <div {...getLineProps({ line, key: i })}>
diff --git a/playground/src/Editor/index.tsx b/playground/src/Editor/index.tsx
@@ -1,8 +1,8 @@
-import React, { FC, useMemo } from "react";
+import { useMemo } from "react";
+import type { FC } from "react";
 import { styled } from "goober";
-import { IEditorTabs, ISnippet } from "../types";
+import type { IEditorTabs, ISnippet, ITabConfig } from "../types";
 import EditorSetup from "./EditorSetup";
-import { ITabConfig } from "../types";
 import {
   StyledTabs,
   StyledTabList,
@@ -11,7 +11,8 @@ import {
   StyledTabPanel,
 } from "../TabStyles";
 
-const TabContainer = styled(StyledTabs)`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const TabContainer = styled(StyledTabs as any)`
   min-width: ${(props) => props.theme.container.minWidth};
 `;
 
@@ -24,7 +25,7 @@ interface IProps {
 
 const Editor: FC<IProps> = ({ code, defaultTab, onChange, width }) => {
   const tabs: Readonly<ITabConfig<IEditorTabs>[]> = useMemo(() => {
-    const tabsArr = [];
+    const tabsArr: ITabConfig<IEditorTabs>[] = [];
     if (code.markup) {
       tabsArr.push({ name: "HTML", value: "markup", code: code.markup });
     }
@@ -35,7 +36,7 @@ const Editor: FC<IProps> = ({ code, defaultTab, onChange, width }) => {
       tabsArr.push({ name: "JS", value: "javascript", code: code.javascript });
     }
     return tabsArr;
-  }, []);
+  }, [code.markup, code.css, code.javascript]);
   return (
     <TabContainer
       defaultIndex={tabs.findIndex((tab) => tab.code && tab.value === defaultTab)}
diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
@@ -1,18 +1,21 @@
-import React, { FC, useState, createElement } from "react";
+import { useState, createElement } from "react";
+import type { FC } from "react";
 import { useId } from "@reach/auto-id";
-import { styled, setup, DefaultTheme } from "goober";
+import { styled, setup } from "goober";
+import type { DefaultTheme } from "goober";
 
 import Editor from "./Editor";
 import Result from "./Result";
-import { ISnippet, IEditorTabs, IResultTabs } from "./types";
+import type { ISnippet, IEditorTabs, IResultTabs } from "./types";
 import { ThemeProvider, useTheme } from "./utils/ThemeProvider";
-import { ColorMode } from "./utils/theme";
+import type { ColorMode } from "./utils/theme";
 import media from "./utils/media";
 import Draggable from "./Draggable";
 
 setup(createElement, undefined, useTheme);
 
-const StyledDraggable = styled(Draggable)`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const StyledDraggable = styled(Draggable as any)`
   border: 0.1em solid ${(props) => props.theme.container.borderColor};
   display: flex;
   min-height: ${(props) => props.theme.container.minHeight};
@@ -57,15 +60,15 @@ const Playground: FC<IProps> = ({
     <ThemeProvider userTheme={theme} mode={mode}>
       <div className="playground">
         <StyledDraggable
-          leftChild={(width) => (
+          leftChild={(width: number) => (
             <Editor
               width={width}
               code={snippet}
               defaultTab={defaultEditorTab}
               onChange={onSnippetChange}
             />
           )}
-          rightChild={(width) => (
+          rightChild={(width: number) => (
             <Result
               width={width}
               id={id}
diff --git a/playground/src/Result/Console.tsx b/playground/src/Result/Console.tsx
@@ -1,5 +1,6 @@
-import React, { FC } from "react";
+import type { FC } from "react";
 import { styled } from "goober";
+// @ts-expect-error - no types available for @agney/react-inspector
 import Inspector from "@agney/react-inspector";
 
 const Container = styled("div")`
diff --git a/playground/src/Result/ErrorDisplay.tsx b/playground/src/Result/ErrorDisplay.tsx
@@ -1,4 +1,4 @@
-import React, { FC } from "react";
+import type { FC } from "react";
 import { styled } from "goober";
 
 const Container = styled("div")`
diff --git a/playground/src/Result/Frame.tsx b/playground/src/Result/Frame.tsx
@@ -1,7 +1,8 @@
-import React, { FC, useMemo, useState, memo, useEffect } from "react";
+import { useMemo, useState, memo, useEffect } from "react";
+import type { FC } from "react";
 import { styled } from "goober";
 
-import { ISnippet } from "../types";
+import type { ISnippet } from "../types";
 import constructSnippet from "../utils/constructSnippet";
 import ErrorDisplay from "./ErrorDisplay";
 
@@ -27,7 +28,7 @@ const Frame: FC<IProps> = memo(({ id, snippet, transformJs, presets }) => {
       setCode(code);
       setError(null);
     } catch (err) {
-      setError(err.message);
+      setError(err instanceof Error ? err.message : String(err));
     }
   }, [snippet, transformJs]);
 
diff --git a/playground/src/Result/index.tsx b/playground/src/Result/index.tsx
@@ -1,4 +1,5 @@
-import React, { FC, useMemo, useEffect, useState } from "react";
+import { useMemo, useEffect, useState } from "react";
+import type { FC } from "react";
 
 import {
   StyledTabList,
@@ -7,7 +8,7 @@ import {
   StyledTabPanel,
   StyledTabs,
 } from "../TabStyles";
-import { ISnippet, ITabConfig, IResultTabs } from "../types";
+import type { ISnippet, ITabConfig, IResultTabs } from "../types";
 import Console from "./Console";
 import Frame from "./Frame";
 
diff --git a/playground/src/TabStyles.tsx b/playground/src/TabStyles.tsx
@@ -3,7 +3,8 @@ import { Tabs, TabList, Tab, TabPanels, TabPanel } from "@reach/tabs";
 
 import media from "./utils/media";
 
-export const StyledTabs = styled(Tabs)`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const StyledTabs = styled(Tabs as any)`
   display: flex;
   flex-direction: column;
   width: 50%;
@@ -14,13 +15,15 @@ export const StyledTabs = styled(Tabs)`
   }
 `;
 
-export const StyledTabList = styled(TabList)`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const StyledTabList = styled(TabList as any)`
   border-bottom: ${(props) => props.theme.tabs.tabHeader.borderBottom};
   padding: 0 0.8em;
   background-color: ${(props) => props.theme.tabs.tabHeader.panelBackground || "transparent"};
 `;
 
-export const StyledTab = styled(Tab)`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const StyledTab = styled(Tab as any)`
   background-color: ${(props) => props.theme.tabs.tabHeader.background};
   border: none;
   padding: 0.8em 0.5em;
@@ -33,14 +36,16 @@ export const StyledTab = styled(Tab)`
   }
 `;
 
-export const StyledTabPanels = styled(TabPanels)`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const StyledTabPanels = styled(TabPanels as any)`
   flex: 1;
 
   ${media.phone} {
     height: ${(props) => props.theme.tabs.tabPanel.phoneHeight};
   }
 `;
 
-export const StyledTabPanel = styled(TabPanel)`
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const StyledTabPanel = styled(TabPanel as any)`
   height: 100%;
 `;
diff --git a/playground/src/__tests__/Editor.test.tsx b/playground/src/__tests__/Editor.test.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { render } from "../../scripts/test-utils";
 
 import Editor from "../Editor";
diff --git a/playground/src/__tests__/Frame.test.tsx b/playground/src/__tests__/Frame.test.tsx
@@ -1,12 +1,14 @@
-import React from "react";
+import { vi } from "vitest";
 import { render } from "../../scripts/test-utils";
 
 import Frame from "../Result/Frame";
 
-jest.mock("../utils/constructSnippet", () => {
-  return jest.fn().mockImplementation(() => {
-    throw new Error("error");
-  });
+vi.mock("../utils/constructSnippet", () => {
+  return {
+    default: vi.fn().mockImplementation(() => {
+      throw new Error("error");
+    }),
+  };
 });
 
 const initialSnippet = {
diff --git a/playground/src/utils/ThemeProvider.tsx b/playground/src/utils/ThemeProvider.tsx
@@ -1,12 +1,20 @@
-import React, { createContext, useContext, useState, useEffect } from "react";
+import { createContext, useContext, useState, useEffect } from "react";
+import type { ReactNode } from "react";
 import getTheme, { theme } from "./theme";
+import type { ColorMode } from "./theme";
 
 export type DefaultTheme = typeof theme;
 
 const ThemeContext = createContext(theme);
 export const useTheme = () => useContext(ThemeContext);
 
-export function ThemeProvider({ mode, userTheme, children }) {
+interface ThemeProviderProps {
+  mode: ColorMode;
+  userTheme: DefaultTheme | undefined;
+  children: ReactNode;
+}
+
+export function ThemeProvider({ mode, userTheme, children }: ThemeProviderProps) {
   const [consolidatedTheme, setConsolidatedTheme] = useState<DefaultTheme>(theme);
 
   useEffect(() => {
diff --git a/playground/src/utils/constructSnippet.ts b/playground/src/utils/constructSnippet.ts
@@ -1,4 +1,4 @@
-import { ISnippet } from "../types";
+import type { ISnippet } from "../types";
 
 /**
  * Constructs snippet from individual html, css and js code.
diff --git a/playground/tsconfig.json b/playground/tsconfig.json
diff --git a/playground/tsdown.config.ts b/playground/tsdown.config.ts
diff --git a/playground/vitest.config.ts b/playground/vitest.config.ts
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "recommendations": ["typescriptteam.native-preview"]`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`{`
`2`		`- "typescript.tsdk": "node_modules/typescript/lib"`
	`2`	`+ "typescript.experimental.useTsgo": true`
`3`	`3`	`}`