chore(examples): migrate vue examples to vite (#5961)

* chore(examples): migrate vue/default-theme to vite * !fixup caniuse
algolia · Jan 13, 2025 · efe488c · efe488c
1 parent ddd709c
commit efe488c
Show file tree

Hide file tree

Showing 33 changed files with 1,663 additions and 1,826 deletions.
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -17,5 +17,5 @@
     "packages/instantsearch.css",
     "packages/instantsearch-ui-components"
   ],
-  "node": "16"
+  "node": "20"
 }
diff --git a/examples/vue/default-theme/README.md b/examples/vue/default-theme/README.md
@@ -11,17 +11,11 @@ yarn install
 ### Compiles and hot-reloads for development
 
 ```
-yarn run serve
+yarn run dev
 ```
 
 ### Compiles and minifies for production
 
 ```
 yarn run build
 ```
-
-### Lints and fixes files
-
-```
-yarn run lint
-```
diff --git a/examples/vue/default-theme/public/index.html → examples/vue/default-theme/index.html b/examples/vue/default-theme/public/index.html → examples/vue/default-theme/index.html
@@ -1,10 +1,9 @@
 <!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" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>default-theme</title>
     <!--
       Do not use @8 in production, use a complete version like x.x.x, see website for latest version:
@@ -15,15 +14,14 @@
       href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/algolia.min.css"
     />
   </head>
-
   <body>
     <noscript>
-      <strong
-        >We're sorry but default-theme doesn't work properly without JavaScript
-        enabled. Please enable it to continue.</strong
-      >
+      <strong>
+        We're sorry but default-theme doesn't work properly without JavaScript
+        enabled. Please enable it to continue.
+      </strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="./src/main.js"></script>
   </body>
 </html>
diff --git a/examples/vue/default-theme/package.json b/examples/vue/default-theme/package.json
@@ -3,26 +3,22 @@
   "version": "0.68.0",
   "private": true,
   "scripts": {
-    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
-    "website:examples": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --dest ../../../website/examples/vue/default-theme"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "website:examples": "vite build --outDir ../../../website/examples/vue/default-theme --base /examples/vue/default-theme"
   },
   "dependencies": {
     "algoliasearch": "5.1.1",
-    "core-js": "2",
     "instantsearch.js": "4.75.7",
     "vue": "2.7.14",
     "vue-instantsearch": "4.19.13"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.12.1",
-    "@vue/cli-service": "3.12.1",
+    "vite": "5.0.7",
+    "vite-plugin-commonjs": "0.10.0",
+    "@vitejs/plugin-vue2": "2.3.1",
     "vue-template-compiler": "2.7.14"
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": "Firefox 127, Chrome 125, IE 11"
 }
diff --git a/examples/vue/default-theme/src/App.vue b/examples/vue/default-theme/src/App.vue
@@ -127,8 +127,6 @@ import { liteClient as algoliasearch } from 'algoliasearch/lite';
 import { history as historyRouter } from 'instantsearch.js/es/lib/routers';
 import { simple as simpleMapping } from 'instantsearch.js/es/lib/stateMappings';
 
