DEV Community: Chinmay

Saving yourself from npm

Chinmay — Thu, 09 Apr 2026 13:22:06 +0000

Context

Hackers are hijacking npm packages at an alarming rate. We can't stop maintainer accounts from being compromised, but we can stop being easy targets. In today's ecosystem, the burden of proof has shifted: security is now the responsibility of the person hitting npm install.

It's probably fine → Prove it's safe

Most devs treat weekly or monthly download counts as a sign of reliability — evidence that a package is well-maintained and solves a real problem. That's reasonable, up to a point. But once a hacker hijacks a maintainer's account and tampers with the package or adds a postinstall script, that download count doesn't reset.
All a hijacker needs is a single line in package.json to exfiltrate your ~/.ssh keys or .env file — in a 2-second install.

What allows this to happen over and over?

Insecure defaults — the tooling runs arbitrary code on install without asking
Blind trust — there's no decent way to verify you're getting exactly what you asked for, nothing more

Securing yourself comes down to two things: tightening insecure defaults to a sane configuration, and having a better way to verify what you're actually installing.

Zero trust

Using a runtime with secure defaults is the nuclear option — the most thorough way to address both problems at once. The two runtimes worth knowing here are Deno and Bun.

Deno is the gold standard for security. Its "secure by default" approach grants no permissions to packages unless explicitly allowed. There's no concept of postinstall scripts at install time — the first time any package code executes is when you explicitly run your application. Deno also has built-in Subresource Integrity (SRI): it checks the checksum of every remote module, and if a hacker tampers with even a single character, there's a hash mismatch and Deno refuses to run it.

Deno also pushes the use of JSR (the JavaScript Registry) alongside npm. JSR uses OpenID Connect (OIDC), so maintainers don't have to store long-lived secret tokens that could be stolen — directly addressing the blind trust problem at the publishing layer.
The one caveat: Deno has first-class ESM support but limited CommonJS support, which could be a problem for legacy codebases.

Middle ground

If Deno is too steep a migration, Bun is a reasonable alternative. It supports CommonJS modules and npm packages, but unlike npm, it does not execute lifecycle scripts like postinstall by default. Packages that legitimately need them must be explicitly listed:

{
  "name": "my-app",
  "version": "1.0.0",
  "trustedDependencies": ["my-trusted-package"]
}

If switching runtimes isn't on the table, there's still one more option — switching package managers. It's a much smaller ask.

pnpm

pnpm v10 made a deliberate shift to "secure by default." It no longer runs preinstall or postinstall scripts implicitly, eliminating the same class of attacks Bun protects against — just without changing your runtime.

It also introduced a trustPolicy setting that, when set to no-downgrade, refuses to install a package version whose trust level is weaker than previous releases.

Concretely: if a package was previously published via OIDC and a new version suddenly isn't, pnpm flags it. That's a direct answer to the blind trust problem.

Yarn

Yarn's main security contribution is checksum verification baked into yarn.lock — every package gets a SHA-512 hash, so if anything is tampered with between the registry and your machine, the install fails. It's a narrower guarantee than pnpm offers today, but still a meaningful improvement over npm's defaults.

Last resort — harden your `.npmrc`

If you can't change your runtime or package manager, at minimum fix your npm config. The defaults are not safe.


# Kills the primary attack vector — no postinstall/preinstall scripts
ignore-scripts=true

# Git-based deps can ship their own .npmrc to re-enable scripts — this closes that escape hatch
allow-git=none

# Hijacked packages are usually caught within days — this gives the community time to respond
min-release-age=3

# Ensures package-lock.json is never silently bypassed or auto-updated
save-exact=true
package-lock=true

# Catches known CVEs — won't stop novel supply chain attacks, but worth having
audit=true
audit-level=high

# Enforce HTTPS only
# registry=https://registry.npmjs.org/

Final thoughts

A TL;DR of everything above:

Use secure runtimes — Deno is the best option, Bun is a solid middle ground
Use a better package manager — pnpm v10 gives you Bun-level script safety without changing your runtime
Harden your npm config — if nothing else, ignore-scripts=true alone would have blocked most of the high-profile attacks from the past two years

The common thread across all of these is the same: stop trusting the install process by default. The attacks keep working because the tooling keeps cooperating.

Practical backtracking

Chinmay — Mon, 14 Jul 2025 04:44:18 +0000

For the longest time, I despised backtracking problems.
They always felt too abstract — filled with confusing conditions, endless recursion, and a constant sense that I didn’t really know what I was doing.

