How to inject multiple React components using a browser extension - javascript

I have written a set of React components and would like to apply them to a website using a browser extension.
The components are highly interactive, complex and nested hence choosing React to develop.
I plan to use a browser extension to inject them into websites, just as a search browser extension would inject markers to highlight words on a page.
How would I go about this?
Usually, React renders to a single container. If I want to inject multiple React components into an existing site, would I need multiple containers and renderers? Is there a better way?

Related

difference between _app.js and document.js

I downloaded html css template and trying to integrate in "nextjs". What is difference between "_app.js" and "document.js"? where should i use/include "css, js" files? either in "_app.js" or inside "document.js" ?
As nextJS docs specify related to _app.js:
Next.js uses the App component to initialize pages. You can override it and control the page initialization and:
Persist layouts between page changes
Keeping state when navigating pages
Custom error handling using componentDidCatch
Inject additional data into pages
Add global CSS
Next page of the docs also specify that _document.js is:
A custom Document can update the and tags used to render
a Page. This file is only rendered on the server, so event handlers
like onClick cannot be used in _document.
So basically your global css should go in App.js. However if you need to import certain CDN styles for some libraries I suppose you can do that here as well (but you should probably consider using just _app.js for this as well as it can be seen in this example)
Regarding the JS question as wikipedia states:
Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites.
So basically you should import React components where you need them, but I would recommend you to follow a tutorial if you need to learn more about React (There are a lot of beginner NextJS tutorials that can cover this).

How to download React components for offline use

Is there a way to download React components and also have full javascript functionality? For example, a table component that still can be sorted without a network connection. Offline-first seems to be a possible solution but doesn't exactly specify how to deal with individual meeting. Another possibility is converting the React application to pure javascript that can be run on the client side. But, essentially isn't that what the React compiling does anyway?

multiple react apps (components) on the same page?

I need to develop some basic components to add them to an existing webpage. I want to start with the default create-react-app. In the end, I will end up with src/FirstComponent.js and src/SecondComponent.js
I need to build both components individually. When I run yarn build i get a main.hash.chunk.js that hash the two components merged. Is there anyway to end up with two different main files? Is that a bad approach?
If I need to use a third party library, lets say axios, and I will need them on both components... Will it be imported twice?
Any advice would be appreciated!
If I need to use a third party library, lets say axios, and I will
need them on both components... Will it be imported twice?
If the existing webpage you would like to plug these two new components into is a ReactJS app then you might want to consider making these two components presentational components (for more info). The axios request will happen in the existing web page and the data that each component needs will be available to them via props. I hope that helps somehow.

Is it possible for Vue Web Components to have listeners or interact some other way?

I am trying to develop multiple Vue.js components written as .vue single file components. The requirements is that such components need to be embedded by front-end designers directly into HTML using element.
Since i cannot achieve this with default compilation method provided by webpack, i figured out it could be done by compiling (more correctly, transpiling) as web components.
Is it possible to use Vue Web Components with listeners as you would with regular Vue Components?
<some-web-component #some-event="someFunction()"></some-web-component>
I couldn't find any examples of this, all which i found had only a simple component with some props, displaying a message. Is this even possible?
If not, is there some other way to achieve communication between Web Components?
Similarly asked here:
https://forum.vuejs.org/t/using-vue-single-page-components-directly-in-html/66384
For anyone wondering the same, I've found the solution to be using Vuex store.

Handling application-wide elements in an MVVM view model

I have been trying to find some good sources on how to handle application-wide elements when using MVVM for web development. I am using knockoutjs.
By application-wide I mean elements like a site's navigation. Perhaps each page has a login box, search box, a footer etc.
Should these go into a separate view model? Or should you derive each page's view model from a base view model containing these? Or should these properties be left out of a view model alltogether?
Thanks in advance.
Consider treating all your supporting components (menu, footer, etc) just the way you treat your business components. Also I recommend having separate viewmodels per UI component regardless of type of the UI component. This makes your components highly loosely coupled.
For example, the menu may have own view model (without being a part of any global viewmodel). Now you may use a PubSub library to implement publisher/subscribe notifications to have loosely coupled communication between different UI components (viewmodels), where your business components may show/hide themselves as per the event request.
But specifically for implementing a menu component, I recommend using a router library that can respond to the URL changes (hashtag part of URL). Then you can simply change URL when users navigate on the mainmenu (simple anchor tag), and your component will be activated/deactivated by the router library. This will let you to bookmark and use browser history buttons.
Have a look at http://boilerplatejs.org which is a reference architecture for large scale JavaScript development. It has all above implemented on it's sample application. It uses UrlController to activate/deactivate components based on URL changes, where as DomController is used to place components statically on the DOM itself (e.g. for menu, footer, headers ). It uses knockoutjs for most of the sample UI components.
Disclaimer: I'm the founder of BoilerplateJS

Categories