In the midst of developing an Aurelia project with TypeScript to generate JavaScript, I decided to incorporate another custom library called 'hash-set' (installed using jspm install npm:hash-set --save). However, I encountered difficulties in actually utilizing this package with SystemJS as the loader.
Here is a glimpse of my document structure:
\
dist\
src\
app.html
app.js
main.js
jsp_packages\
npm\
<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1b737a687336687e6f5b2a352b352a">[email protected]</a>\
node_modules\
index.html
config.js
package.json
tsconfig.json
The essential files include:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>
<body aurelia-app="src/main">
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
SystemJS.import('aurelia-bootstrapper');
</script>
</body>
</html>
app.ts This file compiles to app.js during the prebuilt step and utilizes es2015 as the target configuration.
import {hashSet} from 'hash-set';
export class App {
public myText: string;
hashFn(value) {
return value.toString();
}
constructor() {
alert("oh");
const h = hashSet;
const StringSet = hashSet(this.hashFn);
alert('oh2');
}
}
config.js
System.config({
defaultJSExtensions: true,
transpiler: false,
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
meta: {
"bootstrap": {
"deps": [
"jquery"
]
}
},
map: { /*lots of aurelia and other library stuff*/
"hash-set": "npm:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bcd4ddcfd491cfd9c8fc8d928c92fcdcdce"></a>"
}
}
});
It's also specified in package.json as
{"jspm":{"dependencies":"hash-set": "npm:hash-set@^1.0.1"}}}Upon running the code mentioned above (where typescript compiles to app.js during the prebuilt step), the app.js/app.ts loads accordingly. However, "oh" is displayed during construction but "oh2" never shows. On debugging, it seems that "hashSet" is undefined. This leads me to believe that systemjs might not be including the hash-set correctly. Am I overlooking something?
EDIT: While examining the generated js (
app.js) file, I noticed something peculiar:
define(["require", "exports", "hash-set"], function (require, exports, hash_set_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
class App {
hashFn(value) {
return value.toString();
}
constructor() {
alert('oh');
const h = hash_set_1.hashSet;
const StringSet = hash_set_1.hashSet(this.hashFn);
alert('oh2');
}
}
exports.App = App;
});
//# sourceMappingURL=app.js.map
During debugging, hash_set_1 matches the type I expect hash_set_1.hashSet to be. Modifying the javascript manually to use hash_set_1 instead of hash_set_1.hashSet resolves the issue.
Attempting import hashSet from 'hash-set'; (note the absence of {}) alters the offending line in the generated javascript to
const StringSet = hash_set_1.default(this.hashFn);