docs: fix typos in blog posts

.changeset/fix-blog-typos.md

@@ -0,0 +1,5 @@
+---
+"documentation": patch
+---
+
+docs: fix typos in blog posts

documentation/blog/2022-02-21-react-antd-admin.md

@@ -528,7 +528,7 @@ Let's create two Roles, Admin and Editor. Admin have full CRUD authority on the
 
 Let's start by creating two buttons for the `Admin` and `Editor` roles in our created Header Component.
 
-```tsx title="/src/componets/header.tsx"
+```tsx title="/src/components/header.tsx"
 import { useGetLocale, useSetLocale } from "@refinedev/core";
 import {
   AntdLayout,

documentation/blog/2023-07-26-refine-primereact-dashboard.md

@@ -141,7 +141,7 @@ Previously, we mentioned that the scaffolded project includes auto-generated CRU
 
     body {
       margin: 0px;
-      // Build-in PrimeReact themes use this variable
+      // Built-in PrimeReact themes use this variable
       font-family: var(--font-family);
     }
     ```

documentation/blog/2023-09-20-next-ui-panel.md

@@ -2289,7 +2289,7 @@ export { ProductEdit } from "./edit";
 export { ProductShow } from "./show";
 ```
 
-Finally, add the following highligthed changes to the `src/App.tsx` file.
+Finally, add the following highlighted changes to the `src/App.tsx` file.
 
 <details>
 

documentation/blog/2024-03-19-ts-shadcn.md

@@ -1715,7 +1715,7 @@ In this post, we demonstrated with a blog posts list page example how Shadcn can
 
 We learned how Refin'es headless architecture offers easy integration of Shadcn within a Refine app. We covered Shadcn relies on TailwindCSS and its dependencies and elaborated how Shadcn is configured to operate with TypeScript within a Vite based React app like Refine.
 
-Later on, we generated necessary Shadcn components we needed to rebuild a data grid for a list page in our Refine app. While rebuiling the data table and pagination with Shadcn components, we saw how Shadcn components complement and play well with the sophisticated data fetching, state management and React Table integrations typical of Refine apps. We also examined how Shadcn utilizes Class Variance Authority to produce style maps for component variants that are difficult to implement with plain TailwindCSS.
+Later on, we generated necessary Shadcn components we needed to rebuild a data grid for a list page in our Refine app. While rebuilding the data table and pagination with Shadcn components, we saw how Shadcn components complement and play well with the sophisticated data fetching, state management and React Table integrations typical of Refine apps. We also examined how Shadcn utilizes Class Variance Authority to produce style maps for component variants that are difficult to implement with plain TailwindCSS.
 
 Towards the end, we refactored the Shadcn based paginated data table into a reusable component that we can use to present any data we want.
 

documentation/blog/2024-04-01-ts-keyof.md

@@ -102,7 +102,7 @@ It is common to use the `typeof` operator with `keyof` in order to derive an obj
 ```ts
 const account = {
   username: "donald_duck",
-  email: "donald.duck@exmaple.com",
+  email: "donald.duck@example.com",
   password: "goawaygoaway",
   role: "admin",
 };
@@ -144,15 +144,15 @@ We can use the `keyof` operator in generic functions. Let's say we have an `acco
 ```ts
 const account = {
   username: "donald_duck",
-  email: "donald.duck@exmaple.com",
+  email: "donald.duck@example.com",
   password: "goawaygoaway",
   role: "admin",
 };
 
 function getProp<T, K extends keyof T> (obj: T, prop: K) { return obj[prop] };
 function setProp<T, K extends keyof T> (obj: T, prop: K, value: T[K]) { obj[prop] = value };
 
-console.log(getProp(account, "email")); // "donald.duck@exmaple.com"
+console.log(getProp(account, "email")); // "donald.duck@example.com"
 console.log(getProp<{"name": string}, "name">(account, "email")); // 2345 Error: "name" not compatible to `account` keys
 
 setProp(account, "role", "project manager");

documentation/blog/2024-05-21-zod.md

@@ -688,7 +688,7 @@ export function EditProfile() {
             <input
               type="text"
               className="w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-indigo-500 focus:outline-none focus:ring-indigo-500"
-              placeholder="email@exmaple.kr"
+              placeholder="email@example.kr"
               {...formInstance?.register("email")}
             ></input>
             {formInstance?.formState.errors?.email && (

documentation/blog/2024-06-21-auth-with-nextauth.md

@@ -318,7 +318,7 @@ export default function Home() {
               height={200}
             />
             <div className={styles.blogCardContent}>
-              <h2>Nexjs for Beginers</h2>
+              <h2>Nexjs for Beginners</h2>
               <p>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit.
                 Quisquam, quidem.
@@ -450,7 +450,7 @@ export default function Home() {
                 height={200}
               />
               <div className={styles.blogCardContent}>
-                <h2>Nexjs for Beginers</h2>
+                <h2>Nexjs for Beginners</h2>
                 <p>
                   Lorem ipsum dolor sit amet consectetur adipisicing elit.
                   Quisquam, quidem.

documentation/blog/2024-08-12-bun-vs-node.md

@@ -20,7 +20,7 @@ Do you want to try out a new runtime environment? [Bun](https://bun.sh/) is the
 
 While there is no prerequisite to follow in this tutorial, you should at least know the fundamentals of Javascript and building basic web applications.
 
-You need the followings:
+You need the following:
 
 - [Node 14](https://nodejs.org/en) or higher
 - [Bun runtime](https://bun.sh/) installed

documentation/blog/2024-09-16-stylex-post.md

@@ -298,7 +298,7 @@ const style = stylex.create({
 
 </details>
 
-It takes a styles object with property indentifiers that represent a CSS class and values that compose the actual CSS rules. Under the hood, Stylex creates a CSS class with an identifier starting with `x` for each of the Stylex style object property. When the style is applied to a JSX element with `stylex.props`, this generated CSS class is added to the element's `className` property.
+It takes a styles object with property identifiers that represent a CSS class and values that compose the actual CSS rules. Under the hood, Stylex creates a CSS class with an identifier starting with `x` for each of the Stylex style object property. When the style is applied to a JSX element with `stylex.props`, this generated CSS class is added to the element's `className` property.
 
 <br />
 

examples/monorepo-module-federation/apps/blog-posts/package.json

@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/blog-posts/vite.config.ts

@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "blog_posts",
-      filename: "blog_posts.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./BlogPostList": "./src/pages/blog-posts/list.tsx",
         "./BlogPostShow": "./src/pages/blog-posts/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",

examples/monorepo-module-federation/apps/categories/package.json

@@ -37,7 +37,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/categories/vite.config.ts

@@ -1,4 +1,4 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
 import { defineConfig } from "vite";
@@ -12,7 +12,8 @@ export default defineConfig({
     react(),
     federation({
       name: "categories",
-      filename: "categories.js",
+      filename: "remoteEntry.js",
+      dts: false,
       exposes: {
         "./CategoryList": "./src/pages/categories/list.tsx",
         "./CategoryShow": "./src/pages/categories/show.tsx",
@@ -22,7 +23,7 @@ export default defineConfig({
       shared: [
         "react",
         "react-dom",
-        "react-router-dom",
+        "react-router",
         "@refinedev/core",
         "@refinedev/antd",
         "antd",

examples/monorepo-module-federation/apps/host/.env.example

@@ -1 +1 @@
-VITE_CATEGORIES_URL="http://localhost:4002/assets/categories.js"
+VITE_CATEGORIES_URL="http://localhost:4002/remoteEntry.js"

examples/monorepo-module-federation/apps/host/package.json

@@ -35,7 +35,7 @@
     "react-router": "^7.0.2"
   },
   "devDependencies": {
-    "@originjs/vite-plugin-federation": "^1.2.3",
+    "@module-federation/vite": "^1.16.8",
     "@types/node": "^20",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

examples/monorepo-module-federation/apps/host/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from "react";
+import React, { Suspense } from "react";
 
 import { Authenticated, GitHubBanner, Refine } from "@refinedev/core";
 import { RefineKbar, RefineKbarProvider } from "@refinedev/kbar";
@@ -25,7 +25,6 @@ import { ColorModeContextProvider } from "./contexts/color-mode";
 import { ForgotPassword } from "./pages/forgotPassword";
 import { Login } from "./pages/login";
 import { Register } from "./pages/register";
-import type { ExtendedWindow } from "./types";
 
 const BlogPostList = React.lazy(() => import("blog_posts/BlogPostList"));
 const BlogPostShow = React.lazy(() => import("blog_posts/BlogPostShow"));
@@ -37,19 +36,7 @@ const CategoryShow = React.lazy(() => import("categories/CategoryShow"));
 const CategoryEdit = React.lazy(() => import("categories/CategoryEdit"));
 const CategoryCreate = React.lazy(() => import("categories/CategoryCreate"));
 
-declare let window: ExtendedWindow;
-
 function App() {
-  useEffect(() => {
-    // This is not as elegant as production code as we cannot use such in production.
-    // But lets assume these envs are coming from a environment handler.
-    // And this is only for sample case.
-    if (import.meta.env.VITE_CATEGORIES_URL) {
-      // This is where we set the payment remote's URL.
-      window.categoriesUrl = import.meta.env.VITE_CATEGORIES_URL;
-    }
-  }, []);
-
   return (
     <BrowserRouter>
       <GitHubBanner />

examples/monorepo-module-federation/apps/host/vite.config.ts

@@ -1,53 +1,60 @@
-import federation from "@originjs/vite-plugin-federation";
+import { federation } from "@module-federation/vite";
 import react from "@vitejs/plugin-react";
 import * as dns from "dns";
-import { defineConfig } from "vite";
+import { defineConfig, loadEnv } from "vite";
 import tsconfigPaths from "vite-tsconfig-paths";
 
 dns.setDefaultResultOrder("verbatim");
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    react(),
-    federation({
-      name: "host",
-      remotes: [
-        {
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, __dirname, "");
+
+  return {
+    plugins: [
+      react(),
+      federation({
+        name: "host",
+        dts: false,
+        remotes: {
           blog_posts: {
-            external: "http://localhost:4001/assets/blog_posts.js",
-            from: "vite",
-            externalType: "url",
+            type: "module",
+            name: "blog_posts",
+            entry: "http://localhost:4001/remoteEntry.js",
+            entryGlobalName: "blog_posts",
+            shareScope: "default",
           },
-        },
-        {
           categories: {
-            external: "Promise.resolve(window.categoriesUrl)",
-            from: "vite",
-            externalType: "promise",
+            type: "module",
+            name: "categories",
+            entry:
+              env.VITE_CATEGORIES_URL || "http://localhost:4002/remoteEntry.js",
+            entryGlobalName: "categories",
+            shareScope: "default",
           },
         },
-      ],
-      shared: [
-        "react",
-        "react-dom",
-        "react-router-dom",
-        "@refinedev/core",
-        "@refinedev/antd",
-        "antd",
-      ],
-    }),
-    tsconfigPaths({ root: __dirname }),
-  ],
+        filename: "remoteEntry.js",
+        shared: [
+          "react",
+          "react-dom",
+          "react-router",
+          "@refinedev/core",
+          "@refinedev/antd",
+          "antd",
+        ],
+      }),
+      tsconfigPaths({ root: __dirname }),
+    ],
 
-  preview: {
-    host: "localhost",
-    port: 4000,
-    strictPort: true,
-  },
-  build: {
-    target: "esnext",
-    minify: false,
-    cssCodeSplit: false,
-  },
+    preview: {
+      host: "localhost",
+      port: 4000,
+      strictPort: true,
+    },
+    build: {
+      target: "esnext",
+      minify: false,
+      cssCodeSplit: false,
+    },
+  };
 });