Merge pull request #4 from sergejcodes/dev

sergejcodes · web-flow · commit 53c7ffa6a8a2 · 2020-10-04T17:57:33.000+02:00
Dev
diff --git a/.config/.readme/auto-reload-demo.gif b/.config/.readme/auto-reload-demo.gif
diff --git a/.config/reloadr/README.md b/.config/reloadr/README.md
@@ -0,0 +1,16 @@
+# Reloadr
+
+Reloadr is a custom script for reloading a remote Shopify theme during development.
+
+The `reloadr.server.js` script runs a http server, as well as a websocket server, locally. The http server listens for requests, send from the `shopify:watch` task (which is the default Shopify Them Kit [watch task](https://shopify.github.io/themekit/commands#watch)) and communicates via websocket connection with the `reloadr.client.js` script.
+
+The `reloadr.client.js` script (websocket client) is injected into the webpack bundle, during development, and connects via `localhost:port` to the websocket server. The script listens to reload messages from the server script.
+
+Settings and ports for the script can be adjusted in the `packages.json`.
+
+## Settings
+| Option | Description |
+| - | - |
+| serverPort | the localhost port `shopify:watch` task and `reloadr.server.js` use to communicate |
+| websoketPort | the localhost port `reloadr.server.js` and `reloader.client.js` use to communicate |
+| delay | auto reload needs a slight delay before reloading the remote site, so all newly uploaded files will be loaded. Values between `1500`ms and `2000`ms seem to work well |
diff --git a/.config/shopify/shopify.init.js b/.config/shopify/shopify.init.js
@@ -1,10 +1,13 @@
+/**
+ * this is a script to quickly initialize the local development environment and a remote shopify theme
+ */
 const path = require('path')
 const fs = require('fs-extra')
 const commandLineArgs = require('command-line-args')
 const yaml = require('yaml')
 const axios = require('axios')
 const chalk = require('chalk')
-const themeKit = require('@shopify/themekit')
+const themeKit = require('@shopify/themekit') // node wrapper for https://shopify.github.io/themekit
 
 /**
  * get command line arguments
diff --git a/.config/shopify/shopify.sample.yml b/.config/shopify/shopify.sample.yml
@@ -1,3 +1,5 @@
+# this is a sample file for illustration purposes and can be safely deleted
+# run shopify:init to initialize a new shopify config
 dev:
   password: [your-api-password]
   theme_id: "[your-theme-id]"
diff --git a/README.md b/README.md
@@ -10,12 +10,13 @@ The kit provides an easy way to build a custom Shopify theme from scratch. It co
 - Shopify Theme Kit
 - Vue
 - Vuex
+- Axios
 - SCSS
 - Tailwind CSS
 - Webpack
 - ESLint
 - Auto-Reload
-- Easily expandable
+- Easily extendable
 
 ## System requirements
 - Node.js
@@ -61,16 +62,28 @@ $ yarn deploy:live
 | dev | bundle and watch for changes in `src/` files with webpack |
 | build | create dist files for Shopify in `shopify/assets/` directory with webpack |
 | reloadr | run a http server and websocket server for remote auto reloading |
-| lint | lint `js` and `vue` files inside the`src/` directory |
+| lint | lint `js` and `vue` files inside the `src/` directory |
 | shopify:watch | watch for changes in the `shopify/` directory and upload to the dev store |
-| shopify:init | initializes theme on remote shopware store and creates a shopify config file for specified environment |
+| shopify:init | initialize theme on remote shopware store and create a shopify config file for specified environment |
 | deploy:dev | upload the `shopify/` directory to the dev store |
 | deploy:live | upload the `shopify/` directory to the live store |
 | settings:dev | download `settings_data.json` from dev store |
 | settings:live | download `settings_data.json` from live store |
 | open:dev | open the url of the dev store |
 | open:live | open the url of the live store |
 
+## Development environment concepts
+- 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.
+- By running `yarn start` 3 tasks are executed in parallel: `dev`, `reloadr` and `shopify:watch`.
+- Inside the `src/` directory are: a tailwind config, scss files and vue related files.
+- All vue related files are auto-loaded by webpack with [require.context](https://webpack.js.org/guides/dependency-management/#requirecontext) - vue components, vuex modules, mixins with `global` in their filename and directives with `global` in their filename.
+- 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.
+- The webpack bundle and all other assets are outputted to `shopify/assets` directory.
+- 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 and the [reloadr script](.config/reloadr/) reloads the remote store (if it's open in the browser).
+
+<img width="100%" src=".config/.readme/auto-reload-demo.gif" alt="Shopify Starterkit auto reload demo">
+
 ## Limitations
-- Vue components can only be used in `<kebab-case />`
-- `<style></style>` will be removed on mount inside vue components (basically everything inside #app), use `<component is="style"><componet>` instead
+- 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>` will be removed on mount inside vue components (basically everything inside #app), use `<component is="style"><componet>` instead when working with `.liquid` files
diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "shopify-starterkit",
   "description": "Environment for rapid Shopify theme development with Vue and Tailwind CSS",
   "author": "Sergej Samsonenko",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "axios": "^0.20.0",
-    "tailwindcss": "^1.8.9",
+    "tailwindcss": "^1.8.10",
     "vue": "^2.6.12",
     "vuex": "^3.5.1"
   },
diff --git a/shopify/README.md b/shopify/README.md
@@ -1,6 +1,7 @@
 # Docs
-- Template files from [repo](https://github.com/Shopify/themekit/tree/master/theme-template/templates)
-- Subdirectories are not allowed
+- Subdirectories are not allowed (Shopify limitation)
+- Template files are from themekit [repo](https://github.com/Shopify/themekit/tree/master/theme-template/templates)
+- More code and examples can be found in the official Shopify starter-theme [repo](https://github.com/Shopify/starter-theme/tree/master/src)
 
 ## Overview
 - [Concepts](https://shopify.dev/concepts)
diff --git a/shopify/layout/theme.liquid b/shopify/layout/theme.liquid
@@ -15,7 +15,9 @@
       <link rel="canonical" href="{{ canonical_url }}">
     {% endif %}
 
-    {% comment %} css bundle is not loaded during development task {% endcomment %}
+    {% comment %}
+      css bundle is not loaded during development task, instead it displays a 404 error in the web console
+    {% endcomment %}
     {{ 'bundle.css' | asset_url | stylesheet_tag }}
 
     <!-- Header hook for plugins -->
@@ -29,17 +31,44 @@
     <div id="app" class="min-h-screen flex flex-col">
       {% section 'header' %}
 
+      {% comment %}
+        vue component: with shopify data passed via prop
+      {% endcomment%}
+      <render-system-info
+        :shopify-data="{
+          shopName: '{{ shop.name }}',
+          shopDomain: '{{ shop.domain }}',
+          shopEmail: '{{ shop.email }}',
+          shopCurrency: '{{ shop.currency }}'
+        }"
+        class="container mb-8"
+      >
+        <div class="text-lg font-bold mb-4">
+          System Info
+        </div>
+      </render-system-info>
+
       <main class="flex-1 container" role="main">
         {{ content_for_layout }}
       </main>
 
       {% section 'footer' %}
 
+      {% comment %}
+        renderless vue component: snippets/vue-offcanvas.liquid
+        test it by clicking the hamburger-menu icon on mobile breakpoint
+      {% endcomment%}
       {% render 'vue-offcanvas' %}
-      <render-backdrop class="bg-black bg-opacity-50" />
+
+      {% comment %}
+        vue component
+      {% endcomment%}
+      <render-backdrop class="bg-black bg-opacity-50"></render-backdrop>
     </div>
 
-    <!-- js bundle -->
+    {% comment %}
+      js bundle outputted by webpack
+    {% endcomment%}
     {{ 'bundle.js' | asset_url | script_tag }}
   </body>
 </html>
diff --git a/shopify/locales/de.json b/shopify/locales/de.json
@@ -15,7 +15,7 @@
     "customer": {
       "account": "Konto",
       "log_in": "Anmelden",
-      "log_out": "Abmelden",
+      "logout": "Abmelden",
       "register": "Registrieren"
     }
   }
diff --git a/shopify/locales/en.default.json b/shopify/locales/en.default.json
@@ -15,7 +15,7 @@
     "customer": {
       "account": "Account",
       "log_in": "Log in",
-      "log_out": "Log out",
+      "logout": "Log out",
       "register": "Register"
     }
   }
diff --git a/shopify/sections/header.liquid b/shopify/sections/header.liquid
@@ -68,7 +68,7 @@
     {
       "type": "header",
       "content": {
-        "en": "Colrs",
+        "en": "Colors",
         "de": "Farben"
       }
     },
diff --git a/src/main.js b/src/main.js
@@ -24,7 +24,7 @@ vueComponents.keys().forEach(key => {
   // if the component has a name defined use the name else use path as 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(/(\/|-|_)\w/g, (match) => match.slice(1).toUpperCase())
 
   components[name] = component
 })
@@ -35,11 +35,11 @@ vueComponents.keys().forEach(key => {
  */
 Vue.use(Vuex)
 
-const files = require.context('./vue/store/', false, /\.js$/)
+const vuexModules = require.context('./vue/store/', false, /\.js$/)
 const modules = {}
 
-files.keys().forEach(key => {
-  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+vuexModules.keys().forEach(key => {
+  modules[key.replace(/(\.\/|\.js)/g, '')] = vuexModules(key).default
 })
 
 const store = new Vuex.Store({
diff --git a/src/vue/components/render/system-info.vue b/src/vue/components/render/system-info.vue
@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <div class="bg-gray-800 text-white p-6">
+      <slot />
+
+      <ul>
+        <li
+          v-for="(value, key) in shopifyData"
+          :key="key"
+        >
+          {{ key }}: <span class="text-gray-500">{{ value }}</span>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    shopifyData: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/yarn.lock b/yarn.lock
@@ -2522,9 +2522,9 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001125:
   integrity sha512-9f+r7BW8Qli917mU3j0fUaTweT3f3vnX/Lcs+1C73V+RADmFme+Ih0Br8vONQi3X0lseOe6ZHfsZLCA8MSjxUA==
 
 caniuse-lite@^1.0.30001109:
-  version "1.0.30001128"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001128.tgz#00ea73610bc991a92250e958837c197734be7029"
-  integrity sha512-ocjGtRj+4wP6XTEIn2AGn3ebd8nkFN3991GlZ3ubLrjUC/w/YGgBFb5iy7CHr5NaBZ/pfo0SrctGRDVUbGgpzg==
+  version "1.0.30001143"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001143.tgz#560f2cfb9f313d1d7e52eb8dac0e4e36c8821c0d"
+  integrity sha512-p/PO5YbwmCpBJPxjOiKBvAlUPgF8dExhfEpnsH+ys4N/791WHrYrGg0cyHiAURl5hSbx5vIcjKmQAP6sHDYH3w==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -6486,7 +6486,7 @@ postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
   integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
 
-postcss@7.0.32, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.11, postcss@^7.0.14, postcss@^7.0.18, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
+postcss@7.0.32, postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.27, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
   integrity sha512-03eXong5NLnNCD05xscnGKGDZ98CyzoqPSMjOe6SuoQY7Z2hIj0Ld1g/O/UQRuOle2aRtiIRDg9tDcTGAkLfKw==
@@ -6504,6 +6504,15 @@ postcss@^6.0.9:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
+postcss@^7.0.11, postcss@^7.0.18:
+  version "7.0.35"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24"
+  integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -7673,10 +7682,10 @@ table@^5.2.3:
     slice-ansi "^2.1.0"
     string-width "^3.0.0"
 
-tailwindcss@^1.8.9:
-  version "1.8.9"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.8.9.tgz#86aa05f019b4975675d1c67a2c9962d9c833ea13"
-  integrity sha512-VgoBxIyF+Ipf+x3eDz3tPA8A5blGBPkswA2xM6fxCmAwAmhlIr9Zk3exft44BUf3q9mxorvjCRtxBrklfPDSoQ==
+tailwindcss@^1.8.10:
+  version "1.8.10"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.8.10.tgz#945ef151c401c04a1c95e6a6bc747387a8d1b9dc"
+  integrity sha512-7QkERG/cWCzsuMqHMwjOaLMVixOGLNBiXsrkssxlE1aWfkxVbGqiuMokR2162xRyaH2mBIHKxmlf1qb3DvIPqw==
   dependencies:
     "@fullhuman/postcss-purgecss" "^2.1.2"
     autoprefixer "^9.4.5"

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,5 @@`
	`1`	`+# this is a sample file for illustration purposes and can be safely deleted`
	`2`	`+# run shopify:init to initialize a new shopify config`
`1`	`3`	`dev:`
`2`	`4`	`password: [your-api-password]`
`3`	`5`	`theme_id: "[your-theme-id]"`
Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@`
`15`	`15`	`"customer": {`
`16`	`16`	`"account": "Konto",`
`17`	`17`	`"log_in": "Anmelden",`
`18`		`- "log_out": "Abmelden",`
	`18`	`+ "logout": "Abmelden",`
`19`	`19`	`"register": "Registrieren"`
`20`	`20`	`}`
`21`	`21`	`}`