Manipulate global scope of imported file

Question

I wonder how to manipulate the global scope of imported file to some object. For example the imported file:

// File A.js
export const str = `hello ${world}`;

function export foo() {
 return n1 + n2;
}

Then I want to use an object for the global scope of the imported file, like:

const scope1 = {
  world: 'world',
  n1: 1,
  n2: 2
}

const scope2 = {
  world: 'to you',
  n1: 100,
  n2: 200
}

Then when I import import * as A from 'A', the global scope will be taken from the objects scope1 or scope2 (like bind but to import statement).

Is there an easy way to achieve this behavior?

[is this what you wanted?](https://codesandbox.io/s/nameless-field-0tj2n), [ref](https://stackoverflow.com/questions/30003353/can-es6-template-literals-be-substituted-at-runtime-or-reused) — shrys, Oct 01 '19 at 11:34
Yes, Nice! But you have to call `fillTemplate` each time you access to `A`. Is there a simpler way to achieve this? — nrofis, Oct 01 '19 at 11:43
yes you could create a class for scope and in the getter method implement the `fillTemplate` function to get the value — shrys, Oct 01 '19 at 11:47

shrys · Accepted Answer · 2019-10-01T12:22:41.010

You could export the template string as a string, then in the file where you're importing, you can execute return new Function("return"+templateString +";").call(templateVars); which will evaluate your expression (sample):

//A.ts
export const str = "hello ${this.world}";

export function foo() {
  return this.n1 + this.n2;
}

//index.ts
import * as A from "./A";

class Scope {
  n1: number;
  n2: number;
  _world: string;

  get world(): string {
    return this.getValue(this._world);
  }

  set world(newWorld) {
    this._world = newWorld;
  }

  constructor({ n1, n2, world }) {
    this.n1 = n1;
    this.n2 = n2;
    this._world = world;
  }

  getValue(accessVariable) {
    return new Function("return `" + accessVariable + "`;").bind(this).call();
  }

  getResult(fn: Function) {
    return fn.bind(this).call();
  }
}

const scope1 = new Scope({ world: "world", n1: 1, n2: 2 });
const scope2 = new Scope({ world: "to you", n1: 100, n2: 200 });
console.log(scope1.getValue(A.str), scope2.getValue(A.str));
//output: hello world hello to you
console.log(scope1.getResult(A.foo), scope2.getResult(A.foo));
//output: 3 300

Manipulate global scope of imported file

1 Answers1