Merge pull request #17 from uicrooks/dev

v2.2.2

Author: sergejcodes

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

@@ -101,7 +101,7 @@ const initTheme = async () => {
 
     // check if settings_data.json already exists and if not then create that file
     if (!fs.existsSync(settingsFilePath)) {
-      await fs.outputFile(settingsFilePath, JSON.stringify(settingsData))
+      await fs.outputFile(settingsFilePath, JSON.stringify(settingsData, null, 2))
     }
   } catch (e) {
     console.error(chalk.red(e))

README.md

@@ -89,7 +89,7 @@ Shopify Theme Lab is a customizable modular development environment for blazing-
   - [Autoprefixer](https://github.com/postcss/autoprefixer)
   - [PurgeCSS](https://tailwindcss.com/docs/optimizing-for-production#removing-unused-css) integrated in Tailwind CSS
   - Shopify remote theme auto-reloading with [reloadr](.config/plugins/reloadr) plugin
-  - Auto-loading of Vue `components`, `mixins`, `directives` and `filters` with [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext)
+  - Auto-loading of Vue `components`, `mixins`, `directives` and `filters` as well as Vuex `modules` with [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext)
   - Clean [config structure](.config/)
   - Easily adjustable/extendable configurations
 <!-- features (end) -->
@@ -103,7 +103,7 @@ Shopify Theme Lab is a customizable modular development environment for blazing-
 
 <!-- installing (start) -->
 ## Installing
-Clone or download this repo and run the following command(s) with your preferred package manager:
+“Use this template”, clone or download this repo and run the following command(s) with your preferred package manager:
 
 ### npm
 ```shell
@@ -150,6 +150,12 @@ $ npm run open:dev # open store url in default browser
 $ npm run build # bundle js, css and other assets like images/fonts with webpack
 $ npm run deploy:live # deploy shopify/ directory
 ```
+
+> There is a safety mechanism in place, which won't allow you to deploy to an already published theme on the **live** store. If you want to deploy regardless use the `--allow-live` flag.
+
+```shell
+$ npm run deploy:live -- --allow-live
+```
 <!-- deploying (end) -->
 
 <!-- css preprocessors (start) -->
@@ -375,7 +381,7 @@ module: {
 | .config | contains multiple configurations and plugins for the development environment |
 | .github | contains files related to github and design/image files for READMEs |
 | shopify | contains default Shopify theme directory structure with `.liquid` files and configs |
-| src | contains `main.js` webpack entry point, `tailwind.config.js`, `js`, `vue` and `css` files |
+| src | contains `main.js` webpack entry point, `tailwind.config.js`, `.js`, `.vue` and `.css` files |
 <!-- directories (end) -->
 
 <!-- tasks (start) -->
@@ -408,11 +414,11 @@ Inside `.configs/` are multiple pre-configured configs and plugins. You should b
 By running `shopify:init` and entering credentials, the task initializes a new theme from `shopify/` directory to the provided Shopify store. It also saves a configuration file for the specified environment inside `.config/shopify/` directory. This file will be ignored by git and shouldn't be tracked for security reasons. All tasks regarding Shopify will use the credentials from the saved configuration file.
 
 ### Shopify + webpack
-- You will spend most of your time in `shopify/` and `src/` directories.
-- 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`.
+- All webpack configs are inside `.config/webpack/` directory
+- [main.js](src/main.js) is webpack's main entry point
+- 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`
 
 ### Shopify remote auto-reloading
 While `npm run start` task is running: The `shopify/` directory is being watched for changes and all changed files are uploaded to the Shopify remote server. After the upload is finished, a request is sent to a `localhost:port` address (specified in `package.json`) and the [reloadr](.config/plugins/reloadr/) plugin reloads all connected Shopify store sites. *Open the web console to check if a site is connected.*
@@ -424,5 +430,5 @@ While `npm run start` task is running: The `shopify/` directory is being watched
 - When the development task is running, the browser console throws a `bundle.css` missing error
 - Already running Shopify tasks only upload files which are changed, a simple re-save of a file, without editing it, won't upload the file to the remote store
 - Vue components inside `.liquid` files can only be used in a non-self-closing `<kebab-case></kebap-case>` manner
-- `<style></style>` and `<script></script>` will be removed on mount inside vue components (basically everything inside `<div id="app"></div>`), use `<component is="style"><componet>` and `<component is="script"></componet>` instead
+- `<style></style>` and `<script></script>` will be removed on mount inside Vue components (basically everything inside `<div id="app">...</div>`), use `<component is="style"><componet>` and `<component is="script"></componet>` instead
 <!-- limitations (end) -->

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.1",
+  "version": "2.2.2",
   "license": "MIT",
   "repository": {
     "type": "git",