create-bubbles 0.0.7 → 0.0.8

package/template-react-rsbuild/postcss.config.mjs

@@ -0,0 +1,5 @@
+import UnoCSS from '@unocss/postcss';
+
+export default {
+  plugins: [UnoCSS()],
+};

package/template-react-rsbuild/rsbuild.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import AutoImport from 'unplugin-auto-import/rspack';
+
+export default defineConfig({
+  html: {
+    template: './index.html',
+  },
+  resolve: {
+    alias: {
+      '@': './src',
+    },
+  },
+  server: {
+    port: process.env.PUBLIC_PORT,
+  },
+  plugins: [pluginReact()],
+  tools: {
+    rspack: {
+      plugins: [
+        AutoImport({
+          imports: ['react', 'react-router', 'react-router-dom'],
+          dts: './src/types/auto-import.d.ts',
+        }),
+      ],
+    },
+  },
+});

package/template-react-rsbuild/src/App.tsx

@@ -0,0 +1,9 @@
+import { RouterProvider } from 'react-router';
+
+import router from './router';
+
+const App = () => {
+  return <RouterProvider router={router} />;
+};
+
+export default App;

package/template-react-rsbuild/src/components/Loading/PageLoading.tsx

@@ -0,0 +1,11 @@
+import { Spin } from 'antd';
+
+const Loading = () => {
+  return (
+    <div className="flex justify-center items-center w-full h-100%">
+      <Spin size="large" />
+    </div>
+  );
+};
+
+export default Loading;

package/template-react-rsbuild/src/env.d.ts

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

package/template-react-rsbuild/src/index.tsx

@@ -0,0 +1,20 @@
+import React, { Suspense } from 'react';
+import ReactDOM from 'react-dom/client';
+
+import App from './App';
+
+import '@/styles/index.css';
+
+import Loading from './components/Loading/PageLoading';
+
+const rootEl = document.getElementById('root');
+if (rootEl) {
+  const root = ReactDOM.createRoot(rootEl);
+  root.render(
+    <React.StrictMode>
+      <Suspense fallback={<Loading />}>
+        <App />
+      </Suspense>
+    </React.StrictMode>,
+  );
+}

package/template-react-rsbuild/src/pages/home/index.tsx

@@ -0,0 +1,26 @@
+import { use } from 'react';
+
+const fetchData = () => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve({
+        data: [
+          {
+            id: 1,
+            title: 'Album 1',
+          },
+          {
+            id: 2,
+            title: 'Album 2',
+          },
+        ],
+      });
+    }, 1000);
+  });
+};
+
+const Home = () => {
+  return <h1>111</h1>;
+};
+
+export default Home;

package/template-react-rsbuild/src/router/index.tsx

@@ -0,0 +1,27 @@
+import { Suspense } from 'react';
+import { createBrowserRouter, type RouteObject } from 'react-router';
+
+import Loading from '@/components/Loading/PageLoading';
+
+export const lazyLoad = (path: string) => {
+  const Module = lazy(() => import(`@/pages/${path}.tsx`));
+  return (
+    <Suspense fallback={<Loading />}>
+      <Module />
+    </Suspense>
+  );
+};
+
+const routes: RouteObject[] = [
+  {
+    path: '/',
+    id: 'home',
+    element: lazyLoad('home/index'),
+  },
+];
+
+export const router = createBrowserRouter(routes, {
+  basename: import.meta.env.PUBLIC_PATH,
+});
+
+export default router;

package/template-react-rsbuild/src/styles/index.css

@@ -0,0 +1,16 @@
+@unocss;
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+}
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}

package/template-react-rsbuild/src/types/auto-import.d.ts

