fix: Prettier check in lefthook

This commit is contained in:
Robert Prehn 2021-07-20 17:13:36 -05:00
parent 3c094c60db
commit e7e8e6b84b
12 changed files with 228 additions and 157 deletions

View file

@ -1,5 +1,3 @@
{ {
"presets": [ "presets": ["@babel/preset-env"]
"@babel/preset-env"
]
} }

View file

@ -1,7 +1,7 @@
// We need to import the CSS so that webpack will load it. // We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into // The MiniCssExtractPlugin is used to separate it out into
// its own CSS file. // its own CSS file.
import "../css/app.css" import "../css/app.css";
// webpack automatically bundles all modules in your // webpack automatically bundles all modules in your
// entry points. Those entry points can be configured // entry points. Those entry points can be configured
@ -12,48 +12,46 @@ import "../css/app.css"
// import {Socket} from "phoenix" // import {Socket} from "phoenix"
// import socket from "./socket" // import socket from "./socket"
// //
import "phoenix_html" import "phoenix_html";
import "alpinejs" import "alpinejs";
import "./live" import "./live";
import { ready } from "./utils" import { ready } from "./utils";
function togglePasswordFieldVisibility() var bloop;
{
const passwordFields = document.querySelectorAll('[name="user[password]"]') function togglePasswordFieldVisibility() {
const passwordFields = document.querySelectorAll('[name="user[password]"]');
passwordFields.forEach((el) => { passwordFields.forEach((el) => {
if (el.type == 'password') if (el.type == "password") {
{ el.type = "text";
el.type = 'text' } else {
el.type = "password";
} }
else });
{
el.type = 'password'
}
})
} }
const toggleSidebar = (event) => { const toggleSidebar = (event) => {
document.querySelectorAll('.sidebar').forEach((el) => { document.querySelectorAll(".sidebar").forEach((el) => {
el.classList.toggle('visible') el.classList.toggle("visible");
}) });
} };
ready(() => { ready(() => {
(document.getElementById('nav-toggle') ||{}).onclick = function(){ (document.getElementById("nav-toggle") || {}).onclick = function () {
document.getElementById("nav-content").classList.toggle("hidden"); document.getElementById("nav-content").classList.toggle("hidden");
} };
document.querySelectorAll('.js-passwordRevealer').forEach((el) => { document.querySelectorAll(".js-passwordRevealer").forEach((el) => {
el.addEventListener('click', togglePasswordFieldVisibility) el.addEventListener("click", togglePasswordFieldVisibility);
}) });
document.querySelectorAll('.js-SidebarOpener').forEach((el) => { document.querySelectorAll(".js-SidebarOpener").forEach((el) => {
el.addEventListener('click', toggleSidebar) el.addEventListener("click", toggleSidebar);
}) });
document.querySelectorAll('.js-flash-closer').forEach((el) => { document.querySelectorAll(".js-flash-closer").forEach((el) => {
el.addEventListener('click', () => { el.addEventListener("click", () => {
el.closest('.js-flash').remove() el.closest(".js-flash").remove();
}) });
}) });
}) });

View file

