Utilities

Contents

The following packages contain shared utilities:

• @fat-fuzzy/config shared configuration
• @fat-fuzzy/cz-changelog This is a package that takes the cz-conventional-changelog and adapts it to produce commit comments as specified in @fat-fuzzy/git-poule.
• @fat-fuzzy/validation a package that exports validation tools

Config

Requirements

• prettier
• eslint
• playwright
• stylelint

Usage

Install the package as a devDependency in your package:

pnpm i -D @fat-fuzzy/config

Import the shared config in another package:

// in .packages/new-package/.eslintrc.js
import config from '@fat-fuzzy/config'
const {eslint} = config

export default eslint

// in .packages/new-package/prettier.config.js
import config from '@fat-fuzzy/config'
const {prettier} = config

export default prettier

// in .packages/new-package/prettier.config.js
import config from '@fat-fuzzy/config'
const {stylelint} = config

export default stylelint

Set the prettier.configPath in .vscode/settings.json

{
 "prettier.configPath": "./prettier.config.js"
}

If you use a VSCode workspace and you add folders outside the root folder the Explorer view (the sidebar view of your folders), then you have to set prettier.configPath for that folder in a .code-workspace file located under the main project root folder:

{
 "folders": [
  {
   "path": ".",
  },
  {
   "path": "packages/my-package",
  },
 ],
 "settings": {
  ".": {
   "prettier.prettierPath": "./node_modules/prettier",
   "editor.formatOnSave": true,
   "prettier.configPath": "./prettier.config.js",
  },
  "my-package": {
   "prettier.prettierPath": "./node_modules/prettier",
   "editor.formatOnSave": true,
   "prettier.configPath": "./prettier.config.js",
  },
}

Commitizen + Git Poule

Requirements

• commitizen
• cz-conventional-changelog

Usage

Install the commitizen and cz-conventional-changelog in the repository root:

pnpm i -D commitizen cz-conventional-changelog

add a .czrc config with the following shape:

{
 "path": "packages/cz-changelog", // Location of the custom cz-changelog package
 "punctuation": { // This customization enables me to use the format:
  "type": " ",    // "EMOJI [SCOPE] COMMENT"
  "scope": [
   "[",
   "]"
  ]
 },
 "disableSubjectLowerCase": true,
 "types": {
    "🚧 ": {
    "description": "Work in progress",
    "title": "WIP"
    },
    "🌱 ": {
    "description": "Gardening / baby step / cleaning code",
    "title": "Gardening"
    },
    ... other comment types here
  }
}

Media

🚧 Work in progress

This package can be used to resize images using https://sharp.pixelplumbing.com/ I am currently using this locally as a script and uploading the resulting images to the repository, which is far from ideal.

The script’s instructions can be found here on the package’s README

Resources on Asset management

• Images in SvelteKit
• Vite asset management
• This discussion on GitHub concerning the emission of static assets in Vite

Validation

Requirements

• AJV
• some understanding of JSON Schema

Usage

In order to adapt validation functions to a particular usage, you have to define the data structure using JSON Schema. Once this is setup, you can generate standalone code to validate data according to the schema during runtime.

[TODO]

• make validation generation configurable from consumer
• document usage in more detail, add examples & resources