init

Author: maomincoding

doc/.vitepress/config/en.mjs

@@ -60,6 +60,10 @@ export const en = defineConfig({
             text: 'VitePluginMettle',
             link: '/tool/vitePluginMettle/',
           },
+          {
+            text: 'MettleJsxRuntime',
+            link: '/tool/mettleJsxRuntime/',
+          },
           {
             text: 'BabelPluginMettleHtml',
             link: '/tool/babelPluginMettleHtml/',
@@ -68,10 +72,6 @@ export const en = defineConfig({
             text: 'BabelPresetMettle',
             link: '/tool/babelPresetMettle/',
           },
-          {
-            text: 'MettleJsxRuntime',
-            link: '/tool/mettleJsxRuntime/',
-          },
         ],
       },
       {
@@ -91,8 +91,8 @@ export const en = defineConfig({
             link: '/other/ide/',
           },
           {
-            text: 'Browser Compatibility',
-            link: '/other/browser/',
+            text: 'Adapt',
+            link: '/other/adapt/',
           },
           {
             text: 'About',

doc/.vitepress/config/zh.mjs

@@ -54,6 +54,10 @@ export const zh = defineConfig({
             text: 'VitePluginMettle',
             link: '/zh/tool/vitePluginMettle/',
           },
+          {
+            text: 'MettleJsxRuntime',
+            link: '/zh/tool/mettleJsxRuntime/',
+          },
           {
             text: 'BabelPluginMettleHtml',
             link: '/zh/tool/babelPluginMettleHtml/',
@@ -62,10 +66,6 @@ export const zh = defineConfig({
             text: 'BabelPresetMettle',
             link: '/zh/tool/babelPresetMettle/',
           },
-          {
-            text: 'MettleJsxRuntime',
-            link: '/zh/tool/mettleJsxRuntime/',
-          },
         ],
       },
       {
@@ -85,8 +85,8 @@ export const zh = defineConfig({
             link: '/zh/other/ide/',
           },
           {
-            text: '浏览器兼容性',
-            link: '/zh/other/browser/',
+            text: '适配',
+            link: '/zh/other/adapt/',
           },
           {
             text: '关于',

doc/en/other/adapt/index.md

@@ -0,0 +1,103 @@
+# Adapt
+
+If you want to use Mettle in an application project developed with another front-end framework, that's fine too. Mettle is very flexible and can be easily adapted.
+
+## Vue
+
+**main.js**
+
+```js
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import mettle from './mettle-plugin';
+
+const pinia = createPinia();
+const app = createApp(App);
+
+app.use(pinia);
+app.mount('#app');
+
+app.use(mettle);
+```
+
+**App.vue**
+
+```vue
+<script setup>
+import { ref,h } from 'vue'
+import { useCounterStore } from './store';
+
+const counterStore = useCounterStore()
+const add = ()=>{
+    counterStore.increment()
+}
+</script>
+
+<template>
+  <div>
+    <button @click="add">add</button>
+    <div id="mettle-inner"></div>
+  </div>
+</template>
+
+```
+
+**mettle-plugin.jsx**
+
+```jsx
+import { createApp } from 'mettle';
+import App from '@/mettle/App.jsx';
+
+export default {
+  install: () => {
+    createApp(<App />, '#mettle-inner');
+  },
+};
+```
+
+**mettle/App.jsx**
+
+```jsx
+import { watch } from 'vue';
+import { useCounterStore } from '@/store';
+
+function App({ setData }) {
+  const counterStore = useCounterStore();
+
+  watch(
+    () => counterStore.count,
+    (newVal) => {
+      console.log(newVal);
+      setData();
+    }
+  );
+
+  return () => (
+    <fragment>
+      <h1>{counterStore.count}</h1>
+      <h2>{counterStore.doubleCount}</h2>
+    </fragment>
+  );
+}
+
+export default App;
+```
+
+**store/index.js**
+
+```js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0);
+  const name = ref('Eduardo');
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+
+  return { count, name, doubleCount, increment };
+});
+```

doc/en/other/browser/index.md

@@ -0,0 +1,103 @@
+# 适配
+
+如果你想在其他前端框架开发的应用项目中使用 Mettle，也是没有问题的。Mettle 非常灵活，可以轻松适配。
+
+## Vue
+
+**main.js**
+
+```js
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+import App from './App.vue';
+import mettle from './mettle-plugin';
+
+const pinia = createPinia();
+const app = createApp(App);
+
+app.use(pinia);
+app.mount('#app');
+
+app.use(mettle);
+```
+
+**App.vue**
+
+```vue
+<script setup>
+import { ref,h } from 'vue'
+import { useCounterStore } from './store';
+
+const counterStore = useCounterStore()
+const add = ()=>{
+    counterStore.increment()
+}
+</script>
+
+<template>
+  <div>
+    <button @click="add">add</button>
+    <div id="mettle-inner"></div>
+  </div>
+</template>
+
+```
+
+**mettle-plugin.jsx**
+
+```jsx
+import { createApp } from 'mettle';
+import App from '@/mettle/App.jsx';
+
+export default {
+  install: () => {
+    createApp(<App />, '#mettle-inner');
+  },
+};
+```
+
+**mettle/App.jsx**
+
+```jsx
+import { watch } from 'vue';
+import { useCounterStore } from '@/store';
+
+function App({ setData }) {
+  const counterStore = useCounterStore();
+
+  watch(
+    () => counterStore.count,
+    (newVal) => {
+      console.log(newVal);
+      setData();
+    }
+  );
+
+  return () => (
+    <fragment>
+      <h1>{counterStore.count}</h1>
+      <h2>{counterStore.doubleCount}</h2>
+    </fragment>
+  );
+}
+
+export default App;
+```
+
+**store/index.js**
+
+```js
+import { defineStore } from 'pinia';
+import { ref, computed } from 'vue';
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0);
+  const name = ref('Eduardo');
+  const doubleCount = computed(() => count.value * 2);
+  function increment() {
+    count.value++;
+  }
+
+  return { count, name, doubleCount, increment };
+});
+```