JSPM package written in Typescript

[creaux]

I can't find answer on this question. Is possible to have written jspm packages using typescript and load them directly as dependency in application?

Current state is that I'm able to install dependency.

I'm able to load first module which is written in typescript and installed by jspm because it's setting for compilation by typescript is written in main project config.js file.

Then it's stuck. Loading of second package which is dependency of successfully loaded first typescript package seems to be big deal. Reason of that is that it's trying all the time put *.js suffix.

Am I missed something?

[ryanlutgen]

"Loading of second package which is dependency of successfully loaded first typescript package..." can you elaborate on that?

What does your package.json and config.js files look like?

[creaux]

package.json is like following

{
  "jspm": true,
  "directories": {
    "packages": "vendor"
  },
  "devDependencies": {
    "typescript": "npm:typescript@^1.6.2"
  },
  "dependencies": {
    "module": "git:project/module@master"
  }
}

config.js is like following

baseURL: "/",
  defaultJSExtensions: true,
  transpiler: "typescript",
  paths: {
    "npm:*": "vendor/npm/*",
    "git:*": "vendor/git/*",
    "github:*": "vendor/github/*"
  },

  packages: {
    "app": {
      "main": "app",
      "defaultExtension": "ts",
      "map": {
        "typescript": "typescript"
      },
      "modules": {
        "*.ts": {
          "loader": "typescript"
        }
      }
    }
  },
map: {
...
}

important is maybe package.json of first installed jspm module which has as dependency defined another one:

{
  "name": "module",
  "dependencies": {
    "module2": "git:project/module2@master"
  },
  "devDependencies": {
    "ts": "github:frankwallis/plugin-typescript@^2.0.3"
  },
  "main": "app.ts"
}

Module name "module" is trying to load another jspm module called "module2" but is adding *.js suffix to the app.ts or just app (tried as well).

[ryanlutgen]

I am not familiar with your workflow (changing the jspm packages folder name, not prefixing package.json), so I personally can't offer much help, but in my experience, I have been able to export modules using Babel and then consume them/bundle them using Babel.

[creaux]

And what kind of suffix had main file of each package which you loading from jspm_packages directory?

[unional]

Seems like you are using quite old version. Use plugin-typescript for loading ts, set transpiler to false. It will be deprecated.

[frankwallis]

@creaux you need to add package configuration for module2 in the same way as you have for app. See here for an example of this.

[frederikschubert]

It would be great if we could set a flag when installing a dependency that tells jspm to autogenerate the typescript plugin loader configuration for that package. Also when settings this hypothetical jspm install --ts flag, jspm could write the configuration for that package to the tsconfig.json file.
This way the developing experience with applications that are written in typescript using jspm would be greatly improved.

[guybedford]

@frederikschubert in jspm 0.17, arbitrary package metadata can be set in the package.json like:

{
  "jspm": {
    "devDependencies": {
      "ts-loader": "github:frankwallis/plugin-typescript"
    },
    "meta": {
      "*.ts": {
        "loader": "ts-loader",
        "tsConfig": {
          "any": "custom",
          "options": "here"
        }
      }
  }
}

Which will then be available to the plugin. Creating the right abstraction / set of properties for this metadata interface for the plugin is then the part that needs to be considered. Does that cover what you are trying to achieve?

[frederikschubert]

Yes I think so. My use case is the following:

We develop several independent modules at my company that are written in typescript. All the modules have a specific package name prefix. So I would like to set the default extension for all prefix-* packages to ts.
That would improve the experience when I work on linked modules as I would not have to transpile them in order to see the change.

[guybedford]

@frederikschubert can you clarify a little here what you mean by setting the default extension?

[guybedford]

As in, are you saying that your imports are extension less import 'path/to/file' and you need it to be added during resolution, or that when you build your ts files, they are being built without extensions into System.register('path/to/file', ... instead of System.register('path/to/file.ts', ...?

[frederikschubert]

Currently the transpiled *.js files from the prefixed modules are being loaded when I import them in my project. This forces me to transpile them before reloading the page during development.
I would like to have the *.ts source files being loaded from prefixed modules and transpiled on the fly by plugin-typescript. This way I would not have to transpile them each time I change something.

Am 01.02.2016 um 12:41 schrieb Guy Bedford [email protected]:

As in, are you saying that your imports are extension less import 'path/to/file' and you need it to be added during resolution, or that when you build your ts files, they are being built without extensions into System.register('path/to/file', ... instead of System.register('path/to/file.ts', ...?

—
Reply to this email directly or view it on GitHub #1440 (comment).

[guybedford]

@frederikschubert can you not just use package configuration defaultExtension: 'ts' then?

[frederikschubert]

Yes but I want to set this configuration for all packages that have a specific prefix. Or are wildcards already possible for package configurations?

Am 01.02.2016 um 12:51 schrieb Guy Bedford [email protected]:

@frederikschubert https://github.com/frederikschubert can you not just use package configuration defaultExtension: 'ts' then?

—
Reply to this email directly or view it on GitHub #1440 (comment).

[guybedford]

@frederikschubert it needs to be set individually for each package, or you can change the package to be the folder beneath the individual subfolders. Alternatively just always use .ts extensions in your imports to begin with.

[frederikschubert]

Ok I will do that. Thank you for your support!

Am 01.02.2016 um 13:00 schrieb Guy Bedford [email protected]:

@frederikschubert https://github.com/frederikschubert it needs to be set individually for each package, or you can change the package to be the folder beneath the individual subfolders. Alternatively just always use .ts extensions in your imports to begin with.

—
Reply to this email directly or view it on GitHub #1440 (comment).