Loading a custom css into a WebComponent in React - javascript

My goal is to load a custom css file that I have in a module ( https://github.com/raduzoom/dzs-chip-selector ) into a WebComponent ( defined in the same module )
The code is here - https://stackblitz.com/edit/react-ts-cqqwbe?file=src/App.js
When I am not using react, I add the style as a child of the component, and then load the style from the WebComponent code:
<dzs-chip-selector ref={this.myRef} data-persistentOptions={JSON.stringify(this.chipSelectorOptions)}>
<link rel="stylesheet" data-lazy-href="dzs-chip-selector/style/skins/skin-default.css"/>
</dzs-chip-selector>
This works fine, but does not work in React because when rendering, the web component
is passed without children to the engine.
What I have done is EJECT react scripts, use the web component in ref - ref={this.myRef}, then loading the style in an async way
async function loadCss(){
import('chip-selector/dist/style/skins/skin-default.css').then((...args) => {
const cssStyle = args[0].default[0][1];
$myRef.wrapper.insertAdjacentHTML('beforeBegin', `<style>${cssStyle}</style>`)
})
}
This works, but it is hackish. And when I tried to include the code into StackBlitz, it errors out. Is there an other way that is less hackish and works in StackBlitz ?
interesting: Response from ChatGPT
first prompt, which I already tried before his suggestion, seems like my code +- a few array indexes
then I explained further what I need, like I did in this post
Quite impressed it understood my query. Never used that library, so I'm going to try this long shot, but do you have any better suggestions ?
PS: Also found this article - https://www.wpeform.io/blog/render-react-app-shadow-dom-styled-components/ - maybe ChatGPT put me on the right path, even if that's not exactly the answer from my first try

Related

Visual builder to work with manually hard-coded templates/components

I wonder, is it possible to create a visual no-code builder to work with JS components (e.g. React JSX) if them are manually hard-coded before?
Let me explain what I mean.
Suppose a simple React component pages/index.js previously written by a developer manually:
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
How can we change such a component in the front-end using a visual builder?
For example, we want to add a new HTML element (e.g. H1) inside the existing div.
As I can understand, the builder first needs to know in which JS file the HTML markup is stored to update it. So we can add id="homepage" to the div first and then store a relation as a config like
{"homepage": "pages/index.js"}
And now if we add a new element inside <div id="homepage">, the builder adds the element to the DOM of the div at the client, then takes the whole updated DOM of the div and writes back to the file index.js according to the config
Ok, but the file contains not only HTML markup - it's JS (React) code.
How to keep all the JS code e.g. function HomePage(), return, export default and so on ?
As an option, we can separately load all the JS code as HTML including non-HTML code as #text nodes. Then update the DOM and re-write everything back to the file.
But it sounds complicated and may cause unexpected issues.
So what solution would be the best?
Or maybe there is a ready React-specific solution?
Or maybe it's a bad idea at all to parse and re-write manually hard-coded components by visual builder and the only solution is to store everything as JSON like "homepage":{"div", {"class":""}, "Welcome..."} which is more easy for re-writing ? (but requires a new render)
It depends
I believe the answer that you are looking for very much depends on the level of flexibility that you want your no-code builder to have.
Depending on that, your project could benefit of the trade-offs and advantages of different solutions.
Let's briefly remember that basically a React component will need some props that then will be taken through a render template and output a working HTML. This is assuming a basic case where you don't need your react components to be smarter. Additionally, JSX is just sugar coating over function calls, so you could basically just compose functions to output a React component independently of using the JSX syntax. Hence no need to declare HTML, just changing the output of your no-code tool to JS instead of HTML.
For example, if you can modify how the no-code tool render, you can specify that when moving an element inside another you basically:
Highly Flexible & Customisable
In a highly flexible setup, I will recommend going through the last option you numbered, having a Data-Driven UI is the most common of the cases for complex systems. For example, Figma has an option to export the designs as react components, you can read how they do it here. Basically they take the tag output from figma which is a JSON of tags and create some React componets using templates. If you define "you own UI language" you could have quite a good control over what blocks you can build and define the way of interacting with them (e.g. adding a img component could be quite easy if you know the props and what it needs to render, then creating a React template for it is easy).
Limitations: you require to plan quite well the API of the parser and interaction between different sets of items.
Simple no-code builder
For simpler scenarios you could go with the first approach that you mention, you won't even need to add ids, some tools like React Developer Tools can already inspect the VirtualDOM to understand which part of the render belongs to which React Element (using react internals, which could take some time to understand, but for example you can inspect in the rendered how they use the data-reactid for identification). Knowing this, you can already define the template functions for the render() method (so the JSX output), and separate it code wise, so that when you generate the code, the HTML template is split from the React code as much as possible.
Silly example of how it could look:
// htmlBlockTemplate.js
export const helloPageTemplate = (props) =>
`<div> <h1>${props.title}</h1> </div>` // This can be generated from the `no-code`
// page.jsx
export const Page = (props) => {
return helloPageTemplate(props)
}
Using functions it could look like:
const Page = (props) =>
return React.createElement('div', null,
React.createElement('h1', title: prop.title, `The title ${title}`)
);
}
Limitations: eventho you could, adding custom components (like another React Component or a web component), it becomes more difficult since you will also have to deal with the import graph and probably.
Inevitably you will need to tweak how the render of the component works (rather by creating a parser from your UI language, or changing how the react component is written. If you have a good control of AST, then writing a parser for either of the cases should not be a problem.

No errors present => ReactDOM.render() method nowhere to be found

I'm trying to learn more about React.js from the ground up.
While reading the documentation I found that using ReactDOM.render(element, Document.getElementById("root")) would pass the JSX referenced by the word element to the element with id="root" in an HTML file. This shows what I mean.
When I looked through my repo created with the command npx create-next-app --example with-tailwindcss <app-name> I noticed that not only is there no ReactDOM.render() method being used anywhere in the file structure, but there is also no HTML file anywhere in the repo and all of the data seems to flow into index.js which returns the final JSX elements, but I can't find where that Home function is called as <Home /> anywhere.
Is there an HTML file hidden somewhere that I'm missing or is there some sort of more advanced level coding at play here that picks up the return from the Home function and does the ReactDom.render() functionality some other way? Maybe like in binary or with transpiling or something? I'd really appreciate some documentation that explains this in detail with examples.
This repo is powered by NextJs, so yes - there is an extra level on top of React, looking for any React component in pages/index.js to render the root, by naming conventions of framework, there are few places mentioning this in docs

Can I use a React app as a component on a static HTML page

I'm new to React and JS, and working with react-csv-viewer.
It works as expected and I can build and deploy it on a local server. But I do not require this, I just want to integrate the app as a component of a static HTML page.
I've tried following the process listed on the React tutorial for this, but I have trouble understanding the build process and how can I achieve this.
All I wish to achieve is to be able to use <CsvViewer /> provided by the author, possibly like this
const rootElement = document.getElementById("root");
ReactDOM.render(<CsvViewer />, rootElement);
and get the viewer app rendered at my HTML file, without building and deploying the viewer app on a (local) server.
Will appreciate any help or hints in this regard.
You can add React as it was shown in the tutorial you linked. The downside is that, you can't use JSX syntax (as it should be converted to JS during build time as it's not recognized by browsers as so).
Here is a post explaining how you can do so without transpilaton steps.
https://codepen.io/alexkrolick/post/react-without-a-build-step
Alias React.createElement, and call it to create components.
e.g.)
const h = createElement // convenient alias
// Instead of
<div className="foo" />
// create an element like so
h("div", { className: "foo" })
For more info on how that works, check out the official documentation.
https://reactjs.org/docs/introducing-jsx.html#jsx-represents-objects
But I really doubt anyone writes React code that way without a transpilation step in real life.
Would creating a separate site/page with React be a problem by chance? You can check out ParcelJS to easily create a React site if you aren't familiar with transpilation.

