Weave Code
Weaver
Helps Laravel developers discover, compare, and choose open-source packages. See popularity, security, maintainers, and scores at a glance to make better decisions.
Feedback
Share your thoughts, report bugs, or suggest improvements.
Subject
Message

Livewire Window Size Laravel Package

tanthammar/livewire-window-size

Livewire Window Size exposes the browser's window dimensions and responsive breakpoints to your Livewire components, letting you react to resizes and adapt layouts or behavior server-side with minimal JavaScript. Easy to install and use.

View on GitHub
Deep Wiki
Context7

Technical Evaluation

Architecture fit. This is a narrow, single-purpose presentation-layer package: Blade directives plus PHP helpers that let a Livewire component decide what markup to emit based on the browser viewport. It is not infrastructure, not a data-layer concern, and it has no opinion about domain logic. That makes it architecturally harmless and easy to isolate — but also means its value is entirely contingent on one design question: do we actually need to not send markup, or do we just need to not show it?

The package inverts the normal stateless request/response contract. The server cannot know the viewport on the first request, so the library must establish a client→server feedback loop (a cookie, a request header, a Livewire property persisted across requests, or a re-render triggered by Alpine on boot). Everything good and bad about adopting it follows from that loop. If your app is already Livewire + Alpine-heavy, this is a natural extension of the rendering model. If you are on plain Blade, Inertia, or a JS SPA, it is a foreign body.

Integration feasibility. Mechanically trivial. Composer require, publish config if any, use the directives in Blade, call the helpers in PHP. Expect hours, not days, for a developer who already knows Livewire. The real effort is not integration — it is the semantic work: choosing which content is genuinely viewport-dependent, defining the breakpoint buckets, and deciding what the first paint shows.

One correction to the prior assessment: 4.0.0 did not work. mountHasBreakpoints() read a config key that does not exist, so the breakpoint set was always empty; getBreakpoint() was declared : array while returning an int, so every call raised a TypeError. Every path through the package was dead in 4.0.0. The assessment below therefore describes 4.0.1 and later only — any prior evaluation of "does this work" is void, and any lockfile still pinning 4.0.0 is running a package that silently renders its default branch forever.

Technical risk. Ranked, because these are not equivalent:

  1. First-render ambiguity (highest). Without a prior signal, the server renders a default. The user may then see content swap after Alpine measures the window. That is cumulative layout shift, flicker, and a measurable Core Web Vitals regression — precisely the kind of thing this package is pitched as improving. Mitigation requires a seeded signal (cookie from a previous visit, or Client Hints headers) and a deliberately safe default branch. The 4.0.1 notes fix config and typing, not the first-paint contract; that question is still open and still the one that decides the project.
  2. Cache poisoning / fragmentation. If rendered output varies by viewport, every full-page or fragment cache key must include that dimension, or you will serve a mobile layout to a desktop user. This multiplies cache keys by your bucket count and interacts badly with CDN invalidation. This is the risk most likely to be missed by the implementing developer and most likely to page someone at 2 a.m.
  3. SEO exposure. Mobile-first indexing means Googlebot renders at a fixed mobile viewport. Whatever branch that hits is your indexed content. Materially different content per viewport can read as cloaking. Acceptable for progressive disclosure; not acceptable for different copy or different links.
  4. Framework coupling. Hard dependency on both Livewire and Alpine, and on Livewire's internal request lifecycle. A Livewire major version is a breaking event for this package; with 23 stars and zero dependents there is no crowd to discover the breakage before you do.
  5. Quality signal from this release (raised). Both 4.0.1 fixes are single-line defects that a single unit test would have caught: a config path that does not resolve, and a return type that contradicts the implementation. Their presence in a tagged release tells you the project has no meaningful test suite, or does not run it before tagging. Extrapolate: there are plausibly more defects of the same class — config-key drift, return-type mismatches, edge cases under wire:navigate — that no user has hit yet because there are no users. This is now the strongest argument for the spike and for the fork contingency, not a footnote to it.
  6. Supply chain / longevity. One maintainer, no dependents, no third-party audit. Score of ~20 and opportunity of 29.7 reflect that nobody has validated this in production at scale — and 4.0.0 shipping non-functional confirms that the scores were not being pessimistic. The offsetting factor remains that the surface area is small and MIT-licensed, so vendoring or forking is a realistic fallback rather than a fantasy.
  7. Testability. Asserting viewport-conditional output in CI requires simulating the size signal across integration and E2E layers. Budget for it; it will not be free. Note that our own CI would have caught both 4.0.1 bugs, which is the point — the coverage we add is also the coverage the upstream project lacks.

