github/flutter
7
0
Fork 0
mirror of https://github.com/flutter/flutter.git synced 2025-06-03 00:51:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

[tool] Fix flutter.js regression with hot-reload on promise-based init. (#110805)

Browse Source
This commit is contained in:
David Iglesias 2022-09-01 15:25:16 -07:00 committed by GitHub
parent 822f6e3595
commit 9cb9f6bca4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 217 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/flutter_tools/lib/src/web/file_generators/flutter_js.dart
View File

@ -205,6 +205,8 @@ _flutter.loader = null;
this._didCreateEngineInitializerResolve(engineInitializer);
// Remove the resolver after the first time, so Flutter Web can hot restart.
this._didCreateEngineInitializerResolve = null;
// Make the engine revert to "auto" initialization on hot restart.
delete _flutter.loader.didCreateEngineInitializer;
}
if (typeof this._onEntrypointLoaded === "function") {
this._onEntrypointLoaded(engineInitializer);

2
packages/flutter_tools/test/integration.shard/test_data/hot_reload_project.dart
View File

@ -6,6 +6,8 @@ import '../test_utils.dart';
import 'project.dart';
class HotReloadProject extends Project {
HotReloadProject({super.indexHtml});
@override
final String pubspec = '''
name: test

19
packages/flutter_tools/test/integration.shard/test_data/project.dart
View File

@ -3,6 +3,7 @@
// found in the LICENSE file.
import 'package:file/file.dart';
import 'package:flutter_tools/src/web/file_generators/flutter_js.dart';
import '../test_utils.dart';
import 'deferred_components_config.dart';
@ -19,6 +20,11 @@ const String _kDefaultHtml = '''
''';
abstract class Project {
/// Creates a flutter Project for testing.
///
/// If passed, `indexHtml` is used as the contents of the web/index.html file.
Project({this.indexHtml = _kDefaultHtml});
late Directory dir;
String get pubspec;
@ -29,6 +35,13 @@ abstract class Project {
Uri get mainDart => Uri.parse('package:test/main.dart');
/// The contents for the index.html file of this `Project`.
///
/// Defaults to [_kDefaultHtml] via the Project constructor.
///
/// (Used by [HotReloadProject].)
final String indexHtml;
Future<void> setUpIn(Directory dir) async {
this.dir = dir;
writeFile(fileSystem.path.join(dir.path, 'pubspec.yaml'), pubspec);
@ -45,7 +58,11 @@ abstract class Project {
writeFile(fileSystem.path.join(dir.path, '.dart_tool', 'flutter_gen', 'flutter_gen.dart'), generatedFile);
}
deferredComponents?.setUpIn(dir);
writeFile(fileSystem.path.join(dir.path, 'web', 'index.html'), _kDefaultHtml);
// Setup for different flutter web initializations
writeFile(fileSystem.path.join(dir.path, 'web', 'index.html'), indexHtml);
writeFile(fileSystem.path.join(dir.path, 'web', 'flutter.js'), generateFlutterJsFile());
writeFile(fileSystem.path.join(dir.path, 'web', 'flutter_service_worker.js'), '');
writePackages(dir.path);
await getPackages(dir.path);
}

21
packages/flutter_tools/test/web.shard/hot_reload_web_test.dart
View File

@ -11,11 +11,22 @@ import '../integration.shard/test_driver.dart';
import '../integration.shard/test_utils.dart';
import '../src/common.dart';
void main() {
import 'test_data/hot_reload_index_html_samples.dart';
void main() async {
await _testProject(HotReloadProject()); // default
await _testProject(HotReloadProject(indexHtml: indexHtmlFlutterJsCallback), name: 'flutter.js (callback)');
await _testProject(HotReloadProject(indexHtml: indexHtmlFlutterJsPromisesFull), name: 'flutter.js (promises)');
await _testProject(HotReloadProject(indexHtml: indexHtmlFlutterJsPromisesShort), name: 'flutter.js (promises, short)');
await _testProject(HotReloadProject(indexHtml: indexHtmlNoFlutterJs), name: 'No flutter.js');
}
Future<void> _testProject(HotReloadProject project, {String name = 'Default'}) async {
late Directory tempDir;
final HotReloadProject project = HotReloadProject();
late FlutterRunTestDriver flutter;
final String testName = 'Hot reload (index.html: $name)';
setUp(() async {
tempDir = createResolvedTempDirectorySync('hot_reload_test.');
await project.setUpIn(tempDir);
@ -28,12 +39,12 @@ void main() {
tryToDelete(tempDir);
});
testWithoutContext('hot restart works without error', () async {
testWithoutContext('$testName: hot restart works without error', () async {
await flutter.run(chrome: true, additionalCommandArgs: <String>['--verbose', '--web-renderer=html']);
await flutter.hotRestart();
});
testWithoutContext('newly added code executes during hot restart', () async {
testWithoutContext('$testName: newly added code executes during hot restart', () async {
final Completer<void> completer = Completer<void>();
final StreamSubscription<String> subscription = flutter.stdout.listen((String line) {
if (line.contains('(((((RELOAD WORKED)))))')) {
@ -50,7 +61,7 @@ void main() {
}
});
testWithoutContext('newly added code executes during hot restart - canvaskit', () async {
testWithoutContext('$testName: newly added code executes during hot restart - canvaskit', () async {
final Completer<void> completer = Completer<void>();
final StreamSubscription<String> subscription = flutter.stdout.listen((String line) {
if (line.contains('(((((RELOAD WORKED)))))')) {

179
packages/flutter_tools/test/web.shard/test_data/hot_reload_index_html_samples.dart Normal file
View File

@ -0,0 +1,179 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// This file contains a bunch of different index.html "styles" that can be written
// by Flutter Web users.
// This should be somewhat kept in sync with the different index.html files present
// in `flutter/dev/integration_tests/web/web`.
// @see https://github.com/flutter/flutter/tree/master/dev/integration_tests/web/web
/// index_with_flutterjs_entrypoint_loaded.html
String indexHtmlFlutterJsCallback = _generateFlutterJsIndexHtml('''
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
onEntrypointLoaded: onEntrypointLoaded,
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
});
// Once the entrypoint is ready, do things!
async function onEntrypointLoaded(engineInitializer) {
const appRunner = await engineInitializer.initializeEngine();
appRunner.runApp();
}
});
''');
/// index_with_flutterjs_short.html
String indexHtmlFlutterJsPromisesShort = _generateFlutterJsIndexHtml('''
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.autoStart();
});
});
''');
/// index_with_flutterjs.html
String indexHtmlFlutterJsPromisesFull = _generateFlutterJsIndexHtml('''
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
''');
/// index_without_flutterjs.html
String indexHtmlNoFlutterJs = '''
<!DOCTYPE HTML>
<!-- Copyright 2014 The Flutter Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>Web Test</title>
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Web Test">
<link rel="manifest" href="manifest.json">
</head>
<body>
<!-- This script installs service_worker.js to provide PWA functionality to
application. For more information, see:
https://developers.google.com/web/fundamentals/primers/service-workers -->
<script>
var serviceWorkerVersion = null;
var scriptLoaded = false;
function loadMainDartJs() {
if (scriptLoaded) {
return;
}
scriptLoaded = true;
var scriptTag = document.createElement('script');
scriptTag.src = 'main.dart.js';
scriptTag.type = 'application/javascript';
document.body.append(scriptTag);
}
if ('serviceWorker' in navigator) {
// Service workers are supported. Use them.
window.addEventListener('load', function () {
// Wait for registration to finish before dropping the <script> tag.
// Otherwise, the browser will load the script multiple times,
// potentially different versions.
var serviceWorkerUrl = 'flutter_service_worker.js?v=' + serviceWorkerVersion;
navigator.serviceWorker.register(serviceWorkerUrl)
.then((reg) => {
function waitForActivation(serviceWorker) {
serviceWorker.addEventListener('statechange', () => {
if (serviceWorker.state == 'activated') {
console.log('Installed new service worker.');
loadMainDartJs();
}
});
}
if (!reg.active && (reg.installing || reg.waiting)) {
// No active web worker and we have installed or are installing
// one for the first time. Simply wait for it to activate.
waitForActivation(reg.installing ?? reg.waiting);
} else if (!reg.active.scriptURL.endsWith(serviceWorkerVersion)) {
// When the app updates the serviceWorkerVersion changes, so we
// need to ask the service worker to update.
console.log('New service worker available.');
reg.update();
waitForActivation(reg.installing);
} else {
// Existing service worker is still good.
console.log('Loading app from service worker.');
loadMainDartJs();
}
});
// If service worker doesn't succeed in a reasonable amount of time,
// fallback to plaint <script> tag.
setTimeout(() => {
if (!scriptLoaded) {
console.warn(
'Failed to load app from service worker. Falling back to plain <script> tag.',
);
loadMainDartJs();
}
}, 4000);
});
} else {
// Service workers not supported. Just drop the <script> tag.
loadMainDartJs();
}
</script>
</body>
</html>
''';
// Generates the scaffolding of an index.html file, with a configurable `initScript`.
String _generateFlutterJsIndexHtml(String initScript) => '''
<!DOCTYPE HTML>
<!-- Copyright 2014 The Flutter Authors. All rights reserved.
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file. -->
<html>
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<title>Integration test. App load with flutter.js and onEntrypointLoaded API</title>
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Web Test">
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
$initScript
</script>
</body>
</html>
''';