From da3412c0617abe113b9e0554da68d3ec60a99de7 Mon Sep 17 00:00:00 2001 From: Per Classon Date: Thu, 19 Dec 2019 09:17:10 +0100 Subject: [PATCH] [Gallery] Convert the Makefile to instead use the Dart workflow package Grinder. (#191) * Replace Makefile with the Dart workflows package Grinder --- gallery/README.md | 72 ++++++++++++++++++++++------ gallery/codeviewer_cli/README.md | 28 +++++++++-- gallery/gallery/Makefile | 35 -------------- gallery/gallery/lib/l10n/README.md | 36 +++++++------- gallery/gallery/pubspec.lock | 14 ++++++ gallery/gallery/pubspec.yaml | 1 + gallery/gallery/tool/grind.dart | 77 ++++++++++++++++++++++++++++++ gallery/l10n_cli/README.md | 5 +- 8 files changed, 192 insertions(+), 76 deletions(-) delete mode 100644 gallery/gallery/Makefile create mode 100644 gallery/gallery/tool/grind.dart diff --git a/gallery/README.md b/gallery/README.md index 4698ea2df..7f140ae37 100644 --- a/gallery/README.md +++ b/gallery/README.md @@ -2,29 +2,71 @@ Flutter Gallery is a resource to help developers evaluate and use Flutter. It is a collection of material design widgets, behaviors, and vignettes -implemented with Flutter. We often get asked how one can see Flutter in -action, and this gallery demonstrates what Flutter provides and how it -behaves in the wild. +implemented with Flutter. We often get asked how one can see Flutter in action, +and this gallery demonstrates what Flutter provides and how it behaves in the +wild. ## Supported Platforms -The Flutter Gallery application has been built to support multiple platforms. This includes: +The Flutter Gallery application has been built to support multiple platforms. +This includes: -* Android -* iOS -* web -* macOS -* Linux -* Windows +- Android +- iOS +- web +- macOS +- Linux +- Windows -That being said, extra steps must be taken to [enable Desktop support](https://github.com/flutter/flutter/wiki/Desktop-shells#tooling). +That being said, extra steps must be taken to [enable Desktop support]( +https://github.com/flutter/flutter/wiki/Desktop-shells#tooling). For +example, to run the macOS app: -Additionally, the UI adapts between mobile and desktop layouts regardless of the platform it runs on. This is determined based on window size as outlined in [adaptive.dart](gallery/lib/layout/adaptive.dart). +``` +cd gallery/ +flutter config --enable-macos-desktop +flutter create --org io.flutter . +flutter run -d macos +``` + +Additionally, the UI adapts between mobile and desktop layouts regardless of the +platform it runs on. This is determined based on window size as outlined in +[adaptive.dart](gallery/lib/layout/adaptive.dart). ## To include a new splash animation -1. Convert your animation to a `.gif` file. Ideally, use a background color of `0xFF030303` to ensure the animation blends into the background of the app. +1. Convert your animation to a `.gif` file. + Ideally, use a background color of `0xFF030303` to ensure the animation + blends into the background of the app. -2. Add your new `.gif` file to the assets directory under `assets/splash_effects`. Ensure the name follows the format `splash_effect_$num.gif`. The number should be the next number after the current largest number in the repository. +2. Add your new `.gif` file to the assets directory under + `assets/splash_effects`. Ensure the name follows the format + `splash_effect_$num.gif`. The number should be the next number after the + current largest number in the repository. -3. Update the map `_effectDurations` in [splash.dart](gallery/lib/pages/splash.dart) to include the number of the new `.gif` as well as its estimated duration. The duration is used to determine how long to display the splash animation at launch. +3. Update the map `_effectDurations` in + [splash.dart](gallery/lib/pages/splash.dart) to include the number of the + new `.gif` as well as its estimated duration. The duration is used to + determine how long to display the splash animation at launch. + +## Generating localized strings and highlighted code segments + +To generate localized strings or highlighted code segments, make sure that you +have [grinder](https://pub.dev/packages/grinder) installed. You can install it +by getting the packages in `samples/gallery/gallery/`: +``` +flutter pub get +``` + +To generate localized strings (see separate [README](gallery/lib/l10n/README.md) +for more details): + +``` +flutter pub run grinder l10n +``` + +To generate code segments (see separate [README](codeviewer_cli/README.md) for +more details): +``` +flutter pub run grinder update-code-segments +``` diff --git a/gallery/codeviewer_cli/README.md b/gallery/codeviewer_cli/README.md index e68f34763..bf6536d35 100644 --- a/gallery/codeviewer_cli/README.md +++ b/gallery/codeviewer_cli/README.md @@ -1,16 +1,34 @@ +# Codeviewer + A command-line application to highlight dart source code. ## Overview Code segments are highlighted before the app is compiled. -This is done because the highlighting process can take 300ms to finish, creating a noticeable delay when the demo switches to code page. +This is done because the highlighting process can take 300ms to finish, creating +a noticeable delay when the demo switches to code page. The highlighter takes all files in the `gallery/lib/demos/` folder and scans each. -Highlighted code widgets are stored in the `gallery/lib/codeviewer/code_segments.dart` file. -Under the root directory, run `make update-code-segments` to run the highlighter. +Highlighted code widgets are stored in the +`gallery/lib/codeviewer/code_segments.dart` file. -Wrap a block of code with lines `// BEGIN yourDemoName` and `// END` to mark it for highlighting. The block in between, as well as any copyright notice and imports at the beginning of the file, are automatically taken and highlighted, and stored as `static TextSpan yourDemoName(BuildContext context)` in `gallery/lib/codeviewer/code_segments.dart`. -To display the code, go to `gallery/lib/data/demos.dart`, and add `code: CodeSegments.yourDemoName,` to your `GalleryDemoConfiguration` object. +## How to generate code segments + +From the `samples/gallery/gallery/` directory: +1. Make sure you have [grinder](https://pub.dev/packages/grinder) installed by +running `flutter pub get`. +2. Then run `flutter pub run grinder update-code-segments` to generate code +segments with highlighting. + +## How to define a block of code to generate highlighting for + +Wrap a block of code with lines `// BEGIN yourDemoName` and `// END` to mark it +for highlighting. The block in between, as well as any copyright notice and +imports at the beginning of the file, are automatically taken and highlighted, +and stored as `static TextSpan yourDemoName(BuildContext context)` in +`gallery/lib/codeviewer/code_segments.dart`. To display the code, go to +`gallery/lib/data/demos.dart`, and add `code: CodeSegments.yourDemoName,` to +your `GalleryDemoConfiguration` object. ## Multiple blocks of code diff --git a/gallery/gallery/Makefile b/gallery/gallery/Makefile deleted file mode 100644 index 3bc4995d9..000000000 --- a/gallery/gallery/Makefile +++ /dev/null @@ -1,35 +0,0 @@ -ROOT := $(shell git rev-parse --show-toplevel)/gallery -FLUTTER := $(shell which flutter) -FLUTTER_BIN_DIR := $(shell dirname $(FLUTTER)) -FLUTTER_DIR := $(FLUTTER_BIN_DIR:/bin=) -DART := $(FLUTTER_BIN_DIR)/cache/dart-sdk/bin/dart - -.PHONY: analyze -analyze: - $(FLUTTER) analyze - -.PHONY: format -format: - $(FLUTTER) format . - -.PHONY: test -test: - $(FLUTTER) test - -.PHONY: gen-l10n -gen-l10n: - $(DART) $(FLUTTER_DIR)/dev/tools/localization/bin/gen_l10n.dart \ - --template-arb-file=intl_en_US.arb \ - --output-localization-file=gallery_localizations.dart \ - --output-class=GalleryLocalizations - -.PHONY: l10n -l10n: gen-l10n format - cd $(ROOT)/l10n_cli/ && $(FLUTTER) pub get - $(DART) $(ROOT)/l10n_cli/bin/main.dart - -.PHONY: update-code-segments -update-code-segments: - cd $(ROOT)/codeviewer_cli/ && $(FLUTTER) pub get - $(DART) $(ROOT)/codeviewer_cli/bin/main.dart - $(FLUTTER) format $(ROOT)/gallery/lib/codeviewer/code_segments.dart diff --git a/gallery/gallery/lib/l10n/README.md b/gallery/gallery/lib/l10n/README.md index 334bf6563..3ddc838b3 100644 --- a/gallery/gallery/lib/l10n/README.md +++ b/gallery/gallery/lib/l10n/README.md @@ -22,18 +22,21 @@ This allows use of the English message through your localizations delegate in the application code immediately without having to wait for the translations to be completed. -To generate `GalleryLocalizations`, from `gallery/` run: -``` -make l10n -``` +## How to Generate GalleryLocalizations with Grinder -For more details on what `make l10n` runs, you can read below under Generate GalleryLocalizations. +From the `samples/gallery/gallery/` directory: +1. Make sure you have [grinder](https://pub.dev/packages/grinder) installed by +running `flutter pub get`. +2. Then run `flutter pub run grinder l10n` to generate `GalleryLocalizations`. -The current supported locales list is sorted alphabetically. So after running the script, update -`gallery_localizations.dart` to move the `en_US` locale to the top of the list. +For more details on what `flutter pub run grinder l10n` runs, you can read below +under *How to Generate GalleryLocalizations with l10n scripts*. The current +supported locales list is sorted alphabetically. This means that after running +the script, you have to update `gallery_localizations.dart` and move the `en_US` +locale to the top of the list. -## Generate GalleryLocalizations -To generate GalleryLocalizations, from `gallery/` run: +## How to Generate GalleryLocalizations with l10n scripts +To generate GalleryLocalizations, from `samples/gallery/gallery/` run: ```dart dart ${YOUR_FLUTTER_PATH}/dev/tools/localization/bin/gen_l10n.dart \ @@ -42,9 +45,9 @@ dart ${YOUR_FLUTTER_PATH}/dev/tools/localization/bin/gen_l10n.dart \ --output-class=GalleryLocalizations ``` -From `gallery/`, run `dart ../l10n_cli/bin/main.dart`, which will generate -`intl_en_US.xml`. This will be used by the internal translation console to -generate messages in the different locales. +From `samples/gallery/gallery/`, run `dart ../l10n_cli/bin/main.dart`, which +will generate `intl_en_US.xml`. This will be used by the internal translation +console to generate messages in the different locales. Run the formatter to make the Flutter analyzer happy: ``` @@ -63,8 +66,7 @@ available, run the following commands to generate all necessary `messages_.dart` files and the `localizations_delegate.dart` file: ``` -make gen-l10n -make format +flutter pub run grinder l10n ``` which is equal to @@ -79,9 +81,3 @@ flutter format . ``` This ensures the generated `.dart` files updated with the latest translations. - -Run the formatter to make the Flutter analyzer happy: -``` -flutter format . -``` - diff --git a/gallery/gallery/pubspec.lock b/gallery/gallery/pubspec.lock index 902d91fba..17ac51117 100644 --- a/gallery/gallery/pubspec.lock +++ b/gallery/gallery/pubspec.lock @@ -43,6 +43,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.1.2" + cli_util: + dependency: transitive + description: + name: cli_util + url: "https://pub.dartlang.org" + source: hosted + version: "0.1.3+2" collection: dependency: "direct main" description: @@ -149,6 +156,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "1.2.0" + grinder: + dependency: "direct dev" + description: + name: grinder + url: "https://pub.dartlang.org" + source: hosted + version: "0.8.3+1" html: dependency: transitive description: diff --git a/gallery/gallery/pubspec.yaml b/gallery/gallery/pubspec.yaml index 641ce95a9..a827d8110 100644 --- a/gallery/gallery/pubspec.yaml +++ b/gallery/gallery/pubspec.yaml @@ -37,6 +37,7 @@ dependencies: dev_dependencies: flutter_test: sdk: flutter + grinder: ^0.8.0 flutter: assets: diff --git a/gallery/gallery/tool/grind.dart b/gallery/gallery/tool/grind.dart new file mode 100644 index 000000000..414aab769 --- /dev/null +++ b/gallery/gallery/tool/grind.dart @@ -0,0 +1,77 @@ +// Copyright 2019 The Flutter team. All rights reserved. +// Use of this source code is governed by a BSD-style license that can be +// found in the LICENSE file. + +import 'dart:io'; + +import 'package:grinder/grinder.dart'; +import 'package:path/path.dart' as path; + +void main(List args) => grind(args); + +@Task('Get packages') +Future pubGet({String directory}) async { + await _runProcess( + 'flutter', + ['pub', 'get', if (directory != null) directory], + ); +} + +@Task('Format dart files') +Future format({String path = '.'}) async { + await _runProcess('flutter', ['format', path]); +} + +@Task('Generate localizations files') +Future generateLocalizations() async { + final l10nScriptFile = path.join( + _flutterRootPath(), + 'dev', + 'tools', + 'localization', + 'bin', + 'gen_l10n.dart', + ); + + Dart.run(l10nScriptFile, arguments: [ + '--template-arb-file=intl_en_US.arb', + '--output-localization-file=gallery_localizations.dart', + '--output-class=GalleryLocalizations', + ]); + await format(path: path.join('lib', 'l10n')); +} + +@Task('Transform arb to xml for English') +@Depends(generateLocalizations) +Future l10n() async { + final l10nPath = path.join(Directory.current.parent.path, 'l10n_cli'); + await pubGet(directory: l10nPath); + + Dart.run(path.join(l10nPath, 'bin', 'main.dart')); +} + +@Task('Update code segments') +Future updateCodeSegments() async { + final codeviewerPath = + path.join(Directory.current.parent.path, 'codeviewer_cli'); + await pubGet(directory: codeviewerPath); + + Dart.run(path.join(codeviewerPath, 'bin', 'main.dart')); + final targetFilePath = path.join('lib', 'codeviewer', 'code_segments.dart'); + await format(path: targetFilePath); +} + +Future _runProcess(String executable, List arguments) async { + final result = await Process.run(executable, arguments); + stdout.write(result.stdout); + stderr.write(result.stderr); +} + +/// Return the flutter root path from the environment variables. +String _flutterRootPath() { + final flutterBinPath = + Platform.environment['PATH'].split(':').lastWhere((setting) { + return path.canonicalize(setting).endsWith(path.join('flutter', 'bin')); + }); + return Directory(flutterBinPath).parent.path; +} diff --git a/gallery/l10n_cli/README.md b/gallery/l10n_cli/README.md index fc1a1d1ae..151472559 100644 --- a/gallery/l10n_cli/README.md +++ b/gallery/l10n_cli/README.md @@ -1,4 +1,7 @@ -A command-line application that converts .arb files to .xml files for translation consumption. +# l10n + +A command-line application that converts .arb files to .xml files for +translation consumption. Created from templates made available by Stagehand under a BSD-style [license](https://github.com/dart-lang/stagehand/blob/master/LICENSE).