Fix boolean arg types parsing and encoding

code/lib/preview-api/src/modules/preview-web/parseArgsParam.test.ts

@@ -25,6 +25,16 @@ describe('parseArgsParam', () => {
     expect(args).toStrictEqual({ key: undefined });
   });
 
+  it('parses true', () => {
+    const args = parseArgsParam('key:!true');
+    expect(args).toStrictEqual({ key: true });
+  });
+
+  it('parses false', () => {
+    const args = parseArgsParam('key:!false');
+    expect(args).toStrictEqual({ key: false });
+  });
+
   it('parses hex color values', () => {
     const args = parseArgsParam('key:!hex(ff4785)');
     expect(args).toStrictEqual({ key: '#ff4785' });

code/lib/preview-api/src/modules/preview-web/parseArgsParam.ts

@@ -43,6 +43,8 @@ const QS_OPTIONS = {
     if (type === 'value' && str.startsWith('!')) {
       if (str === '!undefined') return undefined;
       if (str === '!null') return null;
+      if (str === '!true') return true;
+      if (str === '!false') return false;
       if (str.startsWith('!date(') && str.endsWith(')')) return new Date(str.slice(6, -1));
       if (str.startsWith('!hex(') && str.endsWith(')')) return `#${str.slice(5, -1)}`;
 

code/lib/router/src/utils.test.ts

@@ -134,7 +134,7 @@ describe('buildArgsParam', () => {
 
   it('builds booleans', () => {
     const param = buildArgsParam({}, { yes: true, no: false });
-    expect(param).toEqual('yes:true;no:false');
+    expect(param).toEqual('yes:!true;no:!false');
   });
 
   it('builds arrays', () => {

code/lib/router/src/utils.ts

@@ -100,6 +100,11 @@ const encodeSpecialValues = (value: unknown): any => {
     if (COLOR_REGEXP.test(value)) return `!${value.replace(/[\s%]/g, '')}`;
     return value;
   }
+
+  if (typeof value === 'boolean') {
+    return `!${value}`;
+  }
+
   if (Array.isArray(value)) return value.map(encodeSpecialValues);
   if (isPlainObject(value)) {
     return Object.entries(value as Record<string, any>).reduce(