Khoi Pham Khoi Pham - 1 year ago 136
TypeScript Question

Invoke the text plugin from requirejs mapping

I'm writing a web app using TypeScript, Backbone, and Mustache. I want to use Requirejs for dependency loading.

I'm also using the Web Essentials visual studio plugin for TypeScript with the AMD compilation option turned on. For those that are not familiar with this, it will wrap your type script file in an AMD module if you import external modules.
For example:

In type script I import the following modules in type definition files.

export import Backbone = module("Backbone");
import mainTemplate = module("MainTemplate");

The output is something like:

define(["require", "exports", "Backbone", "MainTemplate"], function(require, exports, __Backbone__, __mainTemplate__) {
//...code goes here ...

For the template, I've declared the following in a type definition file:

declare module "MainTemplate" { }

In order to support requirejs plugins, you need to declare your module as:

declare module "text!MainTemplate.html" { }

I'd like to keep the module name free of plugins and file extensions. This would leave me with some flexibility in the future.

I have the following mapping in require.

map: {
"MyModule": {
"MainTemplate": "text!MainTemplate.html"

This successfully invokes the text plugin however, the plugin loads the wrong url. Sifting through the source code for the text plugin, I found that the following code is the culprit.

load: function (name, req, onLoad, config) {
url = req.toUrl(nonStripName),
//returns "scripts/**text!**MainTemplate.html**.html**"

If I name the module, 'MainTemplate.html' it works fine but I'd like to keep the extension out of the module name.

I've modified the text plugin with a simple regex replacement to strip out the plugin reference and the duplicate extension.

Is there a better way to handle this?

Answer Source

Ran into similar issue. Solved finally. See TypeScript: compiling removes unreferenced imports

/// <amd-dependency path="text!templates/application.htm" />

var applicationTemplate = require('text!templates/application.htm');
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download