🚀 Allow to pass option as Json

packages/action/__tests__/__snapshots__/outputsOptions.spec.ts.snap

@@ -1,17 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should parse /out.svg?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9 1`] = `
+exports[`should parse /out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]} 1`] = `
 Object {
   "drawOptions": Object {
     "colorDotBorder": "#1b1f230a",
     "colorDots": Array [
-      "#bfd6f6",
+      "#000",
-      "#8dbdff",
+      "#111",
-      "#64a1f4",
+      "#222",
-      "#4b91f1",
+      "#333",
-      "#3c7dd9",
+      "#444",
     ],
-    "colorEmpty": "#bfd6f6",
+    "colorEmpty": "#000",
+    "colorSnake": "yellow",
+    "dark": undefined,
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "/out.svg",
+  "format": "svg",
+  "gifOptions": Object {
+    "frameDuration": 100,
+    "step": 1,
+  },
+}
+`;
+
+exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444 1`] = `
+Object {
+  "drawOptions": Object {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": Array [
+      "#000",
+      "#111",
+      "#222",
+      "#333",
+      "#444",
+    ],
+    "colorEmpty": "#000",
     "colorSnake": "orange",
     "dark": undefined,
     "sizeCell": 16,
@@ -27,6 +54,42 @@ Object {
 }
 `;
 
+exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44 1`] = `
+Object {
+  "drawOptions": Object {
+    "colorDotBorder": "#1b1f230a",
+    "colorDots": Array [
+      "#000",
+      "#111",
+      "#222",
+      "#333",
+      "#444",
+    ],
+    "colorEmpty": "#000",
+    "colorSnake": "orange",
+    "dark": Object {
+      "colorDots": Array [
+        "#a00",
+        "#a11",
+        "#a22",
+        "#a33",
+        "#a44",
+      ],
+      "colorEmpty": "#a00",
+    },
+    "sizeCell": 16,
+    "sizeDot": 12,
+    "sizeDotBorderRadius": 2,
+  },
+  "filename": "/out.svg",
+  "format": "svg",
+  "gifOptions": Object {
+    "frameDuration": 100,
+    "step": 1,
+  },
+}
+`;
+
 exports[`should parse path/to/out.gif 1`] = `
 Object {
   "drawOptions": Object {

packages/action/__tests__/outputsOptions.spec.ts

@@ -3,7 +3,11 @@ import { parseEntry } from "../outputsOptions";
 [
   "path/to/out.gif",
 
-  "/out.svg?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9",
+  "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444",
+
+  `/out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]}`,
+
+  "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44",
 ].forEach((entry) =>
   it(`should parse ${entry}`, () => {
     expect(parseEntry(entry)).toMatchSnapshot();

packages/action/outputsOptions.ts

@@ -4,12 +4,24 @@ import { palettes } from "./palettes";
 export const parseOutputsOption = (lines: string[]) => lines.map(parseEntry);
 
 export const parseEntry = (entry: string) => {
-  const m = entry.trim().match(/^(.+\.(svg|gif))(\?.*)?$/);
+  const m = entry.trim().match(/^(.+\.(svg|gif))(\?(.*))?$/);
   if (!m) return null;
 
-  const [_, filename, format, query] = m;
+  const [, filename, format, , query] = m;
 
-  const sp = new URLSearchParams(query || "");
+  let sp = new URLSearchParams(query || "");
+
+  try {
+    const o = JSON.parse(query);
+
+    if (Array.isArray(o.color_dots)) o.color_dots = o.color_dots.join(",");
+    if (Array.isArray(o.dark_color_dots))
+      o.dark_color_dots = o.dark_color_dots.join(",");
+
+    sp = new URLSearchParams(o);
+  } catch (err) {
+    if (!(err instanceof SyntaxError)) throw err;
+  }
 
   const drawOptions: DrawOptions = {
     sizeDotBorderRadius: 2,