From ceab4e7fb26e6836d65e637761e1d320427d9e1f Mon Sep 17 00:00:00 2001 From: Sergej Samsonenko Date: Fri, 22 Oct 2021 21:49:32 +0200 Subject: [PATCH 1/5] refactor: allow multiple vue instances --- src/main.js | 49 +++++++++++++++++++++++++++---------------------- 1 file changed, 27 insertions(+), 22 deletions(-) diff --git a/src/main.js b/src/main.js index b259d7cc..ace6af4c 100644 --- a/src/main.js +++ b/src/main.js @@ -5,6 +5,23 @@ import { createApp } from 'vue' import { createStore } from 'vuex' import './css/main.css' +/** + * vuex + * auto-import all modules and prepare shared store + */ +const vuexModules = require.context('./vue/store/', true, /\.js$/) +const modules = {} + +vuexModules.keys().forEach(key => { + const name = key.replace(/\.(\/|js)/g, '').replace(/\s/g, '-') + modules[name] = vuexModules(key).default +}) + +const store = createStore({ + strict: process.env.NODE_ENV !== 'production', + modules +}) + /** * create vue instance function */ @@ -28,25 +45,6 @@ const createVueApp = () => { app.component(name, component) }) - /** - * vuex - * auto-import all modules - */ - const vuexModules = require.context('./vue/store/', true, /\.js$/) - const modules = {} - - vuexModules.keys().forEach(key => { - const name = key.replace(/\.(\/|js)/g, '').replace(/\s/g, '-') - modules[name] = vuexModules(key).default - }) - - const store = createStore({ - strict: process.env.NODE_ENV !== 'production', - modules - }) - - app.use(store) - /** * vue mixins * auto-register all mixins with a 'global' keyword in their filename @@ -72,15 +70,22 @@ const createVueApp = () => { * vue plugins * extend with additional features */ - // app.use(MyPlugin) + app.use(store) return app } /** - * create and mount vue instance + * create and mount vue instance(s) */ -createVueApp().mount('#app') +const appElement = document.querySelector('#app') + +if (appElement) { + createVueApp().mount(appElement) +} else { + const vueElements = document.querySelectorAll('[vue]') + if (vueElements) vueElements.forEach(el => createVueApp().mount(el)) +} /** * fixes for Shopify sections From 59bf3bad731c3624d895cb36899c05de7a611791 Mon Sep 17 00:00:00 2001 From: Sergej Samsonenko Date: Fri, 22 Oct 2021 21:51:03 +0200 Subject: [PATCH 2/5] chore: update deps versions --- package.json | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/package.json b/package.json index 658ba650..70036ae6 100644 --- a/package.json +++ b/package.json @@ -23,35 +23,35 @@ }, "dependencies": { "tailwindcss": "^2.2.15", - "vue": "^3.2.11", + "vue": "^3.2.20", "vuex": "^4.0.2" }, "devDependencies": { - "@babel/core": "^7.15.5", - "@babel/plugin-transform-runtime": "^7.15.0", - "@babel/preset-env": "^7.15.6", - "@vue/compiler-sfc": "^3.2.11", - "autoprefixer": "^10.3.4", - "babel-loader": "^8.2.2", + "@babel/core": "^7.15.8", + "@babel/plugin-transform-runtime": "^7.15.8", + "@babel/preset-env": "^7.15.8", + "@vue/compiler-sfc": "^3.2.20", + "autoprefixer": "^10.3.7", + "babel-loader": "^8.2.3", "clean-webpack-plugin": "^4.0.0", "cross-env": "^7.0.3", - "css-loader": "^6.2.0", - "css-minimizer-webpack-plugin": "^3.0.2", - "eslint": "^7.32.0", - "eslint-plugin-vue": "^7.17.0", + "css-loader": "^6.4.0", + "css-minimizer-webpack-plugin": "^3.1.1", + "eslint": "^8.0.1", + "eslint-plugin-vue": "^7.20.0", "eslint-webpack-plugin": "^3.0.1", - "mini-css-extract-plugin": "^2.3.0", + "mini-css-extract-plugin": "^2.4.3", "npm-run-all": "^4.1.5", - "postcss": "^8.3.6", + "postcss": "^8.3.11", "postcss-import": "^14.0.2", - "postcss-loader": "^6.1.1", + "postcss-loader": "^6.2.0", "stylelint": "^13.13.1", "stylelint-config-recommended": "^5.0.0", "stylelint-webpack-plugin": "^3.0.1", "url-loader": "^4.1.1", - "vue-loader": "^16.5.0", - "webpack": "^5.52.1", - "webpack-cli": "^4.8.0", + "vue-loader": "^16.8.1", + "webpack": "^5.59.1", + "webpack-cli": "^4.9.1", "webpack-merge": "^5.8.0" } } From faaa8c72b3b071fa859599b952879d79bea72566 Mon Sep 17 00:00:00 2001 From: Sergej Samsonenko Date: Fri, 22 Oct 2021 21:55:03 +0200 Subject: [PATCH 3/5] chore: version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 70036ae6..91da3b1c 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "shopify-theme-lab", "description": "Customizable modular development environment for blazing-fast Shopify theme creation", "author": "Sergej Samsonenko", - "version": "4.2.0", + "version": "4.3.0", "license": "MIT", "scripts": { "start": "run-p -sr shopify:serve webpack:watch", From 98de9e0a7fb7011d139f549aaec5a2fa6f4b5e7c Mon Sep 17 00:00:00 2001 From: Sergej Samsonenko Date: Fri, 22 Oct 2021 21:59:32 +0200 Subject: [PATCH 4/5] chore: revert eslint version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 91da3b1c..0504225b 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "cross-env": "^7.0.3", "css-loader": "^6.4.0", "css-minimizer-webpack-plugin": "^3.1.1", - "eslint": "^8.0.1", + "eslint": "^7.32.0", "eslint-plugin-vue": "^7.20.0", "eslint-webpack-plugin": "^3.0.1", "mini-css-extract-plugin": "^2.4.3", From 67b8d62cb2036db6f89e2b7e9363aa62d0678f50 Mon Sep 17 00:00:00 2001 From: Sergej Samsonenko Date: Fri, 22 Oct 2021 22:13:49 +0200 Subject: [PATCH 5/5] chore: update tailwindcss version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0504225b..d81aba3e 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "fix:shopify": "cd shopify && shopify theme check -a" }, "dependencies": { - "tailwindcss": "^2.2.15", + "tailwindcss": "^2.2.17", "vue": "^3.2.20", "vuex": "^4.0.2" },