firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[web] Put all index.html operations in one place (#118188)

Browse Source 
* [web] Put all index.html operations in one place

* review comments

* fix build

* change quotes

* fix test
This commit is contained in:
Mouad Debbar 2023-02-02 14:49:18 -05:00 committed by GitHub
parent b0f1714b7b
commit d4b6898478
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 292 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
packages/flutter_tools/lib/src/build_system/targets/web.dart
View File

@ -17,6 +17,7 @@ import '../../dart/language_version.dart';
import '../../dart/package_map.dart';
import '../../flutter_plugins.dart';
import '../../globals.dart' as globals;
import '../../html_utils.dart';
import '../../project.dart';
import '../../web/compile.dart';
import '../../web/file_generators/flutter_js.dart' as flutter_js;
@ -50,9 +51,6 @@ const String kCspMode = 'cspMode';
/// Base href to set in index.html in flutter build command
const String kBaseHref = 'baseHref';
/// Placeholder for base href
const String kBaseHrefPlaceholder = r'$FLUTTER_BASE_HREF';
/// The caching strategy to use for service worker generation.
const String kServiceWorkerStrategy = 'ServiceWorkerStrategy';
@ -442,25 +440,12 @@ class WebReleaseBundle extends Target {
// because it would need to be the hash for the entire bundle and not just the resource
// in question.
if (environment.fileSystem.path.basename(inputFile.path) == 'index.html') {
final String randomHash = Random().nextInt(4294967296).toString();
String resultString = inputFile.readAsStringSync()
.replaceFirst(
'var serviceWorkerVersion = null',
"var serviceWorkerVersion = '$randomHash'",
)
// This is for legacy index.html that still use the old service
// worker loading mechanism.
.replaceFirst(
"navigator.serviceWorker.register('flutter_service_worker.js')",
"navigator.serviceWorker.register('flutter_service_worker.js?v=$randomHash')",
);
final String? baseHref = environment.defines[kBaseHref];
if (resultString.contains(kBaseHrefPlaceholder) && baseHref == null) {
resultString = resultString.replaceAll(kBaseHrefPlaceholder, '/');
} else if (resultString.contains(kBaseHrefPlaceholder) && baseHref != null) {
resultString = resultString.replaceAll(kBaseHrefPlaceholder, baseHref);
}
outputFile.writeAsStringSync(resultString);
final IndexHtml indexHtml = IndexHtml(inputFile.readAsStringSync());
indexHtml.applySubstitutions(
baseHref: environment.defines[kBaseHref] ?? '/',
serviceWorkerVersion: Random().nextInt(4294967296).toString(),
);
outputFile.writeAsStringSync(indexHtml.content);
continue;
}
inputFile.copySync(outputFile.path);

3
packages/flutter_tools/lib/src/commands/build_web.dart
View File

@ -7,6 +7,7 @@ import '../base/file_system.dart';
import '../build_info.dart';
import '../build_system/targets/web.dart';
import '../features.dart';
import '../html_utils.dart';
import '../project.dart';
import '../runner/flutter_command.dart'
show DevelopmentArtifact, FlutterCommandResult;
@ -127,7 +128,7 @@ class BuildWebCommand extends BuildSubCommand {
baseHref != null) {
throwToolExit(
"Couldn't find the placeholder for base href. "
r'Please add `<base href="$FLUTTER_BASE_HREF">` to web/index.html'
'Please add `<base href="$kBaseHrefPlaceholder">` to web/index.html'
);
}

112
packages/flutter_tools/lib/src/html_utils.dart Normal file
View File

@ -0,0 +1,112 @@
// 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.
import 'package:html/dom.dart';
import 'package:html/parser.dart';
import 'base/common.dart';
/// Placeholder for base href
const String kBaseHrefPlaceholder = r'$FLUTTER_BASE_HREF';
/// Utility class for parsing and performing operations on the contents of the
/// index.html file.
///
/// For example, to parse the base href from the index.html file:
///
/// ```dart
/// String parseBaseHref(File indexHtmlFile) {
/// final IndexHtml indexHtml = IndexHtml(indexHtmlFile.readAsStringSync());
/// return indexHtml.getBaseHref();
/// }
/// ```
class IndexHtml {
IndexHtml(this._content);
String get content => _content;
String _content;
Document _getDocument() => parse(_content);
/// Parses the base href from the index.html file.
String getBaseHref() {
final Element? baseElement = _getDocument().querySelector('base');
final String? baseHref = baseElement?.attributes == null
? null
: baseElement!.attributes['href'];
if (baseHref == null || baseHref == kBaseHrefPlaceholder) {
return '';
}
if (!baseHref.startsWith('/')) {
throw ToolExit(
'Error: The base href in "web/index.html" must be absolute (i.e. start '
'with a "/"), but found: `${baseElement!.outerHtml}`.\n'
'$_kBasePathExample',
);
}
if (!baseHref.endsWith('/')) {
throw ToolExit(
'Error: The base href in "web/index.html" must end with a "/", but found: `${baseElement!.outerHtml}`.\n'
'$_kBasePathExample',
);
}
return stripLeadingSlash(stripTrailingSlash(baseHref));
}
/// Applies substitutions to the content of the index.html file.
void applySubstitutions({
required String baseHref,
required String? serviceWorkerVersion,
}) {
if (_content.contains(kBaseHrefPlaceholder)) {
_content = _content.replaceAll(kBaseHrefPlaceholder, baseHref);
}
if (serviceWorkerVersion != null) {
_content = _content
.replaceFirst(
'var serviceWorkerVersion = null',
'var serviceWorkerVersion = "$serviceWorkerVersion"',
)
// This is for legacy index.html that still uses the old service
// worker loading mechanism.
.replaceFirst(
"navigator.serviceWorker.register('flutter_service_worker.js')",
"navigator.serviceWorker.register('flutter_service_worker.js?v=$serviceWorkerVersion')",
);
}
}
}
/// Strips the leading slash from a path.
String stripLeadingSlash(String path) {
while (path.startsWith('/')) {
path = path.substring(1);
}
return path;
}
/// Strips the trailing slash from a path.
String stripTrailingSlash(String path) {
while (path.endsWith('/')) {
path = path.substring(0, path.length - 1);
}
return path;
}
const String _kBasePathExample = '''
For example, to serve from the root use:
<base href="/">
To serve from a subpath "foo" (i.e. http://localhost:8080/foo/ instead of http://localhost:8080/) use:
<base href="/foo/">
For more information, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
''';

115
packages/flutter_tools/lib/src/isolated/devfs_web.dart
View File

@ -8,8 +8,6 @@ import 'dart:typed_data';
import 'package:dwds/data/build_result.dart';
// ignore: import_of_legacy_library_into_null_safe
import 'package:dwds/dwds.dart';
import 'package:html/dom.dart';
import 'package:html/parser.dart';
import 'package:logging/logging.dart' as logging;
import 'package:meta/meta.dart';
import 'package:mime/mime.dart' as mime;
@ -29,7 +27,6 @@ import '../base/platform.dart';
import '../build_info.dart';
import '../build_system/targets/scene_importer.dart';
import '../build_system/targets/shader_compiler.dart';
import '../build_system/targets/web.dart';
import '../bundle_builder.dart';
import '../cache.dart';
import '../compile.dart';
@ -37,6 +34,7 @@ import '../convert.dart';
import '../dart/package_map.dart';
import '../devfs.dart';
import '../globals.dart' as globals;
import '../html_utils.dart';
import '../project.dart';
import '../vmservice.dart';
import '../web/bootstrap.dart';
@ -136,9 +134,7 @@ class WebAssetServer implements AssetReader {
this._modules,
this._digests,
this._nullSafetyMode,
) : basePath = _parseBasePathFromIndexHtml(globals.fs.currentDirectory
.childDirectory('web')
.childFile('index.html'));
) : basePath = _getIndexHtml().getBaseHref();
// Fallback to "application/octet-stream" on null which
// makes no claims as to the structure of the data.
@ -299,7 +295,7 @@ class WebAssetServer implements AssetReader {
server,
PackageUriMapper(packageConfig),
digestProvider,
server.basePath!,
server.basePath,
).strategy,
expressionCompiler: expressionCompiler,
spawnDds: enableDds,
@ -345,12 +341,11 @@ class WebAssetServer implements AssetReader {
@visibleForTesting
Uint8List? getMetadata(String path) => _webMemoryFS.metadataFiles[path];
@visibleForTesting
/// The base path to serve from.
///
/// It should have no leading or trailing slashes.
String? basePath = '';
@visibleForTesting
String basePath;
// handle requests for JavaScript source, dart sources maps, or asset files.
@visibleForTesting
@ -496,27 +491,20 @@ class WebAssetServer implements AssetReader {
WebRendererMode webRenderer = WebRendererMode.html;
shelf.Response _serveIndex() {
final IndexHtml indexHtml = _getIndexHtml();
indexHtml.applySubstitutions(
// Currently, we don't support --base-href for the "run" command.
baseHref: '/',
serviceWorkerVersion: null,
);
final Map<String, String> headers = <String, String>{
HttpHeaders.contentTypeHeader: 'text/html',
HttpHeaders.contentLengthHeader: indexHtml.content.length.toString(),
};
final File indexFile = globals.fs.currentDirectory
.childDirectory('web')
.childFile('index.html');
if (indexFile.existsSync()) {
String indexFileContent = indexFile.readAsStringSync();
if (indexFileContent.contains(kBaseHrefPlaceholder)) {
indexFileContent = indexFileContent.replaceAll(kBaseHrefPlaceholder, '/');
headers[HttpHeaders.contentLengthHeader] = indexFileContent.length.toString();
return shelf.Response.ok(indexFileContent,headers: headers);
}
headers[HttpHeaders.contentLengthHeader] =
indexFile.lengthSync().toString();
return shelf.Response.ok(indexFile.openRead(), headers: headers);
}
headers[HttpHeaders.contentLengthHeader] = _kDefaultIndex.length.toString();
return shelf.Response.ok(_kDefaultIndex, headers: headers);
return shelf.Response.ok(indexHtml.content, headers: headers);
}
// Attempt to resolve `path` to a dart file.
@ -783,9 +771,9 @@ class WebDevFS implements DevFS {
webAssetServer.webRenderer = WebRendererMode.canvaskit;
}
if (hostname == 'any') {
_baseUri = Uri.http('localhost:$selectedPort', webAssetServer.basePath!);
_baseUri = Uri.http('localhost:$selectedPort', webAssetServer.basePath);
} else {
_baseUri = Uri.http('$hostname:$selectedPort', webAssetServer.basePath!);
_baseUri = Uri.http('$hostname:$selectedPort', webAssetServer.basePath);
}
return _baseUri!;
}
@ -977,12 +965,11 @@ class ReleaseAssetServer {
final FileSystemUtils _fileSystemUtils;
final Platform _platform;
@visibleForTesting
/// The base path to serve from.
///
/// It should have no leading or trailing slashes.
final String? basePath;
@visibleForTesting
final String basePath;
// Locations where source files, assets, or source maps may be located.
List<Uri> _searchPaths() => <Uri>[
@ -1070,67 +1057,21 @@ Future<Directory> _loadDwdsDirectory(
return fileSystem.directory(packageConfig['dwds']!.packageUriRoot);
}
String? _stripBasePath(String path, String? basePath) {
path = _stripLeadingSlashes(path);
if (basePath != null && path.startsWith(basePath)) {
String? _stripBasePath(String path, String basePath) {
path = stripLeadingSlash(path);
if (path.startsWith(basePath)) {
path = path.substring(basePath.length);
} else {
// The given path isn't under base path, return null to indicate that.
return null;
}
return _stripLeadingSlashes(path);
return stripLeadingSlash(path);
}
String _stripLeadingSlashes(String path) {
while (path.startsWith('/')) {
path = path.substring(1);
}
return path;
}
String _stripTrailingSlashes(String path) {
while (path.endsWith('/')) {
path = path.substring(0, path.length - 1);
}
return path;
}
String? _parseBasePathFromIndexHtml(File indexHtml) {
IndexHtml _getIndexHtml() {
final File indexHtml =
globals.fs.currentDirectory.childDirectory('web').childFile('index.html');
final String htmlContent =
indexHtml.existsSync() ? indexHtml.readAsStringSync() : _kDefaultIndex;
final Document document = parse(htmlContent);
final Element? baseElement = document.querySelector('base');
String? baseHref =
baseElement?.attributes == null ? null : baseElement!.attributes['href'];
if (baseHref == null || baseHref == kBaseHrefPlaceholder) {
baseHref = '';
} else if (!baseHref.startsWith('/')) {
throw ToolExit(
'Error: The base href in "web/index.html" must be absolute (i.e. start '
'with a "/"), but found: `${baseElement!.outerHtml}`.\n'
'$basePathExample',
);
} else if (!baseHref.endsWith('/')) {
throw ToolExit(
'Error: The base href in "web/index.html" must end with a "/", but found: `${baseElement!.outerHtml}`.\n'
'$basePathExample',
);
} else {
baseHref = _stripLeadingSlashes(_stripTrailingSlashes(baseHref));
}
return baseHref;
return IndexHtml(htmlContent);
}
const String basePathExample = '''
For example, to serve from the root use:
<base href="/">
To serve from a subpath "foo" (i.e. http://localhost:8080/foo/ instead of http://localhost:8080/) use:
<base href="/foo/">
For more information, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
''';

1
packages/flutter_tools/lib/src/isolated/resident_web_runner.dart
View File

@ -372,7 +372,6 @@ class ResidentWebRunner extends ResidentRunner {
true,
debuggingOptions.nativeNullAssertions,
false,
baseHref: kBaseHref,
);
} on ToolExit {
return OperationResult(1, 'Failed to recompile application.');

1
packages/flutter_tools/test/general.shard/build_system/targets/web_test.dart
View File

@ -12,6 +12,7 @@ import 'package:flutter_tools/src/build_system/build_system.dart';
import 'package:flutter_tools/src/build_system/depfile.dart';
import 'package:flutter_tools/src/build_system/targets/web.dart';
import 'package:flutter_tools/src/globals.dart' as globals;
import 'package:flutter_tools/src/html_utils.dart';
import 'package:flutter_tools/src/isolated/mustache_template.dart';
import 'package:flutter_tools/src/web/compile.dart';
import 'package:flutter_tools/src/web/file_generators/flutter_js.dart' as flutter_js;

141
packages/flutter_tools/test/general.shard/html_utils_test.dart Normal file
View File

@ -0,0 +1,141 @@
// 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.
import 'package:flutter_tools/src/html_utils.dart';
import '../src/common.dart';
const String htmlSample1 = '''
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="/foo/222/">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png"/>
</head>
<body>
<div></div>
<script src="main.dart.js"></script>
</body>
</html>
''';
const String htmlSample2 = '''
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="$kBaseHrefPlaceholder">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png"/>
</head>
<body>
<div></div>
<script src="main.dart.js"></script>
<script>
var serviceWorkerVersion = null;
</script>
<script>
navigator.serviceWorker.register('flutter_service_worker.js');
</script>
</body>
</html>
''';
String htmlSample2Replaced({
required String baseHref,
required String serviceWorkerVersion,
}) =>
'''
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="$baseHref">
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png"/>
</head>
<body>
<div></div>
<script src="main.dart.js"></script>
<script>
var serviceWorkerVersion = "$serviceWorkerVersion";
</script>
<script>
navigator.serviceWorker.register('flutter_service_worker.js?v=$serviceWorkerVersion');
</script>
</body>
</html>
''';
const String htmlSample3 = '''
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<link rel="icon" type="image/png" href="favicon.png"/>
</head>
<body>
<div></div>
<script src="main.dart.js"></script>
</body>
</html>
''';
void main() {
test('can parse baseHref', () {
expect(IndexHtml('<base href="/foo/111/">').getBaseHref(), 'foo/111');
expect(IndexHtml(htmlSample1).getBaseHref(), 'foo/222');
expect(IndexHtml(htmlSample2).getBaseHref(), ''); // Placeholder base href.
});
test('handles missing baseHref', () {
expect(IndexHtml('').getBaseHref(), '');
expect(IndexHtml('<base>').getBaseHref(), '');
expect(IndexHtml(htmlSample3).getBaseHref(), '');
});
test('throws on invalid baseHref', () {
expect(() => IndexHtml('<base href>').getBaseHref(), throwsToolExit());
expect(() => IndexHtml('<base href="">').getBaseHref(), throwsToolExit());
expect(() => IndexHtml('<base href="foo/111">').getBaseHref(), throwsToolExit());
expect(
() => IndexHtml('<base href="foo/111/">').getBaseHref(),
throwsToolExit(),
);
expect(
() => IndexHtml('<base href="/foo/111">').getBaseHref(),
throwsToolExit(),
);
});
test('applies substitutions', () {
final IndexHtml indexHtml = IndexHtml(htmlSample2);
indexHtml.applySubstitutions(
baseHref: '/foo/333/',
serviceWorkerVersion: 'v123xyz',
);
expect(
indexHtml.content,
htmlSample2Replaced(
baseHref: '/foo/333/',
serviceWorkerVersion: 'v123xyz',
),
);
});
test('re-parses after substitutions', () {
final IndexHtml indexHtml = IndexHtml(htmlSample2);
expect(indexHtml.getBaseHref(), ''); // Placeholder base href.
indexHtml.applySubstitutions(
baseHref: '/foo/333/',
serviceWorkerVersion: 'v123xyz',
);
// The parsed base href should be updated after substitutions.
expect(indexHtml.getBaseHref(), 'foo/333');
});
}

3
packages/flutter_tools/test/general.shard/web/devfs_web_test.dart
View File

@ -13,11 +13,11 @@ import 'package:flutter_tools/src/base/logger.dart';
import 'package:flutter_tools/src/base/platform.dart';
import 'package:flutter_tools/src/build_info.dart';
import 'package:flutter_tools/src/build_system/targets/shader_compiler.dart';
import 'package:flutter_tools/src/build_system/targets/web.dart';
import 'package:flutter_tools/src/compile.dart';
import 'package:flutter_tools/src/convert.dart';
import 'package:flutter_tools/src/devfs.dart';
import 'package:flutter_tools/src/globals.dart' as globals;
import 'package:flutter_tools/src/html_utils.dart';
import 'package:flutter_tools/src/isolated/devfs_web.dart';
import 'package:flutter_tools/src/web/compile.dart';
import 'package:logging/logging.dart' as logging;
@ -73,7 +73,6 @@ void main() {
flutterRoot: null, // ignore: avoid_redundant_argument_values
platform: FakePlatform(),
webBuildDirectory: null, // ignore: avoid_redundant_argument_values
basePath: null,
);
}, overrides: <Type, Generator>{
Logger: () => logger,