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/.eslint.config.js
import baseConfig from '@fat-fuzzy/config/eslint/base'
import svelteConfig from '@fat-fuzzy/config/eslint/svelte'
import {includeIgnoreFile} from '@eslint/compat'
import {fileURLToPath} from 'node:url'
import path from 'node:path'

// Correctly determine gitignorePath relative to *this* eslint.config.js file
const __filename = fileURLToPath(import.meta.url)
const __dirname = path.dirname(__filename)
// Adjust '../../.gitignore' to point to your monorepo root .gitignore
const gitignorePath = path.resolve(__dirname, './.gitignore')

export default [
	// ESLint 9 expects an array
	includeIgnoreFile(gitignorePath), // Apply gitignore at the project level
	...baseConfig, // Spread the imported shared configuration
	svelteConfig, // Spread the Svelte-specific configuration
]

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

export default prettier

// in .packages/new-package/stylelint.config.js
import stylelint from '@fat-fuzzy/config/stylelint'

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

This package provides utilities:

• for data validation data using JSON Schema and AJV
• to sanitize strings

Requirements

• AJV
• some understanding of JSON Schema

Usage

Sanitization utilities

This package contains basic sanitization utilities that can be imported to access sanitization functions for common input data types

import {sanitize} from '@fat-fuzzy/validation'

Validation Functions

This package also allows you to generate validation functions for your data using JSON Schema

1. define the data structure you want to validate using JSON Schema
2. generate standalone code to validate data using the schema during runtime

Please refer to JSON Schema for more in depth documentation about defining schema.

To generate a new validation function:

• Declare the schemas and generation options in a fat-fuzzy.config.js file (see @fat-fuzzy/validation/src/examples/fat-fuzzy.config.example.js)

• Add a scrip to generate custom validation functions from schema using the ff-validate command before build:

  "generate:validators": "ff-validation", // standalone command
  "prebuild": "ff-validation", // always run before build

• THe generated validation functions can then be used as local imports:

  import * as validators from './generated/validate.ajv.mjs'

Examples

• Configuration: @fat-fuzzy/validation/src/examples/fat-fuzzy.config.example.js
• FormValidator (framework agnostic, TypeScript): @fat-fuzzy/validation/src/examples/FormValidator.ts
• FormValidator (Svelte, TypeScript): @fat-fuzzy/ui/src/lib/utils/browser/FormValidator.svelte.ts
• SignUp example (Svelte, TypeScript):
  • file: @fat-fuzzy/ui/src/lib/components/recipes/forms/SignUp.svelte
  • demo: Fat Fuzzy UI - SignUp