Babel to translate JSX to JS - javascript

In C#, I get as an input a JSX file and want to translate it to JS. I want to use the babel library, and used this guide:https://babeljs.io/docs/setup/#installation
However, I am getting an exception of type:
An unhandled exception of type
'React.TinyIoC.TinyIoCResolutionException' occurred in React.Core.dll
Additional information: Unable to resolve type: React.IReactEnvironment
for this line: ReactEnvironment.Current
I have tried to create a new ASP.NET project, and no exception was thrown and everything worked just fine.
My question is: How can I still use babel in non web project?

You need to run an extra initialization step for non Web applications.
This initialization step is automatically done in Web applications.
If its a console application then use this function,
private static void Initialize()
{
Initializer.Initialize(registration => registration.AsSingleton());
var container = React.AssemblyRegistration.Container;
// Register some components that are normally provided by the integration library
// (eg. React.AspNet or React.Web.Mvc6)
container.Register<ICache, NullCache>();
container.Register<IFileSystem, SimpleFileSystem>();
}
And call it in the main method.
Take a look at the github console sample app for React.Net
Link for reference

Related

Custom Module in SuiteScript 2.0

I have a JavaScript library file that I use throughout my scripts when creating SuiteScripts for NetSuite. I'm trying to get myself all prepped on 2.0 and start pushing new projects to it and get away from SuiteScript 1.0. So, I transcribed my library file into 2.0. However, whenever I create a new script and have my library referenced, I always get the following message:
SuiteScript 2.0 entry point scripts must implement one script type function.
But, if I remove the reference from the script, it lets me load it up and create the script record. Then I can put the reference back and upload the revised script file without issue. I can't for the life of me understand why this happens. If it matters, here is the JSDoc header in the file:
/**
* my.library.v2.js
* #NApiVersion 2.x
* #NModuleScope Public
*/
A script would also start off like this after its own JSDoc header:
define(['N/error', 'N/record', 'N/runtime', 'N/search', './my.library.v2'],
function(error, record, runtime, search, myLib) {
function doStuff(context) { /* do a bunch of stuff */ }
return { pageInit : doStuff };
});
Along the same issue, I also have trouble with running some scripts. Everything works perfectly when applying this module to client scripts once I get beyond the previously mentioned issue. However, I cannot successfully get a server-side script to initiate with the library. I constantly get this error:
com.netsuite.suitescript.exception.NLServerSideScriptException: TypeError: Cannot call method "split" of undefined
What's throwing me off is that the library has no call of String.split() inside of it. And I have no way to log where the error may be originating from, as it is occurring when loading the module into the server script. And I know that's what's happening because this occurs regardless of the operation type and the scripts I create always have a condition to check for specific operation types before getting into the nitty gritty. For example, if I have it checking for a "print" operation, but the record is opened to "edit". I even have the entire function wrapped inside of a try/catch block.
I haven't had much luck in tracing the cause of these issues down, so I'm hoping that both isues stem from the same cause.
If you could post/provide your custom-module it would have helped alot to narrow down the issue, but as far as I can tell, you are including some module which is not available on the server-side scripts like N/currentRecord. This module is only available on client-scripts and will not let you load/create server-side scripts as you mentioned. So, if you remove those modules and try to update/create server-side scripts it should work.
Similarly, there are some modules which can only be used on server-side scripts like N/task module and would return error if you try to load/require them on client side scripts.
Ok, so there were errors on my behalf. One of my function definitions was missing "function". Since the functions are being added as properties of an object, I can see why it kept getting overlooked, if you aren't careful enough you eye just glides over the problem. There's also an issue with an array prototype, but I don't think the prototype is necessary for SuiteScript 2.0. It was developed for use with SuiteScript 1.0 due to a lot of handy object functions not yet having been implemented until a later JS version release than what is used for the server side engine in NetSuite.

How to handle native exception in react-native

I want to handle native exception in react-native application. I'm currently using the react-native-exception-handler module to do this. All things are working fine except callback. If you read about given module api you will find setNativeExceptionHandler() method having three parameters i.e., exceptionhandler, forceAppQuit and executeDefaultHandler.
Here is usage about the method:-
// ADVANCED use case:
const exceptionhandler = exceptionString => {
// this block not executing
};
setNativeExceptionHandler(
exceptionhandler,
false
);
Any help would be appreciated.
I think that the issue is that you are not using it in bundle mode.
From the docs:
NOTE: setNativeExceptionHandler only works in bundled mode - it will show the red screen when applied to dev mode.
So you should try to build app and then try it.
Also be aware that some actions are not allowed when native exception is happening for ex. you can't use alert
From docs:
NOTE: alert or showing any UI change via JS WILL NOT WORK in case of NATIVE ERRORS.

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.

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

Categories

Resources