We Keep Coding

rename named export without export default

I do have an issue when I want to decorate my export with a wrapper.
I have a wrapper/hof function that encapsulate the real function like this:
import { withSth } from './anotherFile'
import { someConst } from './someConst'
const myFunc = () => {}
export {
myFunc: withSth(someConst, myFunc)
}
Parsing error: ',' expected.
This does not work while this work:
import { withSth } from './anotherFile'
import { someConst } from './someConst'
const myFunc = () => {}
module.exports = {
myFunc: withSth(someConst, myFunc)
}
The only way i can do this is like this:
import { withSth } from './anotherFile'
import { someConst } from './someConst'
const myFuncX = () => {}
const myFunc = withSth(someConst, myFuncX)
// OR
// const myFync = withSth(someConst, () => {})
// but it lose readability
module.exports = {
myFunc
}
My point is how can I do the same thing with export and without using default export and renaming all my function
module.exports = {
methodA: withSth(param, methodA),
methodB: withSth(param, methodB),
methodC: withSth(param, methodC),
methodD: withSth(param, methodD),
}

Unlike Commonjs modules (with module.exports), ES6 modules do not export values but variable bindings. You must declare a variable1, you cannot export something unnamed. So your choices are only
export const myFunc = withSth(someConst, myFuncX);
const myFuncX = () => {};
export const myFync = withSth(someConst, () => {});
const myFuncX = () => {};
const myFyncY = withSth(someConst, () => {});
export { myFuncY as myFunc }
1: with the exception of export default …;, which implicitly declares a variable with an unforgeable name for you. But you want multiple named exports.

Assign object to a variable before exporting as module default warning

import axios from 'axios'
const baseUrl = 'http://localhost:3001/persons';
const getAll = () => {
return axios.get(baseUrl);
}
const create = (newObject) => {
return axios.post(baseUrl,newObject);
}
export default {
getAll:getAll,
create:create
}
Using axios to fetch data from server(in reactjs from json server), everything works fine but console shows this warning:
Line 13:1: Assign object to a variable before exporting as module default.
How to remove this warning??

You need to assign the object to a variable before exporting it as default.
const exportedObject = {
getAll,
create,
};
export default exportedObject;

You can also export the function individually to get rid of the warning:
import axios from 'axios';
const baseUrl = 'http://localhost:3001/persons';
export const getAll = () => { return axios.get(baseUrl); }
export const create = (newObject) => { return axios.post(baseUrl, newObject); }

You can remove this warning by just adding the comment "// eslint-disable-next-line" before export.
import axios from 'axios'
const baseUrl = 'http://localhost:3001/persons';
const getAll = () => {
return axios.get(baseUrl);
}
const create = (newObject) => {
return axios.post(baseUrl,newObject);
}
// eslint-disable-next-line
export default {
getAll:getAll,
create:create
}

Select functions to import from module

If we have a module like:
const ourModule = (() => {
const add = (a,b) a+b
const sub = (a,b) return a-b
return { add, sub }
})();
export default ourModule;
So we import like:
import ourModule from 'path'
And call the functions like:
ourModule.add(1,2)
But how we can import it to use it directly?
like just add(1,2) instead of ourModule.add(1,2)

Use named exports instead:
export const add = (a,b) => a+b;
export const sub = (a,b) => a-b;
Then they can be imported like:
import { add } from './your/module';

You're looking for destructuring imports:
function add() {
}
function sub() {
}
module.exports = { add, sub };
Then you can do:
import { add, sub } from "./MyModule"

Most common pattern to implement a settable module scoped variable

I am writing a client to talk to a server API in JavaScript. I have an OOP background but am trying to embrace modern EcmaScript.
So I started with this:
customerApi.js:
const baseUrl = "http://myapi";
export const getCustomers = () => { /* get customer code */ }
export const addCustomer = cust => {}
export const deleteCustomer = id => {}
All the functions use baseUrl.
Now I want to refactor so that the code that uses customerApi.js sets/passes in the baseUrl, and the only ways I have come up with are -
make it a class:
export default class customerApi {
constructor(baseUrl) {
this._baseUrl baseUrl;
}
}
Pass it into every method:
export const getCustomers = (baseUrl) => { /* get customer code */ }
export const addCustomer = (baseUrl,cust) => {}
export const deleteCustomer = (baseUrl,id) => {}
Wrap in a function:
const moduleFn = baseUrl => (
return {
getCustomers: () => { /* get customer code */ }
addCustomer: (cust) => {}
deleteCustomer: (id) => {}
}
)
export default moduleFn;
These are just examples.
What is the most common pattern to implement a "settable" variable on a module?

I would go with the function approach
export default function(baseUrl){
return Object.freeze({
getCustomers: () => { /* get customer code */ }
addCustomer: (cust) => {}
deleteCustomer: (id) => {}
})
}
This is because all the functions have closure on the baseUrl and no extra work is required.
Client code can simply
import yourmodule from 'yourmodule';
var derp = yourmodule('www.derp.com')

Dynamically wrap named exports with extra middleware before exporting

I have a few exported functions from ES6 module like:
export const funA = params => 'hello funA';
export const funB = params => 'hello funB';
I'd like to wrap them before exporting:
const wrapper = params => fun => {
// some extra logic
Object.assign(params, { extra: 'data' });
return fun(params);
};
export const funA = wrapper(params => 'hello funA');
export const funB = wrapper(params => 'hello funB');
It works this way, but I'm wondering if it's possible to define funA and funB without wrapper invocation in a way simmilar to:
import { mapValues } from 'lodash';
const wrapper = params => fun => {
// some extra logic
Object.assign(params, { extra: 'data' });
return fun(params);
};
const funA = params => 'hello funA';
const funB = params => 'hello funB';
export default mapValues({ funA, funB }, wrapper);
The issue with above snippet is that named exports are not used.
Can I achieve named exports with possibility to wrap them with wrapper middleware dynamically?

Where are you going to determine which wrapper middleware?
You could do something like
export const funA = middleware => params => 'funA'
export const funB = middleware => params => 'funB'
then at the callsite:
import { funA } from './module.js'
const funFunA = middleware(funA)
But this is sounding more and more like a case for function composition:
import { funA } from './module.js'
import { nextFun } from './other.js'
const funFunA = compose(nextFun, funA)
Depending on your needs it might also be worth your while using something like the Arrow monad
https://evilsoft.github.io/crocks/docs/crocks/Arrow.html
Edit:
const _funA = a => b
export const funA = (...args) => {
switch (currentMood) {
case 'saucy': return sauce(_funA(...args))
default: return _funA(...args)
}

If you want to avoid repeating wrapper in every line, you could use destructuring assignment and named export. However, this requires repeating { funA, funB, ..., funXYZ }.
import { mapValues } from 'lodash';
const wrapper = params => fun => {
// some extra logic
Object.assign(params, { extra: 'data' });
return fun(params);
};
let funA = params => 'hello funA';
let funB = params => 'hello funB';
let { funA, funB } = mapValues({ funA, funB }, wrapper);
export { funA, funB };