chore: add examples

Author: ScriptedAlchemy

.gitignore

@@ -0,0 +1,5 @@
+.idea
+node_modules
+*.tsbuildinfo
+dist
+.npmrc

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-present Bytedance, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

config/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@rsbuild/config",
+  "version": "1.0.1",
+  "private": true,
+  "devDependencies": {
+    "@rsbuild/core": "1.1.0",
+    "@rslib/core": "0.1.3",
+    "@types/node": "^22.10.1",
+    "typescript": "^5.7.2"
+  }
+}

config/rslib.config.ts

@@ -0,0 +1,67 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { Minify, RsbuildPlugin } from '@rsbuild/core';
+import { type LibConfig, defineConfig } from '@rslib/core';
+
+export const commonExternals: Array<string | RegExp> = [
+  'webpack',
+  /[\\/]compiled[\\/]/,
+];
+
+export const nodeMinifyConfig: Minify = {
+  js: true,
+  css: false,
+  jsOptions: {
+    minimizerOptions: {
+      // preserve variable name and disable minify for easier debugging
+      mangle: false,
+      minify: false,
+      compress: false,
+    },
+  },
+};
+
+// Clean tsc cache to ensure the dts files can be generated correctly
+export const pluginCleanTscCache: RsbuildPlugin = {
+  name: 'plugin-clean-tsc-cache',
+  setup(api) {
+    api.onBeforeBuild(() => {
+      const tsbuildinfo = path.join(
+        api.context.rootPath,
+        'tsconfig.tsbuildinfo',
+      );
+      if (fs.existsSync(tsbuildinfo)) {
+        fs.rmSync(tsbuildinfo);
+      }
+    });
+  },
+};
+
+export const esmConfig: LibConfig = {
+  format: 'esm',
+  syntax: 'es2021',
+  dts: {
+    build: true,
+  },
+  plugins: [pluginCleanTscCache],
+  output: {
+    minify: nodeMinifyConfig,
+  },
+};
+
+export const cjsConfig: LibConfig = {
+  format: 'cjs',
+  syntax: 'es2021',
+  output: {
+    minify: nodeMinifyConfig,
+  },
+};
+
+export const dualPackage = defineConfig({
+  lib: [esmConfig, cjsConfig],
+  tools: {
+    rspack: {
+      externals: commonExternals,
+    },
+  },
+});

config/tsconfig-node16.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16"
+  }
+}

config/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ESNext"],
+    "jsx": "preserve",
+    "target": "ES2021",
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ES2020",
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  },
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "display": "Base"
+}

examples/cloudflare/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+/node_modules/
+*.tsbuildinfo
+
+# React Router
+/.react-router/
+/build/
+
+# Cloudflare
+.mf
+.wrangler

examples/cloudflare/README.md

@@ -0,0 +1,71 @@
+# Welcome to React Router!
+
+A modern, production-ready template for building full-stack React applications using React Router.
+
+## Features
+
+- 🚀 Server-side rendering
+- ⚡️ Hot Module Replacement (HMR)
+- 📦 Asset bundling and optimization
+- 🔄 Data loading and mutations
+- 🔒 TypeScript by default
+- 🎉 TailwindCSS for styling
+- 📖 [React Router docs](https://reactrouter.com/)
+
+## Getting Started
+
+### Installation
+
+Install the dependencies:
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with HMR:
+
+```bash
+npm run dev
+```
+
+Your application will be available at `http://localhost:5173`.
+
+## Building for Production
+
+Create a production build:
+
+```bash
+npm run build
+```
+
+## Deployment
+
+Deployment is done using the Wrangler CLI.
+
+To build and deploy directly to production:
+
+```sh
+npm run deploy
+```
+
+To deploy a preview URL:
+
+```sh
+npx wrangler versions upload
+```
+
+You can then promote a version to production after verification or roll it out progressively.
+
+```sh
+npx wrangler versions deploy
+```
+
+## Styling
+
+This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+
+---
+
+Built with ❤️ using React Router.

examples/cloudflare/app/app.css

@@ -0,0 +1,15 @@
+@import 'tailwindcss';
+
+@theme {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+}
+
+html,
+body {
+  @apply bg-white dark:bg-gray-950;
+
+  @media (prefers-color-scheme: dark) {
+    color-scheme: dark;
+  }
+}

examples/cloudflare/app/entry.server.tsx

@@ -0,0 +1,44 @@
+import { isbot } from 'isbot';
+import { renderToReadableStream } from 'react-dom/server';
+import type { AppLoadContext, EntryContext } from 'react-router';
+import { ServerRouter } from 'react-router';
+
+export default async function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  routerContext: EntryContext,
+  _loadContext: AppLoadContext,
+) {
+  let shellRendered = false;
+  const userAgent = request.headers.get('user-agent');
+
+  const body = await renderToReadableStream(
+    <ServerRouter context={routerContext} url={request.url} />,
+    {
+      onError(error: unknown) {
+        // biome-ignore lint: intentional parameter reassignment
+        responseStatusCode = 500;
+        // Log streaming rendering errors from inside the shell.  Don't log
+        // errors encountered during initial shell rendering since they'll
+        // reject and get logged in handleDocumentRequest.
+        if (shellRendered) {
+          console.error(error);
+        }
+      },
+    },
+  );
+  shellRendered = true;
+
+  // Ensure requests from bots and SPA Mode renders wait for all content to load before responding
+  // https://react.dev/reference/react-dom/server/renderToPipeableStream#waiting-for-all-content-to-load-for-crawlers-and-static-generation
+  if ((userAgent && isbot(userAgent)) || routerContext.isSpaMode) {
+    await body.allReady;
+  }
+
+  responseHeaders.set('Content-Type', 'text/html');
+  return new Response(body, {
+    headers: responseHeaders,
+    status: responseStatusCode,
+  });
+}