Skip to content

fix: every run adds newlines in web/index.html #817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
moritz-hoelting wants to merge 3 commits into
base: master
Choose a base branch
from
Open

fix: every run adds newlines in web/index.html #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d4d45aa
fix adding newlines in web/index.html every run
moritz-hoelting Jan 26, 2026
f77d011
Remove import
Bungeefan Jun 3, 2026
00307c2
Revert file mode changes
Bungeefan Jun 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions lib/templates.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -406,7 +406,7 @@ const String _iOSBrandingRightBottomConstraints = '''

/// Web related templates
const String _webCss = '''
<style id="splash-screen-style">
<style id="splash-screen-style">
html {
height: 100%
}
Expand Down Expand Up @@ -478,26 +478,25 @@ const String _webCssDark = '''

// XML's insertBefore can't have a newline at the end:
const String _indexHtmlPicture = '''
<picture id="splash">
<picture id="splash">
<source srcset="splash/img/light-1x.[IMAGEEXTENSION] 1x, splash/img/light-2x.[IMAGEEXTENSION] 2x, splash/img/light-3x.[IMAGEEXTENSION] 3x, splash/img/light-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: light)">
<source srcset="splash/img/dark-1x.[IMAGEEXTENSION] 1x, splash/img/dark-2x.[IMAGEEXTENSION] 2x, splash/img/dark-3x.[IMAGEEXTENSION] 3x, splash/img/dark-4x.[IMAGEEXTENSION] 4x" media="(prefers-color-scheme: dark)">
<img class="[IMAGEMODE]" aria-hidden="true" src="splash/img/light-1x.[IMAGEEXTENSION]" alt=""/>
</picture>''';

// XML's insertBefore can't have a newline at the end:
const String _indexHtmlBrandingPicture = '''
<picture id="splash-branding">
<picture id="splash-branding">
<source srcset="splash/img/branding-1x.[BRANDINGEXTENSION] 1x, splash/img/branding-2x.[BRANDINGEXTENSION] 2x, splash/img/branding-3x.[BRANDINGEXTENSION] 3x, splash/img/branding-4x.[BRANDINGEXTENSION] 4x" media="(prefers-color-scheme: light)">
<source srcset="splash/img/branding-dark-1x.[BRANDINGEXTENSION] 1x, splash/img/branding-dark-2x.[BRANDINGEXTENSION] 2x, splash/img/branding-dark-3x.[BRANDINGEXTENSION] 3x, splash/img/branding-dark-4x.[BRANDINGEXTENSION] 4x" media="(prefers-color-scheme: dark)">
<img class="[BRANDINGMODE]" aria-hidden="true" src="splash/img/branding-1x.[BRANDINGEXTENSION]" alt=""/>
</picture>''';

const String _webJS = '''
<script id="splash-screen-script">
<script id="splash-screen-script">
function removeSplashFromWeb() {
document.getElementById("splash")?.remove();
document.getElementById("splash-branding")?.remove();
document.body.style.background = "transparent";
}
</script>
''';
</script>''';
120 changes: 78 additions & 42 deletions lib/web.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,6 @@ void _createWebSplash({
)
?.remove();
document.querySelector('script[src="splash/splash.js"]')?.remove();
document.querySelector('picture#splash')?.remove();
document.querySelector('picture#splash-branding')?.remove();
Comment on lines -55 to -56

@Bungeefan Bungeefan Jun 3, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Any reason for dropping these?

document.querySelector('div#splash')?.remove();
webIndex.writeAsStringSync(document.outerHtml);
return;
Expand Down Expand Up @@ -296,18 +294,25 @@ void _createSplashCss({
);
}

cssContent += ' </style>\n';
cssContent += ' </style>';

// Add css as an inline style in head tag
final webIndex = File(_webIndex);
final document = html_parser.parse(webIndex.readAsStringSync());

// Update splash css style tag
document.head
?..querySelector('style#splash-screen-style')?.remove()
..append(
html_parser.parseFragment(cssContent, container: ''),
);
var splashScreenStyle = document.querySelector('style#splash-screen-style');
if (splashScreenStyle == null) {
document.head?.append(html_parser.parseFragment(
"\n $cssContent",
container: '',
));
} else {
splashScreenStyle.replaceWith(html_parser.parseFragment(
cssContent,
container: '',
));
}

// Write the updated index.html
webIndex.writeAsStringSync(document.outerHtml);
Expand All @@ -319,11 +324,19 @@ void _createSplashJs() {
final document = html_parser.parse(webIndex.readAsStringSync());

// Update splash js script tag
document.head
?..querySelector('script#splash-screen-script')?.remove()
..append(
html_parser.parseFragment(_webJS, container: ''),
);
var splashScreenScript =
document.querySelector('script#splash-screen-script');
if (splashScreenScript == null) {
document.head?.append(html_parser.parseFragment(
"\n\n $_webJS\n",
container: '',
));
} else {
splashScreenScript.replaceWith(html_parser.parseFragment(
_webJS,
container: '',
));
}

// Write the updated index.html
webIndex.writeAsStringSync(document.outerHtml);
Expand Down Expand Up @@ -365,40 +378,63 @@ void _updateHtml({
?.remove();

// Update splash image
document.querySelector('picture#splash')?.remove();
document.querySelector('div#splash')?.remove();

@Bungeefan Bungeefan Jun 3, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should probably still keep this for now (same as above)

if (imagePath != null) {
document.body?.insertBefore(
html_parser.parseFragment(
'\n${_indexHtmlPicture.replaceAll(
'[IMAGEMODE]',
imageMode,
).replaceAll(
'[IMAGEEXTENSION]',
imagePath.endsWith('.gif') ? 'gif' : 'png',
)}',
var splashPicture = document.querySelector('picture#splash');
if (imagePath == null) {
splashPicture?.remove();
} else {
final fragmentContent = _indexHtmlPicture
.replaceAll(
'[IMAGEMODE]',
imageMode,
)
.replaceAll(
'[IMAGEEXTENSION]',
imagePath.endsWith('.gif') ? 'gif' : 'png',
);
if (splashPicture == null) {
document.body?.insertBefore(
html_parser.parseFragment(
"\n $fragmentContent\n",
container: '',
),
document.body?.firstChild,
);
} else {
splashPicture.replaceWith(html_parser.parseFragment(
fragmentContent,
container: '',
),
document.body?.firstChild,
);
));
}
}

// Update branding image
document.querySelector('picture#splash-branding')?.remove();
if (brandingImagePath != null) {
document.body?.insertBefore(
html_parser.parseFragment(
'\n${_indexHtmlBrandingPicture.replaceAll(
'[BRANDINGMODE]',
brandingMode,
).replaceAll(
'[BRANDINGEXTENSION]',
brandingImagePath.endsWith('.gif') ? 'gif' : 'png',
)}',
var splashBrandingPicture = document.querySelector('picture#splash-branding');
if (brandingImagePath == null) {
splashBrandingPicture?.remove();
} else {
final fragmentContent = _indexHtmlBrandingPicture
.replaceAll(
'[BRANDINGMODE]',
brandingMode,
)
.replaceAll(
'[BRANDINGEXTENSION]',
brandingImagePath.endsWith('.gif') ? 'gif' : 'png',
);
if (splashBrandingPicture == null) {
document.body?.insertBefore(
html_parser.parseFragment(
"\n $fragmentContent\n",
container: '',
),
document.body?.firstChild,
);
} else {
splashBrandingPicture.replaceWith(html_parser.parseFragment(
fragmentContent,
container: '',
),
document.body?.firstChild,
);
));
}
}

// Write the updated index.html
Expand Down
Loading