Fix snippets to include element ID in the output sample. (#44787)

This fixes the snippet code output so that it includes the name of the element that it is a snippet for in the first line.

dev/snippets/config/templates/freeform.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateful_widget.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateful_widget_material.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateful_widget_scaffold.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateful_widget_scaffold_center.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateful_widget_scaffold_center_freeform_state.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateless_widget.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateless_widget_material.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateless_widget_scaffold.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/config/templates/stateless_widget_scaffold_center.tmpl

@@ -1,4 +1,4 @@
-// Flutter code sample for {{id}}
+// Flutter code sample for {{element}}
 
 {{description}}
 

dev/snippets/lib/snippets.dart

@@ -61,7 +61,7 @@ class SnippetGenerator {
   /// Injects the [injections] into the [template], and turning the
   /// "description" injection into a comment. Only used for
   /// [SnippetType.application] snippets.
-  String interpolateTemplate(List<_ComponentTuple> injections, String template) {
+  String interpolateTemplate(List<_ComponentTuple> injections, String template, Map<String, Object> metadata) {
     final RegExp moustacheRegExp = RegExp('{{([^}]+)}}');
     return template.replaceAllMapped(moustacheRegExp, (Match match) {
       if (match[1] == 'description') {
@@ -86,9 +86,9 @@ class SnippetGenerator {
         // mustache reference, since we want to allow the sections to be
         // "optional" in the input: users shouldn't be forced to add an empty
         // "```dart preamble" section if that section would be empty.
-        return injections
-            .firstWhere((_ComponentTuple tuple) => tuple.name == match[1], orElse: () => null)
-            ?.mergedContent ?? '';
+        final _ComponentTuple result = injections
+            .firstWhere((_ComponentTuple tuple) => tuple.name == match[1], orElse: () => null);
+        return result?.mergedContent ?? (metadata[match[1]] ?? '').toString();
       }
     }).trim();
   }
@@ -130,6 +130,7 @@ class SnippetGenerator {
       'language': language ?? 'dart',
       'serial': '',
       'id': metadata['id'],
+      'element': metadata['element'] ?? '',
       'app': '',
     };
     if (type == SnippetType.application) {
@@ -242,7 +243,7 @@ class SnippetGenerator {
           exit(1);
         }
         final String templateContents = _loadFileAsUtf8(templateFile);
-        String app = interpolateTemplate(snippetData, templateContents);
+        String app = interpolateTemplate(snippetData, templateContents, metadata);
 
         try {
           app = formatter.format(app);

dev/snippets/test/snippets_test.dart

@@ -27,10 +27,11 @@ void main() {
       configuration.skeletonsDirectory.createSync(recursive: true);
       template = File(path.join(configuration.templatesDirectory.path, 'template.tmpl'));
       template.writeAsStringSync('''
+// Flutter code sample for {{element}}
 
 {{description}}
 
-{{code-preamble}}
+{{code-my-preamble}}
 
 main() {
   {{code}}
@@ -78,6 +79,7 @@ void main() {
 }
 ```
 ''');
+      final File outputFile = File(path.join(tmpDir.absolute.path, 'snippet_out.txt'));
 
       final String html = generator.generate(
         inputFile,
@@ -85,7 +87,9 @@ void main() {
         template: 'template',
         metadata: <String, Object>{
           'id': 'id',
+          'element': 'MyElement',
         },
+        output: outputFile,
       );
       expect(html, contains('<div>HTML Bits</div>'));
       expect(html, contains('<div>More HTML Bits</div>'));
@@ -97,6 +101,12 @@ void main() {
               '&#47;&#47;\n'
               '&#47;&#47; On several lines.\n'));
       expect(html, contains('void main() {'));
+
+      final String outputContents = outputFile.readAsStringSync();
+      expect(outputContents, contains('// Flutter code sample for MyElement'));
+      expect(outputContents, contains('A description of the snippet.'));
+      expect(outputContents, contains('void main() {'));
+      expect(outputContents, contains("const String name = 'snippet';"));
     });
 
     test('generates sample snippets', () async {