So I am trying to inject some javascript into a website to scrape some information. However, if I could get a reference to the react component my life would be made a lot easier. I have looked at several questions on Stackoverflow but nothing useful turned up:
Reactjs - Get a component from anywhere in the app
React - get React component from a child DOM element?
I realize that react is basically just rendering the DOM by using its internal state and so reversing the DOM is not an option. Moreover, since the javascript on the website isn't mine I can't exactly have a global reference to the React component when its created. What I would really like is to have the '$r' that the react chrome devtools provides when you choose a DOM element but without having to rely on the chrome extension. I guess my question really boils down to how can I get the same representation that the chrome dev tools does so that I can reference a react component without actually creating a global variable. Also note I don't really care about efficiency or best practices I just want the reference to the component the same way that the devtools does it.
Related
I was going through Mui's Server-side Rendering DOCS.
And It says to prevent FOUC, we should inject style to rendered HTML on server side.
This was very clear.
But after that, it says "On the client-side, the CSS will be injected a second time before removing the server-side injected CSS."
this is the part I don't get.
why should we inject CSS again on client-side if it's already injected server-side?
Is there any difference between client-side cache and server-side cache?
And what is benefit of doing this?
If I had to guess, it would be that if some new Material UI element appears during runtime, the client needs to be able to handle that. SSR after all is for the initial loading of the page. So basically it is client rerendered to allow being dynamic.
This however creates issues for me personally as well since the new tag overwrites my Tailwind . Am trying to figure out how to render the client version above/before the Tailwind one, hence is why your question popped up on Google.
Edit: If I remember correctly, I solved using emotion; https://emotion.sh/docs/ssr
Is it possible to change how google chrome views the collapsed form of objects for debugging? I've heard reference to creating functions called toString but I was unable to get them to work, so assumed that those questions were somewhat dated.
I'm in need for help with being able to access and manipulate DOM using CEF. I've been researching and have found that CEF only provides readability of the DOM with methods such as CefDOMDocument, ViewDOM, etc. These are to be called only on the render process main thread, however, I'm not well versed in threading and am not sure where to implement methods within the CEF code (which .cpp file and under which class, etc.). From there, I know CEF doesn't support manipulating the DOM directly but allows this ability through the use of JavaScript.
So my question...
Can someone please provide the information (an example would be extremely helpful) on where/how to access the DOM using CEF? I have been attempting under this piece of code within cefclient_win.cpp...
CefBrowserHost::CreateBrowser(info, g_handler.get(),
g_handler->GetStartupURL(), settings, NULL);
But I believe this is part of the browser process and not the render process...
If you were to also know how to then manipulate the DOM with JavaScript (I have found methods such as ExecuteJavaScript() but am facing the same problem with this as I am with viewing the DOM) that would be helpful too, but just an example on helping a beginner like me view the DOM through CEF would help tremendously.
You'll find all you need to build your solution with this:
dom_test.cpp
In this file, have a look to:
line 84: Class which implement CefDOMVisitor (implement the Visit method)
line 111: Visit the DOM
In order to visit the DOM here is the API documentation of the CefDOMVisitor.
In the Visit method you can access to the CefDOMDocument and you can start visiting the DOM.
There is also this C# tutorial you should have a look in order to understand how does it work.
Hope that helps.
We are develpoing a web-based automation solution for a web application that is built using ExtJs.
Currently i am testing various different object identification techniques that identify web elements in the best way.
We'd like to use the IE developer tools (F12) to highlight and select DOM objects on the page, and (somehow) get their corresponding ExtJs component (along with its corresponding properties, such as itemId).
Is this possible to do through code or through some other technique?
I am unfamiliar with IE Dev tools for such things, however I can attempt to answer targeting specific components and their elements.
You can target Ext components via several ways:
Ext.ComponentQuery.query(CQselector) method (see docs for examples)
Ext.getCmp(componentID) if you know component ID
up() and down() methods from any container/component. these also take CQselector expressions
Any of these methods are accessible from the page since Ext library is loaded. In browsers like FF and Chrome you can execute these methods directly from the console. I am guessing similarly they should be available in IE Dev tools.
Once you have reference to the Ext component you can get HTML elements through .dom or .el or similar properties. Or you could use Dom query directly.
I believe that if you set the id property rather than the itemId, you can achieve the desired result as this is passed through as the html id property of the top level container for the component (I think!). It's a little complicated to get that to work with accuracy though given the amount of nested divs/tables that are used in most of the extjs components. Good luck!
Hard to tell what you're looking for, but if you're trying to get a reference to an Ext.Component that is rendered, you can look for the wrapper node for your component in the HTML structure. The HTML id is the same as the component id. If you run var comp = Ext.getCmp('some-id-12345') and if that returns something, you've found the wrapper for an Ext.Component.
You could then use
comp.itemId
To retrieve the itemId
You should look into http://www.illuminations-for-developers.com/ A plugin for firebug that shows Ext.Components.
You can also use the Sencha Page Analyzer to see the entire component tree
I'm investigating Adobe CQ5 and would like any advice on how to integrate its drag-and-drop UI to create a responsive website. It seems as if it works on a concept of fairly bland templates with components that can be dropped in pretty much anywhere, including things like "three-column control" - which would make designing a responsive grid structure very hard (as it would be hard to prevent users from dropping in a control that could ruin the layout).
Does anyone have any experience or advice on this? I'm really looking for deep technical details on the structure of templates vs components (paragraphs), and where/how to manage to the CSS.
CQ5 offers ways to control what can be done within a template, so thinking that components "can be dropped in pretty much anywhere" may be misleading. Page templates are designed and configured so that you control which components can be added to a certain area of a page. This allows you to only make those components available that will work with the template layout, excluding components that would wreck the layout. Then authors are only allowed to use things that will work. If they attempt to drag a component onto a paragraph (parsys) where that component has not been configured as available, the UI will not allow them to use it there. So CQ actually makes it easy to prevent users from dropping a control somewhere that would ruin the layout.
This is outlined a bit here:
http://dev.day.com/docs/en/cq/current/howto/components_develop.html#Adding%20a%20new%20component%20to%20the%20paragraph%20system%20%28design%20%20%20%20%20mode%29 which states that
"The components can be activated (or deactivated) to determine which
are offered to the author when editing a page."
When it comes to CSS and JavaScript, you can create a client library and then include the relevant client library on the page. Backend CQ functionality will take care of combining multiple CSS (or JavaScript) files into a single minified file to allow for a single HTTP request of an optimized file. This it outlined a bit here:
http://dev.day.com/docs/en/cq/current/developing/widgets.html#Including%20the%20Client-Sided%20Code%20in%20a%20Page as well as
http://dev.day.com/docs/en/cq/current/howto/taglib.html#%3Ccq:includeClientLib%3E
So you might develop several components that share a client library, then when any of the components is added to a paragraph the client library will be included on the page. You may also want a CSS library that applies to all the templates to give a common look and feel, yet allow components to add their own when they are used.
These guidelines for using templates and components outline how you provide control, yet flexibility:
http://dev.day.com/docs/en/cq/5-5/developing/developing_guidelines_bestpractices.html#Guidelines%20for%20Using%20Templates%20and%20Components
I'll document our successful WIP experience with RWD and CQ5
Assumptions:
A well documented style guide.
Our First Steps:
Modified existing column control component css to utilize twitter bootstrap grid css.
Create a base page property allowing two different classes on the grid container to be set and inherited by child pages. (container||container-fluid).
Leverage out-of-the-box components where ever possible.
All component widths inherit the width of their parent container allowing for components to be dropped into any location within a template.
Issues:
The out-of-the-box column control component can not be nested.
We are looking into building a custom column control component.
Takeaways: this is an evolutionary project and we are constantly iterating.
With the recent launch of AEM 6.0, they have an example website called as Geomatrixx Media. This website is responsive.
You can take this example as reference and start building on top of it.