Add client runtime init, tier-visibility CSS, signal enhancements, and default signal matrix#39
Open
fabianzimber wants to merge 2 commits into
Open
Conversation
There was a problem hiding this comment.
Pull request overview
This PR adds a lightweight client-side runtime to initialize BCL state without requiring CakeProvider/CakeLayer, improves signal detection and the default signal matrix behavior, and enables CSS-only tier layering via injected visibility rules and <html data-bcl-*> attributes.
Changes:
- Added
initCakeRuntimeto compute tier/features from detected signals, publish state to<html data-bcl-*>, and optionally watch for signal changes. - Introduced automatic tier-visibility CSS injection for
[data-cake-tier]/[caketier]selectors to support CSS-only layering. - Expanded signals (online, prefers-contrast) and enabled a more conservative signal matrix by default.
Reviewed changes
Copilot reviewed 10 out of 11 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| tests/runtime.test.ts | Adds unit tests for runtime dataset writes and default tier-visibility CSS injection. |
| src/types.ts | Extends signal and signal-matrix condition types with online and prefersContrastMore. |
| src/signals.ts | Detects new signals and subscribes to additional events (online/offline, visibility, pageshow). |
| src/signal-matrix.ts | Adds conservative default matrix rules and matches new signal fields. |
| src/runtime.ts | Adds initCakeRuntime client runtime (merge config, detect signals, resolve tier/features, write dataset, inject CSS, watch signals). |
| src/jsx.d.ts | Adds a React JSX attribute type for cakeTier. |
| src/index.ts | Exposes new runtime/CSS helper exports and the CakeTierSelector type. |
| src/context.tsx | Publishes the new signals to <html data-bcl-*> when using CakeProvider. |
| src/config.ts | Enables the signal matrix by default. |
| src/cake-tier-visibility.ts | Implements tier-visibility CSS generation and injection helper. |
| README.md | Documents “30-second setup” via runtime init + dataset/CSS-only layering notes. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+141
to
+147
| typeof (when as CakeSignalMatrixCondition & { online?: boolean }).online === "boolean" && | ||
| !matchesBoolean((signals as CakeSignals & { online?: boolean }).online, (when as CakeSignalMatrixCondition & { online?: boolean }).online as boolean) | ||
| ) return false; | ||
|
|
||
| if ( | ||
| typeof (when as CakeSignalMatrixCondition & { prefersContrastMore?: boolean }).prefersContrastMore === "boolean" && | ||
| !matchesBoolean((signals as CakeSignals & { prefersContrastMore?: boolean }).prefersContrastMore, (when as CakeSignalMatrixCondition & { prefersContrastMore?: boolean }).prefersContrastMore as boolean) |
| prefersContrastMore?: boolean; | ||
| } | ||
|
|
||
|
|
| style.id = STYLE_ID; | ||
| style.dataset.bcl = "tier-visibility"; | ||
| style.textContent = rules.join("\n"); | ||
| document.head.appendChild(style); |
Member
Author
|
@copilot apply changes based on the comments in this thread |
Agent-Logs-Url: https://github.com/shiftbloom-studio/birthday-cake-loading/sessions/a5a2acf8-6d05-40a2-93a0-9385eb22a5e7 Co-authored-by: fabianzimber <31100894+fabianzimber@users.noreply.github.com>
Contributor
Applied all three changes in commit
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
CakeProvider/CakeLayer.data-cake-tier/caketierselectors.cakeTierJSX attribute type and documenting a 30-second setup inREADME.md.Description
src/runtime.tswithinitCakeRuntimethat detects signals, resolves tier/features, writesdata-bcl-*attributes to<html>, and injects tier visibility styles viaensureCakeTierVisibilityStyles.src/cake-tier-visibility.tsthat generates and injects rules to hide elements for tiers; exported and consumed by the runtime.DEFAULT_CONFIG.advanced.signalMatrix = trueand extendedDEFAULT_SIGNAL_MATRIX_RULESinsrc/signal-matrix.tswith conservative rules (offline, save-data/downlink cap, reduced-motion + high contrast, etc.).src/signals.tsto includeonline,prefersContrastMore, and auserAgentfallback foruserAgentMobile; added additional listeners (online/offline,visibilitychange,pageshow) tosubscribeToSignalChanges.src/index.ts:initCakeRuntime,ensureCakeTierVisibilityStyles, andCakeTierSelectortype; addedsrc/jsx.d.tsto allowcakeTieras a JSX attribute.src/types.tsandsrc/context.tsxto include the new signals and to publish the newdata-bcl-*attributes on<html>.README.mdwith a30-second setupexample showinginitCakeRuntime, data attributes, and a note about the default signal matrix and HTML dataset usage.Testing
tests/runtime.test.tsthat validateinitCakeRuntimewritesdata-bcl-*to the document and injects the default visibility CSS; these tests were executed as part of the test run and succeeded.npm test, and the new tests passed along with the existing test suite.