Key questions to answer before approval.

  • How is the size signal actually transmitted, and is the first paint correct or always a re-render?
  • Does it respect Sec-CH-Viewport-Width / Client Hints, or is it cookie-only?
  • What is the cookie footprint, and does it need consent under GDPR/ePrivacy?
  • Does it behave under Livewire wire:navigate prefetch, back/forward cache, and multi-tab?
  • What happens with JS disabled, or with a crawler that never runs Alpine?
  • Which Livewire and PHP versions are pinned, and is there a stated support window?
  • Does it debounce resize events, or does every drag fire a server round trip?
  • New: does the repository contain any test suite, and did the maintainer publish a reason for the 4.0.0 regression? Request a changelog read of 3.x → 4.x before pinning; the config key referenced in 4.0.1 (breakpoints.window-width) suggests the config schema moved, and a silent schema rename is exactly the class of change that breaks integrators.
  • New: getBreakpoint()'s signature changed from : array to : int. Nothing could have depended on the old behaviour because it always threw, but any internal subclass, mock, or static-analysis baseline we write must target the new signature.

Integration Approach

Stack fit. Green light only for Laravel apps already running Livewire 3+ with Alpine bundled. Amber for apps that are Livewire-adjacent (a few islands). Red for anything without Livewire — introducing a reactive framework to conditionally render a nav bar is not a trade you want to defend in a design review.

There is also a governance cost: most Laravel shops already express responsiveness in Tailwind or Bootstrap breakpoints. This package creates a second breakpoint system, defined in PHP, that can drift from the CSS one. Mandate a single source of truth (one config file consumed by both) or you will be reconciling them within two quarters. The 4.0.1 bug is a live demonstration of this failure mode — the code and the config disagreed, and nothing detected the disagree­ment.

Migration path. Do not retrofit existing responsive layouts. Use it forward-only, on net-new surfaces where shipping hidden DOM is a genuine cost: heavy mobile-only components, large image variants, charts that should not be mounted below a threshold. Pilot on one low-risk, non-critical-path surface, instrument CLS/INP and cache hit rate for two weeks, then expand or retire. Treat "retire" as a live option — removal is a one-line composer command.

