feat: new docs

.vscode/settings.json

@@ -7,23 +7,29 @@
     "documate",
     "drei",
     "Erkelost",
+    "farmup",
     "feio",
     "liuliudada",
     "nocheck",
+    "nord",
     "noreferrer",
     "oblador",
     "Pluggable",
+    "preact",
     "Preprocess",
     "PUFY",
     "raxjs",
     "Rolup",
     "Rspack",
+    "rspress",
+    "Shiki",
     "shikiji",
     "shulandmimi",
     "sveltejs",
     "svgr",
     "svgs",
     "tailwindcss",
+    "tauri",
     "Turbopack"
   ],
   "editor.inlineSuggest.showToolbar": "always"

docs/api/javascript-api.mdx

@@ -1,3 +1,4 @@
+import { PackageManagerTabs } from "../../src/theme/PackageManagerTabs";
 import Tabs from "@theme/Tabs";
 import TabItem from "@theme/TabItem";
 import CodeBlock from "@theme/CodeBlock";
@@ -8,21 +9,7 @@ import CodeBlock from "@theme/CodeBlock";
 
 Install the `@farmfe/core` package:
 
-<>
-    <Tabs>
-        <TabItem value="npm" label="npm">
-            <CodeBlock>npm install @farmfe/core@latest</CodeBlock>
-        </TabItem>
-
-        <TabItem value="yarn" label="yarn">
-            <CodeBlock>yarn add @farmfe/core@latest</CodeBlock>
-        </TabItem>
-
-        <TabItem value="pnpm" label="pnpm">
-            <CodeBlock>pnpm add @farmfe/core@latest</CodeBlock>
-        </TabItem>
-    </Tabs>
-</>
+<PackageManagerTabs command="pnpm add @farmfe/core@latest" />
 
 ## Start
 
@@ -40,12 +27,68 @@ Basic example:
 ```javascript
 import { start, logger } from "@farmfe/core";
 try {
-  await start(options);
+  await start({
+    compilation: {
+      output: {
+        publicPath: "/dist"
+      },
+      input: {
+        index: "./base.html"
+      }
+    },
+    server: {
+      port: 6532,
+      hmr: {
+        path: "/__farm_hmr",
+      }
+    },
+    plugins: [
+      '@farmfe/plugin-react',
+      '@farmfe/plugin-sass'
+    ],
+  });
 } catch (error) {
   logger.error(`Failed to start server:\n ${error.stack}`);
   process.exit(1);
 }
 ```
+
+another way is use more deep api to start server: 
+
+```javascript
+import {
+  createCompiler,
+  createDevServer,
+  resolveConfig
+} from '@farmfe/core';
+
+const resolveUserConfig = await resolveConfig({
+      compilation: {
+      output: {
+        publicPath: "/dist"
+      },
+      input: {
+        index: "./base.html"
+      }
+    },
+    server: {
+      port: 6532,
+      hmr: {
+        path: "/__farm_hmr",
+      }
+    },
+    plugins: [
+      '@farmfe/plugin-react',
+      '@farmfe/plugin-sass'
+    ],
+})
+
+// create compiler
+const compiler = await createCompiler(resolveUserConfig);
+const server = await createDevServer(compiler, resolveUserConfig);
+server.listen();
+```
+
 ## Build
 The build method is used to build for the production environment.
 
@@ -530,4 +573,5 @@ Basic example:
 import { Compiler } from "@farmfe/core";
 const compiler = new Compiler(config);
 const result = compiler.modules();
-```
+```import { create } from "ts-node";
+

docs/api/js-plugin-api.md

