From efe488c7879b9437d49994bbb2f8e42e673674ef Mon Sep 17 00:00:00 2001 From: Haroen Viaene Date: Mon, 13 Jan 2025 11:14:16 +0100 Subject: [PATCH] chore(examples): migrate vue examples to vite (#5961) * chore(examples): migrate vue/default-theme to vite * !fixup caniuse --- .codesandbox/ci.json | 2 +- examples/vue/default-theme/README.md | 8 +- .../vue/default-theme/{public => }/index.html | 18 +- examples/vue/default-theme/package.json | 18 +- examples/vue/default-theme/src/App.vue | 2 - examples/vue/default-theme/src/main.js | 3 +- examples/vue/default-theme/vite.config.mjs | 7 + examples/vue/default-theme/vue.config.js | 7 - examples/vue/e-commerce/README.md | 8 +- .../vue/e-commerce/{public => }/index.html | 5 +- examples/vue/e-commerce/package.json | 18 +- examples/vue/e-commerce/src/App.vue | 5 - examples/vue/e-commerce/src/main.js | 4 + examples/vue/e-commerce/vite.config.mjs | 7 + examples/vue/e-commerce/vue.config.js | 7 - examples/vue/getting-started/README.md | 22 +- .../getting-started/{public => }/index.html | 4 +- examples/vue/getting-started/package.json | 16 +- examples/vue/getting-started/vite.config.mjs | 7 + examples/vue/getting-started/vue.config.js | 6 - examples/vue/media/README.md | 8 +- examples/vue/media/{public => }/index.html | 4 +- examples/vue/media/package.json | 18 +- examples/vue/media/src/App.vue | 2 - examples/vue/media/src/main.js | 1 + examples/vue/media/vite.config.mjs | 7 + examples/vue/media/vue.config.js | 7 - examples/vue/ssr/package.json | 1 - specs/package.json | 2 +- specs/src/components/Header.astro | 4 +- specs/src/layouts/MainLayout.astro | 2 +- specs/src/pages/index.astro | 2 +- yarn.lock | 3257 ++++++++--------- 33 files changed, 1663 insertions(+), 1826 deletions(-) rename examples/vue/default-theme/{public => }/index.html (54%) create mode 100644 examples/vue/default-theme/vite.config.mjs delete mode 100644 examples/vue/default-theme/vue.config.js rename examples/vue/e-commerce/{public => }/index.html (84%) create mode 100644 examples/vue/e-commerce/vite.config.mjs delete mode 100644 examples/vue/e-commerce/vue.config.js rename examples/vue/getting-started/{public => }/index.html (89%) create mode 100644 examples/vue/getting-started/vite.config.mjs delete mode 100644 examples/vue/getting-started/vue.config.js rename examples/vue/media/{public => }/index.html (90%) create mode 100644 examples/vue/media/vite.config.mjs delete mode 100644 examples/vue/media/vue.config.js diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json index 997b7ac0e0..901a3f76aa 100644 --- 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 index 5211201b16..f3bccb0e42 100644 --- a/examples/vue/default-theme/README.md +++ b/examples/vue/default-theme/README.md @@ -11,7 +11,7 @@ yarn install ### Compiles and hot-reloads for development ``` -yarn run serve +yarn run dev ``` ### Compiles and minifies for production @@ -19,9 +19,3 @@ yarn run serve ``` yarn run build ``` - -### Lints and fixes files - -``` -yarn run lint -``` diff --git a/examples/vue/default-theme/public/index.html b/examples/vue/default-theme/index.html similarity index 54% rename from examples/vue/default-theme/public/index.html rename to examples/vue/default-theme/index.html index 9a4a31b3e9..2903166f03 100644 --- a/examples/vue/default-theme/public/index.html +++ b/examples/vue/default-theme/index.html @@ -1,10 +1,9 @@ - - - - + + + default-theme + diff --git a/examples/vue/default-theme/package.json b/examples/vue/default-theme/package.json index a55bce5761..7187d992a8 100644 --- 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 index 418c118e75..27d0e57d2e 100644 --- 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 index 6c0a207513..a4df97a182 100644 --- 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 new file mode 100644 index 0000000000..60569b9043 --- /dev/null +++ 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 deleted file mode 100644 index 10ca9cdd0a..0000000000 --- a/examples/vue/default-theme/vue.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - publicPath: './', - devServer: { - disableHostCheck: true, - }, - transpileDependencies: ['algoliasearch'], -}; diff --git a/examples/vue/e-commerce/README.md b/examples/vue/e-commerce/README.md index 1e6f445121..814258c492 100644 --- a/examples/vue/e-commerce/README.md +++ b/examples/vue/e-commerce/README.md @@ -11,7 +11,7 @@ yarn install ### Compiles and hot-reloads for development ``` -yarn run serve +yarn run dev ``` ### Compiles and minifies for production @@ -19,9 +19,3 @@ yarn run serve ``` yarn run build ``` - -### Lints and fixes files - -``` -yarn run lint -``` diff --git a/examples/vue/e-commerce/public/index.html b/examples/vue/e-commerce/index.html similarity index 84% rename from examples/vue/e-commerce/public/index.html rename to examples/vue/e-commerce/index.html index b54c4e1a9d..2b0c8d0091 100644 --- a/examples/vue/e-commerce/public/index.html +++ b/examples/vue/e-commerce/index.html @@ -8,8 +8,8 @@ /> - - + + You need to enable JavaScript to run this app.
+ diff --git a/examples/vue/e-commerce/package.json b/examples/vue/e-commerce/package.json index 91bff6c99b..0e26863290 100644 --- 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 index 2dc3526b6f..4434a7b045 100644 --- 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 index 6c0a207513..f8313f697e 100644 --- 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 new file mode 100644 index 0000000000..60569b9043 --- /dev/null +++ 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 deleted file mode 100644 index 692e3d4c82..0000000000 --- a/examples/vue/e-commerce/vue.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - publicPath: '/examples/vue/e-commerce', - devServer: { - disableHostCheck: true, - }, - transpileDependencies: ['algoliasearch'], -}; diff --git a/examples/vue/getting-started/README.md b/examples/vue/getting-started/README.md index db39630746..db18a97795 100644 --- 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/examples/vue/getting-started/public/index.html b/examples/vue/getting-started/index.html similarity index 89% rename from examples/vue/getting-started/public/index.html rename to examples/vue/getting-started/index.html index 4930447181..fa84c417be 100644 --- a/examples/vue/getting-started/public/index.html +++ b/examples/vue/getting-started/index.html @@ -4,7 +4,7 @@ - + + diff --git a/examples/vue/getting-started/package.json b/examples/vue/getting-started/package.json index 950dc1ca3a..7e6c3e084e 100644 --- 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 new file mode 100644 index 0000000000..60569b9043 --- /dev/null +++ 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 deleted file mode 100644 index 29e5da9def..0000000000 --- a/examples/vue/getting-started/vue.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - devServer: { - disableHostCheck: true, - }, - transpileDependencies: ['algoliasearch'], -}; diff --git a/examples/vue/media/README.md b/examples/vue/media/README.md index 80a6ead75c..7ae1e6dfd1 100644 --- a/examples/vue/media/README.md +++ b/examples/vue/media/README.md @@ -11,7 +11,7 @@ yarn install ### Compiles and hot-reloads for development ``` -yarn run serve +yarn run dev ``` ### Compiles and minifies for production @@ -19,9 +19,3 @@ yarn run serve ``` yarn run build ``` - -### Lints and fixes files - -``` -yarn run lint -``` diff --git a/examples/vue/media/public/index.html b/examples/vue/media/index.html similarity index 90% rename from examples/vue/media/public/index.html rename to examples/vue/media/index.html index e322db4b10..d7eda1fc0b 100644 --- a/examples/vue/media/public/index.html +++ b/examples/vue/media/index.html @@ -20,7 +20,7 @@ rel="stylesheet" href="https://cdn.jsdelivr.net/npm/instantsearch.css@8/themes/algolia-min.css" /> - + media @@ -32,6 +32,6 @@ >
- + diff --git a/examples/vue/media/package.json b/examples/vue/media/package.json index c995ce0148..f88fae314c 100644 --- a/examples/vue/media/package.json +++ b/examples/vue/media/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/media" + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "website:examples": "vite build --outDir ../../../website/examples/vue/media --base /examples/vue/media" }, "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/media/src/App.vue b/examples/vue/media/src/App.vue index 6c17bc4ed0..faf618c758 100644 --- a/examples/vue/media/src/App.vue +++ b/examples/vue/media/src/App.vue @@ -116,8 +116,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/media/src/main.js b/examples/vue/media/src/main.js index 6c0a207513..7389d703e2 100644 --- a/examples/vue/media/src/main.js +++ b/examples/vue/media/src/main.js @@ -1,6 +1,7 @@ import Vue from 'vue'; import InstantSearch from 'vue-instantsearch'; +import './App.css'; import App from './App.vue'; Vue.use(InstantSearch); diff --git a/examples/vue/media/vite.config.mjs b/examples/vue/media/vite.config.mjs new file mode 100644 index 0000000000..60569b9043 --- /dev/null +++ b/examples/vue/media/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/media/vue.config.js b/examples/vue/media/vue.config.js deleted file mode 100644 index 10ca9cdd0a..0000000000 --- a/examples/vue/media/vue.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - publicPath: './', - devServer: { - disableHostCheck: true, - }, - transpileDependencies: ['algoliasearch'], -}; diff --git a/examples/vue/ssr/package.json b/examples/vue/ssr/package.json index 7913fe5611..1b259008f6 100644 --- a/examples/vue/ssr/package.json +++ b/examples/vue/ssr/package.json @@ -9,7 +9,6 @@ }, "dependencies": { "algoliasearch": "5.1.1", - "core-js": "2", "instantsearch.css": "8.5.1", "qs": "6.9.7", "vue": "2.7.14", diff --git a/specs/package.json b/specs/package.json index fd75fda177..f205574b59 100644 --- a/specs/package.json +++ b/specs/package.json @@ -19,7 +19,7 @@ }, "devDependencies": { "@types/node": "18.11.13", - "astro": "1.6.14", + "astro": "4.0.4", "instantsearch.css": "8.5.1", "sass": "1.56.2" } diff --git a/specs/src/components/Header.astro b/specs/src/components/Header.astro index ee2b844a72..7c3f3c8f63 100644 --- a/specs/src/components/Header.astro +++ b/specs/src/components/Header.astro @@ -10,9 +10,9 @@ const { BASE_URL } = import.meta.env;