chore: update webpack vite demo

unplugin · Jan 15, 2024 · 675501b · 675501b
1 parent c332283
commit 675501b
Show file tree

Hide file tree

Showing 21 changed files with 3,546 additions and 421 deletions.
diff --git a/examples/farm/farm.config.ts b/examples/farm/farm.config.ts
@@ -0,0 +1,6 @@
+import { defineConfig } from "@farmfe/core";
+import Vue from "unplugin-vue-fervid/vite";
+
+export default defineConfig({
+  vitePlugins: [Vue()],
+});
diff --git a/examples/farm/index.html b/examples/farm/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./src/main.ts"></script>
+  </body>
+</html>
diff --git a/examples/farm/package.json b/examples/farm/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "farm-example",
+  "private": true,
+  "scripts": {
+    "dev": "farm",
+    "build": "farm build",
+    "preview": "farm preview"
+  },
+  "dependencies": {
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "unplugin-vue-fervid": "workspace:*",
+    "@farmfe/core": "0.15.4",
+    "@farmfe/cli": "0.6.0"
+  }
+}
diff --git a/examples/farm/src/App.vue b/examples/farm/src/App.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const msg = ref('')
+</script>
+
+<template>
+  <div>
+    <h1>Hello world</h1>
+    <h2>{{ msg }}</h2>
+    <input v-model="msg" type="text" />
+  </div>
+</template>
diff --git a/examples/farm/src/main.ts b/examples/farm/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/farm/tsconfig.json b/examples/farm/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*", "*"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/vite/index.html b/examples/vite/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script src="./src/main.ts" type="module"></script>
+  </body>
+</html>
diff --git a/examples/vite/package.json b/examples/vite/package.json
@@ -1,12 +1,17 @@
 {
-  "name": "vite",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
+  "private": true,
+  "type": "module",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
+  "dependencies": {
+    "vue": "^3.4.5"
+  },
+  "devDependencies": {
+    "unplugin-vue-fervid": "workspace:*",
+    "vite": "^5.0.11",
+    "vite-plugin-inspect": "^0.8.1"
+  }
 }
diff --git a/examples/vite/src/App.vue b/examples/vite/src/App.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const msg = ref('')
+</script>
+
+<template>
+  <div>
+    <h1>Hello world</h1>
+    <h2>{{ msg }}</h2>
+    <input v-model="msg" type="text" />
+  </div>
+</template>
diff --git a/examples/vite/src/main.ts b/examples/vite/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/vite/tsconfig.json b/examples/vite/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*", "*"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/vite/vite.config.ts b/examples/vite/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import Vue from 'unplugin-vue-fervid/vite'
+import Inspect from 'vite-plugin-inspect'
+
+export default defineConfig({
+  plugins: [Vue(), Inspect()],
+})
diff --git a/examples/webpack/package.json b/examples/webpack/package.json
@@ -0,0 +1,24 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "cross-env MODE=development webpack serve",
+    "build": "rimraf dist && cross-env MODE=production webpack build",
+    "preview": "serve dist"
+  },
+  "dependencies": {
+    "vue": "^3.4.5"
+  },
+  "devDependencies": {
+    "@swc/core": "^1.3.102",
+    "@types/webpack": "^5.28.5",
+    "cross-env": "^7.0.3",
+    "html-webpack-plugin": "^5.6.0",
+    "serve": "^14.2.1",
+    "sucrase": "^3.35.0",
+    "swc-loader": "^0.2.3",
+    "unplugin-vue-fervid": "workspace:*",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
+  }
+}
diff --git a/examples/webpack/public/index.html b/examples/webpack/public/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Webpack</title>
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/examples/webpack/src/App.vue b/examples/webpack/src/App.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+const msg = ref('')
+</script>
+
+<template>
+  <div>
+    <h1>Hello world</h1>
+    <h2>{{ msg }}</h2>
+    <input v-model="msg" type="text" />
+  </div>
+</template>
diff --git a/examples/webpack/src/main.ts b/examples/webpack/src/main.ts
@@ -0,0 +1,4 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/examples/webpack/tsconfig.json b/examples/webpack/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "esnext",
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*", "*"],
+  "exclude": ["node_modules"]
+}
diff --git a/examples/webpack/webpack.config.ts b/examples/webpack/webpack.config.ts
@@ -0,0 +1,28 @@
+import Vue from 'unplugin-vue-fervid/webpack'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import type { Configuration } from 'webpack'
+
+const config: Configuration = {
+  mode: (process.env.MODE as any) ?? 'development',
+  entry: {
+    app: './src/main.ts',
+  },
+  module: {
+    rules: [
+      {
+        enforce: 'post',
+        test: /\.m?ts$/,
+        exclude: /(node_modules)/,
+        use: { loader: 'swc-loader' },
+      },
+    ],
+  },
+  plugins: [
+    Vue(),
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'public/index.html',
+    }),
+  ],
+}
+export default config
diff --git a/package.json b/package.json
@@ -60,7 +60,8 @@
     "@fervid/napi": "^0.1.4",
     "debug": "^4.3.4",
     "unplugin": "~1.6.0",
-    "vite": "^5.0.11"
+    "vite": "^5.0.11",
+    "webpack-virtual-modules": "^0.6.1"
   },
   "devDependencies": {
     "@babel/types": "^7.23.6",