Merge pull request #94 from wethegit/chore/upgrade

chore: removes squoosh and upgrade packages

LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 We The Collective Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/corgi",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Command line interface for use with the corgi framework.",
   "main": "bin/index.js",
   "bin": {

cli/templates/project/.nvmrc

@@ -1 +1 @@
-v16.14.2
+v20.10.0

cli/templates/project/.prettierignore

@@ -1,6 +1,7 @@
-.next
-.vscode
+.next/
+.vscode/
 README.md
 amplify.yml
-node_modules
-out
+node_modules/
+out/
+public/

cli/templates/project/mash.mjs

@@ -1,13 +1,14 @@
-import glob from "glob"
+import { join } from "node:path"
+
+import { glob } from "glob"
 import fs from "fs-extra"
 import sizeOf from "image-size"
-import config from "./mash.config.js"
 import chalk from "chalk"
 import md5File from "md5-file"
 import watch from "node-watch"
+import sharp from "sharp"
 
-import { ImagePool } from "@squoosh/lib"
-import { cpus } from "os"
+import config from "./mash.config.js"
 
 const MASH_NAME = "masher"
 const CACHE_NAME = "MashCache"
@@ -17,8 +18,8 @@ const IMAGES_REGISTER_FILE = "./images_register.json"
 const BREAKPOINTS = ["xxlarge-up", "xlarge-up", "large-up", "medium-up"]
 
 const FOLDERS = {
-  output: "./public/_images/",
-  input: "./src/images/",
+  output: "public/_images/",
+  input: "src/images/",
 }
 
 const PROCESS_TYPE = {
@@ -48,7 +49,6 @@ const prettyRegister = args.includes("--pretty-register")
 let cache = {}
 let queue = []
 let isProcessingQueue = false
-let imagePool = null
 
 const log = (type, message, extra) => {
   const colorMap = {
@@ -159,70 +159,66 @@ const removeFromQueue = (path) => {
 
 const startQueue = () => {
   isProcessingQueue = true
-  imagePool = new ImagePool(cpus().length)
   processQueue()
   log(LOG_TYPE.message, "Queue started")
 }
 
 const processQueue = async () => {
   if (queue.length > 0) {
     const item = queue.shift()
-    const preprocessOptions = {
-      resize: {
-        enabled: true,
-        width: item.width,
-      },
+
+    if (!fs.existsSync(item.output)) {
+      fs.mkdirSync(item.output, { recursive: true })
     }
 
-    const image = imagePool.ingestImage(item.path)
-    await image.decoded
-    await image.preprocess(preprocessOptions)
+    const outputs = []
+    const image = sharp(item.path).resize({ width: item.width, failOn: "none" })
 
-    const encodeOptions = {}
     item.outputTypes.forEach((type) => {
+      const newImagePath = `${item.output}${item.filename}.`
+
       switch (type) {
         case "png":
-          encodeOptions.oxipng = {}
+          // png options
+          // https://sharp.pixelplumbing.com/api-output#png
+          image.clone().png()
           break
         case "jpg":
         case "jpeg":
-          encodeOptions.mozjpeg = {}
+          // jpeg options
+          // https://sharp.pixelplumbing.com/api-output#jpeg
+          image.clone().jpeg()
           break
         case "webp":
-          encodeOptions.webp = {}
+          // webp options
+          // https://sharp.pixelplumbing.com/api-output#webp
+          image.clone().webp({ nearLossless: true })
           break
         case "avif":
-          encodeOptions.avif = {}
+          // avif options
+          // https://sharp.pixelplumbing.com/api-output#avif
+          image.clone().avif()
           break
       }
-    })
-
-    await image.encode(encodeOptions)
-    const newImagePath = `${item.output}${item.filename}.`
-
-    for (const encodedImage of Object.values(image.encodedWith)) {
-      if (!fs.existsSync(item.output)) {
-        fs.mkdirSync(item.output, { recursive: true })
-      }
 
-      const path = newImagePath + (await encodedImage).extension
+      const path = newImagePath + type
 
+      outputs.push(image.toFile(path))
       cache[item.path].generatedFiles.push(path)
-      saveCache()
+
       log(LOG_TYPE.write, path)
+    })
 
-      fs.writeFileSync(path, (await encodedImage).binary)
-    }
+    await Promise.all(outputs)
 
+    saveCache()
     processQueue()
   } else {
     endQueue()
   }
 }
 
 const endQueue = () => {
-  if (imagePool) imagePool.close()
-  imagePool = null
   isProcessingQueue = false
   log(LOG_TYPE.message, "Queue complete")
 }
@@ -279,7 +275,7 @@ const processDefinedImage = (path, hash, fileInfo) => {
 
   cache[path] = {
     hash,
-    filename: fileInfo.path + fileInfo.filename + "." + outputTypes[0],
+    filename: join(fileInfo.path, fileInfo.filename + "." + outputTypes[0]),
     size: { width: fileInfo.width, height: fileInfo.height },
     count: 0,
     is2x: fileInfo.is2x,
@@ -293,7 +289,7 @@ const processDefinedImage = (path, hash, fileInfo) => {
 
     addToQueue({
       path,
-      output: FOLDERS.output + fileInfo.path,
+      output: join(FOLDERS.output, fileInfo.path),
       filename,
       width,
       height,
@@ -314,7 +310,7 @@ const processAutoImage = (path, hash, fileInfo) => {
 
   cache[path] = {
     hash,
-    filename: fileInfo.path + fileInfo.filename + "." + outputTypes[0],
+    filename: join(fileInfo.path, fileInfo.filename + "." + outputTypes[0]),
     size: { width: fileInfo.width, height: fileInfo.height },
     count: 0,
     process: PROCESS_TYPE.auto,
@@ -341,7 +337,7 @@ const processAutoImage = (path, hash, fileInfo) => {
 
     addToQueue({
       path,
-      output: FOLDERS.output + fileInfo.path,
+      output: join(FOLDERS.output, fileInfo.path),
       filename: fileInfo.filename + stepName,
       width: size,
       outputTypes,
@@ -355,6 +351,7 @@ const processPath = (path, action) => {
   const processType = path.replace(FOLDERS.input, "").split("/").shift().trim()
 
   const validProcessTypes = Object.keys(PROCESS_TYPE)
+
   if (validProcessTypes.indexOf(processType) === -1) {
     log(
       LOG_TYPE.error,
@@ -412,7 +409,7 @@ const processPath = (path, action) => {
 }
 
 const checkAll = () => {
-  const files = glob.sync(FOLDERS.input + "**/*.*")
+  const files = glob.sync(join(FOLDERS.input, "**/*.*"))
 
   // check for files deleted while masher wasn't running
 

cli/templates/project/next.config.js

@@ -1,4 +1,5 @@
 const path = require("path")
+
 const withPlugins = require("next-compose-plugins")
 const yaml = require("next-plugin-yaml")
 
@@ -20,7 +21,6 @@ if (process.env.NODE_ENV === "production" && !process.env.NEXT_PUBLIC_URL) {
 const nextConfig = {
   reactStrictMode: true,
   trailingSlash: true,
-  webpack5: true,
   webpack: (config) => {
     config.resolve.alias = {
       ...config.resolve.alias,
@@ -32,7 +32,7 @@ const nextConfig = {
     // insert js-yaml-loader
     config.module.rules.push({
       test: /\.ya?ml$/,
-      use: 'js-yaml-loader',
+      use: "js-yaml-loader",
     })
 
     return config

cli/templates/project/package.json

@@ -13,34 +13,34 @@
     "dev": "npm run mash-watch & next dev -p 8080",
     "start": "serve ./out -p 8080"
   },
-  "dependencies": {
-    "@wethegit/react-hooks": "~0.0.8",
-    "next": "~12.1.0",
-    "next-compose-plugins": "~2.2.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "js-yaml-loader": "~1.2.2"
-  },
   "devDependencies": {
-    "@squoosh/lib": "^0.4.0",
-    "chalk": "^5.0.1",
-    "fs-extra": "^10.1.0",
-    "glob": "^7.2.0",
-    "image-size": "^1.0.1",
-    "md5-file": "^5.0.0",
+    "chalk": "~5.3.0",
+    "eslint": "~8.56.0",
+    "eslint-config-next": "~14.0.4",
+    "eslint-config-prettier": "~9.1.0",
+    "eslint-import-resolver-alias": "~1.1.2",
+    "eslint-plugin-import": "~2.29.1",
+    "fs-extra": "~11.2.0",
+    "glob": "~10.3.10",
+    "image-size": "~1.1.1",
+    "md5-file": "~5.0.0",
     "next-plugin-yaml": "~1.0.1",
-    "next-sitemap": "~2.5.19",
-    "node-watch": "^0.7.3",
-    "sass": "~1.49.7",
-    "yamljs": "~0.3.0",
-    "eslint": "8.8.0",
-    "eslint-config-next": "12.0.10",
-    "eslint-config-prettier": "~8.3.0",
-    "eslint-plugin-import": "~2.27.5",
-    "eslint-import-resolver-alias": "^1.1.2",
-    "serve": "~14.2.0",
-    "stylelint": "~14.5.1",
-    "stylelint-config-standard-scss": "~3.0.0",
-    "stylelint-order": "~5.0.0"
+    "next-sitemap": "~4.2.3",
+    "node-watch": "~0.7.4",
+    "sass": "~1.69.7",
+    "serve": "~14.2.1",
+    "sharp": "~0.33.1",
+    "stylelint": "~16.1.0",
+    "stylelint-config-standard-scss": "~13.0.0",
+    "stylelint-order": "~6.0.4",
+    "yamljs": "~0.3.0"
+  },
+  "dependencies": {
+    "@wethegit/react-hooks": "~2.0.0",
+    "js-yaml-loader": "~1.2.2",
+    "next": "~14.0.4",
+    "next-compose-plugins": "~2.2.1",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0"
   }
 }

cli/templates/project/src/components/app/page/components/nav/nav.jsx

@@ -68,8 +68,8 @@ export function Nav({ toggleable = false }) {
                 className={styles.navItem}
                 aria-current={item.id === page?.selectedNav ? "page" : null}
               >
-                <Link href={path} passHref>
-                  <a onClick={() => setOpen(false)}>{label}</a>
+                <Link href={path} onClick={() => setOpen(false)}>
+                  {label}
                 </Link>
               </li>
             )

cli/templates/project/src/components/common/link/link.jsx

@@ -1,4 +1,3 @@
-import PropTypes from "prop-types"
 import NextLink from "next/link"
 
 import { useLocale } from "@local/hooks"
@@ -23,13 +22,3 @@ export function Link({ children, href, ignoreLocale, ...props }) {
     </NextLink>
   )
 }
-
-Link.defaultProps = {
-  ignoreLocale: false,
-}
-
-Link.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  href: PropTypes.string.isRequired,
-  ignoreLocale: PropTypes.bool,
-}