Dynamic imports in monaco-editor - javascript

How can I dynamically call addExtraLibs in monaco-editor with content from custom source?
So when user typed import {} from "somelib" I got some event or hook where I could call axios.get("/libs", {params: "somelib"}) from where I got somelib source code and add it to editor.
What other way additional to monaco-editor could help me to implement this?

Related

How to access MatTableDataSource in custom Thingsboard widget?

I have developed a few custom Thingsboard widgets. It seems that I am able to access much of #angular/material from within my widget code. I am utilizing mat-table successfully, but in order to easily support pagination/filtering/sorting etc. I would like to utilize the MatTableDataSource class - this is resulting in an error as this class is apparently not exposed. How can I access MatTableDataSource from within my custom widget code?
As for 3.3.4.1 version you can't import so can't use such classes in JS section of custom widget.
I just grep the source code and found nothing about MatTableDataSource.
There is similar question in the official bugtracker and there is no suggestion as well (16/06/2022).

Markdown-to-jsx not accepting source

I am using one of the Material UI templates for blog posts: https://github.com/mui-org/material-ui/tree/master/docs/src/pages/getting-started/templates/blog.
I created my React app with npx create-react-app.
When I console log the source it comes out as a string, when I add it in the markdown-to-jsx it shows me this error index.module.js:1 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_react___default(...) is not a function.
Steps to reproduce:
create an app with npx create-react-app
import the material UI template written on the above link
use fetch(post1).then(res => res.text()).then(text=>setMarkdown(text)) inside a useEffect hook to get the markdown text.
Add the markdown state in the way that the template used it here
<Markdown className={classes.markdown} key={markdown.substring(0, 40)}>
{markdown}
</Markdown>
and the error happens
Thanks in advance for any help you can give me.
What I have tried basically boils down to changing the MD file to a js string export default, changing markdown-to-jsx versions, and trying different attribute options on the markdown-to-jsx library but none is working and I am lost.

How to initialize a library in react-native

I'm trying to work with this react-native library, and in the documentation it says this:
Initialize Library
Somewhere high up in your project and way before calling any other method exposed by this library, your index file or equivalent is a good spot, ensure you initialize the library with your public key as follows:
import RNPaystack from 'react-native-paystack';
RNPaystack.init({ publicKey: 'YOUR_PUBLIC_KEY_HERE' });
How do I do this, without getting null object is not a function.
In my app.js I tried it with useEffect, tried with componentwillmount , tried several ways, same error.
I feel I'm doing it wrongly.
Can someone tell how to initialize a library properly in react native.
Thanks :)
This is most likely happening because you haven't linked the native modules properly. That's expected as you mentioned you're using Expo, which doesn't allow you to add custom native code. If you want to use this library, you'll have to eject from Expo. See the docs.

SapUI5 includeScript is not loading js files in fiori launch pad

I have a UI5 component on instantiating that component I start loading OL3 library like this,
var promise = jQuery.sap.includeScript({
url : //ol3Path,
id : 'ol3'
})
promise.then(function(){
console.log("OL3 library loaded.");
})
And I am trying to instantiate this component inside the UI5 custom control and placing that inside the div that I created in the custom control renderer And i am instantiating this custom control in FIORI Launchpad, So in summary on instantiating that custom control, I load libraries.
but after loading like this I am getting that console message also but once I loaded this there is a global variable ol I am not able to access this variable.How to fix this?
you can follow the below blog: https://blogs.sap.com/2013/02/11/sapui5-with-google-maps/
(or)
When you want to use external API's in component file use your code and use jQuery.sap.registerModulePath(). Tis will make your global variable work.
Finally I got the problem, Currently, i am using requirejs in my fiori project so if there is requirejs then all other ways of loading the library will not work. So once I removed requirejs then it's loading all the libraries properly.

Loading customer sapui5 library inside component.js

According to the documentation here:
https://scn.sap.com/thread/3502503
http://jsbin.com/openui5-notepad-control-with-its-own-library-used-in-xmlview/1/edit?html,output
I build the following folder structure with following files:
/my/themes/sap_bluecrystal/library.css
/my/library.js
/my/Square.js
Now I am asking me how to load the library (inside Component.js) correct.
I tried following in Component.js
jQuery.sap.registerModulePath("my", "./my");
And in some View:
jQuery.sap.require("my.Square");
...
new my.Square({
text : "Test",
size : "200px"
})
All in all the Square control seems to be usable but the library.js and library.css is not loaded at all.
Any idea how to do it right?
Using bootstrap XML code inside index.html would not work if the app is running inside Fiori Launchpad.
Bonus question: Where to deploy a custom library inside SAP to be usable by multiple apps? One idea (but maybe that's wrong) is to create a BSP application just containing the library code?
The right way to load the library would be (instead of jQuery.sap.require):
sap.ui.getCore().loadLibrary("my");
This will load a "library-preload.json" file (if available) and also include the theme resources.
See https://openui5.hana.ondemand.com/#docs/api/symbols/sap.ui.core.Core.html#loadLibrary
First question I could solve for my own:
Replace
jQuery.sap.require("my.Square");
with
jQuery.sap.require("my.library");
Second question is still open :)

Categories

Resources