@@ -0,0 +1,47 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {};
+declare global {
+  const Link: typeof import('react-router-dom')['Link'];
+  const NavLink: typeof import('react-router-dom')['NavLink'];
+  const Navigate: typeof import('react-router-dom')['Navigate'];
+  const Outlet: typeof import('react-router-dom')['Outlet'];
+  const Route: typeof import('react-router-dom')['Route'];
+  const Routes: typeof import('react-router-dom')['Routes'];
+  const createRef: typeof import('react')['createRef'];
+  const forwardRef: typeof import('react')['forwardRef'];
+  const lazy: typeof import('react')['lazy'];
+  const memo: typeof import('react')['memo'];
+  const startTransition: typeof import('react')['startTransition'];
+  const useCallback: typeof import('react')['useCallback'];
+  const useContext: typeof import('react')['useContext'];
+  const useDebugValue: typeof import('react')['useDebugValue'];
+  const useDeferredValue: typeof import('react')['useDeferredValue'];
+  const useEffect: typeof import('react')['useEffect'];
+  const useHref: typeof import('react-router-dom')['useHref'];
+  const useId: typeof import('react')['useId'];
+  const useImperativeHandle: typeof import('react')['useImperativeHandle'];
+  const useInRouterContext: typeof import('react-router-dom')['useInRouterContext'];
+  const useInsertionEffect: typeof import('react')['useInsertionEffect'];
+  const useLayoutEffect: typeof import('react')['useLayoutEffect'];
+  const useLinkClickHandler: typeof import('react-router-dom')['useLinkClickHandler'];
+  const useLocation: typeof import('react-router-dom')['useLocation'];
+  const useMemo: typeof import('react')['useMemo'];
+  const useNavigate: typeof import('react-router-dom')['useNavigate'];
+  const useNavigationType: typeof import('react-router-dom')['useNavigationType'];
+  const useOutlet: typeof import('react-router-dom')['useOutlet'];
+  const useOutletContext: typeof import('react-router-dom')['useOutletContext'];
+  const useParams: typeof import('react-router-dom')['useParams'];
+  const useReducer: typeof import('react')['useReducer'];
+  const useRef: typeof import('react')['useRef'];
+  const useResolvedPath: typeof import('react-router-dom')['useResolvedPath'];
+  const useRoutes: typeof import('react-router-dom')['useRoutes'];
+  const useSearchParams: typeof import('react-router-dom')['useSearchParams'];
+  const useState: typeof import('react')['useState'];
+  const useSyncExternalStore: typeof import('react')['useSyncExternalStore'];
+  const useTransition: typeof import('react')['useTransition'];
+}

package/template-react-rsbuild/src/utils/request/axios.ts

@@ -0,0 +1,93 @@
+import { message } from 'ant-design-vue';
+import axios, { type AxiosResponse } from 'axios';
+import _ from 'lodash-es';
+
+import { router } from '@/router';
+import { useUserStoreWithOut } from '@/store/modules/user';
+
+export interface CustomConfig {
+  /** 直接返回响应体 */
+  isTransformResponse?: boolean;
+  // 成功需要提示
+  isShowSuccessMsg?: boolean;
+}
+
+export enum CodeEnum {
+  SUCCESS = 200,
+  UNAUTHORIZED = 401,
+}
+
+const unAuthFunc = _.debounce(() => {
+  message.error('暂未登录或登录已过期，请重新登录');
+  router.push('/login');
+}, 500);
+
+export default (customConfig?: CustomConfig) => {
+  // const { getToken } = useUserStore()
+  const userStore = useUserStoreWithOut();
+
+  const instance = axios.create({
+    baseURL: import.meta.env.PUBLIC_API_AFFIX,
+  });
+
+  instance.interceptors.request.use(
+    (config) => {
+      // config.headers = {
+      //   'X-Access-Token': userStore.token,
+      //   'Allow-Control-Allow-Origin': '*',
+      //   ...config?.headers,
+      // } as any
+      config.headers.set('X-Access-Token', userStore.token);
+      config.headers.set('Allow-Control-Allow-Origin', '*');
+      return config;
+    },
+    (error) => {
+      message.error('请求错误');
+      return Promise.reject(error);
+    },
+  );
+
+  interface ResponseData<T = any> {
+    code: number;
+    message: string;
+    requestId: string;
+    responseTime: number;
+    result: T;
+  }
+
+  instance.interceptors.response.use(
+    (response: AxiosResponse<ResponseData>) => {
+      const { status, data } = response;
+      if (status === 200) {
+        if (customConfig?.isTransformResponse === false) return data;
+        const { code, message: msg } = data;
+        if (code === CodeEnum.SUCCESS) {
+          if (customConfig?.isShowSuccessMsg) {
+            message.success(msg);
+          }
+          return data.result;
+        }
+        message.error(msg);
+        return Promise.reject(data);
+      }
+      if (status === CodeEnum.UNAUTHORIZED) {
+        // _.debounce(() => {
+        message.error(data.message);
+        router.push('/login');
+        // }, 500)
+      } else return Promise.reject(data.message);
+    },
+    (error) => {
+      const response = error.response;
+      const { status, data } = response;
+      if (status === CodeEnum.UNAUTHORIZED) {
+        unAuthFunc();
+      } else {
+        message.error(data?.message || '系统异常');
+        return Promise.reject(error);
+      }
+    },
+  );
+
+  return instance;
+};

