@dg-scripts/webpack-template 0.0.0-1867

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "@dg-scripts/webpack-template",
+  "version": "0.0.0-1867",
+  "packageManager": "pnpm@8.15.5",
+  "description": "Minimal webpack boilerplate",
+  "author": "sabertazimi",
+  "license": "MIT",
+  "homepage": "https://github.com/sabertazimi/bod",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sabertazimi/bod.git"
+  },
+  "bugs": {
+    "url": "https://github.com/sabertazimi/bod/issues"
+  },
+  "keywords": [
+    "webpack",
+    "boilerplate",
+    "template"
+  ],
+  "main": "./src/index.js",
+  "engines": {
+    "node": ">=18"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "scripts": {
+    "badge": "ts-node scripts/badge.ts",
+    "build": "cross-env NODE_ENV=production webpack",
+    "dev": "cross-env NODE_ENV=development webpack serve",
+    "lint": "pnpm lint:style && pnpm lint:type-check",
+    "lint:style": "stylelint ./src/**/*.css && eslint ./src",
+    "lint:fix": "stylelint ./src/**/*.css --fix && eslint ./src --fix",
+    "lint:type-check": "tsc --noEmit",
+    "changeset": "commit-and-tag-version --dry-run -s",
+    "release": "commit-and-tag-version -s",
+    "start": "pnpm dev",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.3",
+    "@babel/plugin-transform-class-properties": "^7.24.1",
+    "@babel/plugin-transform-object-rest-spread": "^7.24.1",
+    "@babel/preset-env": "^7.24.3",
+    "@dg-scripts/eslint-config": "0.0.0-1867",
+    "@dg-scripts/stylelint-config": "0.0.0-1867",
+    "@svgr/webpack": "^8.1.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.2",
+    "babel-loader": "^9.1.3",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.10.0",
+    "css-minimizer-webpack-plugin": "^6.0.0",
+    "dotenv": "^16.4.5",
+    "eslint": "^8.57.0",
+    "eslint-webpack-plugin": "^4.1.0",
+    "file-loader": "^6.2.0",
+    "html-loader": "^5.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "mini-css-extract-plugin": "^2.8.1",
+    "postcss": "^8.4.38",
+    "postcss-flexbugs-fixes": "^5.0.2",
+    "postcss-loader": "^8.1.1",
+    "postcss-preset-env": "^9.5.2",
+    "prettier": "^3.2.5",
+    "sass-loader": "^14.1.1",
+    "style-loader": "^3.3.4",
+    "stylelint": "^16.3.1",
+    "stylelint-webpack-plugin": "^5.0.0",
+    "ts-jest": "^29.1.2",
+    "ts-loader": "^9.5.1",
+    "ts-node": "^10.9.2",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
+    "tslib": "^2.6.2",
+    "typescript": "^5.4.3",
+    "undici": "^6.10.2",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.91.0",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.4",
+    "webpackbar": "^6.0.1"
+  },
+  "gitHead": "27b404c9bab635676f0939f84764ddc292fa681d"
+}

package/postcss.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  plugins: [
+    'postcss-flexbugs-fixes',
+    [
+      'postcss-preset-env',
+      {
+        autoprefixer: {
+          flexbox: 'no-2009',
+        },
+        stage: 3,
+      },
+    ],
+  ],
+};

package/scripts/badge.ts

