0

How does the code from here work - and why? The object notation does not seem to be satisfied. I find it rather confusing. What does this refer to in the docs @Mozilla or @NodeJS ?

File expose.js:

module.exports = {__dirname};

File use.mjs:

import expose from './expose.js';
const {__dirname} = expose;

So shouldn't this actually work, importing only key from the object, in use.mjs? (which doesn't ... but above does!)

import {__dirname} from './expose.js';

edit: I usually do something like import electron, {ipcMain, session} from 'electron'; - importing the whole name space, then specific parts directly as needed. As well as import {inspect} from 'util';. So deconstruction should be in place here

edit 2: see this post, from the thread mentioned by willascend below. The No. part explains what the problem with the line in my question was.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
BananaAcid
  • 3,221
  • 35
  • 38
  • 2
    Are you just asking about the `{__dirname}` syntax? In which case that's ECMA's new shorthand syntax for object creation. Search for "shorthand" [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer). `{a}` will create an object with key `"a"` and value of whatever `a` evaluates to – pushkin Aug 09 '18 at 21:20
  • And `const {__dirname} = expose;` is deconstructing to local variable `__dirname` ? So why does the last import not work? – BananaAcid Aug 09 '18 at 21:24
  • Well, `__dirname` is a special keyword, so there may be some difficulties in importing it like that. What error do you get? Try importing all of expose.js and see what the object contains – pushkin Aug 09 '18 at 21:37
  • Inside a .mjs there are no magic globals prepended. So no `__dirname`. That's why this script is required. The question still remains. – BananaAcid Aug 09 '18 at 22:58
  • @BananaAcid, please see my answer. I think it explains what's going on here. – willascend Aug 11 '18 at 19:59

2 Answers2

2

This is just a simple object literal with the property name matching the value:

let ___test = 'this is a string... could be a path';
let object = {___test};

console.log(object);

Using module.exports, you've exported an object. When importing using the module system, you essentially have a module scoped object, expose. You then destructure that object's __dirname property when defining {__dirname}. I haven't tested it, but you should be able to just import __dirname as a named import like so (though you'd likely run into a conflict for the variable name): 

import __dirname from './expose.js';

EDIT: Did some testing, when you do the above import, you get your exported object, so you would still need to destructure after importing (and of course, destructure into a new variable): 

import __dirname from './expose.js';
const {__dirname: dirname} = __dirname;
console.log(dirname);

After some googling, it appears you cannot destructure an object when performing an ES6 import. The syntax appears similar to destructuring an object but it is not. What you are doing when you do the following is actually import variables that have been exported as named exports.

test.mjs

export const __dirname = 'this is a path';

test-import.mjs

import { __dirname } from './test.mjs';
console.log(__dirname);

Note that I didn't use export const __dirname = __dirname;, or even export const dirname = __dirname;. This is because node specific globals aren't available in .mjs files currently. So, in your example, expose.js is still a standard .js file which has access to both the module and __dirname globals. The __dirname value is then exported as a property of the default commonjs export object (i.e. module.exports = {__dirname}), which is then made available as the default export when importing in your use.mjs file. The expose variable is the module.exports object literal that was exported. Once it's been initialized as an imported variable, you can then destructure out the __dirname value.

Hope this helps.

These other sources were helpful for me in understanding this as well: Destructuring a default export object https://github.com/babel/babel-loader/issues/194#issuecomment-168579479 https://github.com/nodejs/node/issues/16844#issuecomment-342245465

willascend
  • 1,503
  • 8
  • 15
  • The links: nice finds ! Specifically the 1st let to what was my question - Quoted from there: "No. What it does is to declare an invisible variable, initialise it with the object { foo: foo, bar: bar }, and export it under the name default." – BananaAcid Aug 13 '18 at 13:32
0

This is object shorthand in ES2015 (MDN).

{__dirname} is equal to {__dirname: __dirname}

For example:

var a = 'foo', b = 42, c = {};
var o = {a, b, c};

console.log(o);
NoobTW
  • 2,466
  • 2
  • 24
  • 42