From e7e8e6b84b4ec1f9cf3583d30b5e902c26c23aee Mon Sep 17 00:00:00 2001 From: Robert Prehn <3952444+prehnRA@users.noreply.github.com> Date: Tue, 20 Jul 2021 17:13:36 -0500 Subject: [PATCH] fix: Prettier check in lefthook --- apps/app/assets/.babelrc | 4 +- apps/app/assets/js/app.js | 66 ++++++------ apps/app/assets/js/content-editor.js | 41 ++++---- apps/app/assets/js/live.js | 27 +++-- apps/app/assets/js/socket.js | 21 ++-- apps/app/assets/js/utils.js | 11 +- apps/app/assets/package-lock.json | 19 ++++ apps/app/assets/package.json | 1 + apps/app/assets/postcss.config.js | 16 ++- apps/app/assets/tailwind.config.js | 24 ++--- apps/app/assets/webpack.config.js | 147 ++++++++++++++++++--------- lefthook.yml | 8 +- 12 files changed, 228 insertions(+), 157 deletions(-) diff --git a/apps/app/assets/.babelrc b/apps/app/assets/.babelrc index ce33b24d..1320b9a3 100644 --- a/apps/app/assets/.babelrc +++ b/apps/app/assets/.babelrc @@ -1,5 +1,3 @@ { - "presets": [ - "@babel/preset-env" - ] + "presets": ["@babel/preset-env"] } diff --git a/apps/app/assets/js/app.js b/apps/app/assets/js/app.js index 1ecfc5b3..384b16bd 100644 --- a/apps/app/assets/js/app.js +++ b/apps/app/assets/js/app.js @@ -1,7 +1,7 @@ // We need to import the CSS so that webpack will load it. // The MiniCssExtractPlugin is used to separate it out into // its own CSS file. -import "../css/app.css" +import "../css/app.css"; // webpack automatically bundles all modules in your // entry points. Those entry points can be configured @@ -12,48 +12,46 @@ import "../css/app.css" // import {Socket} from "phoenix" // import socket from "./socket" // -import "phoenix_html" -import "alpinejs" -import "./live" -import { ready } from "./utils" +import "phoenix_html"; +import "alpinejs"; +import "./live"; +import { ready } from "./utils"; -function togglePasswordFieldVisibility() -{ - const passwordFields = document.querySelectorAll('[name="user[password]"]') +var bloop; + +function togglePasswordFieldVisibility() { + const passwordFields = document.querySelectorAll('[name="user[password]"]'); passwordFields.forEach((el) => { - if (el.type == 'password') - { - el.type = 'text' + if (el.type == "password") { + el.type = "text"; + } else { + el.type = "password"; } - else - { - el.type = 'password' - } - }) + }); } const toggleSidebar = (event) => { - document.querySelectorAll('.sidebar').forEach((el) => { - el.classList.toggle('visible') - }) -} + document.querySelectorAll(".sidebar").forEach((el) => { + el.classList.toggle("visible"); + }); +}; ready(() => { - (document.getElementById('nav-toggle') ||{}).onclick = function(){ + (document.getElementById("nav-toggle") || {}).onclick = function () { document.getElementById("nav-content").classList.toggle("hidden"); - } + }; - document.querySelectorAll('.js-passwordRevealer').forEach((el) => { - el.addEventListener('click', togglePasswordFieldVisibility) - }) + document.querySelectorAll(".js-passwordRevealer").forEach((el) => { + el.addEventListener("click", togglePasswordFieldVisibility); + }); - document.querySelectorAll('.js-SidebarOpener').forEach((el) => { - el.addEventListener('click', toggleSidebar) - }) + document.querySelectorAll(".js-SidebarOpener").forEach((el) => { + el.addEventListener("click", toggleSidebar); + }); - document.querySelectorAll('.js-flash-closer').forEach((el) => { - el.addEventListener('click', () => { - el.closest('.js-flash').remove() - }) - }) -}) + document.querySelectorAll(".js-flash-closer").forEach((el) => { + el.addEventListener("click", () => { + el.closest(".js-flash").remove(); + }); + }); +}); diff --git a/apps/app/assets/js/content-editor.js b/apps/app/assets/js/content-editor.js index c467b4f6..faed5713 100644 --- a/apps/app/assets/js/content-editor.js +++ b/apps/app/assets/js/content-editor.js @@ -1,34 +1,33 @@ -import { ready } from "./utils" -import SimpleMDE from "simplemde" -import "simplemde/dist/simplemde.min.css" -import "../css/content-editor-overrides.css" - +import { ready } from "./utils"; +import SimpleMDE from "simplemde"; +import "simplemde/dist/simplemde.min.css"; +import "../css/content-editor-overrides.css"; const requestPreview = (plainText, previewContainer) => { - let request = new XMLHttpRequest() - const postForm = previewContainer.closest('form') - let formData = new FormData(postForm) + let request = new XMLHttpRequest(); + const postForm = previewContainer.closest("form"); + let formData = new FormData(postForm); - formData.set('post[content]', plainText) + formData.set("post[content]", plainText); - request.addEventListener('load', function(event) { - previewContainer.innerHTML = event.target.responseText - }) + request.addEventListener("load", function (event) { + previewContainer.innerHTML = event.target.responseText; + }); - request.open('POST', '/pages/posts/preview', true) + request.open("POST", "/pages/posts/preview", true); - request.send(formData) -} + request.send(formData); +}; ready(() => { - document.querySelectorAll('[data-simplemde]').forEach(el => { + document.querySelectorAll("[data-simplemde]").forEach((el) => { new SimpleMDE({ element: el, previewRender: (plainText, previewContainer) => { - requestPreview(plainText, previewContainer) + requestPreview(plainText, previewContainer); - return previewContainer.innerHTML + return previewContainer.innerHTML; }, - }) - }) -}) + }); + }); +}); diff --git a/apps/app/assets/js/live.js b/apps/app/assets/js/live.js index 3f3ab9ea..e9b398e7 100644 --- a/apps/app/assets/js/live.js +++ b/apps/app/assets/js/live.js @@ -1,18 +1,25 @@ -import {Socket} from "phoenix" -import LiveSocket from "phoenix_live_view" -import topbar from "topbar" +import { Socket } from "phoenix"; +import LiveSocket from "phoenix_live_view"; +import topbar from "topbar"; -let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content") +let csrfToken = document + .querySelector("meta[name='csrf-token']") + .getAttribute("content"); -let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}}) +let liveSocket = new LiveSocket("/live", Socket, { + params: { _csrf_token: csrfToken }, +}); // Show progress bar on live navigation and form submits -topbar.config({barColors: {0: "#3B82F6"}, shadowColor: "rgba(0, 0, 0, .3)"}) -window.addEventListener("phx:page-loading-start", info => topbar.show()) -window.addEventListener("phx:page-loading-stop", info => topbar.hide()) +topbar.config({ + barColors: { 0: "#3B82F6" }, + shadowColor: "rgba(0, 0, 0, .3)", +}); +window.addEventListener("phx:page-loading-start", (info) => topbar.show()); +window.addEventListener("phx:page-loading-stop", (info) => topbar.hide()); // Connect if there are any LiveViews on the page -liveSocket.connect() +liveSocket.connect(); // Expose liveSocket on window for web console debug logs and latency simulation: // >> liveSocket.enableDebug() @@ -20,4 +27,4 @@ liveSocket.connect() // The latency simulator is enabled for the duration of the browser session. // Call disableLatencySim() to disable: // >> liveSocket.disableLatencySim() -window.liveSocket = liveSocket +window.liveSocket = liveSocket; diff --git a/apps/app/assets/js/socket.js b/apps/app/assets/js/socket.js index 09929abc..2738a778 100644 --- a/apps/app/assets/js/socket.js +++ b/apps/app/assets/js/socket.js @@ -6,9 +6,9 @@ // // Pass the token on params as below. Or remove it // from the params if you are not using authentication. -import {Socket} from "phoenix" +import { Socket } from "phoenix"; -let socket = new Socket("/socket", {params: {token: window.userToken}}) +let socket = new Socket("/socket", { params: { token: window.userToken } }); // When you connect, you'll often need to authenticate the client. // For example, imagine you have an authentication plug, `MyAuth`, @@ -52,12 +52,17 @@ let socket = new Socket("/socket", {params: {token: window.userToken}}) // end // // Finally, connect to the socket: -socket.connect() +socket.connect(); // Now that you are connected, you can join channels with a topic: -let channel = socket.channel("topic:subtopic", {}) -channel.join() - .receive("ok", resp => { console.log("Joined successfully", resp) }) - .receive("error", resp => { console.log("Unable to join", resp) }) +let channel = socket.channel("topic:subtopic", {}); +channel + .join() + .receive("ok", (resp) => { + console.log("Joined successfully", resp); + }) + .receive("error", (resp) => { + console.log("Unable to join", resp); + }); -export default socket +export default socket; diff --git a/apps/app/assets/js/utils.js b/apps/app/assets/js/utils.js index 3d60005e..a17fdc40 100644 --- a/apps/app/assets/js/utils.js +++ b/apps/app/assets/js/utils.js @@ -1,10 +1,9 @@ - const ready = (fn) => { - if (document.readyState != 'loading') { - fn() + if (document.readyState != "loading") { + fn(); } else { - document.addEventListener('DOMContentLoaded', fn) + document.addEventListener("DOMContentLoaded", fn); } -} +}; -export { ready } +export { ready }; diff --git a/apps/app/assets/package-lock.json b/apps/app/assets/package-lock.json index 1612a51e..9b40ea49 100644 --- a/apps/app/assets/package-lock.json +++ b/apps/app/assets/package-lock.json @@ -34,6 +34,7 @@ "postcss-css-variables": "^0.17.0", "postcss-import": "^12.0.1", "postcss-loader": "^6.1.0", + "prettier": "2.3.2", "sass": "^1.35.1", "sass-loader": "^8.0.2", "style-loader": "^1.2.1", @@ -9749,6 +9750,18 @@ "node": ">=0.10.0" } }, + "node_modules/prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true, + "bin": { + "prettier": "bin-prettier.js" + }, + "engines": { + "node": ">=10.13.0" + } + }, "node_modules/pretty-hrtime": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", @@ -20384,6 +20397,12 @@ "dev": true, "optional": true }, + "prettier": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.3.2.tgz", + "integrity": "sha512-lnJzDfJ66zkMy58OL5/NY5zp70S7Nz6KqcKkXYzn2tMVrNxvbqaBpg7H3qHaLxCJ5lNMsGuM8+ohS7cZrthdLQ==", + "dev": true + }, "pretty-hrtime": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", diff --git a/apps/app/assets/package.json b/apps/app/assets/package.json index 1e76738b..88e34fca 100644 --- a/apps/app/assets/package.json +++ b/apps/app/assets/package.json @@ -36,6 +36,7 @@ "postcss-css-variables": "^0.17.0", "postcss-import": "^12.0.1", "postcss-loader": "^6.1.0", + "prettier": "2.3.2", "sass": "^1.35.1", "sass-loader": "^8.0.2", "style-loader": "^1.2.1", diff --git a/apps/app/assets/postcss.config.js b/apps/app/assets/postcss.config.js index 41cdbcff..8a5b91ba 100644 --- a/apps/app/assets/postcss.config.js +++ b/apps/app/assets/postcss.config.js @@ -1,13 +1,11 @@ module.exports = { plugins: [ - require('postcss-import')({ - plugins: [ - require('stylelint')(), - ] + require("postcss-import")({ + plugins: [require("stylelint")()], }), - require('tailwindcss'), - require('autoprefixer'), - require('csswring')(), - require('postcss-color-function')() + require("tailwindcss"), + require("autoprefixer"), + require("csswring")(), + require("postcss-color-function")(), ], -} +}; diff --git a/apps/app/assets/tailwind.config.js b/apps/app/assets/tailwind.config.js index b416207c..25bc4504 100644 --- a/apps/app/assets/tailwind.config.js +++ b/apps/app/assets/tailwind.config.js @@ -1,7 +1,7 @@ -const yargsParser = require('yargs-parser'); +const yargsParser = require("yargs-parser"); const cliArgs = yargsParser(process.argv); -const mode = process.env.NODE_ENV || cliArgs.mode || 'development'; +const mode = process.env.NODE_ENV || cliArgs.mode || "development"; module.exports = { future: { @@ -9,21 +9,21 @@ module.exports = { purgeLayersByDefault: true, }, purge: { - enabled: mode == 'production', - layers: ['base', 'components', 'utilities'], + enabled: mode == "production", + layers: ["base", "components", "utilities"], content: [ - '../../../**/views/*.ex', - '../../../**/*.html.eex', - '../../../**/*.html.leex', - '../../../**/*.html.heex', - './js/**/*.js' - ] + "../../../**/views/*.ex", + "../../../**/*.html.eex", + "../../../**/*.html.leex", + "../../../**/*.html.heex", + "./js/**/*.js", + ], }, theme: { extend: {}, }, variants: { - backgroundColor: ['responsive', 'hover', 'focus', 'checked'], + backgroundColor: ["responsive", "hover", "focus", "checked"], }, plugins: [], -} +}; diff --git a/apps/app/assets/webpack.config.js b/apps/app/assets/webpack.config.js index 952a34b7..081377fa 100644 --- a/apps/app/assets/webpack.config.js +++ b/apps/app/assets/webpack.config.js @@ -1,31 +1,31 @@ -const path = require('path'); -const glob = require('glob'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const CopyWebpackPlugin = require('copy-webpack-plugin'); +const path = require("path"); +const glob = require("glob"); +const MiniCssExtractPlugin = require("mini-css-extract-plugin"); +const TerserPlugin = require("terser-webpack-plugin"); +const CssMinimizerPlugin = require("css-minimizer-webpack-plugin"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); -const nodeModulesPath = path.resolve(__dirname, 'node_modules') +const nodeModulesPath = path.resolve(__dirname, "node_modules"); module.exports = (env, options) => { - const devMode = options.mode !== 'production'; + const devMode = options.mode !== "production"; return { optimization: { minimizer: [ new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }), new CssMinimizerPlugin(), - ] + ], }, mode: options.mode, - devtool: devMode ? 'source-map' : undefined, + devtool: devMode ? "source-map" : undefined, entry: { - 'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']), - 'content-editor': ['./js/content-editor.js'], + app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]), + "content-editor": ["./js/content-editor.js"], }, output: { - filename: 'js/[name].js', - path: path.resolve(__dirname, '../priv/static/') + filename: "js/[name].js", + path: path.resolve(__dirname, "../priv/static/"), }, module: { rules: [ @@ -33,9 +33,9 @@ module.exports = (env, options) => { { test: /\.(jpg|jpeg|gif|png)$/, use: [ - 'file-loader', + "file-loader", { - loader: 'image-webpack-loader', + loader: "image-webpack-loader", options: { disable: devMode, }, @@ -44,61 +44,108 @@ module.exports = (env, options) => { }, { test: /\.(woff2?|ttf|eot|svg)(\?[a-z0-9\=\.]+)?$/, - loader: 'file-loader', + loader: "file-loader", options: { - publicPath: '/fonts', + publicPath: "/fonts", outputPath: (url, resourcePath, context) => { return `/fonts/${url}`; }, - } + }, }, { test: /\.js$/, exclude: /node_modules/, use: { - loader: 'babel-loader' - } + loader: "babel-loader", + }, }, { test: /\.css$/, use: [ - {loader: MiniCssExtractPlugin.loader}, - {loader: 'css-loader', options: {sourceMap: true}}, - {loader: 'postcss-loader', options: {sourceMap: true}}, + { loader: MiniCssExtractPlugin.loader }, + { loader: "css-loader", options: { sourceMap: true } }, + { loader: "postcss-loader", options: { sourceMap: true } }, ], }, - ] + ], }, plugins: [ new MiniCssExtractPlugin({ - filename: 'css/[name].css', - chunkFilename: '[id].css', + filename: "css/[name].css", + chunkFilename: "[id].css", + }), + new CopyWebpackPlugin({ + patterns: [ + { + from: path.resolve(__dirname, "static"), + to: path.resolve(__dirname, "../priv/static"), + }, + ], }), - new CopyWebpackPlugin({patterns: [ - { - from: path.resolve(__dirname, 'static'), - to: path.resolve(__dirname, '../priv/static'), - }, - ]}), ], resolve: { alias: { - "../webfonts/fa-brands-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot"), - "../webfonts/fa-brands-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2"), - "../webfonts/fa-brands-400.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff"), - "../webfonts/fa-brands-400.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf"), - "../webfonts/fa-brands-400.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg"), - "../webfonts/fa-regular-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot"), - "../webfonts/fa-regular-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2"), - "../webfonts/fa-regular-400.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff"), - "../webfonts/fa-regular-400.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf"), - "../webfonts/fa-regular-400.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg"), - "../webfonts/fa-solid-900.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot"), - "../webfonts/fa-solid-900.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2"), - "../webfonts/fa-solid-900.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff"), - "../webfonts/fa-solid-900.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf"), - "../webfonts/fa-solid-900.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg"), - } + "../webfonts/fa-brands-400.eot": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot" + ), + "../webfonts/fa-brands-400.woff2": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2" + ), + "../webfonts/fa-brands-400.woff": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff" + ), + "../webfonts/fa-brands-400.ttf": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.ttf" + ), + "../webfonts/fa-brands-400.svg": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.svg" + ), + "../webfonts/fa-regular-400.eot": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot" + ), + "../webfonts/fa-regular-400.woff2": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2" + ), + "../webfonts/fa-regular-400.woff": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff" + ), + "../webfonts/fa-regular-400.ttf": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.ttf" + ), + "../webfonts/fa-regular-400.svg": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg" + ), + "../webfonts/fa-solid-900.eot": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot" + ), + "../webfonts/fa-solid-900.woff2": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2" + ), + "../webfonts/fa-solid-900.woff": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff" + ), + "../webfonts/fa-solid-900.ttf": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf" + ), + "../webfonts/fa-solid-900.svg": path.resolve( + __dirname, + "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg" + ), + }, }, - } + }; }; diff --git a/lefthook.yml b/lefthook.yml index 83b63fba..e9972a43 100644 --- a/lefthook.yml +++ b/lefthook.yml @@ -2,9 +2,9 @@ pre-commit: parallel: true commands: credo: - glob: "*.{ex,exs,eex,leex,heex}" - runner: mix credo diff master {files} + runner: mix credo diff master stylelint: - root: "apps/app/assets/" glob: "*.{css}" - runner: npx stylelint {files} + runner: (cd apps/app/assets/; npx stylelint {staged_files}) + prettier: + runner: (cd apps/app/assets/; npx prettier --check **/*.js)