package/template-react-rsbuild/src/utils/request/index.ts

@@ -0,0 +1,60 @@
+import type { AxiosRequestConfig } from 'axios';
+
+import request, { type CustomConfig } from './axios';
+
+interface createAxiosType {
+  get: (
+    config: {
+      url: string;
+      params?: AxiosRequestConfig['params'];
+      config?: AxiosRequestConfig<any>;
+    },
+    option?: CustomConfig,
+  ) => Promise<any>;
+  post: (
+    config: {
+      url: string;
+      data?: AxiosRequestConfig['data'];
+      config?: AxiosRequestConfig<any>;
+    },
+    option?: CustomConfig,
+  ) => Promise<any>;
+  put: (
+    config: {
+      url: string;
+      data?: AxiosRequestConfig['data'];
+      config?: AxiosRequestConfig<any>;
+    },
+    option?: CustomConfig,
+  ) => Promise<any>;
+  delete: (
+    config: {
+      url: string;
+      data?: AxiosRequestConfig['data'];
+      config?: AxiosRequestConfig<any>;
+    },
+    option?: CustomConfig,
+  ) => Promise<any>;
+}
+
+const createAxios: createAxiosType = {
+  get: (config, option) =>
+    request(option).get(config.url, {
+      params: config.params,
+      ...config?.config,
+    }),
+  post: (
+    config: { url: string; data?: any; config?: AxiosRequestConfig<any> },
+    option?: CustomConfig,
+  ) => request(option).post(config.url, config?.data, config?.config),
+  put: (
+    config: { url: string; data?: any; config?: AxiosRequestConfig<any> },
+    option?: CustomConfig,
+  ) => request(option).put(config.url, config?.data, config?.config),
+  delete: (
+    config: { url: string; config?: AxiosRequestConfig<any> },
+    customConfig?: CustomConfig,
+  ) => request(customConfig).delete(config.url, config?.config),
+};
+
+export default createAxios;

package/template-react-rsbuild/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "lib": ["DOM", "ES2020"],
+    "jsx": "react-jsx",
+    "target": "ES2020",
+    "noEmit": true,
+    "skipLibCheck": true,
+    "useDefineForClassFields": true,
+
+    /* modules */
+    "module": "ESNext",
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "Bundler",
+    "allowImportingTsExtensions": true,
+
+    /* type checking */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+
+    "baseUrl": "./",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/template-react-rsbuild/uno.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig, presetUno } from 'unocss';
+
+export default defineConfig({
+  content: {
+    filesystem: ['**/*.{html,js,ts,jsx,tsx,vue,svelte,astro}'],
+  },
+  presets: [presetUno()],
+});

package/template-vue-rsbuild/.env

@@ -0,0 +1,3 @@
+# port
+PUBLIC_PORT = 9200
+PUBLIC_PATH = '/'

package/template-vue-rsbuild/.prettierignore

@@ -0,0 +1,4 @@
+# Lock files
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

package/template-vue-rsbuild/.prettierrc

@@ -0,0 +1,17 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "proseWrap": "never",
+  "importOrder": ["^(vue|vue-router)$", "^([a-z]|@[a-z])", "", ".*"],
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

package/template-vue-rsbuild/biome.json

