Dynamic execution of TypeScript in the browser

Question

I have TypeScript which asynchronously downloads another TypeScript/javascript module:

(function (exports) {
    "use strict";

    var path = require('path');

    exports.convertData = function (data) {
        return "converted " + data;
    }

})(typeof exports === 'undefined' ? this['converter.someConverter'] = {} : exports);

During execution of my main app I receives this module as string and I have to use function convertData from there.

So, I'm trying the following:

eval(rendererScript);
console.log(exports.convertData("some data"));

It works well only in case if var path = require('path'); will be removed. Otherwise, the following error: Uncaught (in promise) Error: Module name "path" has not been loaded yet for context: _. Use require([])

Questions:

Is it OK to use eval() in this case? (as we know eval is evil)
How to be with require('path')? I'm trying to use RequireJS (http://requirejs.org/docs/node.html#2) but receiving the following error: Uncaught Error: Script error for "path"

Edited

So, in order to avoid eval() the following solution was found:

const scriptTag = document.createElement("script");
scriptTag.innerHTML = rendererScript;
document.body.appendChild(scriptTag);
this.m_rendererPlugin = (window as any)[`converter.someConverter`];

You are using the [tag:node.js] tag and you are referring to part of the RequireJS documentation that talks about Node. However, the errors you report seeing should never happen in Node precisely for the reason given in the documentation: RequireJS will just pass the request to Node's `require` and `require('path')` will give you Node's [path module](https://nodejs.org/api/path.html). Are you really running your code in Node, or are you running it in a browser?. — Louis, Sep 05 '17 at 16:21
Sorry that I didn't mention it. Yes, I'm running in the browser. The issues is that **require()** doesn't work in browser and I hope to use **RequireJS** to resolve this. Or am I on wrong way? — vich, Sep 05 '17 at 18:56
Maybe I can use webpack somehow? Use require.resolve("path") to get module id and then replace require('path') to __webpack_require__(123)? — vich, Sep 06 '17 at 10:44

cancerbero · Answer 1 · 2018-10-25T04:03:17.427

Since in your case the input code is dynamic you need to compile at runtime probably using TypeScript compiler API. In the case you don't have a dedicated server for that, you can still compile TS projects in the browser using the TypeScript compiler API https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API .

here you have a playground for transpiling ts to js 100% in the browser https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsTranspilingProject1
you could also use ts-simple-ast library also in the browser that's better documented and more easy to use - https://cancerberosgx.github.io/typescript-in-the-browser/typescript-compiler/#example=tsSimpleAst1

For transpiling, again, you don't have to do anything but to include node_modules/typescript/typescript.js in your html and you are done. But for more complex APIs like type checking and Language Service API (https://github.com/Microsoft/TypeScript/wiki/Writing-a-Language-Service-Plugin) you will need to implement some interfaces.

Dynamic execution of TypeScript in the browser

1 Answers1

Linked