feat: manually mirror opencoze's code from bytedance

Change-Id: I09a73aadda978ad9511264a756b2ce51f5761adf

common/_templates/rsbuild-web/src/app.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { useEffect } from 'react';
+
+import slardar from '@slardar/web';
+import { reporter } from '@coze-arch/logger';
+
+import { Page1 } from './pages/page1';
+import { MainPage } from './pages/main';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    children: [
+      { path: 'page1', element: <Page1 /> },
+      { path: '', element: <MainPage /> },
+      { path: '*', element: <div>404</div> },
+    ],
+  },
+]);
+
+export function App() {
+  useEffect(() => {
+    reporter.info({ message: 'Ok fine' });
+    reporter.init(slardar);
+  }, []);
+
+  return <RouterProvider router={router} />;
+}

common/_templates/rsbuild-web/src/assets/react.svg

@@ -0,0 +1,8 @@
+<svg width="100%" height="100%" viewBox="-10.5 -9.45 21 18.9" fill="#357da1" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="0" cy="0" r="2" fill="#357da1"></circle>
+  <g stroke="#357da1" stroke-width="1" fill="none">
+    <ellipse rx="10" ry="4.5"></ellipse>
+    <ellipse rx="10" ry="4.5" transform="rotate(60)"></ellipse>
+    <ellipse rx="10" ry="4.5" transform="rotate(120)"></ellipse>
+  </g>
+</svg>

common/_templates/rsbuild-web/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

common/_templates/rsbuild-web/src/index.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+#root {
+  width: 100%;
+  height: 100%;
+}

common/_templates/rsbuild-web/src/index.tsx

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { createRoot } from 'react-dom/client';
+
+import { App } from './app';
+import './index.css';
+
+const root = createRoot(document.getElementById('root'));
+
+root.render(<App />);

common/_templates/rsbuild-web/src/pages/main/index.module.less

@@ -0,0 +1,4 @@
+.container {
+  padding-top: 36px;
+  text-align: center;
+}

common/_templates/rsbuild-web/src/pages/main/index.tsx

@@ -0,0 +1,68 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+import { Link } from 'react-router-dom';
+import { useState } from 'react';
+
+import rsbuildLogo from '@/assets/rsbuild.png';
+import reactLogo from '@/assets/react.svg';
+
+import s from './index.module.less';
+
+export function MainPage() {
+  const [count, setCount] = useState(0);
+
+  return (
+    <div className={s.container}>
+      <div className="flex items-center justify-center mb-12">
+        <a href="https://www.rsbuild.dev" target="_blank" rel="noreferrer">
+          <img
+            src={rsbuildLogo}
+            className="h-16 p-1.5 mr-12"
+            alt="Rsbuild logo"
+          />
+        </a>
+        <a href="https://reactjs.org" target="_blank" rel="noreferrer">
+          <img
+            src={reactLogo}
+            className="h-16 p-1.5 animate-[spin_20s_linear_infinite]"
+            alt="React logo"
+          />
+        </a>
+      </div>
+      <h1 className="text-3xl">Rsbuild + React</h1>
+      <div className="p-4">
+        <button
+          type="button"
+          className="p-2 mb-4 bg-blue-500 rounded-md text-slate-50"
+          onClick={() => setCount(c => c + 1)}
+        >
+          count is {count}
+        </button>
+        <p>
+          Edit <code className="text-sm font-mono">src/App.tsx</code> and save
+          to test HMR
+        </p>
+      </div>
+      <Link to="page1" className="font-light underline text-blue-600">
+        page1
+      </Link>
+      <p className="mt-8 text-gray-400 font-light">
+        Click on the Rsbuild and React logos to learn more
+      </p>
+    </div>
+  );
+}

common/_templates/rsbuild-web/src/pages/page1/index.tsx

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2025 coze-dev Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+ 
+export function Page1() {
+  return <div>page1</div>;
+}