That changed when I started visualizing the process — literally drawing trees, branches, and dead ends. Suddenly, things started clicking.
I could see how the algorithm explored and backtracked, and how constraints shaped the paths.

In this post, I want to approach backtracking differently:
I’ll take a typical backtracking problem, break it down into its constraints, and solve it step by step — with visual diagrams to aid our thinking.

You can follow along with pen and paper, or use a tool like Excalidraw (my personal favorite) to sketch as you go.

My goal is to help you see that backtracking doesn’t have to be magical or intimidating — it’s just structured trial and error, and with the right mindset, it can even feel… elegant.

Problem at hand

Going to choose a problem from Leetcode, it will be fairly easy for folks who understand backtracking, but pretty sure it will be challenging for people who struggle with backtracking.

Generate binary strings without adjacent zeros

You are given a positive integer n.
A binary string x is valid if all substrings of x of length 2 contain at least one "1".
Return all valid strings with length n, in any order.

Example 1:
Input: n = 3
Output: ["010","011","101","110","111"]
Explanation:
The valid strings of length 3 are: "010", "011", "101", "110", and "111".
Example 2:
Input: n = 1
Output: ["0","1"]
Explanation:
The valid strings of length 1 are: "0" and "1".

Constraints:
1 <= n <= 18

Understanding the problem

For any given n, say n = 3, a binary string is valid if the substring of length 2 contains at least one "1".

So a substring is a slice of the string, here if the string is 010 then all substrings of length 2 would be

01
10

We sliced off the main string to get two substrings, let's try with a longer string 1011

10
01
11

So as per the problem statement if the substring contains at least one "1", that means, there could be no two adjacent zeros as well, so for n = 3, 010 is valid string, and we want to find all such valid strings for n=3, that satisfy this criteria.

Solving the problem

Solving this problem with recursion seems like a obvious choice, why ?
Its easier to generate values that take into account the previous values

Equivalent code for this

function backtrack(str) {
  backtrack(str+'0');
  backtrack(str+'1');
}

backtrack('');

So here we understand following conditions

Binary strings only have 0 or 1.
There can be no 2 adjacent 0s.
Collect all valid strings that follow above criteria of given length n.

Above code is not quite right though, if you see that there is no return statement, also the backtrack function is going to keep adding 0 to the string infinitely, so its going to go into a infinite loop, '' -> '0' -> '00', we are never hitting the "1" branch. Let's fix that with some conditions / base conditions

backtrack("")
├── backtrack("0")
│   └── backtrack("00")
│       └── backtrack("000")
│           └── ... ← NO END, GOES ON INFINITELY
└── backtrack("1") ← NEVER REACHED

function validBinaryStrings(n) {
 function backtrack(str) {
  if (str.length === n) {
      return; 
  }
  backtrack(str+'0');
  backtrack(str+'1');
}

backtrack('');

}

So above condition makes sure we exit the infinite loop or rather we don't stay stuck, condition is simple, we want to exit the function call if the length of string is n, this is as per one of the condition.

But we are not storing the results anywhere, we need to store the final results, lets put things in an array.

function validBinaryStrings(n) {
 const results = [];
 function backtrack(str) {
  if (str.length === n) {
     results.push(str); // push all generated strings in array 
     return; 
  }
  backtrack(str+'0');
  backtrack(str+'1');
}

backtrack('');
return results;
}

console.log(validBinaryStrings(3));

So above function will generate all binary strings where n = 3, if you run this in browser console or some online JS code editor, you will get this

['000', '001', '010', '011', '100', '101', '110', '111']

So are able to generate all binary strings of length n, but we are violating condition 2. no adjacent 0s.

At this point we can say we are hitting all the paths of the recursion tree and collecting all its leaf

To fix that we can check if the last character of the string is a zero, if not we add 0 to its end, if it is, we skip it

function validBinaryStrings(n) {
 const results = [];
 function backtrack(str) {
  if (str.length === n) {
     results.push(str); // push all generated strings in array 
     return; 
  }
  if(str[str.length - 1] !== '0') {
    backtrack(str+'0');
  }
  backtrack(str+'1');
}

backtrack('');
return results;
}

console.log(validBinaryStrings(3));

Boom! That's it, we have the final solution, key takeaway is to draw out the tree to understand if the generation works, what paths to prune in case we don't want all the leaf of the tree, usually we want to collect the leaf, but if that is not the case we can add some more logic to collect other states.

