Svelte app

22 |

23 |

Name

24 | 25 |

26 | 27 |

28 |

Size

29 |

30 | 31 | 32 | 36 |

37 |

38 |

39 |

Squared

40 | 41 |

42 | 43 |

44 |

Variant

45 | 53 |

54 | 55 |

56 |

57 |

Color

58 |

59 | 60 | 61 |

62 |

63 | 64 |

65 | {#each colors as color, i} 66 |

67 |

68 |

69 | {color} 70 |

71 | 72 | 80 |

81 | {/each} 82 |

83 |

84 |

85 | 86 |

87 | 88 |

89 | 90 | 192 | -------------------------------------------------------------------------------- /example/src/main.ts: -------------------------------------------------------------------------------- 1 | import App from "./App.svelte"; 2 | 3 | const app = new App({ 4 | target: document.body, 5 | }); 6 | 7 | export default app; 8 | -------------------------------------------------------------------------------- /example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "include": ["src/**/*"], 4 | "exclude": ["node_modules/*", "__sapper__/*", "public/*"] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-boring-avatars", 3 | "svelte": "dist/index.js", 4 | "exports": { 5 | ".": { 6 | "svelte": "./dist/index.js", 7 | "types": "./dist/ts/index.d.ts" 8 | } 9 | }, 10 | "module": "dist/index.mjs", 11 | "main": "dist/index.umd.js", 12 | "types": "dist/ts/index.d.ts", 13 | "author": "Paolo Tiu ", 14 | "license": "MIT", 15 | "version": "1.2.6", 16 | "sideEffects": false, 17 | "scripts": { 18 | "prebuild": "rm -rf ./dist", 19 | "build": "rollup -c", 20 | "dev": "rollup -c -w", 21 | "validate": "svelte-check", 22 | "prepublishOnly": "npm run build", 23 | "test": "jest tests" 24 | }, 25 | "files": [ 26 | "src", 27 | "dist" 28 | ], 29 | "devDependencies": { 30 | "@rollup/plugin-node-resolve": "^13.0.4", 31 | "@rollup/plugin-typescript": "^8.2.5", 32 | "@testing-library/jest-dom": "^5.14.1", 33 | "@testing-library/svelte": "^3.0.3", 34 | "@tsconfig/svelte": "^1.0.10", 35 | "@types/jest": "^27.0.1", 36 | "babel-jest": "^27.1.0", 37 | "fs-extra": "^10.0.0", 38 | "glob": "^7.1.6", 39 | "jest": "^27.1.0", 40 | "prettier": "^2.3.2", 41 | "prettier-plugin-svelte": "^2.4.0", 42 | "rollup": "^2.32.0", 43 | "rollup-plugin-execute": "^1.1.1", 44 | "rollup-plugin-filesize": "^9.0.2", 45 | "rollup-plugin-size-snapshot": "^0.12.0", 46 | "rollup-plugin-svelte": "^7.1.0", 47 | "rollup-plugin-terser": "^7.0.2", 48 | "rollup-plugin-typescript2": "^0.30.0", 49 | "rollup-plugin-visualizer": "^5.5.2", 50 | "svelte": "^3.24.0", 51 | "svelte-check": "^2.2.5", 52 | "svelte-jester": "^1.8.2", 53 | "svelte-preprocess": "^4.5.1", 54 | "ts-jest": "^27.0.5", 55 | "tslib": "^2.3.1", 56 | "typescript": "^4.3.5" 57 | }, 58 | "keywords": [ 59 | "svelte", 60 | "avatars", 61 | "boring-avatars" 62 | ], 63 | "repository": { 64 | "type": "git", 65 | "url": "https://github.com/paolotiu/svelte-boring-avatars.git" 66 | }, 67 | "jest": { 68 | "transform": { 69 | "^.+\\.svelte$": [ 70 | "svelte-jester", 71 | { 72 | "preprocess": true 73 | } 74 | ], 75 | "^.+\\.ts$": "ts-jest" 76 | }, 77 | "moduleFileExtensions": [ 78 | "js", 79 | "svelte", 80 | "ts" 81 | ] 82 | }, 83 | "setupFilesAfterEnv": [ 84 | "@testing-library/jest-dom/extend-expect" 85 | ] 86 | } 87 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from 'rollup-plugin-svelte'; 2 | import resolve from '@rollup/plugin-node-resolve'; 3 | import sveltePreprocess from 'svelte-preprocess'; 4 | import typescript from '@rollup/plugin-typescript'; 5 | import execute from 'rollup-plugin-execute'; 6 | 7 | import pkg from './package.json'; 8 | 9 | const name = pkg.name 10 | .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3') 11 | .replace(/^\w/, (m) => m.toUpperCase()) 12 | .replace(/-\w/g, (m) => m[1].toUpperCase()); 13 | 14 | export default { 15 | input: 'src/index.ts', 16 | output: [ 17 | { 18 | file: pkg.module, 19 | format: 'es', 20 | sourcemap: true, 21 | }, 22 | { 23 | file: pkg.main, 24 | format: 'umd', 25 | name, 26 | sourcemap: true, 27 | plugins: [ 28 | // we only want to run this once, so we'll just make it part of this output's plugins 29 | execute(['tsc --outDir ./dist --declaration', 'node scripts/preprocess.js']), 30 | ], 31 | }, 32 | ], 33 | plugins: [ 34 | svelte({ 35 | preprocess: sveltePreprocess(), 36 | }), 37 | resolve(), 38 | typescript(), 39 | ], 40 | }; 41 | -------------------------------------------------------------------------------- /scripts/preprocess.js: -------------------------------------------------------------------------------- 1 | const fs = require("fs-extra"); 2 | const glob = require("glob"); 3 | const path = require("path"); 4 | const svelte = require("svelte/compiler"); 5 | const sveltePreprocess = require("svelte-preprocess"); 6 | 7 | const basePath = path.resolve(__dirname, "../"); 8 | const srcPath = path.resolve(basePath, "src"); 9 | const distPath = path.resolve(basePath, "dist"); 10 | 11 | /** 12 | * This will process .svelte files into plain javascript so consumers do not have to setup Typescript to use this library 13 | * 14 | * Additionally, it will move the .d.ts files into /dist/ts 15 | */ 16 | async function main() { 17 | // get all .svelte files 18 | glob(path.join(srcPath, "**/*.svelte"), null, async function (err, files) { 19 | if (err) throw err; 20 | // process them 21 | await Promise.all(files.map((filePath) => preprocessSvelte(path.resolve(filePath)))); 22 | }); 23 | 24 | // move .d.ts files into /dist/ts 25 | glob(path.join(distPath, "**/*.d.ts"), null, async function (err, files) { 26 | if (err) throw err; 27 | const tsPath = path.join(distPath, "ts"); 28 | 29 | await Promise.all( 30 | files.map(async (filePath) => { 31 | filePath = path.resolve(filePath); 32 | // ignore anything in /dist/ts (could probably make a better glob pattern) 33 | if (!filePath.includes(tsPath)) { 34 | await fs.move(filePath, filePath.replace(distPath, tsPath), { 35 | overwrite: true, 36 | }); 37 | } 38 | }) 39 | ); 40 | }); 41 | } 42 | 43 | /** 44 | * Processes .svelte file and write it to /dist, also copies the original .svelte file to /dist/ts 45 | */ 46 | async function preprocessSvelte(filePath) { 47 | const srcCode = await fs.readFile(filePath, { encoding: "utf-8" }); 48 | let { code } = await svelte.preprocess( 49 | srcCode, 50 | sveltePreprocess({ 51 | // unfortunately, sourcemap on .svelte files sometimes comments out the tag 52 | // so we need to disable sourcemapping for them 53 | sourceMap: false, 54 | typescript: { 55 | compilerOptions: { 56 | sourceMap: false, 57 | }, 58 | }, 59 | }), 60 | { 61 | filename: filePath, 62 | } 63 | ); 64 | 65 | // remove lang=ts from processed .svelte files 66 | code = code.replace(/script lang="ts"/g, "script"); 67 | 68 | const relativePath = filePath.split(srcPath)[1]; 69 | const destination = path.join(distPath, filePath.split(srcPath)[1]); 70 | 71 | // write preprocessed svelte file to /dist 72 | await fs.ensureFile(destination); 73 | await fs.writeFile(destination, code, { encoding: "utf-8" }); 74 | 75 | // write the unprocessed svelte component to /dist/ts/ so we can have correct types for ts users 76 | const tsDest = path.join(distPath, "ts", relativePath); 77 | await fs.ensureFile(tsDest); 78 | await fs.writeFile(tsDest, srcCode, { 79 | encoding: "utf-8", 80 | }); 81 | } 82 | 83 | main(); 84 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Avatar from './lib/components/Avatar.svelte'; 2 | export default Avatar; 3 | 4 | export { default as AvatarBauhaus } from './lib/components/AvatarBauhaus.svelte'; 5 | export { default as AvatarBeam } from './lib/components/AvatarBeam.svelte'; 6 | export { default as AvatarMarble } from './lib/components/AvatarMarble.svelte'; 7 | export { default as AvatarPixel } from './lib/components/AvatarPixel.svelte'; 8 | export { default as AvatarRing } from './lib/components/AvatarRing.svelte'; 9 | export { default as AvatarSunset } from './lib/components/AvatarSunset.svelte'; 10 | -------------------------------------------------------------------------------- /src/lib/components/Avatar.svelte: -------------------------------------------------------------------------------- 1 | 53 | 54 | {#key props} 55 | {#key finalVariant} 56 | 57 | {/key} 58 | {/key} 59 | -------------------------------------------------------------------------------- /src/lib/components/AvatarBauhaus.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 91 | -------------------------------------------------------------------------------- /src/lib/components/AvatarBeam.svelte: -------------------------------------------------------------------------------- 1 | 47 | 48 | 127 | -------------------------------------------------------------------------------- /src/lib/components/AvatarMarble.svelte: -------------------------------------------------------------------------------- 1 | 33 | 34 | 93 | -------------------------------------------------------------------------------- /src/lib/components/AvatarPixel.svelte: -------------------------------------------------------------------------------- 1 | 28 | 29 | 115 | -------------------------------------------------------------------------------- /src/lib/components/AvatarRing.svelte: -------------------------------------------------------------------------------- 1 | 37 | 38 | 61 | -------------------------------------------------------------------------------- /src/lib/components/AvatarSunset.svelte: -------------------------------------------------------------------------------- 1 | 31 | 32 | 72 | -------------------------------------------------------------------------------- /src/lib/components/CONSTANTS.ts: -------------------------------------------------------------------------------- 1 | export const DEFAULTS = { 2 | colors: ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90'], 3 | name: 'Clara Barton', 4 | square: false, 5 | size: 40, 6 | }; 7 | -------------------------------------------------------------------------------- /src/lib/utils.ts: -------------------------------------------------------------------------------- 1 | export const getNumber = (name: string) => { 2 | const charactersArray = Array.from(name); 3 | let charactersCodesSum = 0; 4 | 5 | charactersArray.forEach((charactersArrayItem) => { 6 | return (charactersCodesSum += charactersArrayItem.charCodeAt(0)); 7 | }); 8 | 9 | return charactersCodesSum; 10 | }; 11 | 12 | export const getModulus = (num: number, max: number) => { 13 | return num % max; 14 | }; 15 | 16 | export const getDigit = (number: number, ntn: number) => { 17 | return Math.floor((number / Math.pow(10, ntn)) % 10); 18 | }; 19 | 20 | export const getBoolean = (number: number, ntn: number) => { 21 | return !(getDigit(number, ntn) % 2); 22 | }; 23 | 24 | export const getAngle = (x: number, y: number) => { 25 | return (Math.atan2(y, x) * 180) / Math.PI; 26 | }; 27 | 28 | export const getUnit = (number: number, range: number, index?: number) => { 29 | let value = number % range; 30 | 31 | if (index && getDigit(number, index) % 2 === 0) { 32 | return -value; 33 | } else return value; 34 | }; 35 | 36 | export const getRandomColor = (number: number, colors: string[], range: number) => { 37 | return colors[number % range]; 38 | }; 39 | 40 | export const getContrast = (hexcolor: string) => { 41 | // If a leading # is provided, remove it 42 | if (hexcolor.slice(0, 1) === '#') { 43 | hexcolor = hexcolor.slice(1); 44 | } 45 | 46 | // Convert to RGB value 47 | var r = parseInt(hexcolor.substr(0, 2), 16); 48 | var g = parseInt(hexcolor.substr(2, 2), 16); 49 | var b = parseInt(hexcolor.substr(4, 2), 16); 50 | 51 | // Get YIQ ratio 52 | var yiq = (r * 299 + g * 587 + b * 114) / 1000; 53 | 54 | // Check contrast 55 | return yiq >= 128 ? 'black' : 'white'; 56 | }; 57 | 58 | export const getRandId = (prefix?: string) => { 59 | // doesn't use substr 60 | return (prefix || '') + Math.random().toString(36).substring(2); 61 | }; 62 | -------------------------------------------------------------------------------- /svelte.config.js: -------------------------------------------------------------------------------- 1 | const autoPreprocess = require('svelte-preprocess'); 2 | 3 | module.exports = { 4 | preprocess: autoPreprocess(), 5 | }; 6 | -------------------------------------------------------------------------------- /tests/Avatar.test.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | import '@testing-library/jest-dom'; 6 | 7 | import { getByTestId, render } from '@testing-library/svelte'; 8 | 9 | import Avatar, { 10 | AvatarBauhaus, 11 | AvatarBeam, 12 | AvatarMarble, 13 | AvatarPixel, 14 | AvatarRing, 15 | AvatarSunset, 16 | } from '../src/index'; 17 | 18 | const variantMapping = { 19 | bauhaus: AvatarBauhaus, 20 | beam: AvatarBeam, 21 | marble: AvatarMarble, 22 | pixel: AvatarPixel, 23 | ring: AvatarRing, 24 | sunset: AvatarSunset, 25 | } as const; 26 | 27 | const variants = ['bauhaus', 'beam', 'marble', 'pixel', 'ring', 'sunset'] as const; 28 | describe('Avatar component', () => { 29 | test('Creates default Avatar', async () => { 30 | const { getByTestId } = render(Avatar); 31 | 32 | expect(getByTestId('avatar-marble')).toBeInTheDocument(); 33 | }); 34 | 35 | test.each(variants)(`Creates %s variant`, (variant) => { 36 | const { getByTestId } = render(Avatar, { variant }); 37 | expect(getByTestId(`avatar-${variant}`)).toBeInTheDocument(); 38 | }); 39 | }); 40 | 41 | describe('Individual variants', () => { 42 | test.each(variants)(`Creates %s variant`, (variant) => { 43 | const { getByTestId } = render(variantMapping[variant]); 44 | expect(getByTestId(`avatar-${variant}`)).toBeInTheDocument(); 45 | }); 46 | }); 47 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "sourceMap": true, 5 | "strict": true 6 | }, 7 | 8 | "include": ["src/**/*"], 9 | "exclude": ["node_modules/*"] 10 | } 11 | --------------------------------------------------------------------------------