With the use of ES6 Module Loader Polyfill, I've found that given a JavaScript file (module1.js):
export class q {
constructor() {
console.log('this is an es6 class!');
}
}
One can import the mentioned module with the following code:
<script>
System.import('mymodule').then(function(m) {
new m.q();
});
</script>
My question is: I need to do this (almost) very same thing but instead of importing a file, use a String literal. For example:
<script>
module = `
export class q {
constructor() {
console.log('this is an es6 class!');
}
}
`;
System.import(module).then(function(m) { // not possible
new m.q();
});
</script>
The reason of this, is because the Angular app receives the module as a response from a HttpRequest call embedded in a Json response like this:
{
"module": "export class q {
constructor() {
console.log('this is an es6 class!');
}
}"
}
Related
How to include functions in namespace / module when don't have module?
example: I have a namespace:
namespace Java {}
in typescript, usually when we need a function in namespace or module, we add 'export':
namespace Java {
export function version() {
return "java8";
}
}
namespace JavaScript {
function JavaVer() {
return Java.version();
}
}
But if I set module to none:
// tsconfig
"module": "none",
If module is none, I cannot use import / export:
website/sourcecode/main.ts:17:21 - error TS1148: Cannot use imports, exports, or module augmentations when '--module' is 'none'.
17 export function version() {}
so what can I do?
image:
You can use a plain object:
TS Playground
const Java = {
version () {
return "java8";
},
};
const JavaScript = {
JavaVer () {
return Java.version();
},
};
const vJ = Java.version(); // string
const vJS = JavaScript.JavaVer(); // string
console.log(vJ === vJS); // true
It was answered in here: It's actually "can't have any imports or exports at the top level". Imports and exports inside namespaces are fine because they don't export anything from .ts file at runtime, and as long as file remains 'not a module' module=None works fine. Long explanation here
I'm trying to import a package that I've written into another package that I've written.
Pre-Babel Loader
class TestClass {
constructor() {
// Load flags on import here
console.log("TESTING CONSTRUCTOR");
}
log(message) {
console.log("TESTING LOG");
}
}
export default new TestClass();
Post Babel Loader
var TestClass = function () {
function TestClass() {
_classCallCheck(this, TestClass);
// Load flags on import here
console.log("TESTING CONSTRUCTOR");
}
_createClass(TestClass, [{
key: "log",
value: function log(message) {
console.log("TESTING LOG");
}
}]);
return TestClass;
}();
exports.default = new TestClass();
The import itself is simply a import TestClass from 'testclass-js'. However, every single time I'm trying to load it I get a "Darklaunch is not defined" error, and can't call any of the methods of the class.
I'm wondering what I've done wrong here.
If you're trying to import the ES5/commonjs version, you'll need to import 'yourmodule'.default; This change came in around babel 6
Babel 6 changes how it exports default
Read more on the original issue: https://github.com/babel/babel/issues/2212
If your package contains both an es5 and es6+ version, you can point to the es6 version in the module key in package.json and webpack/rollup will pick that up and bundle it instead of the commonjs version
I have a class constructor, with a function I want to stub:
class Service {
constructor(){}
async someFunction() {
try {
// does stuff
}
catch (e) {}
}
}
In the file I want to test, this is imported an used like so:
const { Service } = require('something')
const newService = new Service('xyz')
I'm struggling to get this to import & stub correctly in my tests.
Currently am importing like this:
t.context.service = {
Service: class Service {
constructor () {
this.someFunction = sinon.stub()
}
}
}
This import seems to work, but then I can't get a reference back to it through the constructed version. Any help on this one?
I want to be able to make an assertion like:
t.true(t.context.service.Service.someFunction.calledOnce)
AVA doesn't provide any stubbing. Have a look at https://github.com/testdouble/testdouble.js/ or http://sinonjs.org/.
Let's say I want to implement and use the following ts module. It's just a basic validator that validates a first name:
export namespace Validators
{
export class NameValidator
{
constructor()
{
}
FirstNameIsValid(firstName: string)
{
return firstName.length < 20;
}
}
}
What would be the correct way for me to implement the module above? Also, what would be the correct way for me to reference and use this module from my ng2 component? The following import statement doesn't work:
import { Validators.NameValidator } from './modules/name-validator';
The way I have done it in the past is to create a module
module Formatter{
export class SsnFormatter {
ssn: string;
constructor(unformattedSsn: string) {
this.ssn = unformattedSsn.replace(/(\d{3})(\d{2})(\d{4})/, '$1-$2-$3');
}
formatSsn() {
return this.ssn;
}
}
}
Then within the other typescript files call it as
let f = new Formatter.SsnFormatter('111111111');
console.log(f);
As long as your class is within the same module namespace you should be able to reference it directly.
This was from an angular 1.x project but the version of TS or angular should not matter this is typescript communicating between modules.
How to export and use the ECMA6 class? This is what I am doing now:
parser.js
module.exports = class Parser {
static parse() {
}
static doNow() {
}
}
Now in another file, I am doing:
var Parser = require('parser')
Parser.parse();
When parse is called on Parser, I get an error saying
SyntaxError: Unexpected identifier
with Parser highlighted.
What could be the reason for this? What is the correct to export and import the class?
You try to call your module in an absolute way this is what causes problem.
I recommend using an IDE as webstorm or atom to not have this kind of problem in the future
try this :
var Parser = require('path/path/parser.js');
Parser.parse();
for es6 is :
export default class Parser {
static parse() {
}
static doNow() {
}
}
import Parser from './path/path/parser';
It's easier and more readable to do it like this:
class Parser {
static parse() {
}
static doNow() {
}
}
module.exports = Parser;
and in the requiring module:
const Parser = require('./path/to/module');
Parser.doNow();
// etc.
I tested this and it seems the issue is the path of parser.
File Structor
-index.js
-parser.js
index.js
var Parser = require('./parser')
console.log('parser',Parser.parse());
parser.js
module.exports = class Parser {
static parse() {
return 'hello there'
}
static doNow() {
}
}
Terminal
node index.js
parser hello there