Key takeaway: Sketching out a decision tree / recursion tree adds more clarity while solving backtracking problems, you can use pen and paper or Excalidraw, its up to you, this should serve as a good technique for solving backtracking problems.

Let me know your thoughts and views about this article. Thank you !

setTimeout - max timeout footgun

Chinmay — Fri, 15 Nov 2024 05:13:50 +0000

Recently I discovered a footgun in real life, which was related to setTimeout, I had to run a timeout for say 28 days for a sale timer, I had a UTC timestamp for the end day, so with the naive approach, I did this

 const date1 = new Date(timestamp1);

  // Difference in milliseconds
  const timeout = date2.getTime() - Date.now();

setTimeout(()=>{
     // some code to turn off some flags / remove some banner
  },timeout);

To my surprise, this did not work or worked too well, since the code within setTimeout executed without waiting for the timeout, I decided to debug in the browser, and I saw that the control jumps into the setTimeout callback almost instantly.

What's the problem here ?

Looking at MDN page of setTimeout, https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value , it was clear that there is a max limit until which setTimeout() will run accurately, specifically
2,147,483,647ms or (24.8 days) or (2**31 - 1) ms, this is because browsers store the delay as a 32-bit signed integer internally.

So whenever you pass in a timeout of more than 24.8 days, there is an integer overflow and the code is executed immediately or rather with a lower timeout duration than expected. That's a bummer, and there is no error !!!

Possible solutions for this problem


const days = 30;
const timeout = days * 24 * 60 * 60 * 1000;
console.log('timeto', timeout);
setTimeout(function () {
  console.log('ticked immediately'); // --> executed almost instantly 
}, timeout);


class LongTimeout {
  constructor(cb, timeout) {
    this.timeStart = document.timeline
      ? document.timeline.currentTime
      : performance.now();
    this.lastAnimationFrame = this.runTimer(cb, timeout);
  }
  runTimer(cb, timeout) {
   if(this.cancelled) return;
    const currTimeStamp = performance.now();
    const elapsed = currTimeStamp - this.timeStart;
    if (elapsed >= timeout) {
      cb();
      window.cancelAnimationFrame(this.lastAnimationFrame);
    } else {
      console.log('tick', elapsed, timeout);
      this.lastAnimationFrame = requestAnimationFrame(() =>
        this.runTimer(cb, timeout)
      );
    }
  }
  cancelTimeout() {
    window.cancelAnimationFrame(this.lastAnimationFrame);
    this.cancelled = true;
    this.lastAnimationFrame = null;
  }
}

const longTimer = new LongTimeout(() => {
  console.log(`Tick after ${timeout}`); // timeout works -> does not execute immediately
}, timeout);

Minesweeper in Svelte

Chinmay — Sun, 06 Oct 2024 14:51:35 +0000

Background

I never understood as a kid how this game worked, I used to open this game up in Win95 IBM PC, and just click randomly around until I hit a mine. Now that I do, I decided to recreate the game with Svelte.

Lets break it down - How the game works ?

Minesweeper is a single player board game with a goal of clearing all tiles of the board. The player wins if he clicks all the tiles on the board without mines and loses if he clicks on a tile that holds a mine.

Game starts with all tiles concealing what is beneath it, so its a generally a lucky start to the game, you could click on either a empty tile or a mine. In case its not a empty tile or a mine, it could hold a count of mine that are present adjacent to the currently clicked tile.

As an example here 1 at the top left indicates there is 1 mine in of its adjacent cells. Now what do we mean by adjacent cells ? All cells that surround a cell become its adjacent cells. This allows players to strategize about clicking on which tile next. In case a user is not sure whether there is a mine or not underneath a tile, he can flag it by right clicking on the tile.

Thinking about the game logic

The game is pretty simple at first glance, just give a board of n x m rows and keep switching the cell state to display the content that each cell holds. But there is a case where if multiple empty cells are connected and you click on it, the game should keep opening adjacent cells if they are empty too, that gives its iconic ripple effect.

Gets quite tricky building all these conditions in, so lets break down into smaller tasks at hand.

Create a board state - a n x m array (2d array)
A cell inside a board could be / can hold: a mine, a count, or empty.
A cell can be: clicked / not clicked.
A cell can be: flagged / not flagged.
Represent cell with these properties: row, col, text, type(mine, count, empty), clicked(clicked / not clicked), flagged (flagged / not flagged).
Finally we could represent a game state like this: on, win, lose
We also need to have a way to define bounds, while we create that ripple, we don't want the ripple to open up mines too! So we stop open tiles once we hit a boundary of mine!
A game config: row, cols, mine count -> This could help us add difficulty levels to our game easily. Again this is optional step.
This game is just calling a bunch of functions...on click event.