@@ -0,0 +1,77 @@
+import cp from 'node:child_process';
+import fs from 'node:fs';
+import path from 'path';
+import { fetch } from 'undici';
+
+const rootPath = path.join(__dirname, '..');
+const SummaryFilePath = path.join(rootPath, 'coverage/coverage-summary.json');
+const OutputBadgePath = path.join(rootPath, 'dist');
+const CoverageType = ['statements', 'branches', 'functions', 'lines'];
+const BadgeStyle = [
+  'for-the-badge',
+  'flat',
+  'flat-square',
+  'plastic',
+  'social',
+];
+
+const getCoveragePercentage = (
+  summaryFilePath: string,
+  coverageType: string
+) => {
+  try {
+    const summary = fs.readFileSync(summaryFilePath, 'utf8');
+    return JSON.parse(summary).total[coverageType].pct;
+  } catch (error) {
+    if (error instanceof Error) console.error(error.message);
+    return 0;
+  }
+};
+
+const getBadgeColor = (percentage: number) => {
+  if (percentage < 80) return 'red';
+  if (percentage < 90) return 'yellow';
+  return 'brightgreen';
+};
+
+const getBadgeUrl = (
+  summaryFilePath: string,
+  coverageType: string,
+  badgeStyle: string
+) => {
+  const percentage = getCoveragePercentage(summaryFilePath, coverageType);
+  const coverage = `${percentage}${encodeURI('%')}`;
+  const color = getBadgeColor(percentage);
+  const url = `https://img.shields.io/badge/${coverageType}-${coverage}-${color}?logo=jest&style=${badgeStyle}`;
+  return url;
+};
+
+const downloadBadgeFile = async (url: string) => {
+  const response = await fetch(url);
+  const data = await response.text();
+  return data;
+};
+
+const generateCoverageFile = async (
+  summaryFilePath: string,
+  coverageType: string,
+  badgeStyle: string,
+  outputDir: string
+) => {
+  cp.spawnSync('mkdir', ['-p', outputDir]);
+  const badgeUrl = getBadgeUrl(summaryFilePath, coverageType, badgeStyle);
+  const output = path.join(outputDir, `coverage-${coverageType}.svg`);
+  const file = await downloadBadgeFile(badgeUrl);
+  fs.writeFileSync(output, file, { encoding: 'utf8' });
+};
+
+const main = () => {
+  generateCoverageFile(
+    SummaryFilePath,
+    CoverageType[3],
+    BadgeStyle[0],
+    OutputBadgePath
+  );
+};
+
+main();

package/src/index.css

@@ -0,0 +1,30 @@
+@import url('https://fonts.googleapis.com/css?family=Raleway:400,500');
+
+:root {
+  --color-primary: #7048e8;
+  --color-secondary: #495057;
+  --color-info: #1c7ed6;
+  --color-success: #37b24d;
+  --color-warning: #f59f00;
+  --color-danger: #f03e3e;
+  --font-stack: 'Raleway', 'HelveticaNeue', 'Helvetica Neue', helvetica,
+    'Open Sans', arial, sans-serif, serif;
+}
+
+body {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  padding: 0;
+  margin: 0 auto;
+  font-family: var(--font-stack);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}

package/src/index.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+    <title>Boilerplate</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div>Click blank space to spawn particles.</div>
+    <canvas id="canvas"></canvas>
+  </body>
+</html>

package/src/index.ts

@@ -0,0 +1,5 @@
+import './index.css'
+import { ParticleSystem } from './particle'
+
+const particleSystem = new ParticleSystem()
+particleSystem.start()

package/src/particle/ExplodingParticle.ts

