Truncate snippet options during docs generation

Author: matijaoe

README.md

@@ -816,7 +816,7 @@ fetch('$1'$2).then(res => res.json())
 <td>
 
   ```javascript
-const ${1|data,{ data }|} = await fetch('$2'$3).then(res => res.json())
+const ${1|data,...|} = await fetch('$2'$3).then(res => res.json())
   ```
 
 </td>
@@ -2276,7 +2276,7 @@ Array.isArray($0)
 <td>
 
   ```javascript
-typeof ${1:value} === '${2|undefined,string,number,object,function,boolean,symbol,bigint|}'
+typeof ${1:value} === '${2|undefined,...|}'
   ```
 
 </td>
@@ -2430,7 +2430,7 @@ Internationalization API
 <td>
 
   ```javascript
-new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}'$3).format($2);
+new Intl.NumberFormat('${1|en-US,...|}'$3).format($2);
   ```
 
 </td>
@@ -2442,8 +2442,8 @@ new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP
 <td>
 
   ```javascript
-new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {
-	style: '${3|decimal,currency,percent,unit|}',$4
+new Intl.NumberFormat('${1|en-US,...|}', {
+	style: '${3|decimal,...|}',$4
 }).format($2);
   ```
 
@@ -2456,9 +2456,9 @@ new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP
 <td>
 
   ```javascript
-new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {
+new Intl.NumberFormat('${1|en-US,...|}', {
 	style: 'currency',
-	currency: '${3|USD,EUR,GBP,AUD,CAD,JPY|}',$4
+	currency: '${3|USD,...|}',$4
 }).format($2);
   ```
 
@@ -2471,7 +2471,7 @@ new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP
 <td>
 
   ```javascript
-new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {
+new Intl.NumberFormat('${1|en-US,...|}', {
 	style: 'percent',$3
 }).format($2);
   ```
@@ -2485,10 +2485,10 @@ new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP
 <td>
 
   ```javascript
-new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {
+new Intl.NumberFormat('${1|en-US,...|}', {
 	style: 'unit',
-	unit: '${3|acceleration-g-force,acceleration-meter-per-square-second,angle-arc-minute,angle-arc-second,angle-degree,angle-radian,angle-revolution,area-acre,area-hectare,area-square-centimeter,area-square-foot,area-square-inch,area-square-kilometer,area-square-meter,area-square-mile,area-square-yard,area-dunam,concentr-karat,concentr-milligram-ofglucose-per-deciliter,concentr-millimole-per-liter,concentr-percent,concentr-permille,concentr-permyriad,concentr-permillion,concentr-mole,concentr-item,concentr-portion,concentr-ofglucose,consumption-liter-per-100-kilometer,consumption-liter-per-kilometer,consumption-mile-per-gallon,consumption-mile-per-gallon-imperial,digital-bit,digital-byte,digital-gigabit,digital-gigabyte,digital-kilobit,digital-kilobyte,digital-megabit,digital-megabyte,digital-petabyte,digital-terabit,digital-terabyte,duration-century,duration-decade,duration-day,duration-day-person,duration-hour,duration-microsecond,duration-millisecond,duration-minute,duration-month,duration-month-person,duration-nanosecond,duration-quarter,duration-second,duration-week,duration-week-person,duration-year,duration-year-person,electric-ampere,electric-milliampere,electric-ohm,electric-volt,energy-calorie,energy-foodcalorie,energy-joule,energy-kilocalorie,energy-kilojoule,energy-kilowatt-hour,energy-electronvolt,energy-therm-us,energy-british-thermal-unit,force-pound-force,force-newton,force-kilowatt-hour-per-100-kilometer,frequency-gigahertz,frequency-hertz,frequency-kilohertz,frequency-megahertz,graphics-dot,graphics-dot-per-centimeter,graphics-dot-per-inch,graphics-em,graphics-megapixel,graphics-pixel,graphics-pixel-per-centimeter,graphics-pixel-per-inch,length-100-kilometer,length-astronomical-unit,length-centimeter,length-decimeter,length-fathom,length-foot,length-furlong,length-inch,length-kilometer,length-light-year,length-meter,length-micrometer,length-mile,length-mile-scandinavian,length-millimeter,length-nanometer,length-nautical-mile,length-parsec,length-picometer,length-point,length-yard,length-earth-radius,length-solar-radius,light-candela,light-lumen,light-lux,light-solar-luminosity,mass-carat,mass-grain,mass-gram,mass-kilogram,mass-tonne,mass-microgram,mass-milligram,mass-ounce,mass-ounce-troy,mass-pound,mass-stone,mass-ton,mass-dalton,mass-earth-mass,mass-solar-mass,power-gigawatt,power-horsepower,power-kilowatt,power-megawatt,power-milliwatt,power-watt,pressure-atmosphere,pressure-hectopascal,pressure-inch-ofhg,pressure-bar,pressure-millibar,pressure-millimeter-ofhg,pressure-pound-force-per-square-inch,pressure-pascal,pressure-kilopascal,pressure-megapascal,pressure-ofhg,speed-kilometer-per-hour,speed-knot,speed-meter-per-second,speed-mile-per-hour,temperature-celsius,temperature-fahrenheit,temperature-generic,temperature-kelvin,torque-pound-force-foot,torque-newton-meter,volume-acre-foot,volume-bushel,volume-centiliter,volume-cubic-centimeter,volume-cubic-foot,volume-cubic-inch,volume-cubic-kilometer,volume-cubic-meter,volume-cubic-mile,volume-cubic-yard,volume-cup,volume-cup-metric,volume-deciliter,volume-dessert-spoon,volume-dessert-spoon-imperial,volume-drop,volume-dram,volume-jigger,volume-pinch,volume-quart-imperial,volume-fluid-ounce,volume-fluid-ounce-imperial,volume-gallon,volume-gallon-imperial,volume-hectoliter,volume-liter,volume-megaliter,volume-milliliter,volume-pint,volume-pint-metric,volume-quart,volume-tablespoon,volume-teaspoon,volume-barrel|}',
-	unitDisplay: '${4|long,short,narrow|}',$0
+	unit: '${3|acceleration-g-force,...|}',
+	unitDisplay: '${4|long,...|}',$0
 }).format($2);
   ```
 