@@ -0,0 +1,112 @@
+{
+  "files": {
+    "ignoreUnknown": true,
+    "ignore": [
+      ".dumi/tmp*",
+      ".dumi/scripts/clarity.js",
+      "dist/*",
+      "es/**/*",
+      "lib/**/*",
+      "_site/**/*",
+      "node_modules",
+      "server",
+      "scripts/previewEditor/**/*",
+      "package.json"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 100,
+    "indentWidth": 2
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "rules": {
+      "style": {
+        "useImportType": "off",
+        "useNumberNamespace": "off",
+        "useNodejsImportProtocol": "off",
+        "noNonNullAssertion": "off",
+        "noUnusedTemplateLiteral": "off"
+      },
+      "complexity": {
+        "noUselessTypeConstraint": "off",
+        "noForEach": "off"
+      },
+      "correctness": {
+        "useExhaustiveDependencies": "off"
+      },
+      "suspicious": {
+        "noGlobalIsNan": "off",
+        "noGlobalIsFinite": "off",
+        "noExplicitAny": "off",
+        "noArrayIndexKey": "off",
+        "noConfusingVoidType": "off",
+        "noThenProperty": "off"
+      },
+      "performance": {
+        "noDelete": "off",
+        "noAccumulatingSpread": "off"
+      },
+      "a11y": {
+        "noAriaHiddenOnFocusable": "off",
+        "noLabelWithoutControl": "off",
+        "useFocusableInteractive": "off",
+        "useKeyWithClickEvents": "off",
+        "useSemanticElements": "off"
+      }
+    }
+  },
+  "css": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "overrides": [
+    {
+      "include": ["**/*.test.ts", "**/*.test.tsx", "tests/**/*", "scripts/**/*", ".dumi/**/*"],
+      "linter": {
+        "rules": {
+          "style": {
+            "noParameterAssign": "off"
+          },
+          "suspicious": {
+            "noThenProperty": "off",
+            "noImplicitAnyLet": "off"
+          },
+          "complexity": {
+            "noUselessFragments": "off"
+          },
+          "a11y": {
+            "useValidAnchor": "off",
+            "useAnchorContent": "off",
+            "useKeyWithClickEvents": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": ["components/*/demo/*"],
+      "linter": {
+        "rules": {
+          "correctness": {
+            "noVoidTypeReturn": "off"
+          },
+          "a11y": {
+            "useValidAnchor": "off",
+            "useAnchorContent": "off",
+            "useKeyWithClickEvents": "off"
+          }
+        }
+      }
+    }
+  ]
+}

package/template-vue-rsbuild/index.html

@@ -0,0 +1,7 @@
+<!doctype html>
+<html>
+  <head></head>
+  <body>
+    <div id="<%= mountId %>"></div>
+  </body>
+</html>

package/template-vue-rsbuild/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "template-vue",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "rsbuild build",
+    "check": "biome check --write",
+    "dev": "rsbuild dev --open",
+    "format": "prettier --write .",
+    "preview": "rsbuild preview"
+  },
+  "dependencies": {
+    "pinia": "^3.0.1",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
+    "@rsbuild/core": "^1.2.4",
+    "@rsbuild/plugin-vue": "^1.0.5",
+    "@unocss/postcss": "^65.5.0",
+    "lefthook": "^1.10.1",
+    "prettier": "^3.4.2",
+    "typescript": "^5.7.3",
+    "unocss": "^65.5.0",
+    "unplugin-auto-import": "^19.1.0"
+  }
+}

package/template-vue-rsbuild/postcss.config.mjs

@@ -0,0 +1,5 @@
+import UnoCSS from '@unocss/postcss';
+
+export default {
+  plugins: [UnoCSS()],
+};

package/template-vue-rsbuild/rsbuild.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginVue } from '@rsbuild/plugin-vue';
+import AutoImport from 'unplugin-auto-import/rspack';
+
+export default defineConfig({
+  html: {
+    template: './index.html',
+  },
+  resolve: {
+    alias: {
+      '@': './src',
+    },
+  },
+  server: {
+    port: process.env.PUBLIC_PORT,
+  },
+  plugins: [pluginVue()],
+  tools: {
+    rspack: {
+      plugins: [
+        AutoImport({
+          imports: ['vue', 'vue-router'],
+          dts: './src/types/auto-import.d.ts',
+        }),
+      ],
+    },
+  },
+});

package/template-vue-rsbuild/src/App.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="content">
+    <h1 class="text-#fff">Rsbuild with Vue</h1>
+    <p class="text-50px text-amber">Start building amazing things with Rsbuild.</p>
+  </div>
+</template>
+
+<style scoped>
+.content {
+  display: flex;
+  min-height: 100vh;
+  line-height: 1.1;
+  text-align: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: #000;
+}
+
+.content h1 {
+  font-size: 3.6rem;
+  font-weight: 700;
+}
+
+.content p {
+  font-size: 1.2rem;
+  font-weight: 400;
+  opacity: 0.5;
+}
+</style>

package/template-vue-rsbuild/src/env.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="@rsbuild/core/types" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+
+  // biome-ignore lint/complexity/noBannedTypes: reason
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/template-vue-rsbuild/src/index.css

@@ -0,0 +1,6 @@
+body {
+  margin: 0;
+  color: #fff;
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  background-image: linear-gradient(to bottom, #020917, #101725);
+}