Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

es2015 re-export module and override single export function of the re-exported module

I want to re-export a whole module and override only a specific function of the re-exported module. But it seems exporting the override function doesn't get processed when the same function is already re-rexported.

(http://www.ecma-international.org/ecma-262/6.0/#sec-module-semantics-static-semantics-early-errors, 'It is a Syntax Error if the ExportedNames of ModuleItemList contains any duplicate entries.')

The motivation behind my approach is to minimize explicit re-exporting a very big or long module, if I only want to override a specific function or method in the re-exported module.

Is there any way to implement my approach in es6/es2015?

My code so far:

module-a.js

export class MyFirstStandardClass {
  sendMeMessages() {
  return `hello, I'm a standard implementation`;
  }
}
export function talkToMe() {
  return `standard talking: how are you doing?`;
}

module-b.js

import * as StandardModule from 'module-a';

export function talkToMe(condition = true) {
  if (condition) {
    return `project conditional talking: ${StandardModule.talkToMe()}`;
  }
  return `project without a condition!`;
}

export * from 'module-a';

module-c.js

import * as MyModule from 'module-b';
import React, { Component } from 'react';

export default class App extends Component {

  componentWillMount() {
    console.log(MyModule);
    this.myFirstStandardInstance = new MyModule.MyFirstStandardClass();
  }

  render() {
    return (
      <div>
        <label>
          Class
        </label>
        <div>
          { this.myFirstStandardInstance.sendMeMessages() }
        </div>
        <label>
          Function
        </label>
        <div>
          { MyModule.talkToMe(true) } // returns 'standard talking: how are you doing?'; expected 'project conditional talking: standard talking: how are you doing?' 
        </div>
      </div>
    );
  }
}
like image 516
Chau Thai Avatar asked Jan 12 '16 13:01

Chau Thai


People also ask

How do I export multiple functions?

To export multiple functions in JavaScript, use the export statement and export the functions as an object. Alternatively, you can use the export statement in front of the function definitions. This exports the function in question automatically and you do not need to use the export statement separately.

How do I reexport JavaScript?

To re-export values from another file in JavaScript, make sure to export the name exports as export {myFunction, myConstant} from './another-file. js and the default export as export {default} from './another-file. js' . The values can be imported from the file that re-exported them.

How do I reexport my default import?

By creating an index. js file in the /utils folder and import all the defaults of all the utilities there and re-export, so the index file will serve as the "gateway" for all imports related to that folder. export { default as MyModule } from "./my-modue.

How do I export multiple functions in React?

Use named exports to export multiple functions in React, e.g. export function A() {} and export function B() {} . The exported functions can be imported by using a named import as import {A, B} from './another-file' . You can have as many named exports as necessary in a single file.


2 Answers

It seems my first solution should work. According to the ECMAScript spec local exports should have priority. (http://www.ecma-international.org/ecma-262/6.0/#sec-getexportednames)

It's an issue in the Babel transpiler. More info: https://github.com/systemjs/systemjs/issues/1031#issuecomment-171262430

Issue in Babel: https://phabricator.babeljs.io/T6967

like image 52
Chau Thai Avatar answered Sep 27 '22 18:09

Chau Thai


You can select which modules from module-a to export on one line. So in your module-b.js you can do:

// export all modules excluding `talkToMe`
export { MyFirstStandardClass, someOtherModule } from 'module-a';

export function talkToMe(condition = true) {
    // ...
}

Or you can export default object and choose what to exclude/override with Object.assign():

import * as StandardModule from 'module-a';

const overridenExports = {
    talkToMe: function(condition = true) {
        // ...
    }
}

const myModule = Object.assign({}, StandardModule, overridenExports);

export default myModule;

and import default like:

import MyModule from 'module-b';
like image 23
madox2 Avatar answered Sep 27 '22 20:09

madox2