@@ -2501,7 +2501,7 @@ new Intl.NumberFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP
 <td>
 
   ```javascript
-new Intl.DateTimeFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}'$3).format($2);
+new Intl.DateTimeFormat('${1|en-US,...|}'$3).format($2);
   ```
 
 </td>
@@ -2513,7 +2513,7 @@ new Intl.DateTimeFormat('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-
 <td>
 
   ```javascript
-new Intl.DateTimeFormat ('${1|en-US,en-GB,en-CA,de-DE,fr-FR,es-ES,zh-CN,ru-RU,ja-JP|}', {
+new Intl.DateTimeFormat ('${1|en-US,...|}', {
 	dateStyle: '$3',$0
 }).format($2);
   ```
@@ -2586,7 +2586,7 @@ $1.at(${2:0})
 <td>
 
   ```javascript
-parseInt($1, ${2|10,2,8,16|})
+parseInt($1, ${2|10,...|})
   ```
 
 </td>
@@ -2622,7 +2622,7 @@ parseFloat($1)
 <td>
 
   ```javascript
-throw new ${1|Error,TypeError,RangeError|}($0);
+throw new ${1|Error,...|}($0);
   ```
 
 </td>

src/docs-gen/snippets.ts

@@ -18,11 +18,19 @@ type SnippetRow = {
   body: string | string[];
 };
 
+const truncateOptions = (str: string) => {
+  const regex = /\|([^|]+)\|/g;
+  return str.replace(regex, (_match, p1) => {
+    const [first] = p1.split(",").map((o: string) => o.trim());
+    return `|${first},...|`;
+  });
+};
+
 const snippetRow = ({ prefix, name, body }: SnippetRow) => {
   const cols = joinByNewLine([
     $colCode(prefix),
     $col(name),
-    $colCodeBlock(parseMultiline(body)),
+    $colCodeBlock(truncateOptions(parseMultiline(body))),
   ]);
 
   return $row(cols);