@@ -0,0 +1,94 @@
+interface Speed {
+  x: number
+  y: number
+}
+
+interface ParticleProps {
+  x?: number
+  y?: number
+  color?: number[]
+  duration?: number
+  speed?: Speed
+  radius?: number
+  life?: number
+}
+
+class ExplodingParticle {
+  startX: number
+  startY: number
+  color: number[]
+  speed: Speed
+  radius: number
+  startTime: number
+  animationDuration: number
+  life: number
+  remainingLife: number
+
+  static getDefaultProps(): ParticleProps {
+    const defaultProps: ParticleProps = {
+      x: 0,
+      y: 0,
+      color: [156, 39, 176],
+      duration: 1000,
+      speed: {
+        x: -5 + Math.random() * 10,
+        y: -5 + Math.random() * 10,
+      },
+      radius: 5 + Math.random() * 5,
+      life: 30 + Math.random() * 10,
+    }
+
+    return defaultProps
+  }
+
+  constructor(props?: ParticleProps) {
+    const defaultProps = ExplodingParticle.getDefaultProps()
+    const { x, y, color, duration, speed, radius, life } = {
+      ...defaultProps,
+      ...props,
+    }
+
+    this.startX = x as number
+    this.startY = y as number
+    this.color = color as number[]
+
+    // Speed
+    this.speed = speed as Speed
+
+    // Size particle
+    this.radius = radius as number
+
+    // Set how long particle to animate for X ms
+    this.startTime = Date.now()
+    this.animationDuration = duration as number
+
+    // Set a max time to live for particle
+    this.life = life as number
+    this.remainingLife = this.life
+  }
+
+  // This function will be called by animation logic
+  draw(ctx: CanvasRenderingContext2D): void {
+    const shouldDraw = this.radius > 0 && this.remainingLife > 0
+
+    if (shouldDraw) {
+      // Draw a circle at the current location
+      ctx.save()
+      ctx.beginPath()
+      ctx.arc(this.startX, this.startY, this.radius, 0, Math.PI * 2)
+      ctx.fillStyle = `rgba(${this.color[0]},${this.color[1]},${this.color[2]},1)`
+      ctx.fill()
+      ctx.closePath()
+      ctx.restore()
+
+      // Update the particle's location and life
+      this.startX += this.speed.x
+      this.startY += this.speed.y
+      this.radius -= 0.25
+      this.remainingLife--
+    }
+  }
+}
+
+export default ExplodingParticle
+export type { Speed, ParticleProps }

package/src/particle/ParticleFactory.ts

@@ -0,0 +1,25 @@
+import type { ParticleProps } from './ExplodingParticle'
+import ExplodingParticle from './ExplodingParticle'
+
+class ParticleFactory {
+  particles: ExplodingParticle[]
+  constructor() {
+    this.particles = []
+  }
+
+  getParticles(): ExplodingParticle[] {
+    return this.particles
+  }
+
+  clearParticles(): void {
+    while (this.particles.length)
+      this.particles.pop()
+  }
+
+  emit(particleProps?: ParticleProps): void {
+    const particle = new ExplodingParticle(particleProps)
+    this.particles.push(particle)
+  }
+}
+
+export default ParticleFactory

package/src/particle/ParticleSystem.ts

