We Keep Coding

Change ESM export bindings

I'm wondering how the exported bindings of an ES6 module work when destructuring. I'm exporting an object (thing) as a named export -- but also one of its properties (foo), too, which I'm later updating.
This update works when I import the object and reference its prop, but not when I directly import foo, as shown below. I'm guessing the export const... creates a new, immutable binding, but is there any way to retain its reference to the original object upon export?
// module: 'thing.js'
let thing = {
foo: (x) => console.log(x)
};
const init = () => {
thing.foo = (x) => console.log("updated");
};
export { init, thing };
export const { foo } = thing;
// index.js
import { foo, thing, init } from "./thing";
init();
foo("test"); // does not work
thing.foo("test"); // update is reflected, here
codesandbox

There is not issue with export/import
see this example:
let thing = {
foo: (x) => console.log(x)
};
const init = () => {
thing.foo = (x) => console.log("updated");
};
const foo = thing.foo;
init();
foo("test"); //test
thing.foo("test"); //updated
Variable foo and field thing.foo contains different functions after you rewrite thing.foo inside init function

Can I export multiple named exports in a named set without affecting call to variable?

I have constants file with:
export const VAR1 = 'VAR1';
export const VAR2 = 'VAR2';
export const VAR3 = 'VAR3';
export const VAR4 = 'VAR4';
export const VAR5 = 'VAR5';
export const VAR6 = 'VAR6';
export const VAR7 = 'VAR7';
export const VAR8 = 'VAR8';
export const VAR9 = 'VAR9';
export const VAR10 = 'VAR10';
Some of the constants can be used separately and some I use as a specific set in several files, like:
import {VAR1, VAR2, VAR3, VAR8, VAR9, VAR10} from './constants'
Can I have several exports in a set, so that they can be easily imported in multiple files, but be called using same names? For example:
export set1 = [VAR1, VAR2, VAR3, VAR8, VAR9, VAR10];
And then in file:
import set1 from './constants';
if(input === VAR1) doSomething()
So I want to be able to import multiple named exports in one go, but still keep ability to simply call them just by their name.

You can do that, though your export and usage are incorrect, it would be (but keep reading):
export const VAR1 = "VAR1";
export const VAR2 = "VAR2";
// ...
export const set1 = [VAR1, VAR2, /*...*/];
// or probably more usefully, as an object:
export const set1 = {VAR1, VAR2, /*...*/};
Then the import and usage would be:
import { set1 } from "./constants";
// If you use an array:
if (input === set1[0]) doSomething();
// Or if you use an object:
if (input === set1.VAR1) doSomething();
Note that in both cases, there is no ongoing link between the exported VAR1 (etc.) and the exported set1. But since VAR1 and such are constants, that doesn't matter, their values never change. (It would matter if they weren't constants, because the set would only have their value as of when the export occurred, not their updated value later.)
Or using a default export (I don't like them, but some people do):
export const VAR1 = "VAR1";
export const VAR2 = "VAR2";
// ...
export default [VAR1, VAR2, /*...*/];
// or probably more usefully, as an object:
export default {VAR1, VAR2, /*...*/};
Then the import and usage would be:
import set1 from "./constants";
// If you use an array:
if (input === set1[0]) doSomething();
// Or if you use an object:
if (input === set1.VAR1) doSomething();
Or you could leave the exports alone and do a module namespace import:
import * as set1 from "./constants";
if (input === set1.VAR1) doSomething();

unable to update object using hooks in react

I have a function that will update my object value depending on the app name using useState hook. But I am not able to use the hook, it gives error invalid hook call.
Any other way to achieve the same will also work.
var myfun = (function() {
const APP_NAME= "sample app"
const [object, setObject] = useState({obj: 'value'})
if(APP_NAME =="sample app") {
setObject({obj:'new value'})
console.log('here')
}
return object
});
myfun();

Create a custom Hook instead of that Function:
const useMyFun = () => {
const [object, setObject] = useState({obj: 'value'});
const APP_NAME = 'sample name';
useEffect(() => {
if (APP_NAME === 'sample name') setObject({obj: APP_NAME});
}, [APP_NAME]);
return object;
}
// In the component you need it:
const SomeComponent = () => {
// will update if state changes in the useMyFun Hook;
const appname = useMyFun();
// rest of your component code
...
}
make sure you use functional components to use this.
NOTE: but this will only be useful if APP_NAME will ever change.
otherwhise you could just use a simple ternary operator:
const object = APP_NAME === 'sample name' ? {obj: APP_NAME} : {obj: 'value'}

Try to move the hook call outside the function like this and the invalid hook call error will disapear i think :
import React from "react";
import { useState } from "react";
function App() {
const [object, setObject] = useState({ obj: "value" });
const myfun = () => {
const APP_NAME = "sample app";
if (APP_NAME === "sample app") {
setObject({ obj: "new value" });
console.log("here");
}
return object;
};
myfun();
return (
....
);
}
export default App;
i hope this helps you .

If all the above answers don't work look for an infinite react hook loop (usually with useEffect);

Exporting an Object directly?

I'm trying to export an object directly, but I'm not getting the results I'd like;
const cmd = {
name: "testFunc",
desc: "Test",
execute(name, args) {
console.log("Test ()");
}
}
export {cmd}
I import it as follows;
import(`./commands/${file}`).then(cmd => {
console.log(cmd.cmd.name);
})
But I would rather be able to just do cmd.name, rather than cmd.cmd.name.

Don't export an object, use individual named exports instead:
export const name = testFunc";
export const desc = "Test";
export function execute(name, args) {
console.log("Test ()");
}
Alternatively, change your import statement to use destructuring:
import(`./commands/${file}`).then(({cmd}) => {
console.log(cmd.name);
})

Why flow doesn't understand `export default`

Two instances of code:
const obj = {}
export default obj
export default obj = {}
Flow gives an error on the second
Cannot resolve name obj
Is there something wrong with the code in second place? It works just fine, but flow warns me.

const obj = {
// property goes here
}
export default obj
or,
export default {
// property goes here
}
or
let obj;
export default obj = {
// property goes here
}
Ref: https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export