Using existing cljs components in a React project?

https://www.reddit.com/r/Clojure/comments/4el0xi/how_to_use_an_existing_reactjs_component_with/
There is this existing post about using existing ReactJS components in a CLJS/Reagent project. I'm looking to do the opposite. I have a bunch of CLJS components and would like to compile them into a ui library of some sort so that they can be used by React developers. That is, if I have a button CLJS component, I would like to be able to render that Button using < Button /> or mylib.Button(_) etc.. in a React/js app file.
I have read this - https://shadow-cljs.github.io/docs/UsersGuide.html#target-node-library - extensively but it's not quite working out. I've been using ":target :node-library" and I can get simple functions (that return strings/numbers, for example) to compile and work in my app, etc.. but it doesn't work for entire components. For example, my cljs button component takes in :
defn button [props & children]
but when I try to pass in these parameters (I call {lib.button({}, {})} in my App.js file), I get errors like "No protocol method IMap.-dissoc defined", because I'm trying to pass JS objects into CLJS-only functions, I believe. Not sure how to resolve this..
I can explain more on this if it would help clarify. It would also be super helpful if anyone had a reference demo project or any resources they could link me to.
I only have a few suggestions:
You can try to build a new sample project to consume your library with lein new figwheel myproject and use JavaScript interop to move one step at a time closer to the native JS way of using your library.
You can create an interface namespace that can consume JS objects and wrap these into Clojure data structures to sort out the protocol errors you're seeing, eg. functions that take a props parameter and pass down (js->clj props) to the rest of the code underneath.
For the authoritative source, check the Reagent docs, especially this: http://reagent-project.github.io/docs/master/InteropWithReact.html#creating-react-components-from-reagent-components

Using an external React component on Rails application

I am trying to use the rc-slider React component on a existing Rails application that is using react-rails gem and it already have some other components that were built within the application that work just fine.
Based on this blog post I've been able to follow its first 3 steps, I've found the minified and browser-ready version of it here, added the file to the suggested path and required it on the application.js as recommended but even seeing the code within the Sprockets generated application javascript file that is rendered on the browser I can't see or use the supposed global variable it would provide according to step 4.
In the component's examples page it uses a const Slider = require('rc-slider'); statement in order to get that available. I've tried that but without luck as it throws: Uncaught ReferenceError: require is not defined. The same happens when I try the README usage's section approach: import Slider, { Range } from 'rc-slider';. I've tried both from an existing JS where I load other React components and also from the browser's Dev Tools Console window.
Am I using the wrong approach to the problem or maybe missing/overseeing any concept or basics here?
If you want to use Sprockets, you can get a pre-compiled version of rc-slider from unpkg:
https://unpkg.com/rc-slider#6.0.0/dist/rc-slider.js
Taking a look at the source, I see it exports the library as rc-slider:
So you can access it as window["rc-slider"] and use it from there, for example:
var RCSlider = window["rc-slider"]
var container = document.getElementById("container")
ReactDOM.render(
<div>
<RCSlider />
<RCSlider.Range />
</div>,
container
);
jsfiddle
That way, if you put rc-slider.js in the asset pipeline, you can use RCSlider in your javascripts.

Categories

Resources