Skip to content

Commit

Permalink
Merge pull request #63 from uicrooks/dev
Browse files Browse the repository at this point in the history
v2.4.16
  • Loading branch information
sergejcodes authored Mar 25, 2021
2 parents c5f4a9c + 2fb9d92 commit 7f7fc94
Show file tree
Hide file tree
Showing 7 changed files with 127 additions and 79 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -538,7 +538,7 @@ By running `shopify:init` and entering credentials, the task initializes a new t
- [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`
- 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 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 [shopify-reloadr](https://github.com/uicrooks/shopify-reloadr) package reloads all connected Shopify store sites. *Open the web console to check if a site is connected.*
Expand All @@ -547,6 +547,7 @@ While `npm run start` task is running: The `shopify/` directory is being watched
<!-- common pitfalls (start) -->
## Common pitfalls

- If you manually place any files inside the `shopify/assets/` directory add the `static` keyword to their filenames, otherwise webpack will delete them on every consecutive build. For example: `myfile.static.png`
- `<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
- If you want to pass an entire Shopify Drop (Object) as a prop, you have to first convert the Drop to `json` and replace all double quotes with single quotes: `<component :shopify-data="{{ product | json | replace: '"', "'" }}"></component>`. Not all Drops can be converted to `json`, if you get an `{"error":"json not allowed for this object"}` it's a Shopify limitation and you have to pass the values in question individually
<!-- common pitfalls (end) -->
Expand Down
147 changes: 100 additions & 47 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

14 changes: 7 additions & 7 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "shopify-theme-lab",
"description": "Customizable modular development environment for blazing-fast Shopify theme creation",
"author": "Sergej Samsonenko <[email protected]>",
"version": "2.4.15",
"version": "2.4.16",
"license": "MIT",
"config": {
"reloadr": {
Expand Down Expand Up @@ -31,24 +31,24 @@
},
"dependencies": {
"axios": "^0.21.1",
"tailwindcss": "^2.0.3",
"tailwindcss": "^2.0.4",
"vue": "^2.6.12",
"vuex": "^3.6.2"
},
"devDependencies": {
"@babel/core": "^7.13.10",
"@babel/plugin-transform-runtime": "^7.13.10",
"@babel/preset-env": "^7.13.10",
"@babel/preset-env": "^7.13.12",
"@shopify/themekit": "^1.1.7",
"autoprefixer": "^10.2.5",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.1.3",
"css-loader": "^5.2.0",
"css-minimizer-webpack-plugin": "^1.3.0",
"eslint": "^7.22.0",
"eslint-plugin-vue": "^7.7.0",
"eslint-webpack-plugin": "^2.5.2",
"eslint-plugin-vue": "^7.8.0",
"eslint-webpack-plugin": "^2.5.3",
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^1.3.9",
"npm-run-all": "^4.1.5",
Expand All @@ -65,7 +65,7 @@
"url-loader": "^4.1.1",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12",
"webpack": "^5.26.2",
"webpack": "^5.28.0",
"webpack-cli": "^4.5.0",
"webpack-merge": "^5.7.3"
}
Expand Down
Loading

0 comments on commit 7f7fc94

Please sign in to comment.