[ReadonlyArray.ts] flatten can trigger RangeError: Maximum call stack size exceeded

[christiantakle]

🐛 Bug report

Current Behavior

flatten( [ <large-inner-array>, ...] ) trigger

RangeError: Maximum call stack size exceeded

Expected behavior

Not to blow up.

Reproducible example

import * as RA from "fp-ts/ReadonlyArray";

const value = {};
type Inner = Array<typeof value>;
// const a: Array<Array<typeof value>> = [new Array(112201).fill(value)];
/**
 * 112201, the number that failed in production and Apple  M1 Max.
 * I had to increase the number to see a similar failure on my desktop workstation hence the
 * `* 2`
 */
const ass: Array<Inner> = [new Array(112201 * 2).fill(value)];

const main = () => {
  console.log({ assLength: ass.length });
  try {
    const as = RA.chainWithIndex((_, x: Inner) => x)(ass);
    console.log(as.length);
  } catch (err: any) {
    console.log("[original][catch]", err.message);
  }
};

main();

Smaller example of the exception without using fp-ts:

// b.js
const xs = [];
xs.push(...new Array(100_000 * 2).fill(0));

❯ node b.js
/tmp/b.js:2
xs.push(...new Array(100_000 * 2).fill(0));
   ^

RangeError: Maximum call stack size exceeded
    at Object.<anonymous> (/tmp/b.js:2:4)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49

Node.js v20.11.1

Suggested solution(s)

Use nested `for` loop

Your environment

Which versions of fp-ts are affected by this issue?

All versions that include the current implementation.

Did this work in previous versions of fp-ts?

Don't think so but have not seen it since it depends on input.

Software	Version(s)
fp-ts	2.16.3
TypeScript	5.4.2