Merge pull request #118 from uicrooks/dev

v4.1.1

Author: sergejcodes

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.1.0",
+  "version": "4.1.1",
   "license": "MIT",
   "scripts": {
     "start": "run-p -sr shopify:serve webpack:watch",
@@ -29,16 +29,16 @@
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@babel/plugin-transform-runtime": "^7.14.5",
-    "@babel/preset-env": "^7.14.8",
+    "@babel/preset-env": "^7.14.9",
     "@vue/compiler-sfc": "^3.1.5",
     "autoprefixer": "^10.3.1",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^6.2.0",
     "css-minimizer-webpack-plugin": "^3.0.2",
-    "eslint": "^7.31.0",
-    "eslint-plugin-vue": "^7.14.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^7.15.0",
     "eslint-webpack-plugin": "^3.0.1",
     "mini-css-extract-plugin": "^2.1.0",
     "npm-run-all": "^4.1.5",
@@ -50,8 +50,8 @@
     "stylelint-config-recommended": "^5.0.0",
     "stylelint-webpack-plugin": "^3.0.1",
     "url-loader": "^4.1.1",
-    "vue-loader": "^16.3.1",
-    "webpack": "^5.46.0",
+    "vue-loader": "^16.4.1",
+    "webpack": "^5.48.0",
     "webpack-cli": "^4.7.2",
     "webpack-merge": "^5.8.0"
   }

src/main.js

@@ -83,16 +83,31 @@ const createVueApp = () => {
 createVueApp().mount('#app')
 
 /**
- * fix: properly render vue components inside sections on user insert in the theme editor
- * add the 'vue' keyword to the section's wrapper classes e.g.:
+ * fixes for Shopify sections
+ * 1. properly render vue components on user insert in the theme editor
+ * 2. reload the current page to rerender async inserted sections with vue components
+ *
+ * add the 'vue' keyword to the section's wrapper classes if the section uses any vue functionality e.g.:
  * {% schema %}
  * {
  *   "class": "vue-section"
  * }
  * {% endschema %}
  */
-Shopify.designMode && document.addEventListener('shopify:section:load', (event) => {
-  if (event.target.classList.value.includes('vue')) {
-    createVueApp().mount(event.target)
-  }
-})
+if (Shopify.designMode) {
+  document.addEventListener('shopify:section:load', (event) => {
+    if (event.target.classList.value.includes('vue')) {
+      createVueApp().mount(event.target)
+    }
+  })
+} else if (!Shopify.designMode && process.env.NODE_ENV === 'development') {
+  new MutationObserver((mutationsList) => {
+    mutationsList.forEach(record => {
+      const vue = Array.from(record.addedNodes).find(node => node.classList && node.classList.value.includes('vue'))
+      if (vue) window.location.reload()
+    })
+  }).observe(document.body, {
+    childList: true,
+    subtree: true
+  })
+}