jesstelford / extract-to-react Goto Github PK

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://ssico.ir/

Possibly due to ancestor CSS not being applied?

In particular; the font-face is missing.

Looks like it should be applied though, since the algorithm uses getComputedStyle for each element.

Try wrapping the output elements in ancestor html, and also dumping ancestor css to see if it fixes it.

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://dinoswap.exchange/farms?t=l

Extracting:

<button class="sc-dkPtyc hCTuXc" width="100%" scale="md" data-snapshooter-original-id="" id="BUTTON_1">Unlock Wallet</button>

• Author
• OSS Attribution
• Project homepage

See jsfiddle/jsfiddle-users#736

• Stringify psuedo elements' properties along with the selector, then add as a <style> tag as a child node to the node being converted
• If node being converted cannot have children, throw a warning about losing psuedo selectors
• Alternatively; Keep the separately generated stylesheets

Such as:

• How to select what to extract
• Extracting multiple nested components

Generate a github issues link for when an error occurs within the extension.

Error:

<TODO: Not Loading>

Version: v1.0.2

URL: https://www.google.com/?safe=active&ssui=on

Extracting:

<div class="o3j99 qarstb" data-snapshooter-original-id="" id="DIV_1"><style data-snapshooter-original-id="" id="STYLE_2">.vcVZ7d{text-align:center}</style></div>

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://flone.reactdemo.hasthemes.com/home-grid-banner

Extracting:

<img src="/assets/img/product/hm6-pro-3.jpg" alt="" data-snapshooter-original-id="" id="IMG_1">

#IMG_1 {
    block-size: 626.422px;
    box-sizing: border-box;
    cursor: pointer;
    height: 626.422px;
    inline-size: 381px;
    perspective-origin: 190.5px 313.203px;
    text-align: left;
    text-size-adjust: 100%;
    transform: matrix(1, 0, 0, 1, 0, 0);
    transform-origin: 190.5px 313.211px;
    vertical-align: middle;
    width: 381px;
    font: 14px / 24px Poppins, sans-serif;
    transition: all 0.5s ease 0s;
}/*#IMG_1*/

#IMG_1:after {
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    text-size-adjust: 100%;
    font: 14px / 24px Poppins, sans-serif;
}/*#IMG_1:after*/

#IMG_1:before {
    box-sizing: border-box;
    cursor: pointer;
    text-align: left;
    text-size-adjust: 100%;
    font: 14px / 24px Poppins, sans-serif;
}/*#IMG_1:before*/

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://abibl-car-bike.fynity.in/bike/vehicle-details?enquiry_id=2021121700001730

Extracting:

<li class="customStep2" data-snapshooter-original-id="" id="LI_1"><p class="sc-fxNMLY EwrTW px-0 mx-0 py-1" data-snapshooter-original-id="" id="P_2">Variant</p></li>

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://unilight.fynity.in/landing-page

Extracting:

<a role="button" tabindex="0" class="btnLp sign-up" data-snapshooter-original-id="" id="A_1">Login</a>

For big extractions, it can take some time, so we need to indicate it in the UI.

Error:

<TODO: Fill in your error>

Version: v1.0.1

URL: http://localhost:8080/

In Chrome 61.0.3163.100 extracting to Codepen leads to empty editor's tabs

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://sofinnovapartners.com/

Extracting:

<header class="container padding index_header__8k7Yb" data-snapshooter-original-id="" id="HEADER_1"><h1 class="hm-3 hd-1 titleLoop_titleLoop__AKd5z" data-snapshooter-original-id="" id="H1_2"><span class="titleLoop_wrapper__AZGCx" data-snapshooter-original-id="" id="SPAN_3"><span class="titleLoop_title__qeRMf" style="transform: translate3d(0px, -7%, 0px);" data-snapshooter-original-id="" id="SPAN_4">Partners for</span></span><span class="titleLoop_wrapper__AZGCx" data-snapshooter-original-id="" id="SPAN_5"><span class="titleLoop_word__lqR1c" style="transform: translate3d(0px, -7%, 0px);" data-snapshooter-original-id="" id="SPAN_6">Healthcare</span></span></h1></header>

A-la DevTools / React plugin.

Resources research so far:

• https://github.com/facebook/react-devtools/blob/master/shells/chrome/src/main.js#L35

See jsfiddle/jsfiddle-users#736 && #37

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://emailpassword.demo.supertokens.com/auth

Extracting:

<div data-supertokens="label" data-snapshooter-original-id="" id="DIV_1">Email</div>

• JSWeekly
• React Newsletter
• Tweet:
  • Lee Byron
  • Vjeux
  • Jed Watson

So I have a pen that fails, but I don't have a real way to report it. Maybe the generator could output a hash that can be used to deterministically retry builds to test and retest features?

url + xpath or something?

Maybe a UI where the user can select sub-elements from the already selected element?

Also need to be able to name the component (or at least; change the default)

I seem to remember something having to get the user to opt-in to tracking in some cases, such as the EU. If so, we need to add this option.

Give user the option to generate inline styles instead of separate CSS.

• Remove the to-string conversion
• Stringify the properties only, and add them as a style attribute to the HTML node

when I visit github.com
when I am logged in
when I open developer tools
when I select the elements tab
when I select the div that has the class header header-logged-in true
when I select the Extract To React tab
when I click the codepen button
the generated javascript contains two errors

It is extracted once when the extension opened, then again when the button to extract is clicked.

The only action we need to perform when clicking the button is to convert to react.

Error:

<TODO: Just try to identify the error>

Version: v1.0.2

URL: https://www.creativeboom.com/resources/20-best-websites-with-mockups-for-your-graphic-design-projects/

Extracting:

<div class="masthead__logo-container masthead__logo-container--eyes-visible" data-snapshooter-original-id="" id="DIV_1">
              <a class="masthead__logo" href="https://www.creativeboom.com/" data-snapshooter-original-id="" id="A_2">
                
              </a>
            <canvas class="masthead__eyes" width="90" height="90" style="width: 70px; height: 70px;" data-snapshooter-original-id="" id="CANVAS_3"></canvas></div>

• gh-pages
• custom URL

We can show the converted code directly in the extension - no need to upload elsewhere (if we don't want to).

And make it a single react component that is mapped over.

Causing errors.

Hey! FYI, I've recently released 1.6.5 that introduces public: annotation for HTML attributes to convert them into React props, thought you might be interested in updating this for extract-to-react https://github.com/roman01la/html-to-react-components#usage

• Timing of extraction
• Clicking to extract
• Having something inspected on session start
• Scrolled usage info into view
• Exception / errors
• GA params on 's in footer of panel
  • Does GA automatically track link clicks?

Hi.

I'm using Dark Theme in Chrome Inspector (Settings in developer tools -> Appareance) and in the "Extract to React" tab i can't read the info because the contrast.

Can you add a white background or change font color for dark themes?

Thank you

Error:

<TODO: Fill in your error>

Version: v1.0.2

Extracting:

<link rel="stylesheet" type="text/css" property="stylesheet"  data-snapshooter-original-id="" id="LINK_1">

Depends on #8.

We can render extracted components directly in the extension's panel UI.