feat: new preload strategy swap-low
#72
Conversation
WalkthroughThe pull request introduces a new preload strategy Changes
Sequence DiagramsequenceDiagram
participant User
participant Beasties
participant StylesheetLink
User->>Beasties: Configure with "swap-low" strategy
Beasties->>StylesheetLink: Create link with rel="alternate stylesheet"
StylesheetLink-->>Beasties: Link created
Beasties->>StylesheetLink: On load, change rel to "stylesheet"
The sequence diagram illustrates the new 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/beasties/src/types.ts (1)
13-13: Fix grammar in documentation.Change "compare to" to "compared to" for correct English usage.
- * - **"swap-low":** Use `<link rel="alternate stylesheet">` (no `preload` in `rel` here!) and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-low.html)). It ensures lowest priority compare to `swap-high`. <kbd>JS</kbd> + * - **"swap-low":** Use `<link rel="alternate stylesheet">` (no `preload` in `rel` here!) and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-low.html)). It ensures lowest priority compared to `swap-high`. <kbd>JS</kbd>packages/beasties/README.md (1)
243-243: Fix grammar in documentation.Change "compare to" to "compared to" for correct English usage.
- - **"swap-low":** Use `<link rel="alternate stylesheet">` (no `preload` in `rel` here!) and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-low.html)). It ensures lowest priority compare to `swap-high`. <kbd>JS</kbd> + - **"swap-low":** Use `<link rel="alternate stylesheet">` (no `preload` in `rel` here!) and swap to `rel="stylesheet"` once loaded ([details](http://filamentgroup.github.io/loadCSS/test/new-low.html)). It ensures lowest priority compared to `swap-high`. <kbd>JS</kbd>🧰 Tools
🪛 LanguageTool
[uncategorized] ~243-~243: This verb may not be in the correct form. Consider using a different form for this context.
Context: ...-low.html)). It ensures lowest priority compare toswap-high. JS - **"js":...(AI_EN_LECTOR_REPLACEMENT_VERB_FORM)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
packages/beasties/README.md(1 hunks)packages/beasties/src/index.d.ts(1 hunks)packages/beasties/src/index.ts(1 hunks)packages/beasties/src/types.ts(1 hunks)
🧰 Additional context used
🪛 LanguageTool
packages/beasties/README.md
[uncategorized] ~243-~243: This verb may not be in the correct form. Consider using a different form for this context.
Context: ...-low.html)). It ensures lowest priority compare to swap-high. JS - **"js":...
(AI_EN_LECTOR_REPLACEMENT_VERB_FORM)
🔇 Additional comments (4)
packages/beasties/src/types.ts (1)
18-18: LGTM! Type definition updated correctly.
The new swap-low strategy has been properly added to the PreloadStrategy type.
packages/beasties/src/index.d.ts (1)
50-50: LGTM! Options interface updated correctly.
The swap-low strategy has been properly added to the preload option in the Options interface, maintaining consistency with the PreloadStrategy type.
packages/beasties/README.md (1)
243-248: LGTM! Documentation updated comprehensively.
The new swap-low strategy is well-documented with clear explanation of its purpose, behaviour, and implementation details. The type definition example is also correctly updated.
🧰 Tools
🪛 LanguageTool
[uncategorized] ~243-~243: This verb may not be in the correct form. Consider using a different form for this context.
Context: ...-low.html)). It ensures lowest priority compare to swap-high. JS - **"js":...
(AI_EN_LECTOR_REPLACEMENT_VERB_FORM)
packages/beasties/src/index.ts (1)
313-319: Implementation looks good and matches the reference!
The new preload strategy swap-low is correctly implemented, following the same pattern as other strategies. The implementation properly sets the rel="alternate stylesheet" attribute to ensure lowest priority loading, which aligns with the reference implementation from Filament Group's test page.
Let's verify the implementation against the reference:
✅ Verification successful
Implementation matches the reference implementation perfectly
The verification confirms that our implementation exactly mirrors the reference implementation from Filament Group's test page:
- Both set
rel="alternate stylesheet" - Both use
title="styles" - Both use the same
onloadhandler to clear the title and switch torel="stylesheet"
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Compare our implementation with the reference test page
# Expected: Our implementation should match the reference implementation
# Fetch the reference implementation
curl -s https://filamentgroup.github.io/loadCSS/test/new-low.html | rg -A 5 'rel="alternate stylesheet"'
# Check our implementation
rg -A 5 'preloadMode === .swap-low.' packages/beasties/src/index.ts
Length of output: 1228
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #72 +/- ##
==========================================
- Coverage 83.95% 83.62% -0.34%
==========================================
Files 7 7
Lines 1203 1209 +6
Branches 281 282 +1
==========================================
+ Hits 1010 1011 +1
- Misses 193 198 +5 ☔ View full report in Codecov by Sentry. |
CodSpeed Performance ReportMerging #72 will not alter performanceComparing Summary
|
|
i love it! i wonder if there's any useful way of adding tests to cover the strategy? |
Lemme see how to setup a test case for this! |
swap-lowusesrel="alternate stylesheet"(instead ofrel="alternate stylesheet preload"used byswap-high) to ensure the lowest priority.See https://filamentgroup.github.io/loadCSS/test/new-low.html
This was originally implemented in GoogleChromeLabs/critters#101, but Google Chrome Teams simply ignored my PR for three years (Just a typical tradition of how Google Chrome Teams treats open-source contributions as always) and simply closed it as they archive the repo.
✨
Description by Callstackai
This PR introduces a new preload strategy called
swap-low, which usesrel="alternate stylesheet"to ensure the lowest priority for stylesheets. It updates the README, TypeScript definitions, and implementation in the Beasties class.Diagrams of code changes
sequenceDiagram participant Browser participant Link as Link Element participant CSS as Stylesheet Browser->>Link: Create link element Link->>Link: Set rel="alternate stylesheet" Link->>Link: Set title="styles" Link->>CSS: Begin loading stylesheet CSS-->>Link: Stylesheet loaded Link->>Link: onload: Clear title Link->>Link: onload: Set rel="stylesheet" Note over Browser,CSS: Lowest priority loading<br/>compared to swap/swap-highFiles Changed
swap-lowpreload strategy.swap-lowin the preload options.swap-lowpreload strategy in the Beasties class.swap-lowin the PreloadStrategy type.This PR includes files in programming languages that we currently do not support. We have not reviewed files with the extensions
.md,.ts. See list of supported languages.