How to make a library compatible with a React Native project - javascript

I imported this library https://github.com/THCLab/oca.js-form-core in my React Native project but I get an error when instantiating const ocaJs = new OcaJs({});:
Error: Automatic publicPath is not supported in this browser, js engine: hermes
The library is Node.js compatible (there is an example in the Github repository). However, it is packaged (npm) with webpack and I believe that the React Native project uses this package for import. That's the problem (i think - i'm a beginner in React Native). There are references to the DOM added by webpack. Is there any way to force the use of the Node.js build instead?

Have you tried specifying the publicPath explicitly as discussed in the answers to this question?
In general however, because React Native does not contain all the Core Node JS Modules, many libraries which are compatible with Node.js require polyfills to work in React Native. You can attempt to make a polyfill yourself by following a guide such as this. I have experienced mixed results with such methods, but I am far from an expert. From my experience, trying to create a polyfill can be a time consuming venture to pursue, and I would recommend first exploring whether or not a React Native library exists which can help you accomplish your objective.

Related

is it possible to use typescript and javscript together in a nativescript project

i would like to know if i can use javascript and typescript in one project and how.
i have an existing nativescript core js project, i want to use a plugin, the demo is written in TS, and its a webrtc plugin so i don't understand it enough to start messing with the code
i have tried running tns install typescript before but it messed up my project.
Basic considerations:
When you use TypeScript, you have to know it is not a runtime language, is a compiled language.
When you compile a TypeScript file, project or module, the TypeScript compiler (tsc) will generate the JavaScript files (usually CommonJS modules) according to the ECMAScript specification defined in the project (in TypeScript) config.ts file.
If you need to use a plugin in JavaScript but it is programmed in TypeScript, you have to compile it first, and then import the module/s in you JavaScript project.
Advanced considerations:
The ECMAScript specification version defined in the config.ts file, need to be compatible with your project JavaScript version.
There is no way to integrate TypeScript in a JavaScript project using the same execution context, even if you use JavaScript with the ES6 specification. Remember, JavaScript is an interpreted language, not compiled.
Conclusions:
Consider to migrate your code to TypeScript, compile the plugin and add it manually or search an alternative for that plugin in JavaScript.
PD: Check this related issue in the nativescript-webrtc GitHub repository

Error importing the Node standard library module "crypto"

When I attempt to compile my app, I get the attached error despite the fact that I am not explicitly attempting to import crypto in any of the files I have written myself. It seems that it is imported in a file automatically present in the node_modules folder. Is anyone familiar with the given error?error
The package at "node_modules\reques\lib\helpers.js" attempted to import the Node standard library module "crypto". It failed because the native React runtime does not include the Node standard library. Read more at https://docs.expo.io/introduction/faq/#can-i-use-nodejs-packages-with-expo
You can't use the request package, it included native Node.js libraries that are not supported in React Native. Use another request library that is made for React native.
This is because a dependency in your react-native project is using the crypto library.
One of the dependencies installed is not made for react-native and is made to run on the server. Find out which dependency that is and you can change it to a react-native compatible library to fix the issue.

Can I use reactJS library in react-native?

Well, this might be a silly question but I want to clarify the reason.
React-Native imports nodeJS libraries, so I think it is possible to use reactJS library as well though reactJS includes pure html components.
Can react native recognize reactJS components including html?
react library actually does not have anything related to Browser DOM HTML. Anything related to it separated into react-dom package. React Native does not and cannot use this library, because you don't have DOM underneath a react native application. However you can use most of the code/functionality you wrote for your mobile app in the browser, if you install necessary transpiling library. This is possible because react native defines some primitive components that can be ported to almost any platform.
If you still want to use just HTML to render inside react native, you may use WebView for it.
Usually libraries built specifically for other platforms will not work with React Native. Examples include react-select which is built for the web and specifically targets react-dom, and rimraf which is built for Node.js and interacts with your computer file system. Other libraries like lodash use only JavaScript language features and work in any environment. You will gain a sense for this over time, but until then the easiest way to find out is to try it yourself. You can remove packages using npm uninstall if it turns out that it does not work in React Native.
-- source: React native official docs

What is the best way to structure an Angular2 component library?

I am looking to work on an Angular2 datepicker component as if for release and inclusion in multiple projects. What is the best way to structure the project for this compared to a regular Angular2 project built with angular-cli? Are there any examples of good starter projects/seeds for such a task? Or should the component library actually be an angular2 application itself?
My initial assumption was that I could just create a standard project with angular-cli which has a single module (e.g. MyDatepickerModule) which contains a hierarchy of components forming the datepicker however I don't know if this is the best way as I don't need everything that a full application provides.
Thanks for any guidance!
I would publish the library with AoT compatibility in mind.
This means compiling the source using the ngc compiler. In the distribution package I would publish the JS source, original html/css files, d.ts typings files and the ngc generated metadata.json files.
I recommend publishing the JS source with es2015 modules since this will make your library tree shakable. I would target es5 JS, but with es2015 modules . TypeScript allows for this hybrid mode by setting module to ES2015 and target to es5 in tsconfig.json.
Publishing these files will make your library AoT compatible and Tree shakable.
This is all the consuming application needs in order to AoT compile your library into their complete application.
It's not recommended to publish TypeScript in your package since this would require the consumer to replicate your build environment (typings + TS compiler version).
You can also publish a JiT compatible umd bundle with inlined templates and css. This can be helpful since it might not be practical do AoT during development since compilation is a bit slow. The umd bundle will make it possible to use your library in a JiT based dev environment. For production though you should definitely use the AoT version.
The CLI is not ideal for publishing libraries since CLI is primarily a tool for building complete applications. They might support libraries better in the future though.
Check out https://github.com/angular/material2. A work in progress, it's a library of controls and themes for Angular2 applying Material Design and is an excellent source for learning to build your own control library.

Can trigger.io be used with browserify?

I've just found out about trigger.io today and it looks interesting. One question I have though is, can it be used with browserify.
I've been getting used to writing my JS modules using browserify and I love the commonjs require pattern as it keeps all my files nicely isolated and it's easy to understand.
I'm wondering how trigger.io might work with browserify? I noticed at a glance in the docs that you seem to reference a global forge object in your code to access the native components. Would it be possible to instead do something like var forge = require('trigger.io') and have it work as expected?
I wasn't sure if trigger was distributed as an npm package, as this is how I do it with jQuery for instance. The docs just mention downloading a toolkit rather than installing through npm.
Has anyone used trigger.io with browserify?

Categories