From a68c811d99f5a2478e37f01ccbfcb8f21ea73a95 Mon Sep 17 00:00:00 2001 From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com> Date: Fri, 13 Nov 2020 10:56:20 +0200 Subject: [PATCH 1/4] Bumps deps & add prettier.config.js --- .gitignore | 3 +- package.json | 36 ++++---- postcss.config.js | 6 +- prettier.config.js | 6 ++ webpack.config.js | 213 +++++++++++++++++++++------------------------ 5 files changed, 127 insertions(+), 137 deletions(-) create mode 100644 prettier.config.js diff --git a/.gitignore b/.gitignore index 5c3578e..7da9db2 100644 --- a/.gitignore +++ b/.gitignore @@ -5,4 +5,5 @@ node_modules *.lock package-lock.json *.yml -*error.log \ No newline at end of file +*error.log +.idea diff --git a/package.json b/package.json index 8bdfc94..f02a138 100644 --- a/package.json +++ b/package.json @@ -7,9 +7,9 @@ "author": "Mike Salvati", "private": true, "scripts": { - "start": "NODE_ENV=development webpack --watch", - "build": "webpack && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid", - "deploy": "webpack && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy" + "start": "webpack --mode=development --watch", + "build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid", + "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy" }, "dependencies": { "tailwindcss": "^1.9.6", @@ -18,25 +18,29 @@ "devDependencies": { "@babel/core": "^7.11.4", "@babel/preset-env": "^7.11.0", - "@shopify/themekit": "^1.1.4", - "autoprefixer": "^9.8.6", + "@shopify/themekit": "^1.1.6", + "autoprefixer": "^10.0.2", "babel-loader": "^8.1.0", "babel-plugin-transform-class-properties": "^6.24.1", "browser-sync": "^2.26.12", "clean-webpack-plugin": "^3.0.0", - "copy-webpack-plugin": "^5.1.2", - "css-loader": "^4.2.1", + "copy-webpack-plugin": "^6.3.0", + "css-loader": "^5.0.1", "file-loader": "^6.0.0", + "glob": "^7.1.6", "html-webpack-plugin": "^4.3.0", - "mini-css-extract-plugin": "^0.10.0", - "node-sass": "^4.14.1", - "postcss-loader": "^3.0.0", - "sass-loader": "^9.0.3", - "style-loader": "^1.2.1", + "mini-css-extract-plugin": "^1.3.1", + "node-sass": "^5.0.0", + "postcss-loader": "^4.0.4", + "prettier": "^2.1.2", + "sass-loader": "^10.1.0", + "style-loader": "^2.0.0", "transform-class-properties": "^1.0.0-beta", - "webpack": "^4.44.1", - "webpack-bundle-analyzer": "^3.8.0", - "webpack-cli": "^3.3.12", - "webpack-shell-plugin-next": "^1.2.0" + "webpack": "^5.4.0", + "webpack-bundle-analyzer": "^4.1.0", + "webpack-cli": "^4.2.0", + "webpack-dev-server": "^3.11.0", + "webpack-shell-plugin-next": "^2.0.8", + "yargs": "^16.1.0" } } diff --git a/postcss.config.js b/postcss.config.js index ff189d7..f720c87 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -1,5 +1,3 @@ module.exports = { - plugins: [ - require('autoprefixer') - ] - } \ No newline at end of file + plugins: [require('autoprefixer')], +}; diff --git a/prettier.config.js b/prettier.config.js new file mode 100644 index 0000000..afd811c --- /dev/null +++ b/prettier.config.js @@ -0,0 +1,6 @@ +module.exports = { + printWidth: 100, + trailingComma: 'es5', + singleQuote: true, + tabWidth: 4 +}; diff --git a/webpack.config.js b/webpack.config.js index 0dd364e..75d7d45 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,157 +1,138 @@ const path = require('path'); -const glob = require("glob"); +const glob = require('glob'); +const { argv } = require('yargs'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const WebpackShellPluginNext = require('webpack-shell-plugin-next'); -const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production'; -const stats = mode === 'development' ? 'errors-warnings' : { children: false }; - +const isDev = argv.mode === 'development'; +const stats = isDev ? 'errors-warnings' : { children: false }; module.exports = { - mode: mode, stats: stats, entry: glob.sync('./src/components/**/*.js').reduce((acc, path) => { - const entry = path.replace(/^.*[\\\/]/, '').replace('.js',''); + const entry = path.replace(/^.*[\\\/]/, '').replace('.js', ''); acc[entry] = path; return acc; - }, {}), + }, {}), output: { filename: './assets/bundle.[name].js', path: path.resolve(__dirname, 'dist'), }, - plugins: [ - new CleanWebpackPlugin(), - new BundleAnalyzerPlugin({ - analyzerMode: 'disabled', - generateStatsFile: true - }), - new MiniCssExtractPlugin({ - filename: '/assets/bundle.[name].css' - }), - new CopyPlugin([{ - from: 'src/components/**/*', - to: '[folder]/[name].[ext]', - ignore: [ - 'src/components/**/*.js', - 'src/components/**/*.scss', - 'src/assets/**/*', - 'src/components/sections/**/*', - 'src/components/templates/**/*', - 'src/components/snippets/**/*', - 'src/components/tailwind.css' - ] - }, - { - from: 'src/components/templates/**/*.liquid', - to: 'templates/[name].[ext]', - flatten: true - }, - { - from: 'src/components/sections/**/*.liquid', - to: 'sections/[name].[ext]', - flatten: true - }, - { - from: 'src/components/snippets/**/*.liquid', - to: 'snippets/[name].[ext]', - flatten: true - }, - { - from: 'src/assets/**/*', - to: 'assets/', - flatten: true - }, - { - from: 'src/config/*.json', - to: 'config/[name].[ext]', - }, - { - from: 'src/locales/*.json', - to: 'locales/[name].[ext]', - }, - ]) - ], module: { - rules: [{ + rules: [ + { test: /\.(sc|sa|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { - url: false - } + url: false, + }, }, 'postcss-loader', { loader: 'sass-loader', options: { sourceMap: true, - } - } - ] + }, + }, + ], }, { test: /\.(png|svg|jpg|gif)$/, - use: [ - 'file-loader' - ] + use: ['file-loader'], }, { test: /\.(woff|woff2|eot|ttf|otf)$/, - use: [ - 'file-loader' - ] - }, - { - test: /\.m?js$/, - exclude: /(node_modules|bower_components)/, - use: { - loader: 'babel-loader', - options: { - presets: ['@babel/preset-env'], - plugins: ['transform-class-properties'], - plugins: ['babel-plugin-transform-class-properties'] - } - } + use: ['file-loader'], }, { test: /\.js$/, exclude: /node_modules/, - loader: "babel-loader" - } - ] - } -}; + loader: 'babel-loader', + }, + ], + }, + plugins: [ + new CleanWebpackPlugin(), + isDev && + new BundleAnalyzerPlugin({ + analyzerMode: 'disabled', + generateStatsFile: true, + }), + isDev && + new WebpackShellPluginNext({ + onBuildStart: { + scripts: ['echo -- Webpack build started 🛠'], + blocking: true, + parallel: false, + }, + onBuildError: { + scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'], + }, + onBuildEnd: { + scripts: [ + 'echo -- Webpack build complete ✓', + 'echo -- Building TailwindCSS...', + 'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid', + 'echo -- Deploying to theme ✈️', + 'shopify-themekit deploy', + 'echo -- Deployment competed ✓', + 'shopify-themekit open', + 'shopify-themekit watch', + ], + blocking: true, + parallel: false, + }, + }), -// Run Shell commmands during Webpack operations -if (mode === 'development') { - module.exports.plugins.push( - new WebpackShellPluginNext({ - onBuildStart:{ - scripts: ['echo -- Webpack build started 🛠'], - blocking: true, - parallel: false - }, - onBuildError:{ - scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'], - }, - onBuildEnd:{ - scripts: [ - 'echo -- Webpack build complete ✓', - 'echo -- Building TailwindCSS...', - 'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid', - 'echo -- Deploying to theme ✈️', - 'shopify-themekit deploy', - 'echo -- Deployment competed ✓', - 'shopify-themekit open', - 'shopify-themekit watch'], - blocking: true, - parallel: false - } - }) - ) - } + new MiniCssExtractPlugin({ + filename: '/assets/bundle.[name].css', + }), + new CopyPlugin({ + patterns: [ + { + from: 'src/components/*/*.liquid', + to: '[folder]/[name].[ext]', + }, + { + from: 'src/components/templates/**/*.liquid', + to: 'templates/[name].[ext]', + flatten: true, + }, + { + from: 'src/components/sections/**/*.liquid', + to: 'sections/[name].[ext]', + flatten: true, + }, + { + from: 'src/components/snippets/**/*.liquid', + to: 'snippets/[name].[ext]', + flatten: true, + }, + { + from: 'src/assets/**/*', + to: 'assets/', + flatten: true, + }, + { + from: 'src/config/*.json', + to: 'config/[name].[ext]', + }, + { + from: 'src/locales/*.json', + to: 'locales/[name].[ext]', + }, + ], + }), + ].filter(Boolean), + devServer: { + contentBase: path.join(__dirname, 'dist'), + compress: true, + port: 9000, + }, +}; From d24c1a8b8e0f336fcb93fa025ce6cc9aaa63aa75 Mon Sep 17 00:00:00 2001 From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com> Date: Sat, 14 Nov 2020 13:48:47 +0200 Subject: [PATCH 2/4] Initial HMR support --- config.yml.example | 14 ++- package.json | 2 +- src/components/sections/header/header.liquid | 3 +- src/components/snippets/message/message.js | 6 +- .../snippets/message/message.liquid | 2 +- src/components/snippets/message/message.scss | 2 +- webpack.config.js | 95 ++++++++++++------- 7 files changed, 82 insertions(+), 42 deletions(-) diff --git a/config.yml.example b/config.yml.example index 1cc2639..1db2eb5 100644 --- a/config.yml.example +++ b/config.yml.example @@ -1,7 +1,17 @@ development: - password: + password: theme_id: "" - store: + store: + directory: dist/ + ignore_files: + - config/settings_data.json + - "*.js" + - "*.hot-update.json" + +production: + password: + theme_id: "" + store: directory: dist/ ignore_files: - config/settings_data.json diff --git a/package.json b/package.json index f02a138..54e3820 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "author": "Mike Salvati", "private": true, "scripts": { - "start": "webpack --mode=development --watch", + "start": "webpack serve --mode=development", "build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid", "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy" }, diff --git a/src/components/sections/header/header.liquid b/src/components/sections/header/header.liquid index 6fe4bbf..4ab62b4 100644 --- a/src/components/sections/header/header.liquid +++ b/src/components/sections/header/header.liquid @@ -1,4 +1,5 @@
+ {% include "message" %} {%- if section.settings.announcement_bar_enabled -%}
{%- if section.settings.announcement_bar_link != blank -%} @@ -141,4 +142,4 @@ max-width: {{section.settings.logo_max_width}}px; } -{%- endif -%} \ No newline at end of file +{%- endif -%} diff --git a/src/components/snippets/message/message.js b/src/components/snippets/message/message.js index 9878685..ee29cec 100644 --- a/src/components/snippets/message/message.js +++ b/src/components/snippets/message/message.js @@ -1,6 +1,6 @@ // testing importing scss -import "./message.scss"; +import './message.scss'; // Testing arrow functions -const messageFunction = () => 'Message JS ES6 Function'; -console.log(messageFunction()); \ No newline at end of file +const messageFunction = () => 'Message JS ES6 Function with HMR!!!'; +console.log(messageFunction()); diff --git a/src/components/snippets/message/message.liquid b/src/components/snippets/message/message.liquid index b469e6c..4319327 100644 --- a/src/components/snippets/message/message.liquid +++ b/src/components/snippets/message/message.liquid @@ -4,4 +4,4 @@

This is a message from a snippet

-{{ 'bundle.message.js' | asset_url | script_tag }} \ No newline at end of file +{{ 'bundle.message.js' | asset_url | script_tag }} diff --git a/src/components/snippets/message/message.scss b/src/components/snippets/message/message.scss index e381979..e505ae5 100644 --- a/src/components/snippets/message/message.scss +++ b/src/components/snippets/message/message.scss @@ -6,4 +6,4 @@ color: purple; font-size: 2rem; text-align: right; -} \ No newline at end of file +} diff --git a/webpack.config.js b/webpack.config.js index 75d7d45..b107eb0 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -2,13 +2,14 @@ const path = require('path'); const glob = require('glob'); const { argv } = require('yargs'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const CopyPlugin = require('copy-webpack-plugin'); const WebpackShellPluginNext = require('webpack-shell-plugin-next'); -const isDev = argv.mode === 'development'; -const stats = isDev ? 'errors-warnings' : { children: false }; +const isDevMode = argv.mode === 'development'; +const stats = isDevMode ? 'errors-warnings' : { children: false }; +const port = 9000; +const publicPath = isDevMode ? `https://localhost:${port}/` : ''; module.exports = { stats: stats, @@ -19,14 +20,18 @@ module.exports = { }, {}), output: { filename: './assets/bundle.[name].js', + hotUpdateChunkFilename: './hot/[id].[fullhash].hot-update.js', + hotUpdateMainFilename: './hot/[fullhash].hot-update.json', path: path.resolve(__dirname, 'dist'), + publicPath, }, + cache: false, module: { rules: [ { test: /\.(sc|sa|c)ss$/, use: [ - MiniCssExtractPlugin.loader, + isDevMode ? 'style-loader' : MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { @@ -58,18 +63,18 @@ module.exports = { ], }, plugins: [ - new CleanWebpackPlugin(), - isDev && - new BundleAnalyzerPlugin({ - analyzerMode: 'disabled', - generateStatsFile: true, - }), - isDev && + new CleanWebpackPlugin({ + cleanStaleWebpackAssets: false, + }), + isDevMode && new WebpackShellPluginNext({ onBuildStart: { - scripts: ['echo -- Webpack build started 🛠'], - blocking: true, - parallel: false, + scripts: [ + 'echo -- Webpack build started 🛠', + 'shopify-themekit watch --env=development', + ], + blocking: false, + parallel: true, }, onBuildError: { scripts: ['echo -- ☠️ Aw snap, Webpack build failed...'], @@ -80,10 +85,9 @@ module.exports = { 'echo -- Building TailwindCSS...', 'npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid', 'echo -- Deploying to theme ✈️', - 'shopify-themekit deploy', + 'shopify-themekit deploy --env=development', 'echo -- Deployment competed ✓', 'shopify-themekit open', - 'shopify-themekit watch', ], blocking: true, parallel: false, @@ -91,28 +95,41 @@ module.exports = { }), new MiniCssExtractPlugin({ - filename: '/assets/bundle.[name].css', + filename: './assets/bundle.[name].css', }), new CopyPlugin({ patterns: [ { - from: 'src/components/*/*.liquid', + from: 'src/components/**/*.liquid', to: '[folder]/[name].[ext]', - }, - { - from: 'src/components/templates/**/*.liquid', - to: 'templates/[name].[ext]', - flatten: true, - }, - { - from: 'src/components/sections/**/*.liquid', - to: 'sections/[name].[ext]', - flatten: true, - }, - { - from: 'src/components/snippets/**/*.liquid', - to: 'snippets/[name].[ext]', flatten: true, + transformPath(targetPath, absolutePath) { + const relativePath = path.join(__dirname, 'src/components'); + const diff = path.relative(relativePath, absolutePath); + const targetFolder = diff.split(path.sep)[0]; + return path.join(targetFolder, path.basename(absolutePath)); + }, + transform: isDevMode + ? function (content) { + content = content + .toString() + .replace( + /{{\s*'([^']+)'\s*\|\s*asset_url\s*\|\s*(stylesheet_tag|script_tag)\s*}}/g, + function (matched, fileName, type) { + if (type === 'stylesheet_tag') { + if (fileName !== 'tailwind.css') { + return ''; + } + return matched; + } + + return ``; + } + ); + + return content; + } + : undefined, }, { from: 'src/assets/**/*', @@ -132,7 +149,19 @@ module.exports = { ].filter(Boolean), devServer: { contentBase: path.join(__dirname, 'dist'), + publicPath: '/', + headers: { + 'Access-Control-Allow-Origin': '*', + 'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS', + 'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization', + }, compress: true, - port: 9000, + port, + https: true, + disableHostCheck: true, + hot: true, + liveReload: false, + overlay: true, + writeToDisk: true, }, }; From 14658d8d87dfa9c1bc562b39bce648f2baa39765 Mon Sep 17 00:00:00 2001 From: Felix Mosheev <9304194+felixmosh@users.noreply.github.com> Date: Sat, 14 Nov 2020 13:49:09 +0200 Subject: [PATCH 3/4] Deploy only production --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 54e3820..12d074e 100644 --- a/package.json +++ b/package.json @@ -9,7 +9,7 @@ "scripts": { "start": "webpack serve --mode=development", "build": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid", - "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy" + "deploy": "webpack --mode=production && npx tailwindcss build src/components/tailwind.css -o dist/assets/tailwind.css.liquid && shopify-themekit deploy --env=production" }, "dependencies": { "tailwindcss": "^1.9.6", From 99bc5117c706cd75022a5e47f3226f14f69d7ea9 Mon Sep 17 00:00:00 2001 From: Mike Date: Tue, 17 Nov 2020 08:55:51 -0800 Subject: [PATCH 4/4] readme updated --- src/components/sections/header/header.liquid | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/sections/header/header.liquid b/src/components/sections/header/header.liquid index 4ab62b4..91c183f 100644 --- a/src/components/sections/header/header.liquid +++ b/src/components/sections/header/header.liquid @@ -1,5 +1,4 @@
- {% include "message" %} {%- if section.settings.announcement_bar_enabled -%}
{%- if section.settings.announcement_bar_link != blank -%}