@ -1,34 +1,33 @@
import { ready } from "./utils" import { ready } from "./utils";
import SimpleMDE from "simplemde" import SimpleMDE from "simplemde";
import "simplemde/dist/simplemde.min.css" import "simplemde/dist/simplemde.min.css";
import "../css/content-editor-overrides.css" import "../css/content-editor-overrides.css";
const requestPreview = (plainText, previewContainer) => { const requestPreview = (plainText, previewContainer) => {
let request = new XMLHttpRequest() let request = new XMLHttpRequest();
const postForm = previewContainer.closest('form') const postForm = previewContainer.closest("form");
let formData = new FormData(postForm) let formData = new FormData(postForm);
formData.set('post[content]', plainText) formData.set("post[content]", plainText);
request.addEventListener('load', function(event) { request.addEventListener("load", function (event) {
previewContainer.innerHTML = event.target.responseText 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(() => { ready(() => {
document.querySelectorAll('[data-simplemde]').forEach(el => { document.querySelectorAll("[data-simplemde]").forEach((el) => {
new SimpleMDE({ new SimpleMDE({
element: el, element: el,
previewRender: (plainText, previewContainer) => { previewRender: (plainText, previewContainer) => {
requestPreview(plainText, previewContainer) requestPreview(plainText, previewContainer);
return previewContainer.innerHTML return previewContainer.innerHTML;
}, },
}) });
}) });
}) });

View file

@ -1,18 +1,25 @@
import {Socket} from "phoenix" import { Socket } from "phoenix";
import LiveSocket from "phoenix_live_view" import LiveSocket from "phoenix_live_view";
import topbar from "topbar" 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 // Show progress bar on live navigation and form submits
topbar.config({barColors: {0: "#3B82F6"}, shadowColor: "rgba(0, 0, 0, .3)"}) topbar.config({
window.addEventListener("phx:page-loading-start", info => topbar.show()) barColors: { 0: "#3B82F6" },
window.addEventListener("phx:page-loading-stop", info => topbar.hide()) 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 // 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: // Expose liveSocket on window for web console debug logs and latency simulation:
// >> liveSocket.enableDebug() // >> liveSocket.enableDebug()
@ -20,4 +27,4 @@ liveSocket.connect()
// The latency simulator is enabled for the duration of the browser session. // The latency simulator is enabled for the duration of the browser session.
// Call disableLatencySim() to disable: // Call disableLatencySim() to disable:
// >> liveSocket.disableLatencySim() // >> liveSocket.disableLatencySim()
window.liveSocket = liveSocket window.liveSocket = liveSocket;

View file

@ -6,9 +6,9 @@
// //
// Pass the token on params as below. Or remove it // Pass the token on params as below. Or remove it
// from the params if you are not using authentication. // 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. // When you connect, you'll often need to authenticate the client.
// For example, imagine you have an authentication plug, `MyAuth`, // For example, imagine you have an authentication plug, `MyAuth`,
@ -52,12 +52,17 @@ let socket = new Socket("/socket", {params: {token: window.userToken}})
// end // end
// //
// Finally, connect to the socket: // Finally, connect to the socket:
socket.connect() socket.connect();
// Now that you are connected, you can join channels with a topic: // Now that you are connected, you can join channels with a topic:
let channel = socket.channel("topic:subtopic", {}) let channel = socket.channel("topic:subtopic", {});
channel.join() channel
.receive("ok", resp => { console.log("Joined successfully", resp) }) .join()
.receive("error", resp => { console.log("Unable to join", resp) }) .receive("ok", (resp) => {
console.log("Joined successfully", resp);
})
.receive("error", (resp) => {
console.log("Unable to join", resp);
});
export default socket export default socket;

View file

@ -1,10 +1,9 @@
const ready = (fn) => { const ready = (fn) => {
if (document.readyState != 'loading') { if (document.readyState != "loading") {
fn() fn();
} else { } else {
document.addEventListener('DOMContentLoaded', fn) document.addEventListener("DOMContentLoaded", fn);
} }
} };
export { ready } export { ready };

View file

@ -34,6 +34,7 @@
"postcss-css-variables": "^0.17.0", "postcss-css-variables": "^0.17.0",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-loader": "^6.1.0", "postcss-loader": "^6.1.0",
"prettier": "2.3.2",
"sass": "^1.35.1", "sass": "^1.35.1",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",
@ -9749,6 +9750,18 @@
"node": ">=0.10.0" "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": { "node_modules/pretty-hrtime": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",
@ -20384,6 +20397,12 @@
"dev": true, "dev": true,
"optional": 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": { "pretty-hrtime": {
"version": "1.0.3", "version": "1.0.3",
"resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz", "resolved": "https://registry.npmjs.org/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz",

View file

@ -36,6 +36,7 @@
"postcss-css-variables": "^0.17.0", "postcss-css-variables": "^0.17.0",
"postcss-import": "^12.0.1", "postcss-import": "^12.0.1",
"postcss-loader": "^6.1.0", "postcss-loader": "^6.1.0",
"prettier": "2.3.2",
"sass": "^1.35.1", "sass": "^1.35.1",
"sass-loader": "^8.0.2", "sass-loader": "^8.0.2",
"style-loader": "^1.2.1", "style-loader": "^1.2.1",

View file

@ -1,13 +1,11 @@
module.exports = { module.exports = {
plugins: [ plugins: [
require('postcss-import')({ require("postcss-import")({
plugins: [ plugins: [require("stylelint")()],
require('stylelint')(),
]
}), }),
require('tailwindcss'), require("tailwindcss"),
require('autoprefixer'), require("autoprefixer"),
require('csswring')(), require("csswring")(),
require('postcss-color-function')() require("postcss-color-function")(),
], ],
} };

View file

@ -1,7 +1,7 @@
const yargsParser = require('yargs-parser'); const yargsParser = require("yargs-parser");
const cliArgs = yargsParser(process.argv); 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 = { module.exports = {
future: { future: {
@ -9,21 +9,21 @@ module.exports = {
purgeLayersByDefault: true, purgeLayersByDefault: true,
}, },
purge: { purge: {
enabled: mode == 'production', enabled: mode == "production",
layers: ['base', 'components', 'utilities'], layers: ["base", "components", "utilities"],
content: [ content: [
'../../../**/views/*.ex', "../../../**/views/*.ex",
'../../../**/*.html.eex', "../../../**/*.html.eex",
'../../../**/*.html.leex', "../../../**/*.html.leex",
'../../../**/*.html.heex', "../../../**/*.html.heex",
'./js/**/*.js' "./js/**/*.js",
] ],
}, },
theme: { theme: {
extend: {}, extend: {},
}, },
variants: { variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'checked'], backgroundColor: ["responsive", "hover", "focus", "checked"],
}, },
plugins: [], plugins: [],
} };

View file

@ -1,31 +1,31 @@
const path = require('path'); const path = require("path");
const glob = require('glob'); const glob = require("glob");
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const TerserPlugin = require('terser-webpack-plugin'); const TerserPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const CopyWebpackPlugin = require('copy-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) => { module.exports = (env, options) => {
const devMode = options.mode !== 'production'; const devMode = options.mode !== "production";
return { return {
optimization: { optimization: {
minimizer: [ minimizer: [
new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }), new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
new CssMinimizerPlugin(), new CssMinimizerPlugin(),
] ],
}, },
mode: options.mode, mode: options.mode,
devtool: devMode ? 'source-map' : undefined, devtool: devMode ? "source-map" : undefined,
entry: { entry: {
'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js']), app: glob.sync("./vendor/**/*.js").concat(["./js/app.js"]),
'content-editor': ['./js/content-editor.js'], "content-editor": ["./js/content-editor.js"],
}, },
output: { output: {
filename: 'js/[name].js', filename: "js/[name].js",
path: path.resolve(__dirname, '../priv/static/') path: path.resolve(__dirname, "../priv/static/"),
}, },
module: { module: {
rules: [ rules: [
@ -33,9 +33,9 @@ module.exports = (env, options) => {
{ {
test: /\.(jpg|jpeg|gif|png)$/, test: /\.(jpg|jpeg|gif|png)$/,
use: [ use: [
'file-loader', "file-loader",
{ {
loader: 'image-webpack-loader', loader: "image-webpack-loader",
options: { options: {
disable: devMode, disable: devMode,
}, },
@ -44,61 +44,108 @@ module.exports = (env, options) => {
}, },
{ {
test: /\.(woff2?|ttf|eot|svg)(\?[a-z0-9\=\.]+)?$/, test: /\.(woff2?|ttf|eot|svg)(\?[a-z0-9\=\.]+)?$/,
loader: 'file-loader', loader: "file-loader",
options: { options: {
publicPath: '/fonts', publicPath: "/fonts",
outputPath: (url, resourcePath, context) => { outputPath: (url, resourcePath, context) => {
return `/fonts/${url}`; return `/fonts/${url}`;
}, },
} },
}, },
{ {
test: /\.js$/, test: /\.js$/,
exclude: /node_modules/, exclude: /node_modules/,
use: { use: {
loader: 'babel-loader' loader: "babel-loader",
} },
}, },
{ {
test: /\.css$/, test: /\.css$/,
use: [ use: [
{loader: MiniCssExtractPlugin.loader}, { loader: MiniCssExtractPlugin.loader },
{loader: 'css-loader', options: {sourceMap: true}}, { loader: "css-loader", options: { sourceMap: true } },
{loader: 'postcss-loader', options: {sourceMap: true}}, { loader: "postcss-loader", options: { sourceMap: true } },
], ],
}, },
] ],
}, },
plugins: [ plugins: [
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
filename: 'css/[name].css', filename: "css/[name].css",
chunkFilename: '[id].css', chunkFilename: "[id].css",
}), }),
new CopyWebpackPlugin({patterns: [ new CopyWebpackPlugin({
patterns: [
{ {
from: path.resolve(__dirname, 'static'), from: path.resolve(__dirname, "static"),
to: path.resolve(__dirname, '../priv/static'), to: path.resolve(__dirname, "../priv/static"),
}, },
]}), ],
}),
], ],
resolve: { resolve: {
alias: { alias: {
"../webfonts/fa-brands-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot"), "../webfonts/fa-brands-400.eot": path.resolve(
"../webfonts/fa-brands-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2"), __dirname,
"../webfonts/fa-brands-400.woff": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff"), "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.eot"
"../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-brands-400.woff2": path.resolve(
"../webfonts/fa-regular-400.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.eot"), __dirname,
"../webfonts/fa-regular-400.woff2": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.woff2"), "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-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-brands-400.woff": path.resolve(
"../webfonts/fa-regular-400.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-regular-400.svg"), __dirname,
"../webfonts/fa-solid-900.eot": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.eot"), "node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff"
"../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-brands-400.ttf": path.resolve(
"../webfonts/fa-solid-900.ttf": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.ttf"), __dirname,
"../webfonts/fa-solid-900.svg": path.resolve(__dirname, "node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.svg"), "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"
),
}, },
} },
};
}; };

View file

@ -2,9 +2,9 @@ pre-commit:
parallel: true parallel: true
commands: commands:
credo: credo:
glob: "*.{ex,exs,eex,leex,heex}" runner: mix credo diff master
runner: mix credo diff master {files}
stylelint: stylelint:
root: "apps/app/assets/"
glob: "*.{css}" 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)