fix(ivy): i18n - update the compiler to output MessageIds (#32594)

Now that the `$localize` translations are `MessageId` based the
compiler must render `MessageId`s in its generated `$localize` code.
This is because the `MessageId` used by the compiler is computed
from information that does not get passed through to the `$localize`
tagged string.

For example, the generated code for the following template

```html
<div id="static" i18n-title="m|d" title="introduction"></div>
```

will contain these localization statements

```ts
if (ngI18nClosureMode) {
  /**
    * @desc d
    * @meaning m
    */
  const MSG_EXTERNAL_8809028065680254561$$APP_SPEC_TS_1 = goog.getMsg("introduction");
  I18N_1 = MSG_EXTERNAL_8809028065680254561$$APP_SPEC_TS_1;
}
else {
  I18N_1 = $localize \`:m|d@@8809028065680254561:introduction\`;
}
```

Since `$localize` is not able to accurately regenerate the source-message
(and so the `MessageId`) from the generated code, it must rely upon the
`MessageId` being provided explicitly in the generated code.

The compiler now prepends all localized messages with a "metadata block"
containing the id (and the meaning and description if defined).

Note that this metadata block will also allow translation file extraction
from the compiled code - rather than relying on the legacy ViewEngine
extraction code. (This will be implemented post-v9).

Although these metadata blocks add to the initial code size, compile-time
inlining will completely remove these strings and so will not impact on
production bundle size.

PR Close #32594

packages/compiler/src/render3/view/i18n/localize_utils.ts

@@ -9,6 +9,7 @@ import * as i18n from '../../../i18n/i18n_ast';
 import * as o from '../../../output/output_ast';
 
 import {serializeIcuNode} from './icu_serializer';
+import {metaFromI18nMessage, serializeI18nMeta} from './meta';
 import {formatI18nPlaceholderName} from './util';
 
 export function createLocalizeStatements(
@@ -16,15 +17,13 @@ export function createLocalizeStatements(
     params: {[name: string]: o.Expression}): o.Statement[] {
   const statements = [];
 
-  // TODO: re-enable these comments when we have a plan on how to make them work so that Closure
-  // compiler doesn't complain about the JSDOC comments.
-
-  // const jsdocComment = i18nMetaToDocStmt(metaFromI18nMessage(message));
-  // if (jsdocComment !== null) {
-  //   statements.push(jsdocComment);
-  // }
+  const metaBlock = serializeI18nMeta(metaFromI18nMessage(message));
 
   const {messageParts, placeHolders} = serializeI18nMessageForLocalize(message);
+
+  // Update first message part with metadata
+  messageParts[0] = `:${metaBlock}:${messageParts[0]}`;
+
   statements.push(new o.ExpressionStatement(variable.set(
       o.localizedString(messageParts, placeHolders, placeHolders.map(ph => params[ph])))));
 
@@ -132,4 +131,4 @@ function processMessagePieces(pieces: MessagePiece[]):
     messageParts.push('');
   }
   return {messageParts, placeHolders};
-}
+}

packages/compiler/src/render3/view/i18n/meta.ts

@@ -178,6 +178,23 @@ export function parseI18nMeta(meta?: string): I18nMeta {
   return {id, meaning, description};
 }
 
+/**
+ * Serialize the given `meta` into a string that can be used in a `$localize` tagged string metadata
+ * block. The format is the same as that parsed by `parseI18nMeta()`.
+ *
+ * @param meta The metadata to serialize
+ */
+export function serializeI18nMeta(meta: I18nMeta): string {
+  let metaBlock = meta.description || '';
+  if (meta.meaning) {
+    metaBlock = `${meta.meaning}|${metaBlock}`;
+  }
+  if (meta.id) {
+    metaBlock = `${metaBlock}@@${meta.id}`;
+  }
+  return metaBlock;
+}
+
 // Converts i18n meta information for a message (id, description, meaning)
 // to a JsDoc statement formatted as expected by the Closure compiler.
 export function i18nMetaToDocStmt(meta: I18nMeta): o.JSDocCommentStmt|null {