@@ -0,0 +1,120 @@
+import type { ParticleProps } from './ExplodingParticle'
+import ParticleFactory from './ParticleFactory'
+
+class ParticleSystem {
+  factory: ParticleFactory
+  bufferCanvas: HTMLCanvasElement
+  buffer: CanvasRenderingContext2D
+  screenCanvas: HTMLCanvasElement
+  screen: CanvasRenderingContext2D
+  factor: number
+
+  constructor(factor = 20) {
+    this.factory = new ParticleFactory()
+    this.bufferCanvas = document.createElement('canvas')
+    this.buffer = this.bufferCanvas.getContext('2d') as CanvasRenderingContext2D
+    this.screenCanvas = document.getElementById('canvas') as HTMLCanvasElement
+    this.screen = this.screenCanvas.getContext('2d') as CanvasRenderingContext2D
+    this.factor = factor
+
+    this.init()
+  }
+
+  init(): void {
+    this.resize()
+    this.initStyle()
+    this.handleClick()
+  }
+
+  resize(): void {
+    // Size canvas
+    this.screenCanvas.width = window.innerWidth
+    this.screenCanvas.height = window.innerHeight
+    this.bufferCanvas.width = window.innerWidth
+    this.bufferCanvas.height = window.innerHeight
+  }
+
+  initStyle(): void {
+    // Position out canvas
+    this.screenCanvas.style.position = 'absolute'
+    this.screenCanvas.style.top = '0'
+    this.screenCanvas.style.left = '0'
+
+    // Make sure it's on top of other elements
+    this.screenCanvas.style.zIndex = '1001'
+  }
+
+  handleClick(): void {
+    // bind click event to screen canvas
+    this.screenCanvas.addEventListener('click', (event) => {
+      const x = event.clientX
+      const y = event.clientY
+      const getRandomInt = (min: number, max: number) => () =>
+        Math.floor(Math.random() * (max - min)) + min
+      const getColor = getRandomInt(0, 255)
+
+      for (let count = this.factor; count > 0; --count) {
+        const color = [getColor(), getColor(), getColor()]
+        const speed = {
+          x: -5 + Math.random() * 10,
+          y: -5 + Math.random() * 10,
+        }
+        this.emit({ x, y, color, speed })
+        count--
+      }
+    })
+  }
+
+  emit({ x = 0, y = 0, color = [156, 39, 176], speed }: ParticleProps): void {
+    this.factory.emit({ x, y, color, speed })
+  }
+
+  draw(): void {
+    // render particles to offscreen canvas
+    const particles = this.factory.getParticles()
+
+    particles.forEach((particle, index, particles) => {
+      particle.draw(this.buffer)
+
+      // Simple way to clean up if the last particle is done animating
+      if (index === particles.length - 1) {
+        const percent
+          = (Date.now() - particle.startTime) / particle.animationDuration
+
+        if (percent > 1)
+          this.factory.clearParticles()
+      }
+    })
+
+    // render to screen canvas
+    this.screen.drawImage(this.bufferCanvas, 0, 0)
+  }
+
+  clear(): void {
+    this.buffer.clearRect(
+      0,
+      0,
+      this.bufferCanvas.width,
+      this.bufferCanvas.height,
+    )
+
+    this.screen.clearRect(
+      0,
+      0,
+      this.screenCanvas.width,
+      this.screenCanvas.height,
+    )
+  }
+
+  update(): void {
+    this.clear()
+    this.draw()
+    window.requestAnimationFrame(this.update.bind(this))
+  }
+
+  start(): void {
+    window.requestAnimationFrame(this.update.bind(this))
+  }
+}
+
+export default ParticleSystem

package/src/particle/__tests__/ExplodingParticle.test.ts

