262f12b4a9
This converts all remaining "## Sample code" segments into snippets, and fixes the snippet generator to handle multiple snippets in the same dartdoc block properly. I also generated, compiled, and ran each of the existing application samples, and fixed them up to be more useful and/or just run without errors. This PR fixes these problems with examples: 1. Switching tabs in a snippet now works if there is more than one snippet in a single dartdoc block. 2. Generation of snippet code now works if there is more than one snippet. 3. Contrast of text and links in the code sample block has been improved to recommended levels. 4. Added five new snippet templates, including a "freeform" template to make it possible to show examples that need to change the app instantiation. 5. Fixed several examples to run properly, a couple by adding the "Scaffold" widget to the template, a couple by just fixing their code. 6. Fixed visual look of some of the samples when they run by placing many samples inside of a Scaffold. 7. In order to make it easier to run locally, changed the sample analyzer to remove the contents of the supplied temp directory before running, since having files that hang around is problematic (only a problem when running locally with the `--temp` argument). 8. Added a `SampleCheckerException` class, and handle sample checking exceptions more gracefully. 9. Deprecated the old "## Sample code" designation, and added enforcement for the deprecation. 10. Removed unnecessary `new` from templates (although they never appeared in the samples thanks to dartfmt, but still). Fixes #26398 Fixes #27411
2.2 KiB
Snippet Tool
This is a dartdoc extension tool that takes code snippets and expands how they are presented so that Flutter can have more interactive and useful code snippets.
This takes code in dartdocs, like this:
/// {@tool snippet --template="stateless_widget"}
/// The following is a skeleton of a stateless widget subclass called `GreenFrog`.
/// ```dart
/// class GreenFrog extends StatelessWidget {
/// const GreenFrog({ Key key }) : super(key: key);
///
/// @override
/// Widget build(BuildContext context) {
/// return Container(color: const Color(0xFF2DBD3A));
/// }
/// }
/// ```
/// {@end-tool}
And converts it into something which has a nice visual presentation, and a button to automatically copy the sample to the clipboard.
It does this by processing the source input and emitting HTML for output,
which dartdoc places back into the documentation. Any options given to the
{@tool ...} directive are passed on verbatim to the tool.
To render the above, the snippets tool needs to render the code in a combination
of markdown and HTML, using the {@inject-html} dartdoc directive.
Templates
In order to support showing an entire app when you click on the right tab of the code snippet UI, we have to be able to insert the snippet into the template and instantiate the right parts.
To do this, there is a config/templates directory that
contains a list of templates. These templates represent an entire app that the
snippet can be placed into, basically a replacement for lib/main.dart in a
flutter app package.
Skeletons
A skeleton (in relation to this tool, in the config/skeletons directory) is an HTML template into which the snippet Dart code and description are interpolated, in order to display it nicely.
There is currently one skeleton for
application snippets and one for
sample
snippets, but there could be more. It uses moustache notation (e.g. {{code}})
to mark where the components to be interpolated into the template should go.
(It doesn't actually use the moustache package, since the only things that need substituting are simple strings, but it uses the same syntax).