From 571d5fd2ff1d531fcc09e7258c6a5062cfb2b670 Mon Sep 17 00:00:00 2001 From: OutdatedGuy <74326345+OutdatedGuy@users.noreply.github.com> Date: Thu, 21 Jul 2022 08:19:50 +0530 Subject: [PATCH 1/3] REFACTOR: using html parser to update html file - Reads current index.html file - Updates document variable as per specs - Writes back to index.html file --- example/pubspec.lock | 16 ++++- lib/cli_commands.dart | 1 + lib/templates.dart | 30 ++++----- lib/web.dart | 145 +++++++++++++++++------------------------- pubspec.yaml | 1 + 5 files changed, 92 insertions(+), 101 deletions(-) diff --git a/example/pubspec.lock b/example/pubspec.lock index 394a7da..d6eb0e0 100644 --- a/example/pubspec.lock +++ b/example/pubspec.lock @@ -64,6 +64,13 @@ packages: url: "https://pub.dartlang.org" source: hosted version: "3.0.2" + csslib: + dependency: transitive + description: + name: csslib + url: "https://pub.dartlang.org" + source: hosted + version: "0.17.2" cupertino_icons: dependency: "direct main" description: @@ -96,7 +103,7 @@ packages: path: ".." relative: true source: path - version: "2.2.4" + version: "2.2.5" flutter_test: dependency: "direct dev" description: flutter @@ -107,6 +114,13 @@ packages: description: flutter source: sdk version: "0.0.0" + html: + dependency: transitive + description: + name: html + url: "https://pub.dartlang.org" + source: hosted + version: "0.15.0" image: dependency: transitive description: diff --git a/lib/cli_commands.dart b/lib/cli_commands.dart index c5c18fd..d4d6307 100644 --- a/lib/cli_commands.dart +++ b/lib/cli_commands.dart @@ -3,6 +3,7 @@ /// This is the main entry point for the Flutter Native Splash package. library flutter_native_splash_cli; +import 'package:html/parser.dart' as html_parser; import 'package:image/image.dart'; import 'package:meta/meta.dart'; import 'package:path/path.dart' as p; diff --git a/lib/templates.dart b/lib/templates.dart index d604876..01c4845 100644 --- a/lib/templates.dart +++ b/lib/templates.dart @@ -501,21 +501,21 @@ body { } '''; -const List _indexHtmlPicture = [ - ' ', - ' ', - ' ', - ' ', - ' ', -]; - -const List _indexHtmlBrandingPicture = [ - ' ', - ' ', - ' ', - ' ', - ' ', -]; +const String _indexHtmlPicture = ''' + + + + + +'''; + +const String _indexHtmlBrandingPicture = ''' + + + + + +'''; const String _webJS = ''' function removeSplashFromWeb() { diff --git a/lib/web.dart b/lib/web.dart index b115a9a..179be1e 100644 --- a/lib/web.dart +++ b/lib/web.dart @@ -88,7 +88,7 @@ void _createWebSplash({ backgroundImage: backgroundImage, ); _createSplashJs(); - updateIndex( + _updateHtml( imageMode: imageMode, imagePath: imagePath, brandingMode: brandingMode, @@ -204,7 +204,7 @@ void _createSplashJs() { file.writeAsStringSync(_webJS); } -void updateIndex({ +void _updateHtml({ required String imageMode, required String? imagePath, required String brandingMode, @@ -212,95 +212,70 @@ void updateIndex({ }) { print('[Web] Updating index.html'); final webIndex = File(_webIndex); - final lines = webIndex.readAsLinesSync(); + final document = html_parser.parse(webIndex.readAsStringSync()); - var foundExistingStyleSheet = false; - bool foundExistingMetaViewport = false; - bool foundExistingJs = false; - var headCloseTagLine = 0; - var bodyOpenTagLine = 0; - var existingPictureLine = 0; - var existingBrandingPictureLine = 0; + // Add style sheet if it doesn't exist + document.querySelector( + 'link[rel="stylesheet"][type="text/css"][href="splash/style.css"]', + ) ?? + document.querySelector('head')?.append( + html_parser.parseFragment( + ' \n', + container: '', + ), + ); - const styleSheetLink = - ''; - const metaViewport = - ''; - const jsLink = ''; - for (var x = 0; x < lines.length; x++) { - final line = lines[x]; + // Add meta viewport if it doesn't exist + document.querySelector( + 'meta[content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"][name="viewport"]', + ) ?? + document.querySelector('head')?.append( + html_parser.parseFragment( + ' \n', + container: '', + ), + ); - if (line.contains(styleSheetLink)) { - foundExistingStyleSheet = true; - } - if (line.contains(metaViewport)) { - foundExistingMetaViewport = true; - } - if (line.contains(jsLink)) { - foundExistingJs = true; - } - - if (line.contains('')) { - headCloseTagLine = x; - } else if (line.contains('')) { - existingPictureLine = x; - } else if (line.contains('')) { - existingBrandingPictureLine = x; - } - } - - if (!foundExistingStyleSheet) { - lines[headCloseTagLine] = ' $styleSheetLink\n${lines[headCloseTagLine]}'; - } - if (!foundExistingMetaViewport) { - lines[headCloseTagLine] = ' $metaViewport\n${lines[headCloseTagLine]}'; - } + // Add javascript if it doesn't exist + document.querySelector( + 'script[src="splash/splash.js"]', + ) ?? + document.querySelector('head')?.append( + html_parser.parseFragment( + ' \n', + container: '', + ), + ); - if (!foundExistingJs) { - lines[headCloseTagLine] = ' $jsLink\n${lines[headCloseTagLine]}'; - } - - if (existingPictureLine == 0) { - if (imagePath != null) { - for (var x = _indexHtmlPicture.length - 1; x >= 0; x--) { - lines[bodyOpenTagLine + 1] = - '${_indexHtmlPicture[x].replaceFirst('[IMAGEMODE]', imageMode)}\n${lines[bodyOpenTagLine + 1]}'; - } - } + // Update splash image + if (imagePath != null) { + document.querySelector('picture#splash')?.remove(); + document.querySelector('body')?.append( + html_parser.parseFragment( + _indexHtmlPicture.replaceAll('[IMAGEMODE]', imageMode), + container: '', + ), + ); } else { - if (imagePath != null) { - for (var x = 0; x < _indexHtmlPicture.length; x++) { - lines[existingPictureLine + x] = - _indexHtmlPicture[x].replaceFirst('[IMAGEMODE]', imageMode); - } - } else { - lines.removeRange( - existingPictureLine, - existingPictureLine + _indexHtmlPicture.length, - ); - } + document.querySelector('picture#splash')?.remove(); } - if (existingBrandingPictureLine == 0) { - if (brandingImagePath != null) { - for (var x = _indexHtmlBrandingPicture.length - 1; x >= 0; x--) { - lines[bodyOpenTagLine + 1] = - '${_indexHtmlBrandingPicture[x].replaceFirst('[BRANDINGMODE]', brandingMode)}\n${lines[bodyOpenTagLine + 1]}'; - } - } + + // Update branding image + if (brandingImagePath != null) { + document.querySelector('picture#splash-branding')?.remove(); + document.querySelector('body')?.append( + html_parser.parseFragment( + _indexHtmlBrandingPicture.replaceAll( + '[BRANDINGMODE]', + brandingMode, + ), + container: '', + ), + ); } else { - if (brandingImagePath != null) { - for (var x = 0; x < _indexHtmlBrandingPicture.length; x++) { - lines[existingBrandingPictureLine + x] = _indexHtmlBrandingPicture[x] - .replaceFirst('[BRANDINGMODE]', brandingMode); - } - } else { - lines.removeRange( - existingBrandingPictureLine, - existingBrandingPictureLine + _indexHtmlBrandingPicture.length, - ); - } + document.querySelector('picture#splash-branding')?.remove(); } - webIndex.writeAsStringSync('${lines.join('\n')}\n'); + + // Write the updated index.html + webIndex.writeAsStringSync(document.outerHtml); } diff --git a/pubspec.yaml b/pubspec.yaml index 555604b..c38e24c 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -14,6 +14,7 @@ dependencies: sdk: flutter flutter_web_plugins: sdk: flutter + html: ^0.15.0 image: ^3.1.3 js: ^0.6.4 lint: ^1.8.2 From 2771948d0e745a7bcafe13435e22f23002de187d Mon Sep 17 00:00:00 2001 From: OutdatedGuy <74326345+OutdatedGuy@users.noreply.github.com> Date: Thu, 21 Jul 2022 19:49:18 +0530 Subject: [PATCH 2/3] REFACTOR: using getter for head and body elements --- lib/web.dart | 71 +++++++++++++++++++++++----------------------------- 1 file changed, 32 insertions(+), 39 deletions(-) diff --git a/lib/web.dart b/lib/web.dart index 179be1e..10c27a6 100644 --- a/lib/web.dart +++ b/lib/web.dart @@ -218,62 +218,55 @@ void _updateHtml({ document.querySelector( 'link[rel="stylesheet"][type="text/css"][href="splash/style.css"]', ) ?? - document.querySelector('head')?.append( - html_parser.parseFragment( - ' \n', - container: '', - ), - ); + document.head?.append( + html_parser.parseFragment( + ' \n', + container: '', + ), + ); // Add meta viewport if it doesn't exist document.querySelector( 'meta[content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"][name="viewport"]', ) ?? - document.querySelector('head')?.append( - html_parser.parseFragment( - ' \n', - container: '', - ), - ); + document.head?.append( + html_parser.parseFragment( + ' \n', + container: '', + ), + ); // Add javascript if it doesn't exist document.querySelector( 'script[src="splash/splash.js"]', ) ?? - document.querySelector('head')?.append( - html_parser.parseFragment( - ' \n', - container: '', - ), - ); + document.head?.append( + html_parser.parseFragment( + ' \n', + container: '', + ), + ); // Update splash image + document.querySelector('picture#splash')?.remove(); if (imagePath != null) { - document.querySelector('picture#splash')?.remove(); - document.querySelector('body')?.append( - html_parser.parseFragment( - _indexHtmlPicture.replaceAll('[IMAGEMODE]', imageMode), - container: '', - ), - ); - } else { - document.querySelector('picture#splash')?.remove(); + document.body?.append( + html_parser.parseFragment( + _indexHtmlPicture.replaceAll('[IMAGEMODE]', imageMode), + container: '', + ), + ); } // Update branding image + document.querySelector('picture#splash-branding')?.remove(); if (brandingImagePath != null) { - document.querySelector('picture#splash-branding')?.remove(); - document.querySelector('body')?.append( - html_parser.parseFragment( - _indexHtmlBrandingPicture.replaceAll( - '[BRANDINGMODE]', - brandingMode, - ), - container: '', - ), - ); - } else { - document.querySelector('picture#splash-branding')?.remove(); + document.body?.append( + html_parser.parseFragment( + _indexHtmlBrandingPicture.replaceAll('[BRANDINGMODE]', brandingMode), + container: '', + ), + ); } // Write the updated index.html From d4ff25bcfee3f910fd262cf96423649b4a98d861 Mon Sep 17 00:00:00 2001 From: OutdatedGuy <74326345+OutdatedGuy@users.noreply.github.com> Date: Thu, 21 Jul 2022 20:10:35 +0530 Subject: [PATCH 3/3] REFACTOR: adding splash elements at top in body --- lib/web.dart | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/web.dart b/lib/web.dart index 10c27a6..be4da69 100644 --- a/lib/web.dart +++ b/lib/web.dart @@ -250,22 +250,24 @@ void _updateHtml({ // Update splash image document.querySelector('picture#splash')?.remove(); if (imagePath != null) { - document.body?.append( + document.body?.insertBefore( html_parser.parseFragment( _indexHtmlPicture.replaceAll('[IMAGEMODE]', imageMode), container: '', ), + document.body?.firstChild, ); } // Update branding image document.querySelector('picture#splash-branding')?.remove(); if (brandingImagePath != null) { - document.body?.append( + document.body?.insertBefore( html_parser.parseFragment( _indexHtmlBrandingPicture.replaceAll('[BRANDINGMODE]', brandingMode), container: '', ), + document.body?.firstChild, ); }