React how to write optional import library - javascript

im actually not sure if this is possible , but my idea is im writing a library which will be used in another app. In my library, it depends on an external dependencies, lets call it external-A.
Example in my code
import {functionA} from 'external-A'
export function helper() {
return functionA
}
The problem here is for some reason, i dont want to put external-A as dependencies in my library package.json ( i put it as peerDependency now), so it may not install together when user install my library, and may throw error here.
Is there anyway to write the code that when the app load this helper function, it will try to import or analyze whether the app has installed external-A or not. If no, it will return another fallback function that i define
Example of idea ( but i think its not working yet)
import {functionA} from 'external-A'
function fallBackHelper() { console.log('fallbackHelper') }
export function helper() {
return functionA ?? fallbackHelper
}
Abit of background:
I'm using React, and my library use simple tsc to build the code. And the app assume using webpack.

Related

What does "jest.mock" function calls under the hood?

I've been creating an application using NodeJS ESModules (a.k.a import instead of require()) and the problem comes when I trying to test it - I am stuck on this for about a month now because I cannot find a good package to solve this "simple" issue.
Since I am using ESM, I cannot use libs such as rewire because, as it says on the docs, they don't support it. So I need a way to mock some dependencies during tests using the import syntax, and the only (trustable) package I've found that does the job is Jest.
I think that installing the whole Jest package to only use it's mock functionality would be overkill, so I've been trying to research packages on the internet to make it work. I came across a bunch of them (proxyquire, testouble, etc) and NONE of them worked. So by digging up Jest's repo I've found this jest-mock that is used under the hood, but I don't know how to use to mock those dependencies.
That leads to the question: which method/function does Jest calls when using jest.mock ?
I will give an example of what I want to test so, maybe, you guys can help me out (I am in a point that I can try anything, I just need to proceed with the application):
someFile.js
export const generateSomething = () => Date.now();
Creator.js
import { generateSomething } from './someFile.js';
export default () => {
const create = () => {
return { a: 1, b: generateSomething() };
}
}
So, I want to perform some unit tests on this Creator.js, then I need to mock this generateSomething function to return 0 (for example). How can I do it using this jest-mock (or any other package)? Does jest.mock call this package at all?
P.S: I don't want to use jest as testing lib, I am currently using #hapi/code with #hapi/lab

Import a selfcalling function from an npm module into a react/webpack app

I've build a react app transpiled with webpack and now want to use a package pulled from npm (namely vanilla-cookieconsent). Alas, it's written pretty old school, there is no export or nothing, instead it's just a self calling function that adds a method to the window object. And for the life of me I can't seem to get it into my react/webpack combo.
So, what is the correct way to load and use such a function in a transpiled react app?
Doesn't simply something like
import '~vanilla-cookieconsent/cookieconsent.css';
...
useEffect(() => {
import('~vanilla-cookieconsent/cookieconsent.js').then(() => {
// Loading the script should have injected this to window
window.cookieconsent.run(...);
});
}, []);
do the trick?

Is there a way to use the screenfull javascript library within the Nextjs framework?

I've been trying to use Dynamic Importing in Nextjs in order to use the screenfull library but it hasn't worked.
import dynamic from "next/dynamic"
import screenfull from 'screenfull';
const Screenfull = dynamic(()=>{return import("screenfull")},{})
You're using dynamic imports incorrectly. The idea is that you can import part of a JS module inside of another piece of JS code, so you don't have to preload or load the entire library. An example might be doing a dynamic import after an async call.
Next has some other great examples of how to use this functionality in your application.
you can create file in #utils folder with below code:
import screenfull from 'screenfull';
export default screenfull
then in your component do something like so:
import dynamic from 'next/dynamic';
const screenful = dynamic(() => import('../#utils/screenfull'))
The first question that comes to mind is what's the error you're getting?
There's no reason you shouldn't be able to import any library you've installed locally!
Did you actually install that package by running npm install screenfull on your terminal?

How to export a submodule in a Typescript library

So my goal is to create a library in Typescript. My intention is to split up core parts of the library into submodules like RxJS or Angular Material.
RxJS and Angular both support imports like so:
// RxJS
import { map, filter } from 'rxjs/operators';
// Angular
import { MatButtonModule } from '#angular/material/button';
However, I am unable to replicate this myself.
My goal is to do something similar and allow you to import a class with import { foo } from 'package/bar;
I have looked at RxJS's source on Github and have tried replicating what they've done but it's not working.
The library compiles fine but when I go about importing it I always get a Cannot resolve dependency 'package/foo' error.
Meanwhile doing import { test } from package (without the submodule part) works completely fine.
I've tried using paths in tsconfig to no avail. If that is the answer then I'm doing it wrong.
How do I go about doing this?
In order to achieve that, you can create your "sub-modules" in different directories (although they are technically part of the same module), and create an index.ts on each of those directories exporting there whatever you want to publish.
For example, I have done this in my NodeJs package Flowed, and you can for example do this:
import { FlowManager } from 'flowed/dist/engine';
Where the corresponding index.ts file is this one if you want to check.
Although in my case I put also available all the stuff from the root, so the previous line would be equivalent to:
import { FlowManager } from 'flowed';

How to include third party js libraries in React app

I am new to React and am looking for the React equivalent of this JQuery approach to including analytics throughout my application.
Typically I would:
Include the 3rd party library on the html pages. Easy enough to put on the index.html page but I don't know if that is best practice.
<script src="http://path/to/script/utag.js" />
Then I can interact with the library as long as it has loaded, which I can verify using JQuery window.load. This script will run fine on a plain html page, but I am trying to find the equivalent best practice way of doing this in my react app. I don't want to introduce jquery and currently my React container will tell me that utag is not defined if I try referencing utag in a function.
<script>
$(window).load(function() {
utag.link({ "event_name" : "locale_select", "language" :
utag_data.language, "currency" : utag_data.currency } );
});
</script>
I'm new to React so any help would be great. I know that my project is not using webpack, it's using react-scripts and was started using the create-react-app utility.
According to this issue on GitHub if you are using create-react-app, if you want to use global variables that imported or created in your index.html file in your react script, you must use window.variable_name.
In your case, this will probably work
import React from "react"
class App extends React.Component {
componentDidMount() {
window.utag.link({ "event_name" : "locale_select", "language" :
window.utag_data.language, "currency" : window.utag_data.currency } );
}
render() {
return <div />;
}
}
import someLibrary from 'some-library';
class App extends React.Component {
componentDidMount() {
someLibrary();
}
render() {
return <div />;
}
}
Its important to understand the statement inside the Component offered above. componentDidMount() is a lifecycle method that gets called automatically after the Component has been rendered to the screen. Then inside of it you call your someLibrary(). Depending on what type of third-party library you are talking about will dictate what you may need to also pass into someLibrary().
This is how Reactjs interacts with third-party libraries, because typically third-party libraries do not know how to be in a React ecosystem. They don't have any idea what a render() method is or what JSX is. So this is the general way of making third-party libraries work nicely with React.
If you are using create-react-app, then webpack is being used to bundle your javascript. Here's the documentation on installing dependencies with create-react-app.
To include you library, you should install it as an npm package, and import it into the file where you want to use it. Webpack will include it in the bundle and everything should just work.
So, Install the library with npm install some-library. Import it into a file and call it from a component:
import someLibrary from 'some-library';
class App extends React.Component {
componentDidMount() {
someLibrary();
}
render() {
return <div />;
}
}

Categories