npm - @bundlekit/plugin-react - Versions diffs - 0.0.1 - Mend

@bundlekit/plugin-react 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/index.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { IPluginAPIClass, IBuildConfig } from "@bundlekit/shared-utils";
+export default {
+    defaultModes: {
+        "plugin:react": "development" as const,
+    },
+    apply(api: IPluginAPIClass, options: IBuildConfig) {
+        const buildConfig = api.service.getBuildConfig();
+        if (!buildConfig) return;
+        for (const env of Object.keys(buildConfig.config || {})) {
+            buildConfig.config[env].framework = "react";
+        }
+        api.modifyBuildConfig(buildConfig);
+    },
+};

package/package.json ADDED Viewed

@@ -0,0 +1,32 @@
+{
+  "name": "@bundlekit/plugin-react",
+  "version": "0.0.1",
+  "description": "React plugin for bundlekit - provides React build support and project templates",
+  "main": "./index.ts",
+  "type": "module",
+  "files": [
+    "index.ts",
+    "templates",
+    "package.json"
+  ],
+  "keywords": [
+    "react",
+    "bundlekit-plugin",
+    "bundlekit"
+  ],
+  "author": "harhao@163.com",
+  "license": "ISC",
+  "dependencies": {
+    "@bundlekit/shared-utils": "0.0.1"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "engines": {
+    "node": ">= 18.0.0"
+  },
+  "scripts": {
+    "plugin:react:build": "echo 'plugin:react built successfully'"
+  }
+}

package/templates/template-react-js/.bundlekitrc.js.ejs ADDED Viewed

@@ -0,0 +1,24 @@
+export default {
+  mode: "development",
+  bundler: "<%= bundler %>",
+  config: {
+    development: {
+      target: "web",
+      publicPath: "/",
+      entry: <% if (ssr) { %>"src/entry-client.jsx"<% } else { %>"src/index.jsx"<% } %>,
+      output: { dir: "dist", filename: "[name].js", formats: "umd" },
+      alias: { "@": "src" },
+      externals: [],
+      js: { sourcemap: true, minify: false, splitChunks: true },
+      devServer: { open: true, proxy: {}, https: false, host: "0.0.0.0", port: 3000 },<% if (ssr) { %>
+      ssr: {
+        entry: "src/entry-server.jsx",
+        output: { dir: "dist/server", filename: "server.cjs", formats: "commonjs" },
+        externals: "auto",
+        template: "public/index.html",
+        placeholder: "<!--ssr-outlet-->",
+        dev: true,
+      },<% } %>
+    },
+  },
+};

package/templates/template-react-js/package.json.ejs ADDED Viewed

@@ -0,0 +1,18 @@
+{
+  "name": "<%= projectName %>",
+  "version": "1.0.0",
+  "description": "<%= description %>",
+  "scripts": {
+    "clean": "rimraf dist",
+    "dev": "bundlekit-service serve --bundler <%= bundler %> --mode development",
+    "build": "bundlekit-service build --bundler <%= bundler %> --mode production"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@bundlekit/service": "workspace:^",
+    "@bundlekit/plugin-react": "workspace:^"
+  }
+}

package/templates/template-react-js/public/index.html.ejs ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= projectName %></title>
+</head>
+<body>
+    <div id="root"><!--ssr-outlet--></div>
+</body>
+</html>

package/templates/template-react-js/src/App.jsx.ejs ADDED Viewed

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h1>
+        <span>Hello, <%= projectName %>!</span>
+        <button onClick={() => setCount(count + 1)}>
+          Clicked {count} times
+        </button>
+      </h1>
+    </div>
+  );
+}
+export default App;

package/templates/template-react-js/src/entry-client.jsx.ejs ADDED Viewed

@@ -0,0 +1,12 @@
+import React from "react";
+import { hydrateRoot, createRoot } from "react-dom/client";
+import App from "./App";
+const container = document.getElementById("root");
+if (container) {
+  if (container.firstChild) {
+    hydrateRoot(container, <App />);
+  } else {
+    createRoot(container).render(<App />);
+  }
+}

package/templates/template-react-js/src/entry-server.jsx.ejs ADDED Viewed

@@ -0,0 +1,7 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import App from "./App";
+export function render(url) {
+  return renderToString(<App />);
+}

package/templates/template-react-js/src/index.jsx.ejs ADDED Viewed

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+function App() {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h1>
+        <span>Hello, <%= projectName %>!</span>
+        <button onClick={() => setCount(count + 1)}>
+          Clicked {count} times
+        </button>
+      </h1>
+    </div>
+  );
+}
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}

package/templates/template-react-ts/.bundlekitrc.ts.ejs ADDED Viewed

