Update template gen to use mustache

[dannyvv]

This PR updates the template generation for react-native-windows from regex replace to use the mustache template library.

Benefits

This has the following benefits:

• We can use conditionals and foreach in the template allowing for better expersivity
• This expresivity shows that we don't have to construct Xml fragments in Javascript anymore to be inserted by regex replace
• We don't need to have have a copy and edit for large differences like we had for experimental nuget, it is now a single template for each language.
• We can now generate a cpp template that use both nuget AND winUI3.

Research

There are several templating scheme's we could have chosen. We had a quick discussion and most favor was for mustache as it Mustashe is a well adtoped, lightweight library dedicated for templating.
Alternatives considered:

• js template expression: This would have required all files to become js programs that needed to be imported and evaluated. Since a lot of files contain data format or code, we would have likely had quite a few ugly escaping cases.
• t4: This would have reuquired visual studio to be installed on the users machine and therefore only work on windows. There were also some perf concerns and we would have to write and ship a standalone executable for the msbuild tasks so we can call it from javascript.

Future

In the future we hope this to be integrated with the react-native CLI templating scheme. At the moment there is only a very basic replacement scheme for a set of well defined variables, so at the moment it is not suitable. When we get to that point we'll see if we can leverage that or contribute some improvements in the templating for react native init.

Samples

If you want to run diffs before and after, please see the 'before' and 'after' folders in https://github.com/dannyvv/react-native-windows/tree/demo/MustachTemplatesWithDiff

Quick mustache tutorial:

We only use 4 mustach element: You run mustach via const text = mustache.render(inputText, obj); where obj is a regular javascript object. For example:

{
   name: 'you',
   condition1: true,
   condition2: false,
   myIds: [
    { id: 'abc' },
    { id: 'xyz' }
   ]
}

• The template Hello {{ name }}! will result in Hello you!.
• The template Hello {{#condition1}}you!{{/condition1}} will result in Hello you!
• The template Hello {{^condition2}}you!{{/condition2}} will result in Hello you!
• The template:

  MyIds:
  {{#myIds}}
  Id: {{ id }}
  {{/myIds}}
  

  will result in:

  MyIds
  Id: abc
  Id: xyz
  

Microsoft Reviewers: Open in CodeFlow

[dannyvv]

</Compile>

@acoates: There is a different between the current generated experimentalnuget and original version. The .filters file in experimentalnuget was missing:

  <ItemGroup>
    <Page Include="MainPage.xaml" />
  </ItemGroup>

I'm assuming that that was just a missed edit, or mixup. Please let me know if it is significant and I'll make it conditional.

---

Refers to: vnext/local-cli/generator-windows/templates/cs/proj/MyApp.csproj:133 in 5b22f0f. [](commit_id = 5b22f0f, deletion_comment = False)

[dannyvv]

I tried to handle the // clang-format off and // clang-format on cases with template logic, but I could not get a satisfactory line that clang-format was happy with. It would always mangle the conditional line before the off command and the closing conditional after the on command. It was pretty messy...
I therefore opted for a 1-off removal.

I considered a waterfall model as well where when mustach is on, and a tempaltes fields is set it would set the replacements to that value (else undefined) and it would run the old code. In the end I felt that that code would be a lot harder to read and understand vs the simple foreach and replace slighlty duplicated.

[asklar]

This PR updates the template generation for react-native-windows from regex replace to use the mustache template library.

@dannyvv can you please add this information to a howto markdown in /docs please?
and also for the codegen pretty please :)

[dannyvv]

This PR updates the template generation for react-native-windows from regex replace to use the mustache template library.

@dannyvv can you please add this information to a howto markdown in /docs please?
and also for the codegen pretty please :)

Will do.

[vmoroz]