Merge pull request #14615 from jonspalmer/server_string_encoding

Server:  Fix string escaping in CSF compiler

app/server/src/lib/compiler/__testfixtures__/a11y.snapshot

@@ -3,10 +3,10 @@
 exports[`json-to-csf-compiler a11y.json 1`] = `
 "
 export default {
-  title: 'Addons/a11y',
+  title: \\"Addons/a11y\\",
   parameters: {
     options: {
-      selectedPanel: 'storybook/a11y/panel'
+      selectedPanel: \\"storybook/a11y/panel\\"
     }
   }
 };
@@ -15,7 +15,7 @@ export const Label = (args) => {};
 Label.storyName = 'Label';
 Label.parameters = {
   server: {
-    id: 'addons/a11y/label'
+    id: \\"addons/a11y/label\\"
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/actions.snapshot

@@ -3,10 +3,10 @@
 exports[`json-to-csf-compiler actions.json 1`] = `
 "
 export default {
-  title: 'Addons/Actions',
+  title: \\"Addons/Actions\\",
   parameters: {
     options: {
-      selectedPanel: 'storybook/actions/panel'
+      selectedPanel: \\"storybook/actions/panel\\"
     }
   }
 };
@@ -15,14 +15,14 @@ export const Multiple_actions_config = (args) => {};
 Multiple_actions_config.storyName = 'Multiple actions + config';
 Multiple_actions_config.parameters = {
   actions: [
-    'click',
-    'contextmenu',
+    \\"click\\",
+    \\"contextmenu\\",
     {
       clearOnStoryChange: false
     }
   ],
   server: {
-    id: 'addons/actions/story3'
+    id: \\"addons/actions/story3\\"
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/backgrounds.snapshot

@@ -3,16 +3,16 @@
 exports[`json-to-csf-compiler backgrounds.json 1`] = `
 "
 export default {
-  title: 'Addons/Backgrounds',
+  title: \\"Addons/Backgrounds\\",
   parameters: {
     backgrounds: [
       {
-        name: 'light',
-        value: '#eeeeee'
+        name: \\"light\\",
+        value: \\"#eeeeee\\"
       },
       {
-        name: 'dark',
-        value: '#222222',
+        name: \\"dark\\",
+        value: \\"#222222\\",
         default: true
       }
     ]
@@ -23,7 +23,7 @@ export const Story_1 = (args) => {};
 Story_1.storyName = 'Story 1';
 Story_1.parameters = {
   server: {
-    id: 'addons/backgrounds/story1'
+    id: \\"addons/backgrounds/story1\\"
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/controls.snapshot

@@ -3,10 +3,10 @@
 exports[`json-to-csf-compiler controls.json 1`] = `
 "
 export default {
-  title: 'Addons/Controls',
+  title: \\"Addons/Controls\\",
   parameters: {
     options: {
-      selectedPanel: 'storybook/controls/panel'
+      selectedPanel: \\"storybook/controls/panel\\"
     }
   }
 };
@@ -15,44 +15,44 @@ export const Simple = (args) => {};
 Simple.storyName = 'Simple';
 Simple.parameters = {
   server: {
-    id: 'addons/controls/simple'
+    id: \\"addons/controls/simple\\"
   }
 };
 Simple.args = {
-  name: 'John Doe',
-  birthday: '1960-12-25T00:42:03.600Z',
-  favorite_color: 'red',
+  name: \\"John Doe\\",
+  birthday: \\"1960-12-25T00:42:03.600Z\\",
+  favorite_color: \\"red\\",
   active: true,
   pets: 2,
   sports: [
-    'football',
-    'baseball'
+    \\"football\\",
+    \\"baseball\\"
   ],
-  favorite_food: 'Ice Cream',
+  favorite_food: \\"Ice Cream\\",
   other_things: {
-    hair: 'Brown',
-    eyes: 'Blue'
+    hair: \\"Brown\\",
+    eyes: \\"Blue\\"
   }
 };
 Simple.argTypes = {
   birthday: {
     control: {
-      type: 'date'
+      type: \\"date\\"
     }
   },
   favorite_color: {
     control: {
-      type: 'color'
+      type: \\"color\\"
     }
   },
   favorite_food: {
     control: {
-      type: 'select',
+      type: \\"select\\",
       options: {
-        hot_dog: 'Hot Dog',
-        pizza: 'Pizza',
-        burgers: 'Burgers',
-        ice_cream: 'Ice Cream'
+        hot_dog: \\"Hot Dog\\",
+        pizza: \\"Pizza\\",
+        burgers: \\"Burgers\\",
+        ice_cream: \\"Ice Cream\\"
       }
     }
   }

app/server/src/lib/compiler/__testfixtures__/kitchen_sink.snapshot

@@ -3,25 +3,25 @@
 exports[`json-to-csf-compiler kitchen_sink.json 1`] = `
 "
 export default {
-  title: 'Kitchen Sink',
+  title: \\"Kitchen Sink\\",
   parameters: {
     backgrounds: [
       {
-        name: 'light',
-        value: '#eeeeee'
+        name: \\"light\\",
+        value: \\"#eeeeee\\"
       },
       {
-        name: 'dark',
-        value: '#222222',
+        name: \\"dark\\",
+        value: \\"#222222\\",
         default: true
       }
     ],
     options: {
-      selectedPanel: 'storybook/a11y/panel'
+      selectedPanel: \\"storybook/a11y/panel\\"
     },
     server: {
       params: {
-        color: 'red'
+        color: \\"red\\"
       }
     }
   }
@@ -31,21 +31,21 @@ export const Heading = (args) => {};
 Heading.storyName = 'Heading';
 Heading.parameters = {
   actions: [
-    'click',
-    'contextmenu',
+    \\"click\\",
+    \\"contextmenu\\",
     {
       clearOnStoryChange: false
     }
   ],
   server: {
-    id: 'demo/heading',
+    id: \\"demo/heading\\",
     params: {
-      color: 'orange'
+      color: \\"orange\\"
     }
   }
 };
 Heading.args = {
-  name: 'John Doe',
+  name: \\"John Doe\\",
   age: 44
 };
 
@@ -53,7 +53,7 @@ export const Button = (args) => {};
 Button.storyName = 'Button';
 Button.parameters = {
   server: {
-    id: 'demo/button'
+    id: \\"demo/button\\"
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/links.snapshot

@@ -3,14 +3,14 @@
 exports[`json-to-csf-compiler links.json 1`] = `
 "
 export default {
-  title: 'Welcome',
+  title: \\"Welcome\\",
 };
 
 export const Welcome = (args) => {};
 Welcome.storyName = 'Welcome';
 Welcome.parameters = {
   server: {
-    id: 'welcome/welcome'
+    id: \\"welcome/welcome\\"
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/multiple_stories.snapshot

@@ -3,14 +3,14 @@
 exports[`json-to-csf-compiler multiple_stories.json 1`] = `
 "
 export default {
-  title: 'Demo',
+  title: \\"Demo\\",
 };
 
 export const Heading = (args) => {};
 Heading.storyName = 'Heading';
 Heading.parameters = {
   server: {
-    id: 'demo/heading'
+    id: \\"demo/heading\\"
   }
 };
 
@@ -18,7 +18,7 @@ export const Headings = (args) => {};
 Headings.storyName = 'Headings';
 Headings.parameters = {
   server: {
-    id: 'demo/headings'
+    id: \\"demo/headings\\"
   }
 };
 
@@ -26,7 +26,7 @@ export const Button = (args) => {};
 Button.storyName = 'Button';
 Button.parameters = {
   server: {
-    id: 'demo/button'
+    id: \\"demo/button\\"
   }
 };
 "

app/server/src/lib/compiler/__testfixtures__/params.snapshot

@@ -3,11 +3,11 @@
 exports[`json-to-csf-compiler params.json 1`] = `
 "
 export default {
-  title: 'Params',
+  title: \\"Params\\",
   parameters: {
     server: {
       params: {
-        color: 'red'
+        color: \\"red\\"
       }
     }
   }
@@ -17,9 +17,9 @@ export const Story = (args) => {};
 Story.storyName = 'Story';
 Story.parameters = {
   server: {
-    id: 'params/story',
+    id: \\"params/story\\",
     params: {
-      message: 'Hello World'
+      message: \\"Hello World\\"
     }
   }
 };

app/server/src/lib/compiler/__testfixtures__/params_override.snapshot

@@ -3,11 +3,11 @@
 exports[`json-to-csf-compiler params_override.json 1`] = `
 "
 export default {
-  title: 'Params',
+  title: \\"Params\\",
   parameters: {
     server: {
       params: {
-        color: 'red'
+        color: \\"red\\"
       }
     }
   }
@@ -17,10 +17,10 @@ export const Override = (args) => {};
 Override.storyName = 'Override';
 Override.parameters = {
   server: {
-    id: 'params/override',
+    id: \\"params/override\\",
     params: {
-      message: 'Hello World',
-      color: 'green'
+      message: \\"Hello World\\",
+      color: \\"green\\"
     }
   }
 };

app/server/src/lib/compiler/stringifier.ts

@@ -5,7 +5,7 @@ const { identifier } = require('safe-identifier');
 
 export function stringifyObject(object: any, level = 0, excludeOuterParams = false): string {
   if (typeof object === 'string') {
-    return `'${object}'`;
+    return JSON.stringify(object);
   }
   const indent = '  '.repeat(level);
   if (Array.isArray(object)) {
@@ -53,7 +53,7 @@ export function stringifyDefault(section: StorybookSection): string {
 
   return dedent`
   export default {
-    title: '${title}',${decoratorsString}${optionsString}
+    title: ${JSON.stringify(title)},${decoratorsString}${optionsString}
   };
   
   `;