@@ -0,0 +1,114 @@
+import ExplodingParticle from '../ExplodingParticle'
+
+describe('explodingParticle', () => {
+  let mockContextFunctions: object
+  let mockContextProps: object
+  let mockContext: CanvasRenderingContext2D
+
+  beforeEach(() => {
+    mockContextFunctions = {
+      save: jest.fn(),
+      restore: jest.fn(),
+      beginPath: jest.fn(),
+      closePath: jest.fn(),
+      arc: jest.fn(),
+      fill: jest.fn(),
+    }
+    mockContextProps = {
+      fillStyle: '',
+    }
+    mockContext = {
+      ...mockContextFunctions,
+      ...mockContextProps,
+    } as unknown as CanvasRenderingContext2D
+  })
+
+  afterEach(() => {
+    mockContextFunctions = {}
+    mockContextProps = {}
+    mockContext = {} as unknown as CanvasRenderingContext2D
+  })
+
+  it('should get same x, y, color and duration with empty props', () => {
+    const particle = new ExplodingParticle()
+    const defaultProps = ExplodingParticle.getDefaultProps()
+
+    expect(particle.startX).toBe(defaultProps.x)
+    expect(particle.startY).toBe(defaultProps.y)
+    expect(particle.color).toStrictEqual(defaultProps.color)
+    expect(particle.animationDuration).toBe(defaultProps.duration)
+  })
+
+  it('should get random radius, speed and life with empty props', () => {
+    const particle = new ExplodingParticle()
+    const defaultProps = ExplodingParticle.getDefaultProps()
+
+    expect(particle.radius).not.toBe(defaultProps.radius)
+    expect(particle.speed).not.toStrictEqual(defaultProps.speed)
+    expect(particle.life).toBe(particle.remainingLife)
+    expect(particle.life).not.toBe(defaultProps.life)
+    expect(particle.remainingLife).not.toBe(defaultProps.life)
+  })
+
+  it('should move according to its speed', () => {
+    const particle = new ExplodingParticle({
+      x: 1,
+      y: 2,
+      speed: { x: 1, y: -2 },
+    })
+
+    expect(particle.startX).toBe(1)
+    expect(particle.startY).toBe(2)
+    particle.draw(mockContext)
+    expect(particle.startX).toBe(2)
+    expect(particle.startY).toBe(0)
+    particle.draw(mockContext)
+    expect(particle.startX).toBe(3)
+    expect(particle.startY).toBe(-2)
+    Object.values(mockContextFunctions).forEach((mockFunction) => {
+      expect(mockFunction).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  it('should shrink radius when time passed', () => {
+    const particle = new ExplodingParticle({
+      radius: 1.25,
+    })
+
+    expect(particle.radius).toBe(1.25)
+    particle.draw(mockContext)
+    expect(particle.radius).toBe(1)
+    particle.draw(mockContext)
+    expect(particle.radius).toBe(0.75)
+    particle.draw(mockContext)
+    expect(particle.radius).toBe(0.5)
+    Object.values(mockContextFunctions).forEach((mockFunction) => {
+      expect(mockFunction).toHaveBeenCalledTimes(3)
+    })
+  })
+
+  it('should disappear (freezed) when radius becomes zero', () => {
+    const particle = new ExplodingParticle({
+      x: 0,
+      y: 0,
+      speed: { x: 1, y: 1 },
+      radius: 0.25,
+    })
+
+    expect(particle.startX).toBe(0)
+    expect(particle.startY).toBe(0)
+    expect(particle.radius).toBe(0.25)
+    expect(particle.speed).toStrictEqual({ x: 1, y: 1 })
+    particle.draw(mockContext)
+    expect(particle.startX).toBe(1)
+    expect(particle.startY).toBe(1)
+    expect(particle.radius).toBe(0)
+    particle.draw(mockContext)
+    expect(particle.startX).toBe(1)
+    expect(particle.startY).toBe(1)
+    expect(particle.radius).toBe(0)
+    Object.values(mockContextFunctions).forEach((mockFunction) => {
+      expect(mockFunction).toHaveBeenCalledTimes(1)
+    })
+  })
+})

package/src/particle/__tests__/ParticleFactory.test.ts

@@ -0,0 +1,30 @@
+import ParticleFactory from '../ParticleFactory'
+
+describe('particleFactory', () => {
+  it('should initial with empty particles array', () => {
+    const factory = new ParticleFactory()
+    expect(factory.getParticles()).toHaveLength(0)
+  })
+
+  it('should emit new particle toe particles array', () => {
+    const factory = new ParticleFactory()
+
+    expect(factory.getParticles()).toHaveLength(0)
+    factory.emit()
+    expect(factory.getParticles()).toHaveLength(1)
+    factory.emit()
+    expect(factory.getParticles()).toHaveLength(2)
+  })
+
+  it('should clear all particles when flush particles array', () => {
+    const factory = new ParticleFactory()
+
+    expect(factory.getParticles()).toHaveLength(0)
+    factory.emit()
+    factory.emit()
+    factory.emit()
+    expect(factory.getParticles()).toHaveLength(3)
+    factory.clearParticles()
+    expect(factory.getParticles()).toHaveLength(0)
+  })
+})

package/src/particle/index.ts

@@ -0,0 +1 @@
+export { default as ParticleSystem } from './ParticleSystem'

package/tsconfig.json

@@ -0,0 +1,38 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "jsx": "react",
+    "lib": ["DOM", "ESNext", "ES2021"],
+    "baseUrl": "./",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "paths": {},
+    "allowJs": true,
+    "strict": true,
+    "declaration": false,
+    "importHelpers": true,
+    "outDir": "./dist",
+    "removeComments": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true
+  },
+  "include": ["./src/**/*", "index.d.ts"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "coverage",
+    "dist",
+    "typings"
+  ],
+  "ts-node": {
+    "files": true,
+    "compilerOptions": {
+      "target": "es6",
+      "module": "commonjs"
+    }
+  }
+}