@@ -145,7 +145,7 @@ const myPlugin = () => {
     name: 'my-plugin',
     configResolved(resolvedConfig) {
       // get resolved config
-      farmConfig = resolvedConfig;
+      resolvedConfig = farmConfig;
     },
     transform: {
       filters: {

docs/benchmark.md

@@ -49,22 +49,22 @@ pnpm benchmark
 
 <!-- ![performance](/img/20231204223204.png) -->
 
-<img style={{width: '100%',borderRadius: '8px', border: '2px solid #8f1a7f60'}} src="/img/20231204223204.png" />
+<img style={{width: '100%',borderRadius: '8px'}} src="/img/20231204223204.png" />
 
 ### Benchmark of HMR
 
 <!-- ![performance](/img/hmr-linux.png) -->
 
-<img style={{width: '100%',borderRadius: '8px', border: '2px solid #8f1a7f60'}} src="/img/hmr-linux.png" />
+<img style={{width: '100%',borderRadius: '8px'}} src="/img/hmr-linux.png" />
 
 ### Benchmark of Startup
 
 <!-- ![performance](/img/startup-linux.png) -->
 
-<img style={{width: '100%',borderRadius: '8px', border: '2px solid #8f1a7f60'}} src="/img/startup-linux.png" />
+<img style={{width: '100%',borderRadius: '8px'}} src="/img/startup-linux.png" />
 
 ### Benchmark of Production Build
 
 <!-- ![performance](/img/build-linux.png) -->
 
-<img style={{width: '100%',borderRadius: '8px', border: '2px solid #8f1a7f60'}} src="/img/build-linux.png" />
+<img style={{width: '100%',borderRadius: '8px'}} src="/img/build-linux.png" />

docs/config/compilation-options.md

@@ -205,13 +205,18 @@ export default defineConfig({
       alias: {
         "/@": path.join(process.cwd(), "src"),
         stream$: "readable-stream",
+        "$__farm_regex:^/(utils)$": path.join(process.cwd(), "src/$1"),
       },
     },
   },
 });
 ```
 
-alias is prefix replacement, for the above example `/@/pages` will be replaced by `/root/src/pages`. If you want an exact match, you can add `$`, for example `stream$` will only replace `stream`, but not `stream/xxx`.
+alias is prefix replacement, for the above example `/@/pages` will be replaced by `/root/src/pages`.
+
+If you want an exact match, you can add `$`, for example `stream$` will only replace `stream`, but not `stream/xxx`.
+
+If you want to use regex, you can use `$__farm_regex:`, for example `$__farm_regex:^/(utils)$` will replace `/utils` to `/root/src/utils`.
 
 #### `resolve. mainFields`
 

docs/contribution.md → docs/contribution.mdx

@@ -1,3 +1,5 @@
+import { PackageManagerTabs } from '../src/theme/PackageManagerTabs';
+
 # Contribution Guide
 
 Thank you for your interest in contributing to Farm!. Before submitting your contribution, please make sure to take a moment and read through the following guidelines.
@@ -77,9 +79,7 @@ You can install them in the extension
 
 Farm development is very simple. You only need to execute `pnpm bootstrap` in the root directory for development.
 
-```bash
-$ pnpm bootstrap
-```
+<PackageManagerTabs command="pnpm bootstrap" />
 
 - use `pnpm bootstrap` to install dependencies and build core packages with series of initialization operations.
 
@@ -91,13 +91,9 @@ $ pnpm bootstrap
 
 When you are developing node side code, the root directory executes pnpm start to debug the code in real time, and when you are developing rust side code, the root directory executes pnpm start:rs to debug the code in real time.
 
-```ts
-// node side
-pnpm start
+<PackageManagerTabs command="pnpm start   // node side" />
 
-// rust side
-pnpm start:rs
-```
+<PackageManagerTabs command="pnpm start:rs   // rust side" />
 
 ## Testing
 

docs/features/css.md

@@ -1,3 +1,6 @@
+import { PackageManagerTabs } from "../../src/theme/PackageManagerTabs";
+
+
 # Css/Sass/Less
 Farm support Css out of box, just import the css file:
 
@@ -29,14 +32,13 @@ You can configuring css modules by [`css.modules`](/docs/config/compilation-opti
 Farm provide official sass, less, postcss plugins to support css pre-processor.
 
 ### Sass
-Farm sass plugin is a Rust Plugin and use `sass-embeded`(we may migrate to [grass](https://github.com/connorskees/grass) in the future).
+Farm sass plugin is a Rust Plugin and use `sass-embeded`(we may migrate to [grass](https://github.com/connorskees/grass) in the feature).
 
 Steps to compile `sass/scss` modules in Farm.
 1. Install dependencies
-```sh
-# npm or yarn or pnpm, choose your favorite package manager
-pnpm add -D @farmfe/plugin-sass
-```
+
+<PackageManagerTabs command="pnpm add -D @farmfe/plugin-sass" />
+
 
 2. Configure the plugin
 ```ts
@@ -90,10 +92,8 @@ export default defineConfig({
 Farm less plugin is a Js Plugin. Steps to compile `less` modules in Farm.
 
 1. Install dependencies
-```sh
-# npm or yarn or pnpm, choose your favorite package manager
-pnpm add -D @farmfe/js-plugin-less
-```
+
+<PackageManagerTabs command="pnpm add -D @farmfe/js-plugin-less" />
 
 2. Configure the plugin
 ```ts
@@ -117,10 +117,9 @@ To use sass with css modules, change the file name from `index.less` to `index.m
 The Farm postcss plugin is a JS plugin. The steps to introduce postcss in Farm are as follows:
 
 1. Install dependencies
-```sh
-# npm or yarn or pnpm, choose your favorite package manager
-pnpm add -D @farmfe/js-plugin-postcss
-```
+
+<PackageManagerTabs command="pnpm add -D @farmfe/js-plugin-postcss" />
+
 
 2. Configure the plugin
 ```ts

docs/features/env.md

@@ -1,6 +1,6 @@
 # Environment Variables and Modes
 
-`Farm` distinguishes between `development` and `production` environments through `process.env.NODE_ENV`.
+`Farm` distinguishes between `development` and `production` environments through `process.env.NODE\_ENV`.
 
 In different environments, environment variables are replaced statically, so use static constants to represent environment variables instead of dynamic expressions.
 
@@ -61,4 +61,4 @@ export defineConfig({
 })
 ```
 
-For above config example, Farm will load `.env`, `.env.development`, etc from `<root>/env` dir.
+For above config example, Farm will load `.env`, `.env.development`, etc from `<root>/env` dir.

docs/frameworks/electron.mdx

@@ -0,0 +1,52 @@
+import { PackageManagerTabs } from "../../src/theme/PackageManagerTabs";
+
+# Electron
+
+Create a `Electron` project based on `Farm`.
+
+`Farm` provides two approaches to support creating `Electron` projects: 
+- Use the `create-farm` scaffold to create a scaffold project
+- You can manually create a `Electron` project following the current documentation
+
+### Creating a Electron Project
+
+<PackageManagerTabs command="npm create farm@latest" />
+
+
+Select `Electron` template in `Select Framework`
+
+After selecting `Electron`, you can continue to select all sub templates already supported by `Farm`
+
+```ts
+- React
+- Vue
+- Preact
+- Svelte
+- Solid
+```
+
+You can choose the framework you want to use to run on electron, farm wrote electron js plugin
+
+such as react template
+
+```ts
+import { defineConfig } from '@farmfe/core';
+import electron from '@farmfe/js-plugin-electron';
+
+export default defineConfig({
+  plugins: [
+    '@farmfe/plugin-react',
+    electron({
+      main: {
+        input: 'electron/main.ts',
+      },
+      preload: {
+        input: 'electron/preload.ts',
+      },
+    }),
+  ]
+});
+
+```
+
+For more example details: [Electron Example](https://github.com/farm-fe/farm/tree/main/examples/Electron)

docs/frameworks/lit.mdx

@@ -0,0 +1,43 @@
+import { PackageManagerTabs } from "../../src/theme/PackageManagerTabs";
+
+# Lit
+
+Create a `Lit` project based on `Farm`.
+
+`Farm` provides two approaches to support creating `Lit` projects: 
+- Use the `create-farm` scaffold to create a scaffold project
+- You can manually create a `Lit` project following the current documentation
+
+### Creating a Lit Project
+
+<PackageManagerTabs command="npm create farm@latest" />
+
+
+Select `Lit` template in `Select Framework`
+
+If you use lit then we need to configure the decorator
+
+```javascript title="farm.config.ts"
+import { defineConfig } from '@farmfe/core';
+
+export default defineConfig({
+  compilation: {
+    presetEnv: false,
+    script: {
+      plugins: [],
+      target: 'es2022',
+      parser: {
+        tsConfig: {
+          decorators: true,
+          dts: false,
+          noEarlyErrors: false,
+          tsx: false
+        }
+      }
+    }
+  }
+});
+
+```
+
+For more example details: [React Example](https://github.com/farm-fe/farm/tree/main/examples/Lit)