Compatibility checklist. Pin the exact version, and pin >=4.0.1 explicitly — a caret constraint resolved before this release may leave you on a build where nothing works. Confirm the Livewire constraint in composer.json matches your installed major; confirm PHP version support; verify no Alpine plugin conflicts (@alpinejs/* collisions are a common source of silent failure); confirm graceful degradation with JS off; confirm interaction with your cache layer and Vary headers; confirm the published config file actually contains breakpoints.window-width and that it resolves at runtime.

Sequencing.

  1. Spike in a branch — reproduce the first-paint behaviour and measure it, and assert that getBreakpoint() returns a value and that mountHasBreakpoints() is non-empty. That second assertion is now mandatory: it is the cheapest possible check that the release is not another 4.0.0.
  2. Define breakpoint buckets centrally (two or three, not per-pixel).
  3. Implement the first-paint strategy: seeded cookie or Client Hints, with a documented default branch.
  4. Set cache and Vary policy for affected routes.
  5. Add E2E coverage across the defined viewports plus a JS-disabled case.
  6. Write the internal runbook, including the fork procedure and the version-pin rationale.

Operational Impact

Maintenance. Low ongoing effort but non-zero ownership. The codebase is small and MIT-licensed, which makes forking or vendoring genuinely viable — budget a half-day to vendor it into packages/ if the maintainer goes quiet, and treat that as the contingency rather than a bridge you'll cross later. This release moves that contingency closer to the default plan: a one-maintainer project that shipped a wholly non-functional release is one we should expect to patch ourselves. The other maintenance obligation is tracking Livewire majors, an external event you do not control.

Support. With 23 stars and zero dependents there is no community corpus — no Stack Overflow answers, no blog posts, no prior art. Every question routes to the maintainer or your own team. Internal documentation is not optional; it is the only documentation. Conversely, onboarding cost is concentrated in the mental model (the first-paint problem, the cache implications) rather than the API, which is small enough to read end-to-end in an afternoon — and should be read end-to-end, because the 4.0.1 defects were visible by inspection to anyone who compared the config file to the method bodies. Make that read part of onboarding, not just the API docs.

Scaling. Request-level cost is negligible — reading a cookie or header is free. The scaling pressure lands on your edge: cache key cardinality grows with viewport buckets, and resize-triggered Livewire updates are network round trips, so a user dragging a window can generate a burst. Confirm debouncing. Keep buckets coarse; there is no justification for more than three.

Failure modes to design against.

  • JS blocked or failed → default branch; ensure the default is the complete, usable experience, not a degraded one.
  • Cookie rejected or consent-gated → same fallback path.
  • Stale cached HTML served against the wrong viewport → broken layout, worst-case unclickable UI.
  • Livewire upgrade breaks the directive silently → content simply stops varying, which is invisible in testing unless you assert it.
  • Crawler receives the mobile branch → ranking and content-consistency review.
  • Resize thrash → request storm; debounce or clamp.
  • Silent upstream regression → a version bump reintroduces a config or typing defect and the package reverts to always-default with no error. This is no longer hypothetical; it is the documented history of 4.0.0. Mitigate with an assertion test in our own suite that runs on every dependency update.

Ramp-up. Half a day for a mid-level Laravel developer to use the API competently; one to two days to use it safely, meaning to understand the first-paint and caching semantics well enough not to ship a regression. Add mandatory review from whoever owns the edge/CDN layer — that is where the incidents will originate, and that person is typically not the one writing the Blade directives. Add, for the first adoption only, whoever owns dependency hygiene: they should confirm the pin, read the diff between the release we adopt and the release before it, and decide whether we vendor.

TPM position. The capability is real but narrow: it is for teams who must avoid sending markup, not merely hiding it. For the majority of responsive requirements, CSS media queries remain cheaper, cache-friendly, better understood, and better indexed. 4.0.1 resolves the "it is broken" blocker and adds no capability — the first-paint and caching questions that decide this project are untouched, and the release has lowered our confidence in upstream quality while raising the value of our own test coverage. Approve conditionally, unchanged in shape but stricter in terms: Livewire + Alpine already in place, a specific payload or mounting problem to solve, a measured pilot, a named owner for the caching policy, an exact pin to >=4.0.1 with our own assertion test, and a fork budget already allocated. Absent those, decline and revisit if adoption signals improve — noting that adoption signals have not improved as a result of this release, only correctness.

Weaver

How can I help you explore Laravel packages today?

Conversation history is not saved when not logged in.
Prompt
Add packages to context
No packages found.
htinlynn/genius-helper
maco-studios/hephaestus
elmogy/larafast
xeviant/laravel-paystack
gorilladash/laravel-website-sdk
martialbe/flysystem-oss
chondal/3312client
jeroen-g/flickr
opscale-co/nova-genbi
itsjustvita/laravel-retention
tequilarapido/trackit
gregsphotography/site-builder-filament
cabaoctavio/laravel-query-log
gregsphotography/site-builder-components
io-digital/clickatell
snowsoft/laravel-admin
oxygen/auth
relicsoftware/barakah-payment-gateway
tobya/work-with-composer
equipc/laravel-email-validator