Develop Reference

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 create Bootstrap Multi level signup page in angular 4

I'm using angular 4 with bootstrap 4. I need to create a multi-level sign-up page. Now I'm facing issue to include the JavaScript file into angular.
import '../../../assets/js/js/multiform.js'
used this to import the file into my #Component ;
I need to call a function when the user click "NEXT / BACK"; But my function not calling

Forget about importing pure javascript plugins. It's not a good practice in Angular 2+. You can create your own component for it, or use the open source examples that are already angularized. I think something like this is what you are looking for: https://github.com/cwun/angular-multi-step-wizard.
Good luck.

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.

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 :)

Exposing almond module to window object fails due to asynchronicity

I am working on a JavaScript project where we use requirejs to manage our code. The product we create is to be used on 3rd party web sites, and therefore we cannot assume that an AMD compatible library is present. To solve this, we include almond in our target file and expose our main module on window. The file created by our build looks like this:
(function() {
//Almond lib
//Our code
define('window-exposer', ['main-module'], function(mainModule) {
window.mainModule = mainModule;
});
require('window-exposer');
}());
When building a site that want to use mainModule an error is thrown because when the site specific code tries to access window.mainModule it has not been set yet. There are also cases where the module has indeed been initialized and the code works.
Is there any way to guarantee that the window-exposer is run before other JavascriptCode is?

I solved it by using the solution provided here https://github.com/jrburke/almond#exporting-a-public-api