-import './App.css';
-
 export default {
   data() {
     return {

diff --git a/examples/vue/default-theme/src/main.js b/examples/vue/default-theme/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue';
-import InstantSearch from 'vue-instantsearch';
+import InstantSearch from 'vue-instantsearch/vue2/es';
 
+import './App.css';
 import App from './App.vue';
 
 Vue.use(InstantSearch);

diff --git a/examples/vue/default-theme/vite.config.mjs b/examples/vue/default-theme/vite.config.mjs
@@ -0,0 +1,7 @@
+import vue from '@vitejs/plugin-vue2';
+import { defineConfig } from 'vite';
+import commonjs from 'vite-plugin-commonjs';
+
+export default defineConfig({
+  plugins: [commonjs(), vue()],
+});
diff --git a/examples/vue/default-theme/vue.config.js b/examples/vue/default-theme/vue.config.js
diff --git a/examples/vue/e-commerce/README.md b/examples/vue/e-commerce/README.md
@@ -11,17 +11,11 @@ yarn install
 ### Compiles and hot-reloads for development
 
 ```
-yarn run serve
+yarn run dev
 ```
 
 ### Compiles and minifies for production
 
 ```
 yarn run build
 ```
-
-### Lints and fixes files
-
-```
-yarn run lint
-```
diff --git a/examples/vue/e-commerce/public/index.html → examples/vue/e-commerce/index.html b/examples/vue/e-commerce/public/index.html → examples/vue/e-commerce/index.html
@@ -8,8 +8,8 @@
     />
     <meta name="theme-color" content="#e2a400" />
 
-    <link rel="shortcut icon" href="<%= BASE_URL %>favicon.png" />
-    <link rel="manifest" href="<%= BASE_URL %>manifest.webmanifest" />
+    <link rel="shortcut icon" href="/favicon.png" />
+    <link rel="manifest" href="/manifest.webmanifest" />
 
     <link
       rel="stylesheet"
@@ -31,5 +31,6 @@
     <noscript>You need to enable JavaScript to run this app.</noscript>
 
     <div id="app"></div>
+    <script type="module" src="./src/main.js"></script>
   </body>
 </html>
diff --git a/examples/vue/e-commerce/package.json b/examples/vue/e-commerce/package.json
@@ -3,27 +3,23 @@
   "version": "0.68.0",
   "private": true,
   "scripts": {
-    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
-    "website:examples": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build --dest ../../../website/examples/vue/e-commerce"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "website:examples": "vite build --outDir ../../../website/examples/vue/e-commerce --base /examples/vue/e-commerce"
   },
   "dependencies": {
     "algoliasearch": "5.1.1",
-    "core-js": "2",
     "instantsearch.js": "4.75.7",
     "vue": "2.7.14",
     "vue-instantsearch": "4.19.13",
     "vue-slider-component": "3.0.32"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.12.1",
-    "@vue/cli-service": "3.12.1",
+    "vite": "5.0.7",
+    "vite-plugin-commonjs": "0.10.0",
+    "@vitejs/plugin-vue2": "2.3.1",
     "vue-template-compiler": "2.7.14"
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": "Firefox 127, Chrome 125, IE 11"
 }
diff --git a/examples/vue/e-commerce/src/App.vue b/examples/vue/e-commerce/src/App.vue
@@ -497,11 +497,6 @@ import { formatNumber } from './utils';
 import ClearRefinements from './widgets/ClearRefinements.vue';
 import NoResults from './widgets/NoResults.vue';
 
-import './Theme.css';
-import './App.css';
-import './App.mobile.css';
-import './widgets/PriceSlider.css';
-
 export default {
   components: {
     VueSlider,

diff --git a/examples/vue/e-commerce/src/main.js b/examples/vue/e-commerce/src/main.js
@@ -1,6 +1,10 @@
 import Vue from 'vue';
 import InstantSearch from 'vue-instantsearch';
 
+import './Theme.css';
+import './App.css';
+import './App.mobile.css';
+import './widgets/PriceSlider.css';
 import App from './App.vue';
 
 Vue.use(InstantSearch);

diff --git a/examples/vue/e-commerce/vite.config.mjs b/examples/vue/e-commerce/vite.config.mjs
@@ -0,0 +1,7 @@
+import vue from '@vitejs/plugin-vue2';
+import { defineConfig } from 'vite';
+import commonjs from 'vite-plugin-commonjs';
+
+export default defineConfig({
+  plugins: [commonjs(), vue()],
+});
diff --git a/examples/vue/e-commerce/vue.config.js b/examples/vue/e-commerce/vue.config.js
diff --git a/examples/vue/getting-started/README.md b/examples/vue/getting-started/README.md
@@ -4,20 +4,20 @@
 
 _This project was generated with [create-instantsearch-app](https://github.com/algolia/instantsearch/tree/master/packages/create-instantsearch-app) by [Algolia](https://algolia.com)._
 
-## Get started
+## Project setup
 
-To run this project locally, install the dependencies and run the local server:
-
-```sh
-npm install
-npm start
+```
+yarn install
 ```
 
-Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+### Compiles and hot-reloads for development
 
-```sh
-yarn
-yarn start
+```
+yarn run dev
 ```
 
-Open http://localhost:3000 to see your app.
+### Compiles and minifies for production
+
+```
+yarn run build
+```
diff --git a/...les/vue/getting-started/public/index.html → examples/vue/getting-started/index.html b/...les/vue/getting-started/public/index.html → examples/vue/getting-started/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.png" />
+    <link rel="icon" href="/favicon.png" />
     <!--
       Do not use @8 in production, use a complete version like x.x.x, see website for latest version:
       https://www.algolia.com/doc/guides/building-search-ui/installation/js/#load-the-styles
@@ -23,6 +23,6 @@
       >
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="./src/main.js"></script>
   </body>
 </html>
diff --git a/examples/vue/getting-started/package.json b/examples/vue/getting-started/package.json
@@ -3,25 +3,21 @@
   "version": "1.25.0",
   "private": true,
   "scripts": {
-    "start": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve --port 3000",
-    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build"
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
   },
   "dependencies": {
     "algoliasearch": "5.1.1",
-    "core-js": "2",
     "instantsearch.js": "4.75.7",
     "vue": "2.7.14",
     "vue-instantsearch": "4.19.13"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "3.12.1",
-    "@vue/cli-service": "3.12.1",
+    "vite": "5.0.7",
+    "vite-plugin-commonjs": "0.10.0",
+    "@vitejs/plugin-vue2": "2.3.1",
     "vue-template-compiler": "2.7.14"
   },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {}
-    }
-  },
   "browserslist": "Firefox 127, Chrome 125, IE 11"
 }
diff --git a/examples/vue/getting-started/vite.config.mjs b/examples/vue/getting-started/vite.config.mjs
@@ -0,0 +1,7 @@
+import vue from '@vitejs/plugin-vue2';
+import { defineConfig } from 'vite';
+import commonjs from 'vite-plugin-commonjs';
+
+export default defineConfig({
+  plugins: [commonjs(), vue()],
+});
diff --git a/examples/vue/getting-started/vue.config.js b/examples/vue/getting-started/vue.config.js
diff --git a/examples/vue/media/README.md b/examples/vue/media/README.md
@@ -11,17 +11,11 @@ yarn install
 ### Compiles and hot-reloads for development
 
 ```
-yarn run serve
+yarn run dev
 ```
 
 ### Compiles and minifies for production
 
 ```
 yarn run build
 ```
-
-### Lints and fixes files
-
-```
-yarn run lint
-```
diff --git a/examples/vue/media/public/index.html → examples/vue/media/index.html b/examples/vue/media/public/index.html → examples/vue/media/index.html
@@ -20,7 +20,7 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/algolia-min.css"
     />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <link rel="icon" href="/favicon.ico" />
     <title>media</title>
   </head>
 
@@ -32,6 +32,6 @@
       >
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="./src/main.js"></script>
   </body>
 </html>