@modern-js/main-doc 2.67.6 → 2.67.8

package/docs/zh/tutorials/examples/csr-auth.mdx

@@ -12,203 +12,20 @@ Modern.js 默认提供的路由方式是基于 React Router 6 的约定式路由
 - 访问 `/protected` 路由，需要鉴权，如果无，自动跳转到 `/login` 路由，登录成功后返回 `/protected`。
 
 import Sandpack from '@site/src/components/Sandpack';
+import srcRoutesPageText from '../../../../src/sandbox/csr-auth/src/routes/page-tsx.txt';
+import srcRoutesLayoutText from '../../../../src/sandbox/csr-auth/src/routes/layout-tsx.txt';
+import srcRoutesAuthText from '../../../../src/sandbox/csr-auth/src/routes/Auth-tsx.txt';
+import srcRoutesFakeAuthText from '../../../../src/sandbox/csr-auth/src/routes/fakeAuth-ts.txt';
+import srcRoutesProtectedPageText from '../../../../src/sandbox/csr-auth/src/routes/protected/page-tsx.txt';
+import srcRoutesLoginPageText from '../../../../src/sandbox/csr-auth/src/routes/login/page-tsx.txt';
+
+<Sandpack template="web-app" files={{
+  '/src/routes/page.tsx': srcRoutesPageText,
+  '/src/routes/layout.tsx': srcRoutesLayoutText,
+  '/src/routes/Auth.tsx': srcRoutesAuthText,
+  '/src/routes/fakeAuth.ts': srcRoutesFakeAuthText,
+  '/src/routes/protected/page.tsx': srcRoutesProtectedPageText,
+  '/src/routes/login/page.tsx': srcRoutesLoginPageText,
+}}>
 
-<Sandpack template="web-app">
-```tsx title="src/routes/page.tsx"
-import { Helmet } from '@modern-js/runtime/head';
-import './index.css';
-
-const PublicPage = (): JSX.Element => (
-  <div className="container-box">
-    <Helmet>
-      <link
-        rel="icon"
-        type="image/x-icon"
-        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
-      />
-    </Helmet>
-    <h3>Public</h3>
-  </div>
-);
-
-export default PublicPage;
-
-```
-```tsx title="src/routes/layout.tsx"
-import { Link, Outlet } from '@modern-js/runtime/router';
-import { AuthProvider, AuthStatus } from './Auth';
-
-export default function Layout() {
-  return (
-    <AuthProvider>
-      <AuthStatus />
-
-      <ul>
-        <li>
-          <Link to="/">Public Page</Link>
-        </li>
-        <li>
-          <Link to="/protected">Protected Page</Link>
-        </li>
-      </ul>
-
-      <Outlet />
-    </AuthProvider>
-  );
-}
-
-```
-```ts title="src/routes/fakeAuth.ts"
-/**
- * This represents some generic auth provider API, like Firebase.
- */
-const fakeAuthProvider = {
-  isAuthenticated: false,
-  signin(callback: VoidFunction) {
-    fakeAuthProvider.isAuthenticated = true;
-    setTimeout(callback, 100); // fake async
-  },
-  signout(callback: VoidFunction) {
-    fakeAuthProvider.isAuthenticated = false;
-    setTimeout(callback, 100);
-  },
-};
-
-export { fakeAuthProvider };
-
-```
-```ts title="src/routes/Auth.tsx"
-import React from 'react';
-import { useNavigate, Navigate, useLocation } from '@modern-js/runtime/router';
-import { fakeAuthProvider } from './fakeAuth';
-
-interface AuthContextType {
-  user: any;
-  signin: (user: string, callback: VoidFunction) => void;
-  signout: (callback: VoidFunction) => void;
-}
-
-const AuthContext = React.createContext<AuthContextType>(null!);
-
-export function AuthProvider({ children }: { children: React.ReactNode }) {
-  const [user, setUser] = React.useState<any>(null);
-
-  const signin = (newUser: string, callback: VoidFunction) =>
-    fakeAuthProvider.signin(() => {
-      setUser(newUser);
-      callback();
-    });
-
-  const signout = (callback: VoidFunction) =>
-    fakeAuthProvider.signout(() => {
-      setUser(null);
-      callback();
-    });
-
-  const value = { user, signin, signout };
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-}
-
-export function useAuth() {
-  return React.useContext(AuthContext);
-}
-
-export function AuthStatus() {
-  const auth = useAuth();
-  console.log('auth', auth);
-  const navigate = useNavigate();
-
-  if (!auth.user) {
-    return <p>You are not logged in.</p>;
-  }
-
-  return (
-    <p>
-      Welcome {auth.user}!{' '}
-      <button
-        type="button"
-        onClick={() => {
-          auth.signout(() => navigate('/'));
-        }}
-      >
-        Sign out
-      </button>
-    </p>
-  );
-}
-
-export function RequireAuth({ children }: { children: JSX.Element }) {
-  const auth = useAuth();
-  const location = useLocation();
-
-  if (!auth.user) {
-    // Redirect them to the /login page, but save the current location they were
-    // trying to go to when they were redirected. This allows us to send them
-    // along to that page after they login, which is a nicer user experience
-    // than dropping them off on the home page.
-    return <Navigate to="/login" state={{ from: location }} replace />;
-  }
-
-  return children;
-}
-
-```
-```ts title="src/routes/protected/page.tsx"
-import { RequireAuth } from '../Auth';
-
-export default function ProtectedPage() {
-  return (
-    <div className="container-box">
-      <RequireAuth>
-        <h3>Protected</h3>
-      </RequireAuth>
-    </div>
-  );
-}
-
-```
-```ts title="src/routes/login/page.tsx"
-import { useLocation, useNavigate } from '@modern-js/runtime/router';
-import { useAuth } from '../Auth';
-
-export default function Login() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const auth = useAuth();
-
-  const from = location.state?.from?.pathname || '/';
-
-  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-
-    const formData = new FormData(event.currentTarget);
-    const username = formData.get('username') as string;
-
-    auth.signin(username, () => {
-      // Send them back to the page they tried to visit when they were
-      // redirected to the login page. Use { replace: true } so we don't create
-      // another entry in the history stack for the login page.  This means that
-      // when they get to the protected page and click the back button, they
-      // won't end up back on the login page, which is also really nice for the
-      // user experience.
-      navigate(from, { replace: true });
-    });
-  }
-
-  return (
-    <div>
-      <p>You must log in to view the page at {from}</p>
-
-      <form onSubmit={handleSubmit}>
-        <label>
-          Username: <input name="username" type="text" />
-        </label>{' '}
-        <button type="submit">Login</button>
-      </form>
-    </div>
-  );
-}
-
-```
 </Sandpack>