@@ -0,0 +1,47 @@
+export default {
+  mode: "development" as const,
+  bundler: "<%= bundler %>",
+  plugins: ["@bundlekit/plugin-react"],
+  config: {
+    development: {
+      target: "web" as const,
+      publicPath: "/",
+      entry: <% if (ssr) { %>"src/entry-client.tsx"<% } else { %>"src/index.tsx"<% } %>,<% if (!ssr) { %>
+      pages: [
+        { entry: "src/index.tsx", filename: "index.html", template: "public/index.html", inject: "body" },
+      ],<% } %>
+      output: { dir: "dist", filename: "[name].js", formats: "umd" as const },
+      alias: { "@": "src" },
+      externals: [],
+      js: { sourcemap: true, minify: false, splitChunks: true },
+      devServer: { open: true, proxy: {}, https: false, host: "0.0.0.0", port: 3000 },<% if (ssr) { %>
+      ssr: {
+        entry: "src/entry-server.tsx",
+        output: { dir: "dist/server", filename: "server.cjs", formats: "commonjs" as const },
+        externals: "auto" as const,
+        template: "public/index.html",
+        placeholder: "<!--ssr-outlet-->",
+        dev: true,
+      },<% } %>
+    },
+    production: {
+      target: "web" as const,
+      publicPath: "/",
+      entry: <% if (ssr) { %>"src/entry-client.tsx"<% } else { %>"src/index.tsx"<% } %>,<% if (!ssr) { %>
+      pages: [
+        { entry: "src/index.tsx", filename: "index.html", template: "public/index.html", inject: "body" },
+      ],<% } %>
+      output: { dir: "dist", filename: "[name].[contenthash:8].js", formats: "umd" as const },
+      alias: { "@": "src" },
+      externals: [],
+      js: { sourcemap: false, minify: true, splitChunks: true },<% if (ssr) { %>
+      ssr: {
+        entry: "src/entry-server.tsx",
+        output: { dir: "dist/server", filename: "server.cjs", formats: "commonjs" as const },
+        externals: "auto" as const,
+        template: "public/index.html",
+        placeholder: "<!--ssr-outlet-->",
+      },<% } %>
+    },
+  } as any,
+};

package/templates/template-react-ts/mock/index.ts ADDED Viewed

@@ -0,0 +1,27 @@
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = fileURLToPath(new URL('.', import.meta.url));
+http.createServer((req, res) => {
+  const requestPath = req.url?.split('?')[0];
+  const requestMethod = req.method?.toLowerCase();
+  const mockFilePath = path.resolve(
+    __dirname,
+    `./resources${requestPath}.${requestMethod}.json`
+  );
+  try {
+    const content = fs.readFileSync(mockFilePath, 'utf-8');
+    res.writeHead(200, { 'Content-Type': 'application/json' });
+    res.write(content);
+    res.end();
+  } catch (_error) {
+    res.writeHead(404);
+    res.end(JSON.stringify({ error: 'not found' }));
+  }
+}).listen(4000, () => {
+  console.log('Mock server running on http://localhost:4000');
+});

package/templates/template-react-ts/package.json.ejs ADDED Viewed

@@ -0,0 +1,22 @@
+{
+  "name": "<%= projectName %>",
+  "version": "1.0.0",
+  "description": "<%= description %>",
+  "scripts": {
+    "clean": "rimraf dist",
+    "dev": "bundlekit-service serve --bundler <%= bundler %> --mode development",
+    "build": "bundlekit-service build --bundler <%= bundler %> --mode production"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@bundlekit/service": "workspace:^",
+    "@bundlekit/plugin-react": "workspace:^",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "rimraf": "^5.0.1",
+    "typescript": "^5.8.0"
+  }
+}

package/templates/template-react-ts/public/index.html.ejs ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><%= projectName %></title>
+</head>
+<body>
+    <div id="root"><!--ssr-outlet--></div>
+</body>
+</html>

package/templates/template-react-ts/src/App.tsx.ejs ADDED Viewed

@@ -0,0 +1,18 @@
+import React, { useState } from "react";
+const App: React.FC = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h1>
+        <span>Hello, <%= projectName %>!</span>
+        <button onClick={() => setCount(count + 1)}>
+          Clicked {count} times
+        </button>
+      </h1>
+    </div>
+  );
+};
+export default App;

package/templates/template-react-ts/src/entry-client.tsx.ejs ADDED Viewed

@@ -0,0 +1,14 @@
+import React from "react";
+import { hydrateRoot, createRoot } from "react-dom/client";
+import App from "./App";
+const container = document.getElementById("root");
+if (container) {
+  // SSR 模式：服务端已经吐了 HTML，用 hydrateRoot 复用 DOM
+  // CSR 模式：DOM 是空的，回退到 createRoot
+  if (container.firstChild) {
+    hydrateRoot(container, <App />);
+  } else {
+    createRoot(container).render(<App />);
+  }
+}

package/templates/template-react-ts/src/entry-server.tsx.ejs ADDED Viewed

@@ -0,0 +1,13 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import App from "./App";
+/**
+ * 服务端渲染入口
+ *
+ * @param url 当前请求路径，用于路由匹配
+ * @returns HTML 字符串，将由 service 替换到 index.html 的 <!--ssr-outlet--> 占位
+ */
+export function render(url: string): string {
+  return renderToString(<App />);
+}

package/templates/template-react-ts/src/index.tsx.ejs ADDED Viewed

@@ -0,0 +1,27 @@
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+const App: React.FC = () => {
+  const [count, setCount] = useState(0);
+  return (
+    <div>
+      <h1>
+        <span>Hello, <%= projectName %>!</span>
+        <button onClick={() => setCount(count + 1)}>
+          Clicked {count} times
+        </button>
+      </h1>
+    </div>
+  );
+};
+const container = document.getElementById('root');
+if (container) {
+  const root = createRoot(container);
+  root.render(
+    <React.StrictMode>
+      <App />
+    </React.StrictMode>
+  );
+}

package/templates/template-react-ts/tsconfig.json ADDED Viewed

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "esnext",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react",
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}