fix(ng-lib): allow for a backslash in Transerstate contents (#1567)

ISSUES CLOSED: #1382, #1448
scullyio · Mar 28, 2022 · 5899c8e · 5899c8e
1 parent 02885f6
commit 5899c8e
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 82 deletions.
diff --git a/libs/ng-lib/src/lib/transfer-state/transfer-state.service.ts b/libs/ng-lib/src/lib/transfer-state/transfer-state.service.ts
@@ -170,7 +170,7 @@ export class TransferStateService {
 
   private saveState(newState) {
     if (isScullyRunning()) {
-      this.script.textContent = `{window['${SCULLY_SCRIPT_ID}']=_u(\`${SCULLY_STATE_START}${escapeHtml(
+      this.script.textContent = `{window['${SCULLY_SCRIPT_ID}']=_u(String.raw\`${SCULLY_STATE_START}${escapeHtml(
         JSON.stringify(newState)
       )}${SCULLY_STATE_END}\`);function _u(t){t=t.split('${SCULLY_STATE_START}')[1].split('${SCULLY_STATE_END}')[0];const u={'_~b~': "${'`'}",'_~q~': "'",'_~o~': '$','_~s~': '/','_~l~': '<','_~g~': '>'};return JSON.parse(t.replace(/_~d~/g,'\\\\"').replace(/_~[^]~/g, (s) => u[s]).replace(/\\n/g,'\\\\n').replace(/\\t/g,'\\\\t').replace(/\\r/g,'\\\\r'));}}`;
     }

diff --git a/libs/scully/src/lib/testData/users-testdata.ts b/libs/scully/src/lib/testData/users-testdata.ts
@@ -57,10 +57,10 @@ export const users = [
   {
     id: 2,
     name: 'Ervin `Howell`',
-    username: 'Antonette',
+    username: 'Antonette' + String.fromCharCode(92) + '4',
     email: '[email protected]',
     address: {
-      street: 'Victor Plains',
+      street: 'Victor Plains style="margin-left:0px;"',
       suite: 'Suite 879',
       city: 'Wisokyburgh',
       zipcode: '90566-7771',

diff --git a/libs/scully/src/lib/utils/startup/startup.ts b/libs/scully/src/lib/utils/startup/startup.ts
@@ -45,23 +45,21 @@ export const startScully = async (url?: string) => {
         printProgress(false, 'calculate timings');
         performance.mark('stopDuration');
         /** measure all performance checks */
-        try {
-          const i = performanceIds.size;
-          for (const id of performanceIds) {
+        const i = performanceIds.size;
+        for (const id of performanceIds) {
+          try {
             performance.measure(id, `start${id}`, `stop${id}`);
+          } catch (e) {
+            console.error(e);
+            captureException(e);
           }
-        } catch (e) {
-          console.error(e);
-          captureException(e);
         }
         return routes.length;
       })
       .catch(() => 0);
-    Promise.all([numberOfRoutesProm, durationProm])
-      .then(([numberOfRoutes, durations]) => resolve({ numberOfRoutes, durations }));
+    Promise.all([numberOfRoutesProm, durationProm]).then(([numberOfRoutes, durations]) => resolve({ numberOfRoutes, durations }));
     /** stop progress spinner. */
     numberOfRoutesProm.then(() => stopProgress());
-
   })
     .then(displayAndWriteStats)
     .catch((e) => {
@@ -72,12 +70,12 @@ export const startScully = async (url?: string) => {
     });
 };
 
-function displayAndWriteStats({ numberOfRoutes, durations }: { numberOfRoutes: number; durations: { [key: string]: number; }; }) {
+function displayAndWriteStats({ numberOfRoutes, durations }: { numberOfRoutes: number; durations: { [key: string]: number } }) {
   const pluginTimings = totalPluginTimes(durations);
   const duration = durations.Duration;
   // tslint:disable-next-line:variable-name
   const seconds = duration / 1000;
-  const renderDuration = pluginTimings['scullySystem:renderPlugin'] ?? durations.Render
+  const renderDuration = pluginTimings['scullySystem:renderPlugin'] ?? durations.Render;
   const singleTime = renderDuration / numberOfRoutes;
   const routesProSecond = Math.ceil((1000 / singleTime) * 100) / 100;
   // console.table(durations)
@@ -90,18 +88,22 @@ Total time used ${yellow(Math.floor(seconds * 100) / 100)} seconds
   Rendering the pages took ${logSeconds(renderDuration)}
   That is ${yellow(routesProSecond)} pages per second,
   or ${yellow(Math.ceil(singleTime))} milliseconds for each page.
-  ${durations.Traverse
+  ${
+    durations.Traverse
       ? `
   Finding routes in the angular app took ${logSeconds(durations.Traverse)}`
-      : ''}
+      : ''
+  }
   Pulling in route-data took ${logSeconds(durations.Discovery)}
 
-${watch
-      ? `The server is available on "${yellow(`http${ssl ? 's' : ''}://${scullyConfig.hostName}:${scullyConfig.staticPort}/`)}"
+${
+  watch
+    ? `The server is available on "${yellow(`http${ssl ? 's' : ''}://${scullyConfig.hostName}:${scullyConfig.staticPort}/`)}"
 ${yellow('------------------------------------------------------------')}
 Press ${green('r')} for re-run Scully, or ${green('q')} for close the servers.
 ${yellow('------------------------------------------------------------')}`
-      : ''}
+    : ''
+}
 `);
   if (stats) {
     const scullyStatsFilePath = join(scullyConfig.homeFolder, 'scullyStats.json');
@@ -114,12 +116,12 @@ ${yellow('------------------------------------------------------------')}`
       renderingPages: durations.Render / 1000,
       pluginTimings,
     };
-    Object.entries(pluginTimings).forEach(([name, duration]) => log(`${name.padEnd(40, ' ')} - ${(Math.floor(duration * 100) / 100).toString().padStart(10, ' ')}`)
+    Object.entries(pluginTimings).forEach(([name, duration]) =>
+      log(`${name.padEnd(40, ' ')} - ${(Math.floor(duration * 100) / 100).toString().padStart(10, ' ')}`)
     );
     writeFileSync(scullyStatsFilePath, JSON.stringify(scullyStats, undefined, 4));
   }
-};
-
+}
 
 function measurePerformance(resolve: (value?: unknown) => void): PerformanceObserverCallback {
   return (list, observer) => {