package/package.json

@@ -15,20 +15,20 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.67.6",
+  "version": "2.67.8",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "dependencies": {
     "mermaid": "^11.4.1",
-    "@modern-js/sandpack-react": "2.67.6"
+    "@modern-js/sandpack-react": "2.67.8"
   },
   "devDependencies": {
-    "@rsbuild/plugin-sass": "1.3.1",
+    "@rsbuild/plugin-sass": "1.3.2",
     "@shikijs/transformers": "^3.4.2",
-    "@rspress/shared": "2.0.0-beta.6",
-    "@rspress/plugin-llms": "2.0.0-beta.6",
+    "@rspress/shared": "2.0.0-beta.10",
+    "@rspress/plugin-llms": "2.0.0-beta.10",
     "@types/fs-extra": "9.0.13",
     "@types/node": "^16",
     "classnames": "^2.5.1",
@@ -36,7 +36,7 @@
     "fs-extra": "^10",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "rspress": "2.0.0-beta.6",
+    "rspress": "2.0.0-beta.10",
     "ts-node": "^10.9.1",
     "typescript": "^5"
   },

package/rspress.config.ts

@@ -92,13 +92,24 @@ export default defineConfig({
     },
   ],
   builderConfig: {
+    tools: {
+      // FIXME: use `?raw` after upgrading to Rsbuild@1.4.0, https://github.com/web-infra-dev/rsbuild/pull/5355
+      rspack(_config, { addRules }) {
+        addRules([
+          {
+            test: /\.txt$/i,
+            type: 'asset/source',
+          },
+        ]);
+      },
+    },
     output: {
       dataUriLimit: 0,
     },
     dev: {
       lazyCompilation: process.env.LAZY !== 'false',
     },
-    source: {
+    resolve: {
       alias: {
         '@site-docs': path.join(__dirname, './docs/zh'),
         '@site-docs-en': path.join(__dirname, './docs/en'),

package/src/components/RsbuildLink/index.tsx

@@ -3,7 +3,7 @@ import { useLang } from 'rspress/runtime';
 
 const RsbuildLink = ({ configName }: { configName: string }) => {
   const lang = useLang();
-  const href = `https://rsbuild.dev/${lang === 'zh' ? 'zh/' : ''}config/${configName
+  const href = `https://rsbuild.rs/${lang === 'zh' ? 'zh/' : ''}config/${configName
     .split('.')
     .join('/')
     .replace(/([a-z])([A-Z])/g, '$1-$2')

package/src/components/Sandpack/index.tsx

@@ -8,17 +8,7 @@ import './index.css';
 
 const Sandpack = (props: PropsWithChildren<ModernSandpackProps>) => {
   const dark = useDark();
-  const { children, ...otherProps } = props;
-  const files: Record<string, string> = {};
-  React.Children.forEach(children, (child: any) => {
-    if (child) {
-      const { meta, children } = child.props.children.props;
-      const matches = meta.match(/title="(.*)"/);
-      if (matches.length > 1) {
-        files[matches[1]] = children;
-      }
-    }
-  });
+  const { children, files, ...otherProps } = props;
   return (
     <NoSSR>
       <ModernSandpack

package/src/components/ShowcaseList/useShowcases.ts

@@ -57,7 +57,7 @@ export const useShowcases = (): ShowcaseItem[] => {
     },
     {
       name: 'Rspack',
-      url: 'https://rspack.dev/',
+      url: 'https://rspack.rs/',
       preview:
         'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/rspack-0424.jpeg',
       type: 'doc',

package/src/sandbox/csr-auth/src/routes/Auth-tsx.txt

@@ -0,0 +1,74 @@
+import { Navigate, useLocation, useNavigate } from '@modern-js/runtime/router';
+import React from 'react';
+import { fakeAuthProvider } from './fakeAuth';
+
+interface AuthContextType {
+  user: any;
+  signin: (user: string, callback: VoidFunction) => void;
+  signout: (callback: VoidFunction) => void;
+}
+
+const AuthContext = React.createContext<AuthContextType>(null!);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = React.useState<any>(null);
+
+  const signin = (newUser: string, callback: VoidFunction) =>
+    fakeAuthProvider.signin(() => {
+      setUser(newUser);
+      callback();
+    });
+
+  const signout = (callback: VoidFunction) =>
+    fakeAuthProvider.signout(() => {
+      setUser(null);
+      callback();
+    });
+
+  const value = { user, signin, signout };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+export function useAuth() {
+  return React.useContext(AuthContext);
+}
+
+export function AuthStatus() {
+  const auth = useAuth();
+  console.log('auth', auth);
+  const navigate = useNavigate();
+
+  if (!auth.user) {
+    return <p>You are not logged in.</p>;
+  }
+
+  return (
+    <p>
+      Welcome {auth.user}!{' '}
+      <button
+        type="button"
+        onClick={() => {
+          auth.signout(() => navigate('/'));
+        }}
+      >
+        Sign out
+      </button>
+    </p>
+  );
+}
+
+export function RequireAuth({ children }: { children: JSX.Element }) {
+  const auth = useAuth();
+  const location = useLocation();
+
+  if (!auth.user) {
+    // Redirect them to the /login page, but save the current location they were
+    // trying to go to when they were redirected. This allows us to send them
+    // along to that page after they login, which is a nicer user experience
+    // than dropping them off on the home page.
+    return <Navigate to="/login" state={{ from: location }} replace />;
+  }
+
+  return children;
+}

package/src/sandbox/csr-auth/src/routes/fakeAuth-ts.txt

@@ -0,0 +1,16 @@
+/**
+ * This represents some generic auth provider API, like Firebase.
+ */
+const fakeAuthProvider = {
+  isAuthenticated: false,
+  signin(callback: VoidFunction) {
+    fakeAuthProvider.isAuthenticated = true;
+    setTimeout(callback, 100); // fake async
+  },
+  signout(callback: VoidFunction) {
+    fakeAuthProvider.isAuthenticated = false;
+    setTimeout(callback, 100);
+  },
+};
+
+export { fakeAuthProvider };

package/src/sandbox/csr-auth/src/routes/layout-tsx.txt

@@ -0,0 +1,21 @@
+import { Link, Outlet } from '@modern-js/runtime/router';
+import { AuthProvider, AuthStatus } from './Auth';
+
+export default function Layout() {
+  return (
+    <AuthProvider>
+      <AuthStatus />
+
+      <ul>
+        <li>
+          <Link to="/">Public Page</Link>
+        </li>
+        <li>
+          <Link to="/protected">Protected Page</Link>
+        </li>
+      </ul>
+
+      <Outlet />
+    </AuthProvider>
+  );
+}

package/src/sandbox/csr-auth/src/routes/login/page-tsx.txt

@@ -0,0 +1,40 @@
+import { useLocation, useNavigate } from '@modern-js/runtime/router';
+import { useAuth } from '../Auth';
+
+export default function Login() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const auth = useAuth();
+
+  const from = location.state?.from?.pathname || '/';
+
+  function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+
+    const formData = new FormData(event.currentTarget);
+    const username = formData.get('username') as string;
+
+    auth.signin(username, () => {
+      // Send them back to the page they tried to visit when they were
+      // redirected to the login page. Use { replace: true } so we don't create
+      // another entry in the history stack for the login page.  This means that
+      // when they get to the protected page and click the back button, they
+      // won't end up back on the login page, which is also really nice for the
+      // user experience.
+      navigate(from, { replace: true });
+    });
+  }
+
+  return (
+    <div>
+      <p>You must log in to view the page at {from}</p>
+
+      <form onSubmit={handleSubmit}>
+        <label>
+          Username: <input name="username" type="text" />
+        </label>{' '}
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  );
+}

package/src/sandbox/csr-auth/src/routes/page-tsx.txt

@@ -0,0 +1,17 @@
+import { Helmet } from '@modern-js/runtime/head';
+import './index.css';
+
+const PublicPage = (): JSX.Element => (
+  <div className="container-box">
+    <Helmet>
+      <link
+        rel="icon"
+        type="image/x-icon"
+        href="https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico"
+      />
+    </Helmet>
+    <h3>Public</h3>
+  </div>
+);
+
+export default PublicPage;

package/src/sandbox/csr-auth/src/routes/protected/page-tsx.txt

@@ -0,0 +1,11 @@
+import { RequireAuth } from '../Auth';
+
+export default function ProtectedPage() {
+  return (
+    <div className="container-box">
+      <RequireAuth>
+        <h3>Protected</h3>
+      </RequireAuth>
+    </div>
+  );
+}