Creating board state

Creating a board is simple task of creating a 2d array given that we know the number of rows and columns. But along with that we also want to put mines at random spots in the board and annotate the board with the mine count in the adjacent cells of mine.

We create a list of unique random indices to put mines at, below function is used to do that,


  function uniqueRandomIndices(
    row_count: number,
    col_count: number,
    range: number,
  ) {
    const upper_row = row_count - 1;
    const upper_col = col_count - 1;
    const idxMap = new Map();
    while (idxMap.size !== range) {
      const rowIdx = Math.floor(Math.random() * upper_row);
      const colIdx = Math.floor(Math.random() * upper_col);
      idxMap.set(`${rowIdx}_${colIdx}`, [rowIdx, colIdx]);
    }
    return [...idxMap.values()];
  }

So here is function that we use to create board state


     function createBoard(
    rows: number,
    cols: number,
    minePositions: Array<Array<number>>,
  ) {
    const minePositionsStrings = minePositions.map(([r, c]) => `${r}_${c}`);
    let boardWithMines = Array.from({ length: rows }, (_, row_idx) =>
      Array.from({ length: cols }, (_, col_idx) => {
        let cell: Cell = {
          text: "",
          row: row_idx,
          col: col_idx,
          type: CellType.empty,
          clicked: CellClickState.not_clicked,
          flagged: FlagState.not_flagged,
        };
        if (minePositionsStrings.includes(`${row_idx}_${col_idx}`)) {
          cell.type = CellType.mine;
          cell.text = CellSymbols.mine;
        }
        return cell;
      }),
    );
    return boardWithMines;
  }

Once we do have a board with mines in random spots, we will end up with a 2d array. Now the important part that makes it possible to play at all, adding mine count to adjacent cells of a mine. For this we have couple of things to keep in mind before we proceed with it.

We have to work within the bounds for any given cell, what are these bounds ?

Bounds here simply means range of rows and cols through which we can iterate through to get all adjacent cells. We need to make sure these bounds never cross the board, else we will get an error or things might not work as expected.

So adjacent cells means each cell that touches current cell on sides or vertices. All the red cells are adjacent cells to the green cell in the middle as per the figure below.

  const getMinIdx = (idx: number) => {
    if (idx > 0) {
      return idx - 1;
    }
    return 0;
  };
  const getMaxIdx = (idx: number, maxLen: number) => {
    if (idx + 1 > maxLen - 1) {
      return maxLen - 1;
    }
    return idx + 1;
  };

  const getBounds = (row_idx: number, col_idx: number) => {
    return {
      row_min: getMinIdx(row_idx),
      col_min: getMinIdx(col_idx),
      row_max: getMaxIdx(row_idx, rows),
      col_max: getMaxIdx(col_idx, cols),
    };
  };

  function annotateWithMines(
    boardWithMines: Cell[][],
    minePositions: number[][],
  ) {
    for (let minePosition of minePositions) {
      const [row, col] = minePosition;
      const bounds = getBounds(row, col);
      const { row_min, row_max, col_min, col_max } = bounds;
      for (let row_idx = row_min; row_idx <= row_max; row_idx++) {
        for (let col_idx = col_min; col_idx <= col_max; col_idx++) {
          const adjacentCell = boardWithMines[row_idx][col_idx];
          switch (adjacentCell.type) {
            case CellType.count:
              const currentCount: number =
                +boardWithMines[row_idx][col_idx].text;
              boardWithMines[row_idx][col_idx].text = `${currentCount + 1}`;
              break;
            case CellType.empty:
              boardWithMines[row_idx][col_idx].text = "1";
              boardWithMines[row_idx][col_idx].type = CellType.count;
              break;
            case CellType.mine:
              break;
          }
        }
      }
    }
    return boardWithMines;
  }

