Function serializeTransferState

devtools/src/app/transfer-state.ts:15–154

()

 * This function serializes the transfer state into the DOM.
 */
export function serializeTransferState(): void {
  const doc = inject(DOCUMENT);
  const appId = inject(APP_ID);
  const transferState = inject(TransferState);
  const httpClient = inject(HttpClient);

  // Object
  transferState.set(makeStateKey<any>('obj'), {
    appName: 'DevTools',
    appVersion: '0.0.1',
    appDescription: 'Angular DevTools',
  });

  // Array of primitives
  transferState.set(makeStateKey<any>('arr'), [1, 2, 3, 4, 5]);

  // Primitives — exercise each badge color and primitive renderer
  transferState.set(makeStateKey<any>('flag'), true);
  transferState.set(makeStateKey<any>('count'), 42);
  transferState.set(makeStateKey<any>('largeNumber'), 1234567890);
  transferState.set(makeStateKey<any>('greeting'), 'Hello, world!');
  transferState.set(makeStateKey<any>('nothing'), null);

  // Empty containers — exercise "{}" / "[]" preview
  transferState.set(makeStateKey<any>('emptyObj'), {});
  transferState.set(makeStateKey<any>('emptyArr'), []);

  // Unicode — exercises UTF-8 byte size (multi-byte characters)
  transferState.set(makeStateKey<any>('unicode'), '안녕하세요 🅰️ Angular ✨');

  // Long string — exercises wrapping and size (~500 B → kilobyte threshold nearby)
  transferState.set(
    makeStateKey<any>('longString'),
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. ' +
      'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
      'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ' +
      'ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit ' +
      'esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non ' +
      'proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
  );

  // Mixed array — primitives, null, and a nested object
  transferState.set(makeStateKey<any>('mixedArr'), [1, 'two', true, null, {three: 3}, [4, 5, 6]]);

  // Deeply nested object — exercises tree expansion levels
  transferState.set(makeStateKey<any>('deepNested'), {
    level1: {
      level2: {
        level3: {
          level4: {
            level5: {
              message: 'You found me!',
              path: ['level1', 'level2', 'level3', 'level4', 'level5'],
            },
          },
        },
      },
    },