Merge pull request #16 from uicrooks/dev

v2.2.1

Author: sergejcodes

.config/plugins/shopify/theme.init.js

@@ -100,14 +100,9 @@ const initTheme = async () => {
     const settingsFilePath = path.resolve(__dirname, '../../../shopify/config/settings_data.json')
 
     // check if settings_data.json already exists and if not then create that file
-    fs.stat(settingsFilePath, (e) => {
-      if (e && e.code === 'ENOENT') {
-        fs.outputFile(settingsFilePath, JSON.stringify(settingsData))
-      } else if (e) {
-        console.error(chalk.red(e))
-        process.exit(1)
-      }
-    })
+    if (!fs.existsSync(settingsFilePath)) {
+      await fs.outputFile(settingsFilePath, JSON.stringify(settingsData))
+    }
   } catch (e) {
     console.error(chalk.red(e))
     process.exit(1)

.config/webpack/webpack.dev.js

@@ -4,9 +4,7 @@ const ESLintPlugin = require('eslint-webpack-plugin')
 const common = require('./webpack.common.js')
 const log = require('../plugins/log')
 
-/**
- * initial console.log on development start
- */
+// initial console.log on development start
 log.box({
   msg: 'Shopify Theme Lab:\nStarting development',
   color: 'green'

.config/webpack/webpack.prod.js

@@ -6,9 +6,7 @@ const TerserPlugin = require('terser-webpack-plugin') // included in webpack 5,
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
 const log = require('../plugins/log')
 
-/**
- * initial console.log on build start
- */
+// initial console.log on build start
 log.box({
   msg: 'Shopify Theme Lab:\nStarting build',
   color: 'green'

README.md

@@ -409,7 +409,7 @@ By running `shopify:init` and entering credentials, the task initializes a new t
 
 ### Shopify + webpack
 - You will spend most of your time in `shopify/` and `src/` directories.
-- By running `yarn start` 3 tasks are executed in parallel: `dev`, `reloadr` and `shopify:watch`.
+- By running `npm run start` 3 tasks are executed in parallel: `dev`, `reloadr` and `shopify:watch`.
 - All vue related files are auto-loaded by webpack with [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext) - vue components, vuex modules, as well as mixins, directives and filters with `global` in their filename. Everything is defined in `src/main.js`.
 - Vue components can be either used as regular single-file-components or as [renderless components](https://css-tricks.com/building-renderless-vue-components) without `<template></template>` tags (You can use Liquid templating while hooking in vue functionality).
 - The webpack bundle and all other assets are outputted to `shopify/assets/` directory. This directory is cleaned on every build. If you want to keep certain files like favicons add `static` to their filenames: `myfile.static.png`.

package-lock.json

@@ -2,7 +2,7 @@
   "name": "shopify-theme-lab",
   "description": "Customizable modular development environment for blazing-fast Shopify theme creation",
   "author": "Sergej Samsonenko <contact@sergej.codes>",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "license": "MIT",
   "repository": {
     "type": "git",

package.json

@@ -62,7 +62,7 @@
             </div>
 
             <div>
-              vuex my-module state 'visible' is set to <strong>{% raw %}{{ visible }}{% endraw %}</strong>
+              Vuex “my-module” state “visible” is set to <strong>{% raw %}{{ visible }}{% endraw %}</strong>
             </div>
 
             <button @click="toggle" class="shopify-theme-lab__button">
@@ -78,7 +78,7 @@
           </div>
 
           <div>
-            vuex my-module state 'visible' is set to <strong>{% raw %}{{ $store.state['my-module'].visible }}{% endraw %}</strong>
+            Vuex “my-module” state “visible” is set to <strong>{% raw %}{{ $store.state['my-module'].visible }}{% endraw %}</strong>
           </div>
 
           <button

shopify/snippets/vue-examples.liquid

@@ -15,15 +15,15 @@ Vue.config.productionTip = false
  * vue components
  * auto-import all vue components
  */
-const vueComponents = require.context('./vue/components/', true, /(\.vue$|\.js$)/)
+const vueComponents = require.context('./vue/components/', true, /\.(vue|js)$/)
 
 vueComponents.keys().forEach(key => {
   const component = vueComponents(key).default
 
   // if a component has a name defined use the name, else use the path as the component name
   const name = component.name
     ? component.name
-    : key.replace(/(\.\/|\.vue|\.js)/g, '').replace(/(\/|-|_)\w/g, (match) => match.slice(1).toUpperCase())
+    : key.replace(/\.(\/|vue|js)/g, '').replace(/(\/|-|_|\s)\w/g, (match) => match.slice(1).toUpperCase())
 
   Vue.component(name, component)
 })
@@ -34,11 +34,12 @@ vueComponents.keys().forEach(key => {
  */
 Vue.use(Vuex)
 
-const vuexModules = require.context('./vue/store/', false, /\.js$/)
+const vuexModules = require.context('./vue/store/', true, /\.js$/)
 const modules = {}
 
 vuexModules.keys().forEach(key => {
-  modules[key.replace(/(\.\/|\.js)/g, '')] = vuexModules(key).default
+  const name = key.replace(/\.(\/|js)/g, '').replace(/\s/g, '-')
+  modules[name] = vuexModules(key).default
 })
 
 const store = new Vuex.Store({

src/main.js

@@ -2,7 +2,7 @@ export default {
   name: 'myDirective',
   directive: {
     inserted (el) {
-      console.log(`${el.innerText} 'v-my-directive' was used on this element.`)
+      console.log(`${el.innerText} “v-my-directive” was used on this element.`)
     }
   }
 }

src/vue/directives/global.directive.js

@@ -1,4 +1,4 @@
 export default {
   name: 'myFilter',
-  filter: value => `'my-filter' was used on ${value}`
+  filter: value => `“my-filter” was used on ${value}`
 }