Develop Reference

Dynamic imports in monaco-editor

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?

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.

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

How to import Material Components Web Select Menu JS component

Trying to get a Material Web Component Select Menu to behave according to its demo but it seems the documentation does not include which JS components to import.
I have tried import {MDCSelect} from '#material/select';, following convention with its other Web components but I get an uncaught reference error: ReferenceError: mdc is not defined.
I seem to be missing a base class or I'm importing the wrong JS component but am not sure which to include.
Does anybody have knowledge about this?
Update - 10/26/2018
I posted this question on Github and received a response. I believe it is the correct implementation as it hasn't thrown any errors but a previous bug has kept me from fully testing of this approach.
I will return to this question as soon as I can test the suggested answer in the above link.

Checkout this example,it will help. It need just mdc instance to initiate the mdc-select.
> https://codepen.io/cubetastic/pen/ZoPNKK

How to use jQuery plugins in React, Riot 2.0

I have a jQuery heavy app I'm in the middle of that has many jQuery plugins and I want to restructure the app, so I'm looking at different frameworks like Angular, React, Riot 2.0, etc.
I like React and Riot, but I can't figure out how I'd make your typical jQuery app (unmetered access to the DOM) into this new world of virtual DOM, etc.
Some of these components are complex and I wouldn't want to rewrite them all into the "VDOM way" and create another nightmare.
Does anyone have an answer to this? Maybe jQuery plugin heavy apps aren't suited, or is there a way to split/combine the UI using both, or maybe a React/Riot like framework that would play well with jQuery?

To access the DOM with jQuery inside a Riot 2.0 custom tag, you can use the mount event and this.root like this:
<my-custom-tag>
<h3>Riot.JS Custom tag + jQuery plugin</h3>
<p>My paragraph</p>
<script>
this.on('mount', function() {
var $node = $(this.root);
$node.find('p').html('updated by jQuery!');
});
</script>
</my-custom-tag>
I am not sure it is the "best practice" but it works with Riot 2.0.10 (Feb 19, 2015).
If the custom tag contains form or input elements, it's simpler, you can access them by their name property, you don't need the mount event:
<my-custom-form>
<input name="email" type="text">
<script>
$(this.email).val('mike#worldcompany.com');
</script>
</my-custom-form>

Riot 2.0 was released just 4 days ago so there are obviously no extensions yet.
But it's a good candidate to transform jQuery- based apps to the "modern world" with using custom tags or "components" in React community.
Custom tags lets you build reusable pieces of client side code with a less need for jQuery selectors and manipulation methods. And HTML and JS is less scattered on the file system.
And Riot 2.0 is designed to play well together with jQuery. You can freely use jQuery plugins together with custom tags so you can transform your app iteratively - one tag at the time if you like.

This is an excellent guide to wrapping DOM libs with React components:
https://github.com/rpflorence/react-training/blob/gh-pages/lessons/05-wrapping-dom-libs.md

In angular someone has probably already recreated the thing you want. You use directives to either implement reusable components or wrap existing ones. To wrap a plugin:
initialize in link (based on isolate scope)
use scope.$watch(key, fn) to update the plugin when something changes
use scope.$apply() in plugin callbacks to tell angular something might have changed, update any relevant two way bindings, and invoke any relevant expression bindings
use scope.$on('$destroy', fn) to clean up
See ui-bootstrap for examples and api design.
The same applies to React, but components instead of directives.
initialize in componentDidMount (based on props)
update the plugin in componentDidUpdate (based on props)
call this.props.onWhatever in plugin callbacks
clean up in componentWillUnmount
See react-bootstrap for examples and api design.
And I don't think Riot is relevant here.

We had the same problem, i.e. turn a pretty big global jquery based admin frontend into nestable conflict free components - w.o much training effort for our partners - so riotjs was just ideal for us.
We agreed on the solution below (see also Michael Rambeau's answer) and are up to now quite content with that.
Via a mixin we give all our riot component tags this function:
var ComponentTagsMixin = {
init: function () {
//<other stuff needed in all tags>
// jquery local to the vDom of this instance:
$: function(selector) {
// you could fail here if (!this.isMounted)
return $(this.root.querySelector(selector))
}
}
```
and so, within the tags you simply turn $ into this.$.
Example, jquery nestable:
$('#nestable').nestable(....)
$('.dd').nestable('expandAll');
into
this.$('#nestable').nestable(....)
this.$('.dd').nestable('expandAll');
and now this allows to have many of those components within the same page w/o conflict and local namespaces and data.
As already pointed out, this is only accessible after the tag is mounted, so run your stuff within an this.on('mount'...) block.
This works remarkably well with legacy jquery libs since they typically allow the user to redefine their Dom selectors for double run-ability within a page anyway.