We now have a board with mines and now we need to display this board with some html/ CSS,


  <div class="grid" style="--rows:{rows};--cols:{cols};--cell-size:{cellSize}">
    {#each board as rows}
      {#each rows as cell}
        <button
          tabindex={cell.clicked === CellClickState.clicked ? -1 : 0}
          on:mousedown={cell.clicked === CellClickState.not_clicked &&
          game_state === GameState.on
            ? handleCellClick
            : _noop}
          on:contextmenu|preventDefault
          data-row={cell.row}
          data-col={cell.col}
          class="cell"
          class:gameover={game_state !== GameState.on}
          class:clicked={cell.clicked === CellClickState.clicked}
          >{getCellContent(cell)}</button
        >
      {/each}
    {/each}
  </div>

<style>
  .grid {
    --border-width: 1px;
    display: grid;
    grid-template-rows: repeat(var(--rows), var(--cell-size));
    grid-template-columns: repeat(var(--cols), var(--cell-size));
    place-content: center;
    background-color: #333;
    color: #fff;
    width: calc(
      (var(--cols) * var(--cell-size)) + var(--border-width) * var(--cols)
    );
    height: calc(
      (var(--rows) * var(--cell-size)) + var(--border-width) * var(--rows)
    );
  }

  .cell {
    border: var(--border-width) solid #fff;
    overflow-wrap: break-word;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: grey;
    font-size: 20px;
  }

  .cell.gameover {
    pointer-events: none;
  }

  .cell:not(.clicked):hover {
    background-color: rgb(30 147 117 / 57%);
    cursor: pointer;
  }

  .cell.clicked {
    background-color: lightgrey;
  }

</style>

This renders a grid on page, and certain styles applied conditionally if a cell is clicked, flagged. You get a good old grid like in the screenshot below

Cell and the clicks...

Cell and its state is at the heart of the game. Let's see how to think in terms of various state a cell can have

A cell can have:

Empty content
Mine
Count - adjacent to a mine

A cell can be:

Open
Close

A cell can be:

Flagged
Not Flagged

export enum CellType {
    empty = 0,
    mine = 1,
    count = 2,
}

export enum CellClickState {
    clicked = 0,
    not_clicked = 1,
}
export enum CellSymbols {
    mine = "💣",
    flag = "🚩",
    empty = "",
    explode = "💥",
}

export enum FlagState {
    flagged = 0,
    not_flagged = 1,
}

export type Cell = {
    text: string;
    row: number;
    col: number;
    type: CellType;
    clicked: CellClickState;
    flagged: FlagState;
};

Rules for a cell:

On left click, click a cell opens and on a right click cell is flagged.
A flagged cell cannot be opened but only unflagged and then opened.
A click on empty cell should open all its adjacent empty cells until it hits a boundary of mine cells.
A click on cell with mine, should open all the mine with cell and that end the game

With this in mind, we can proceed with implementing a click handler for our cells


 const handleCellClick = (event: MouseEvent) => {
    switch (event.button) {
      case ClickType.left:
        handleLeftClick(event);
        break;
      case ClickType.right:
        handleRightClickonCell(event);
        break;
    }
    return;
  };

Simple enough to understand above function calls respective function mapped to each kind of click , left / right click


  const explodeAllMines = () => {
    for (let [row, col] of minePositions) {
      board[row][col] = {
        ...board[row][col],
        text: CellSymbols.explode,
      };
    }
  };

  const setGameLose = () => {
    game_state = GameState.lose;
  };


  const handleMineClick = () => {
    for (let [row, col] of minePositions) {
      board[row][col] = {
        ...board[row][col],
        clicked: CellClickState.clicked,
      };
    }
    setTimeout(() => {
      explodeAllMines();
      setGameLose();
    }, 300);
  };

  const clickEmptyCell = (row_idx: number, col_idx: number) => {
    // recursively click adjacent cells until:
    // 1. hit a boundary of mine counts - is it same as 3 ?
    // 2. cells are already clicked
    // 3. cells have mines - same as 1 maybe
    // 4. cells that are flagged - need to add a flag feature as well
    if (board[row_idx][col_idx].type === CellType.count) {
      return;
    }

    const { row_min, row_max, col_min, col_max } = getBounds(row_idx, col_idx);
    // loop over bounds to click each cell within the bounds
    for (let r_idx = row_min; r_idx <= row_max; r_idx++) {
      for (let c_idx = col_min; c_idx <= col_max; c_idx++) {
        const cell = board[r_idx][c_idx];
        if (
          ![CellType.mine].includes(cell.type) &&
          cell.flagged !== FlagState.flagged &&
          cell.clicked === CellClickState.not_clicked
        ) {
          board[r_idx][c_idx] = { ...cell, clicked: CellClickState.clicked };
          clickEmptyCell(r_idx, c_idx);
        }
      }
    }
  }

  const handleLeftClick = (event: MouseEvent) => {
    if (event.target instanceof HTMLButtonElement) {
      const row_idx = Number(event.target.dataset.row);
      const col_idx = Number(event.target.dataset.col);
      const cell = board[row_idx][col_idx];
      if (
        cell.clicked === CellClickState.not_clicked &&
        cell.flagged === FlagState.not_flagged
      ) {
        board[row_idx][col_idx] = {
          ...cell,
          clicked: CellClickState.clicked,
        };
        switch (cell.type) {
          case CellType.mine:
            handleMineClick();
            break;
          case CellType.empty:
            clickEmptyCell(row_idx, col_idx);
            break;
          case CellType.count:
            break;
          default:
            break;
        }
      }
    } else {
      return;
    }
  };

Left click handler - handles most of the game logic, it subdivided into 3 sections based on kind of cell the player clicks on:

Mine cell is clicked on
If a mine cell is clicked we call handleMineClick() function, that will open up all the mine cells, and after certain timeout we display an explosion icon, we stop the clock and set the game state to lost.
Empty cell is clicked on
If a empty cell is clicked on we need to recursively click adjacent empty cells until we hit a boundary of first counts. As per the screenshot, you could see when I click on the bottom corner cell, it opens up all the empty cells until the first boundary of counts.
Count cell is clicked on
Handling count cell is simply revealing the cell content beneath it.

Game state - Final bits and pieces

Game Difficulty can be configured on the basis of ratio of empty cells to mines, if the mines occupy 30% of the board, the game is too difficult for anyone to play, so we set it up incrementally higher up to 25%, which is still pretty high

export const GameDifficulty: Record<GameModes, GameConfig> = {
    baby: { rows: 5, cols: 5, mines: 2, cellSize: "40px" }, // 8% board covered with mines
    normal: { rows: 9, cols: 9, mines: 10, cellSize: "30px" }, // 12% covered with mines
    expert: { rows: 16, cols: 16, mines: 40, cellSize: "27px" }, // 15% covered with mines
    "cheat with an AI": { rows: 16, cols: 46, mines: 180, cellSize: "25px" }, // 25% covered with mines - u need to be only lucky to beat this
};

Game state is divided into 3 states - win, lose and on

export enum GameState {
    on = 0,
    win = 1,
    lose = 2,
}

export type GameConfig = {
    rows: number;
    cols: number;
    mines: number;
    cellSize: string;
};

We also add a timer for the game, that start as soon as the game starts, I have separated it in a timer.worker.js, but it might be an overkill for a small project like this. We also have a function to find the clicked cells count, to check if user has clicked all the cells without mines.

  let { rows, cols, mines, cellSize } = GameDifficulty[difficulty];
  let minePositions = uniqueRandomIndices(rows, cols, mines);
  let game_state: GameState = GameState.on;
  let board = annotateWithMines(
    createBoard(rows, cols, minePositions),
    minePositions,
  );
  let clickedCellsCount = 0;
  let winClickCount = rows * cols - minePositions.length;
  $: flaggedCellsCount = mines;
  $: clickedCellsCount = calculateClickedCellsCount(board);
  $: if (clickedCellsCount === winClickCount) {
    game_state = GameState.win;
  }
  let timer = 0;
  let intervalWorker: Worker;
  let incrementTimer = () => {
    timer += 1;
  };
  $: if (clickedCellsCount >= 1 && timer === 0) {
    intervalWorker = new Worker("timer.worker.js");
    intervalWorker.addEventListener("message", incrementTimer);
    intervalWorker.postMessage({
      type: "START_TIMER",
      payload: { interval: 1000 },
    });
  }
  $: timerDisplay = {
    minute: Math.round(timer / 60),
    seconds: Math.round(timer % 60),
  };

  $: if (game_state !== GameState.on) {
    intervalWorker?.postMessage({ type: "STOP_TIMER" });
  }

  const calculateClickedCellsCount = (board: Array<Array<Cell>>) => {
    return board.reduce((acc, arr) => {
      acc += arr.reduce((count, cell) => {
        count += cell.clicked === CellClickState.clicked ? 1 : 0;
        return count;
      }, 0);
      return acc;
    }, 0);
  };

And we have got a great minesweeper game now !!!

This is a very basic implementation of Minesweeper, we could do more with it, for starters we could represent the board state with bitmaps, which makes it infinitely...Could be a great coding exercise. Color coding the mine count could be a good detail to have, there are so many things to do with it...this should be a good base to work with...

In case you want to look at the complete code base you could fork / clone the repo from here:

https://github.com/ChinmayMoghe/svelte-minesweeper