does ReactJS support some plugin loading at runtime?
I have developed a client app based on ReactJS. It should be possible for other users of my software to extend the Web UI by writing custom extension.
My ReactJS Base application is already transpiled (webpack + babel) to a build.js file.
Other user should create there own .js file which are loaded by the browser separately. At runtime browser should check for custom extension add these to the application.
Does anyone has a hint how to do this with ReactJS?
Cheers,
Manuel
You can implement a custom javascript function on your main component to add extensions, i.e.:
YourPlugin.loadExtensions(MyCustomExtension);
I've done this for a react component to be mount on a specific node only, but I think this approach should work in your case as well.
Related
I have been using #microsoft/file-browser (which is an unmaintained, closed source, multiple years old package for react 16.x) for some time now.
Now I have started a new project using React 18 and can not find any good file browsers.
My goal is to have a native-looking SharePoint integration in my React application without having to manually query folders, files and such.
Using Fluent UI to build a custom solution is not an option right now because it lacks React 18 support and takes significant resources to do it well.
Are there any alternatives out there?
I'm using a custom port of spfx-controls-react library for this (extracted the pieces related to filePicker and just use it separately). I had to make a custom port so the library can be used outside SharePoint (no SPFx/webpart context needed).
We have a React application created/deployed using CreateReactApp.
This application is able to display some widgets. We've predefined types of widgets deployed with our own application. We'd like the end-users of our application to be able to develop their own type of widgets - using a dev tool like Webstorm/VisualStudio - and deploy them into our application.
Our application needs to provide a public API and a plugin dev library
We want the plugins to be able to use the libraries our application is using (e.g. React, material-ui…)
We need a way to "load" end-user code that is registering new widget types using our public API.
Can we do that using CreateReactApp or do we need to eject?
What are the best practices for doing this?
I have more a suggestion than an answer, a best practice for that can depend on the structure of your current project, so I don't think there's a right answer. I wrote a small proof-of-concept, feel free to fork and use that, if it helps: https://github.com/anderick/react-dynamic-components.
Our application needs to provide a public API and a plugin dev library
To solve this you can create a folder structure to let users upload their component projects.
You need a name or id to link this new uploaded project so you can load it later.
We want the plugins to be able to use the libraries our application is using (e.g. React, material-ui…)
If the use is only allowed to use the libraries you already have, you don't need to worry about their package.json.
In case you want to allow users to use their own libs, it adds some complexity on how to process this during runtime.
We need a way to "load" end-user code that is registering new widget types using our public API.
You can use create-react-app in this approach, but you may need a good definition of an entry point (in my example project, I'm using Index.js as the file I'll use as the main component of the project), or some kind of descriptor(maybe extending package.json) so you can read from your application to understand how to load the component. I'd go with the first approach, convention over configuration is more simple, and you can expand from that with a descriptor later.
by ejecting you can customize anything you want but you've to configure and maintain it by yourself, I think going through CreateReactApp also a good idea based on your criteria. I hope this article may help you out.
Thank You!
MSS-
I would like to know if it is possible to use components from the JavaScript Development Tools (JSDT) in my own Eclipse RCP application.
For instance, my application should be able to show a JS editor view so that the user can edit JS files within my application. Is this possible?
I don't want to write a JS editor from scratch.
How can I integrate the components I need to achieve this? The package org.eclipse.wst.jsdt doesn't even show when I try to add it as a dependency of my plugins...
I am creating a windows8 plugin in cordova but i want to be integarte native build like .winmd with my plugin so that through Winjs i m calling the functions of that library which is in c#. I had already added the reference and code into plugin folder and as well as in project. But still it throws an error WinRt Error : class is not register/JavaScript Error : class in not defined.
I am creating same plugin in WP but there is issue in windows8 plugin development using cordova winjs with native functionality. please help to resolve this issue, provide some samples , links etc.
Updated:
It seems that to reference a WinRT component from a Cordova project using the current VS Tools for Cordova release, you need to follow the instructions here:
https://msopentech.com/blog/2014/11/24/using-windows-runtime-component-with-cordova-project/
In particular, section 1 describes how to inform the Cordova build tools about your WinRT component(s), so that it can reference it/them in the AppX manifest, and include the component binaries in the output package.
Earlier notes:
Do you need to actually write it as a Cordova plug-in? Windows JS apps support really simply integration of custom WinRT components, which can be written in C++ or C#. You just have to create a new Windows Runtime Component project in your solution, define a public sealed class with the methods/properties you want to expose, and then add a reference from your JS app project to the WinRT component (right-click References, select Add Reference, and choose the component project).
That said, be wary of the performance implications of including a C# component (particularly if you need to load it during startup) and the memory usage implications of loading the CLR and all the .NET dependencies. Also remember that C# is not "native" so it isn't really a "native plugin" if you do that :-)
You also might get slightly better advice if you describe your goal (i.e. you need the native plugin for something where you're actually running against JS performance limitations - which is a fairly exceptional case).
I have a GWT (well, GXT) application that uses an external JavaScript library to add functionality to my app. My application must work offline, too, and herein lies my problem.
I am aware that adding files to the public folder will make them accessible by my GWT app, but this will not work in case of offline use. GWT compiles my app to make it available offline without problem, but it doesn't include the external JavaScript library.
So, whenever I work within the application and reach the point where said library is needed, the browser will attempt a GET request because the library hasn't been loaded yet and doesn't remain in the cache of the browser reliably.
Is there a way to add the library to my app so that it will be cached together with my GWT app? The library consists of several folders, JS files, images, CSS, etc. My only idea is to dynamically create an Appcache Manifest that dumps ALL files in the browser cache.. in which case I'm scared of breaking the GWT offline functionality.
Yes you can generate a manifest at compile time. Just use a linker that extends com.google.gwt.core.ext.linker.AbstractLinker.
See for example this example manifest linker
or see Writing a GWT Linker
or see this stackoverflow thread
I do that to include google fonts and to produce a manifest that will only include files for that specific language permutation.