riotts (riot-ts) and jspm - anyone got it working together?

Question

I have been looking at this ambitious project https://github.com/nippur72/RiotTS that has moved riotjs over to riot-ts. The author has used bower, and I am trying to get it working using jspm.

riot-ts doesn't exist in the jspm repo list, so I imported using jspm install npm:riot-ts

package.json:

{
"jspm": {
  "directories": {
    "baseURL": "public/assets"
  },
  "dependencies": {
    "riot-ts": "npm:riot-ts@^1.0.14"
  },
  "devDependencies": {
    "babel": "npm:babel-core@^5.8.24",
    "babel-runtime": "npm:babel-runtime@^5.8.24",
    "core-js": "npm:core-js@^1.1.4"
  }
},
"devDependencies": {
  "elixir-jasmine": "0.0.4",
  "gulp": "^3.9.1",
  "jspm": "^0.16.35",
  "laravel-elixir": "^6.0.0-2",
  "laravel-elixir-browsersync": "^0.1.5",
  "ws-laravel-elixir-typescript": "git+https://github.com/we-studio/laravel-elixir-typescript.git"
},
"dependencies": {
  "bootstrap": "^4.0.0-alpha.2"
}
}

SystemJS config (omitted some files for brevity):

    System.config({
    defaultJSExtensions: true,
    transpiler: "babel",
    babelOptions: {
        "optional": [
            "runtime",
            "optimisation.modules.system"
        ]
    },
    paths: {
        "github:*": "jspm_packages/github/*",
        "npm:*": "jspm_packages/npm/*"
    },
    map: {
        "babel": "npm:babel-core@5.8.38",
        "babel-runtime": "npm:babel-runtime@5.8.38",
        "core-js": "npm:core-js@1.2.6",
        "riot-ts": "npm:riot-ts@1.0.14",
        "npm:riot-cli@2.5.0": {
            "chalk": "npm:chalk@1.1.3",
            "chokidar": "npm:chokidar@1.5.1",
            "cluster": "github:jspm/nodelibs-cluster@0.1.0",
            "co": "npm:co@4.6.0",
            "optionator": "npm:optionator@0.8.1",
            "path": "github:jspm/nodelibs-path@0.1.0",
            "process": "github:jspm/nodelibs-process@0.1.2",
            "riot-compiler": "npm:riot-compiler@2.4.1",
            "rollup": "npm:rollup@0.26.3",
            "shelljs": "npm:shelljs@0.7.0",
            "systemjs-json": "github:systemjs/plugin-json@0.1.2"
        },
        "npm:riot-compiler@2.4.1": {
            "buffer": "github:jspm/nodelibs-buffer@0.1.0",
            "fs": "github:jspm/nodelibs-fs@0.1.2",
            "path": "github:jspm/nodelibs-path@0.1.0",
            "process": "github:jspm/nodelibs-process@0.1.2"
        },
        "npm:riot-route@2.4.0": {
            "riot-observable": "npm:riot-observable@2.4.2"
        },
        "npm:riot-tmpl@2.4.0": {
            "process": "github:jspm/nodelibs-process@0.1.2"
        },
        "npm:riot-ts@1.0.14": {
            "riot": "npm:riot@2.4.1"
        },
        "npm:riot@2.4.1": {
            "fs": "github:jspm/nodelibs-fs@0.1.2",
            "path": "github:jspm/nodelibs-path@0.1.0",
            "process": "github:jspm/nodelibs-process@0.1.2",
            "riot-cli": "npm:riot-cli@2.5.0",
            "riot-compiler": "npm:riot-compiler@2.4.1",
            "riot-observable": "npm:riot-observable@2.4.2",
            "riot-route": "npm:riot-route@2.4.0",
            "riot-tmpl": "npm:riot-tmpl@2.4.0",
            "simple-dom": "npm:simple-dom@0.3.0",
            "simple-html-tokenizer": "npm:simple-html-tokenizer@0.2.5"
        },
        "github:jspm/nodelibs-assert@0.1.0": "...",
        "github:jspm/nodelibs-buffer@0.1.0": "...",
        "github:jspm/nodelibs-constants@0.1.0": "...",
        "github:jspm/nodelibs-crypto@0.1.0": "...",
        "github:jspm/nodelibs-events@0.1.1": "...",
        "github:jspm/nodelibs-http@1.7.1": "...",
        "github:jspm/nodelibs-https@0.1.0": "...",
        "github:jspm/nodelibs-net@0.1.2": "...",
        "github:jspm/nodelibs-os@0.1.0": "...",
        "github:jspm/nodelibs-path@0.1.0": "...",
        "github:jspm/nodelibs-process@0.1.2": "...",
        "github:jspm/nodelibs-punycode@0.1.0": "...",
        "github:jspm/nodelibs-querystring@0.1.0": "...",
        "github:jspm/nodelibs-stream@0.1.0": "...",
        "github:jspm/nodelibs-string_decoder@0.1.0": "...",
        "github:jspm/nodelibs-timers@0.1.0": "...",
        "github:jspm/nodelibs-tty@0.1.0": "...",
        "github:jspm/nodelibs-url@0.1.0": "...",
        "github:jspm/nodelibs-util@0.1.0": "...",
        "github:jspm/nodelibs-vm@0.1.0": "...",
        "github:jspm/nodelibs-zlib@0.1.0": "...",
        "npm:abbrev@1.0.7": "...",
        "npm:amdefine@1.0.0": "...",
        "npm:ansi@0.3.1": "...",
        "npm:anymatch@1.3.0": "...",
        "npm:are-we-there-yet@1.1.2": "...",
        "npm:arr-diff@2.0.0": "...",
        "npm:asn1.js@4.6.0": "...",
        "npm:asn1@0.2.3": "...",
        "npm:assert-plus@0.2.0": "...",
        "npm:assert-plus@1.0.0": "...",
        "npm:assert@1.4.0": "...",
        "npm:async@1.5.2": "...",
        "npm:aws-sign2@0.6.0": "...",
        "npm:aws4@1.4.1": "...",
        "npm:babel-runtime@5.8.38": "...",
        "npm:binary-extensions@1.4.1": "...",
        "npm:bl@1.1.2": "...",
        "npm:block-stream@0.0.9": "...",
        "npm:bn.js@4.11.3": "...",
        "npm:boom@2.10.1": "...",
        "npm:brace-expansion@1.1.4": "...",
        "npm:braces@1.8.5": "...",
        "npm:browserify-aes@1.0.6": "...",
        "npm:browserify-cipher@1.0.0": "...",
        "npm:browserify-des@1.0.0": "...",
        "npm:browserify-rsa@4.0.1": "...",
        "npm:browserify-sign@4.0.0": "...",
        "npm:browserify-zlib@0.1.4": "...",
        "npm:buffer-shims@1.0.0": "...",
        "npm:buffer-xor@1.0.3": "...",
        "npm:buffer@3.6.0": "...",
        "npm:chalk@1.1.3": "...",
        "npm:chokidar@1.5.1": "...",
        "npm:cipher-base@1.0.2": "...",
        "npm:combined-stream@1.0.5": "...",
        "npm:commander@2.9.0": "...",
        "npm:constants-browserify@0.0.1": "...",
        "npm:core-js@1.2.6": "...",
        "npm:core-util-is@1.0.2": "...",
        "npm:create-ecdh@4.0.0": "...",
        "npm:create-hash@1.1.2": "...",
        "npm:create-hmac@1.1.4": "...",
        "npm:cryptiles@2.0.5": "...",
        "npm:crypto-browserify@3.11.0": "...",
        "npm:dashdash@1.13.1": "...",
        "npm:debug@2.2.0": "...",
        "npm:deep-extend@0.4.1": "...",
        "npm:delayed-stream@1.0.0": "...",
        "npm:des.js@1.0.0": "...",
        "npm:diffie-hellman@5.0.2": "...",
        "npm:ecc-jsbn@0.1.1": "...",
        "npm:elliptic@6.2.7": "...",
        "npm:evp_bytestokey@1.0.0": "...",
        "npm:expand-brackets@0.1.5": "...",
        "npm:expand-range@1.8.2": "...",
        "npm:extglob@0.3.2": "...",
        "npm:extsprintf@1.0.2": "...",
        "npm:fill-range@2.2.3": "...",
        "npm:for-own@0.1.4": "...",
        "npm:forever-agent@0.6.1": "...",
        "npm:form-data@1.0.0-rc4": "...",
        "npm:fsevents@1.0.12": "...",
        "npm:fstream-ignore@1.0.5": "...",
        "npm:fstream@1.0.9": "...",
        "npm:gauge@1.2.7": "...",
        "npm:generate-function@2.0.0": "...",
        "npm:generate-object-property@1.2.0": "...",
        "npm:getpass@0.1.6": "...",
        "npm:glob-base@0.3.0": "...",
        "npm:glob-parent@2.0.0": "...",
        "npm:glob@7.0.3": "...",
        "npm:graceful-fs@4.1.4": "...",
        "npm:graceful-readlink@1.0.1": "...",
        "npm:har-validator@2.0.6": "...",
        "npm:has-ansi@2.0.0": "...",
        "npm:has-unicode@2.0.0": "...",
        "npm:hash.js@1.0.3": "...",
        "npm:hawk@3.1.3": "...",
        "npm:hoek@2.16.3": "...",
        "npm:http-signature@1.1.1": "...",
        "npm:https-browserify@0.0.0": "...",
        "npm:inflight@1.0.5": "...",
        "npm:inherits@2.0.1": "...",
        "npm:ini@1.3.4": "...",
        "npm:is-binary-path@1.0.1": "...",
        "npm:is-buffer@1.1.3": "...",
        "npm:is-equal-shallow@0.1.3": "...",
        "npm:is-glob@2.0.1": "...",
        "npm:is-my-json-valid@2.13.1": "...",
        "npm:is-number@2.1.0": "...",
        "npm:isobject@2.1.0": "...",
        "npm:isstream@0.1.2": "...",
        "npm:jodid25519@1.0.2": "...",
        "npm:jsonpointer@2.0.0": "...",
        "npm:jsprim@1.2.2": "...",
        "npm:kind-of@3.0.3": "...",
        "npm:levn@0.3.0": "...",
        "npm:lodash._basetostring@4.12.0": "...",
        "npm:lodash.pad@4.4.0": "...",
        "npm:lodash.padend@4.5.0": "...",
        "npm:lodash.padstart@4.5.0": "...",
        "npm:lodash.tostring@4.1.3": "...",
        "npm:micromatch@2.3.8": "...",
        "npm:miller-rabin@4.0.0": "...",
        "npm:mime-db@1.23.0": "...",
        "npm:mime-types@2.1.11": "...",
        "npm:minimatch@2.0.10": "...",
        "npm:minimatch@3.0.0": "...",
        "npm:mkdirp@0.5.1": "...",
        "npm:nan@2.3.3": "...",
        "npm:node-pre-gyp@0.6.28": "...",
        "npm:node-uuid@1.4.7": "...",
        "crypto": "github:jspm/nodelibs-crypto@0.1.0",
        "npm:nopt@3.0.6": "...",
        "npm:npmlog@2.0.4": "...",
        "npm:oauth-sign@0.8.2": "...",
        "npm:ripemd160@1.0.1": "...",
        "npm:rollup@0.26.3": "...",
        "npm:semver@5.1.0": "...",
        "npm:sha.js@2.4.5": "...",
        "npm:shelljs@0.7.0": "...",
        "npm:simple-dom@0.3.0": "...",
        "npm:sntp@1.0.9": "...",
        "npm:source-map-support@0.4.0": "...",
        "npm:source-map@0.1.32": "...",
        "npm:sshpk@1.8.3": "...",
        "npm:stream-browserify@1.0.0": "...",
        "npm:string_decoder@0.10.31": "...",
        "npm:stringstream@0.0.5": "...",
        "npm:strip-ansi@3.0.1": "...",
        "npm:strip-json-comments@1.0.4": "...",
        "npm:supports-color@2.0.0": "...",
        "npm:tar-pack@3.1.3": "...",
        "npm:tar@2.2.1": "...",
        "npm:timers-browserify@1.4.2": "...",
        "npm:tough-cookie@2.2.2": "...",
        "npm:tunnel-agent@0.4.3": "...",
        "npm:type-check@0.3.2": "...",
        "npm:uid-number@0.0.6": "...",
        "npm:url@0.10.3": "...",
        "npm:util-deprecate@1.0.2": "...",
        "npm:util@0.10.3": "...",
        "npm:verror@1.3.6": "...",
        "npm:vm-browserify@0.0.4": "..."
    }
});

