GoogleChromeLabs/quicklink

An additional `div` markup is wrapped around each router component by `withQuicklink` HOC

Open

#193 opened on Jul 2, 2020

View on GitHub
 (1 comment) (1 reaction) (0 assignees)JavaScript (10,861 stars) (431 forks)batch import
help wanted

Description

Describe the bug As you can see in the HOC, we have an additional div markup wrapping around the Component (probably it would be a route component) so inserting that div markup could break the app styling since the app styling does not expect another div to be inserted by withQuicklink HOC. Capture

To Reproduce If we use nest CSS selector without considering that div, we might break the styling.

Expected behavior I hope we could avoid adding any wrapping markup around a route component if possible. At least, I hope we manage to avoid impacting the rest of the app as well as the styling in any case.

Version:

  • Quicklink 2.0

cc @addyosmani @demianrenzulli

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React basicsUnderstanding of HOCs
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Look at the withQuicklink HOC in the source code (likely in src/quicklink.js or similar). Identify where the extra div is wrapped around the component. Consider using React.Fragment or simply returning the component directly. Ensure that removing the div does not break the prefetching logic or the expected behavior of quicklink. Check if there are existing tests for withQuicklink and update them accordingly. Also verify that the styling of any demo or example app is unaffected.