feat: add finalizations for vite and nextjs config

examples/with-nextjs/src/app/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { images } from "../../../../assets/data/images";
-import { Masonry } from "../../../../libs/react-plock";
+import { images } from "@assets/data/images";
+import { Masonry } from "@local/lib";
 
 export default function Home() {
   return (
@@ -13,10 +13,12 @@ export default function Home() {
         media: [640, 1024, 1280],
       }}
       render={(item, idx) => (
+        // eslint-disable-next-line @next/next/no-img-element
         <img
           key={idx}
           src={item}
           loading="lazy"
+          alt="Unsplash Image"
           style={{ width: "100%", height: "auto" }}
         />
       )}

examples/with-nextjs/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -19,7 +20,8 @@
     ],
     "paths": {
       "@/*": ["./src/*"],
-      "local": ["../../libs/react-plock/*"]
+      "@local/lib": ["../../libs/react-plock/index"],
+      "@assets/*": ["../../assets/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

examples/with-vite/package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite-tsconfig-paths": "^4.3.1"
   },
   "devDependencies": {
     "@types/react": "^18.0.27",

examples/with-vite/src/main.tsx

@@ -1,7 +1,7 @@
+import { images } from "@assets/data/images";
+import { Masonry } from "@local/lib";
 import React from "react";
 import ReactDOM from "react-dom/client";
-import { images } from "../../../assets/data/images";
-import { Masonry } from "../../../libs/react-plock";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
@@ -21,6 +21,5 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
         />
       )}
     />
-    );
   </React.StrictMode>
 );

examples/with-vite/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": ".",
     "target": "ESNext",
     "useDefineForClassFields": true,
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
@@ -14,7 +15,11 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "paths": {
+      "@local/lib": ["../../libs/react-plock/index"],
+      "@assets/*": ["../../assets/*"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]

examples/with-vite/vite.config.ts

@@ -1,7 +1,8 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
-})
+  plugins: [react(), tsconfigPaths()],
+});

libs/react-plock/package.json

@@ -2,8 +2,8 @@
   "name": "react-plock",
   "version": "3.0.2",
   "description": "The 1kB Masonry Grid for React",
-  "author": "Renato Pozzi <renato.pozzi.dev@gmail.com>",
-  "homepage": "https://github.com/itsrennyman/react-plock#readme",
+  "author": "Renato Pozzi <askides@proton.me>",
+  "homepage": "https://github.com/askides/react-plock#readme",
   "license": "ISC",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -16,14 +16,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/itsrennyman/react-plock.git"
+    "url": "git+https://github.com/askides/react-plock.git"
   },
   "scripts": {
     "build": "tsup index.ts --dts --minify",
     "test": "jest"
   },
   "bugs": {
-    "url": "https://github.com/itsrennyman/react-plock/issues"
+    "url": "https://github.com/askides/react-plock/issues"
   },
   "peerDependencies": {
     "react": "^18.2.0"

libs/react-plock/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "jsx": "react",
     "outDir": "./dist"

package.json

@@ -21,6 +21,6 @@
     "@types/node": "^18.14.4",
     "lerna": "^6.5.1",
     "tsup": "^6.6.3",
-    "typescript": "^4.9.5"
+    "typescript": "^5.3.3"
   }
 }