Even in the plainest setup, TSC complains it can't find Riot tsc app.ts --module AMD

Error from gulp

    fullFilename: 'aLongPath/leg-13-calculator/public/assets/jspm_packages/npm/riot-ts@1.0.14/index.ts',
  relativeFilename: 'public/assets/jspm_packages/npm/riot-ts@1.0.14/index.ts',
  file: <File "jspm_packages/npm/riot-ts@1.0.14/index.ts" <Buffer 69 6d 70 6f 72 74 20 2a 20 61 73 20 72 69 6f 74 20 66 72 6f 6d 20 22 72 69 6f 74 22 0d 0a 0d 0a 65 78 70 6f 72 74 20 66 75 6e 63 74 69 6f 6e 20 74 65 ... >>,
  startPosition: { position: 22, line: 1, character: 23 },
  endPosition: { position: 27, line: 1, character: 29 },
  message: '\u001b[31mpublic/assets/jspm_packages/npm/riot-ts@1.0.14/index.ts(1,23): \u001b[39merror TS2307: Cannot find module \'riot\'.' }

This file exists. The path is correct. It just isn't finding riot.

Does anyone have an example of riot-ts working with jspm?

Update 01-06-2016

• Didn't have a typings file. The guide on http://jspm.io/docs/getting-started.html really needs to mention that. Many hours wasted.
• Although this fixes the error from typescript, it doesn't fix the integration of riot-ts. I have gone back to bower for now.

Update 02-06-2016

• Can not get the @template decorator working within typescript. Have tried multiple ts definition files. TS just barfs...

Answer 1

Can not get the @template decorator working within typescript. Have tried multiple ts definition files. TS just barfs...

Try installing the latest development version with npm install -g typescript@next

You can create a file called tsconfig.json containing:

{ "compilerOptions": { ... "experimentalDecorators": true, ... ]

I also noticed that the author of Riot-TS has published a hello world for using jspm, you might want to check out his tsconfig.json file at https://github.com/nippur72/RiotTS-helloworld/blob/gh-pages/example-old-jpm/tsconfig.json

Good luck!