jesstelford / extract-to-react Goto Github PK

View Code? Open in Web Editor NEW

62.0 3.0 9.0 4.55 MB

Chrome/Chromium extension for easy HTML to React conversion.

JavaScript 97.90% CSS 0.80% HTML 1.30%

extract-to-react's Introduction

Extract to React Chrome DevTools Plugin

Chrome/Chromium extension for easy HTML to React conversion.

Extract all the HTML & CSS of any portion of any website directly into a ready-to-go React Component!

Installation

Grab it from Google: Extract to React

Usage

Quick start

Inspect an element on the page > "Extract To React" tab > Extract the code to CodePen or JSFiddle.

Advanced usage

It is possible to split a monolithic component up into multiple nested components.

Find the elements you wish to become their own component in the "Elements" tab. Add an attribute called data-component. Set the value of data-component to be the extracted name of the component:

<h1 class="heading" data-component="Heading">Hello, world!</h1>

<nav class="nav" data-component="Nav">
  <ul class="list">
    <li class="list-item" data-component="ListItem">#1</li>
    <li class="list-item" data-component="ListItem">#2</li>
  </ul>
</nav>

Will result in 3 components being extracted: Heading, Nav, and ListItem

Building From Source

git clone https://github.com/jesstelford/extract-to-react.git
cd extract-to-react
npm install
npm run build

Now load as an Unpacked extension via chrome extensions page. Point to the extract-to-react/lib folder for the compiled extension.

Bugs and Features

If you found a bug or have a feature request, please create an issue here on GitHub.

https://github.com/jesstelford/extract-to-react/issues

Attribution

This project is based on excellent open source software:

SnappySnippet: Chrome/Chromium extension that allows easy CSS+HTML extraction of specific DOM element. Created snippet can be then exported to CodePen, jsFiddle or JS Bin with one click.
html-to-react-components: Extract annotated portions of HTML into React components as separate modules

License

Ugh... The GPL virus has infected this codebase :/

This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.

You should have received a copy of the GNU General Public License along with this program. If not, see http://www.gnu.org/licenses/.

extract-to-react's People

Contributors

Stargazers

Watchers

Forkers

jraleman afrog33k latentstops vaelek keiich-jp therakeshpurohit edgesite jpalbright31

extract-to-react's Issues

Panel UI in React

html2react 1.6.5

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

Error after extracting

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>

Highlight selected element in-page

A-la DevTools / React plugin.

Resources research so far:

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

Error reporting within extension

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

React errors when there is a very large extraction

Error after extracting

Error:

<TODO: Fill in your error>

Version: v1.0.2

URL: https://ssico.ir/

Create a logo

Marketing Announcements

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

The Answer To The Ultimate Question Of Life, The Universe And Everything

when generating a styles object, if the first key is margin the value is not followed by a comma, making the object invalid

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

Dark letters in "Extract to React" tab in Chrome

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

Usage info in UI

Such as:

How to select what to extract
Extracting multiple nested components

Error after extracting

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*/

Render in extension

Depends on #8.

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

Don't require 3rd party upload

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

Don't double-extract HTML/CSS

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 after extracting

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>

Create publishable extension

Homepage

gh-pages
custom URL

Chrome 61.0.3163.100 (64-bit) extract to CodePen -> nothing happens

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

Some CSS rules missing

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 after extracting

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>

Show loading indicator on first extract

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

Support psuedo elements when inlining styles

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

Disable generate buttons until element selected

Error after extracting

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>

Dogfood to create Panel UI

Error after extracting

Auto-detect repeating tags

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

Screenshots

Bug in iframe creation code

Causing errors.

Google Analytics

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?

Inline styles

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

Remove jsFiddle due to incorrect POST resource order

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

Easier way to indicate nested copmonents

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)

Error after extracting

Error:

<TODO: Fill in your error>

Version: v1.0.1

URL: http://localhost:8080/

Error after extracting

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>

<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>

Error after extracting

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>

Error after extracting

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">

Add author / attribution to panel

Author
OSS Attribution
Project homepage

jesstelford / extract-to-react Goto Github PK

extract-to-react's Introduction

Extract to React Chrome DevTools Plugin

Installation

Usage

Quick start

Advanced usage

Building From Source

Bugs and Features

Attribution

License

extract-to-react's People

Contributors

Stargazers

Watchers

Forkers

extract-to-react's Issues

Recommend Projects

Recommend Topics

Recommend Org