use tsx, update dependencies

package.json

@@ -14,7 +14,7 @@
         "_format": "prettier '**/*.{ts,tsx,json,md}'",
         "format": "npm run _format -- --write",
         "format:check": "npm run _format -- --list-different",
-        "link-in-app": "ts-node --skipProject scripts/link-in-app.ts"
+        "link-in-app": "tsx scripts/link-in-app.ts"
     },
     "main": "dist/index.js",
     "types": "dist/index.d.ts",
@@ -47,18 +47,18 @@
     "homepage": "https://github.com/#{USER_OR_ORG}#/#{REPO_NAME}#",
     "devDependencies": {
         "@types/node": "^20.2.1",
-        "typescript": "^5.0.4",
+        "typescript": "^5.4.5",
         "@typescript-eslint/eslint-plugin": "^5.59.6",
         "@typescript-eslint/parser": "^5.59.6",
         "eslint": "^8.41.0",
         "eslint-config-prettier": "^8.8.0",
         "husky": "^4.3.8",
         "lint-staged": "^11.1.1",
-        "prettier": "^2.8.8",
-        "vitest": "^0.31.1",
-        "ts-node": "^10.9.1",
-        "react": "^18.2.0",
-        "@types/react": "^18.2.6"
+        "prettier": "^3.3.2",
+        "vitest": "^1.6.0",
+        "tsx": "^4.15.5",
+        "react": "^18.3.1",
+        "@types/react": "^18.3.3"
     },
     "publishConfig": {
         "access": "public"

scripts/link-in-app.ts

@@ -3,10 +3,12 @@ import { join as pathJoin, relative as pathRelative } from "path";
 import * as fs from "fs";
 import * as os from "os";
 
-const singletonDependencies: string[] = [
-    //"react",
-    //"@types/react"
-];
+const singletonDependencies: string[] = ["react", "@types/react"];
+
+// For example [ "@emotion" ] it's more convenient than
+// having to list every sub emotion packages (@emotion/css @emotion/utils ...)
+// in singletonDependencies
+const namespaceSingletonDependencies: string[] = [];
 
 const rootDirPath = pathJoin(__dirname, "..");
 
@@ -37,23 +39,16 @@ const rootDirPath = pathJoin(__dirname, "..");
     );
 }
 
-const commonThirdPartyDeps = (() => {
-    // For example [ "@emotion" ] it's more convenient than
-    // having to list every sub emotion packages (@emotion/css @emotion/utils ...)
-    // in singletonDependencies
-    const namespaceSingletonDependencies: string[] = [];
-
-    return [
-        ...namespaceSingletonDependencies
-            .map(namespaceModuleName =>
-                fs
-                    .readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName))
-                    .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
-            )
-            .reduce((prev, curr) => [...prev, ...curr], []),
-        ...singletonDependencies
-    ];
-})();
+const commonThirdPartyDeps = [
+    ...namespaceSingletonDependencies
+        .map(namespaceModuleName =>
+            fs
+                .readdirSync(pathJoin(rootDirPath, "node_modules", namespaceModuleName))
+                .map(submoduleName => `${namespaceModuleName}/${submoduleName}`)
+        )
+        .reduce((prev, curr) => [...prev, ...curr], []),
+    ...singletonDependencies
+];
 
 const yarnGlobalDirPath = pathJoin(rootDirPath, ".yarn_home");
 

src/MyReactComponent.tsx

@@ -1,7 +1,5 @@
-
-
 export function MyReactComponent() {
-  return <div>My React Component</div>;
+    return <div>My React Component</div>;
 }
 
-export default MyReactComponent;
+export default MyReactComponent;

src/tools/capitalize.ts

@@ -2,4 +2,4 @@
 export function capitalize<S extends string>(str: S): Capitalize<S> {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return (str.charAt(0).toUpperCase() + str.slice(1)) as any;
-}
+}

src/tools/index.ts

@@ -1 +1 @@
-export * from "./capitalize";
+export * from "./capitalize";