I'm using TypeScript and require.js to resolve dependencies in my files. I'm in a situation where I want to reference a static field of a class in an other file, but in the same internal module (same folder) and I am not able to access it, even if the Visual Studio pre-compiler does not show any error in my code.
I have the following situation :
Game.ts
class Game {
// ...
static width: number = 1920;
// ...
}
export = Game;
Launcher.ts
/// <reference path='lib/require.d.ts'/>
import Game = require("Game");
var width: number = Game.width;
console.log(width); // Hoping to see "1920"
And the TypeScript compiler is ok with all of this. However, I keep getting "undefined" at execution when running the compiled Launcher.ts.
It's the only reference problem I'm having in my project, so I guess the rest is configured correctly.
I hope I provided all necessary information, if you need more, please ask
Any help is appreciated, thanks !
Your code seems sound, so check the following...
You are referencing require.js in a script tag on your page, pointing at Launcher (assuming Launcher.ts is in the root directory - adjust as needed:
<script src="Scripts/require.js" data-main="Launcher"></script>
Remove the reference comment from Launcher.ts:
import Game = require("Game");
var width: number = Game.width;
console.log(width); // Hoping to see "1920"
Check that you are compiling using --module amd to ensure it generates the correct module-loading code (your JavaScript output will look like this...)
define(["require", "exports", "Game"], function (require, exports, Game) {
var width = Game.width;
console.log(width); // Hoping to see "1920"
});
If you are using Visual Studio, you can set this in Project > Properties > TypeScript Build > Module Kind (AMD)
If you are using require.js to load the (external) modules, the Game class must be exported:
export class Game {}
If you import Game in Launcher.ts like
import MyGame = require('Game')
the class can be referenced with MyGame.Game and the static variable with MyGame.Game.width
You should compile the ts files with tsc using option --module amd or the equivalent option in Visual Studio
Related
Currently in Web-Essentials (for Visual Studio 2015), if a .ts file from the Solution Explorer is dragged and dropped into an open .ts file, a reference path is automatically inserted at the top:
/// <reference path="../playback/key.ts" />
This is fine when a project is being developed using internal modules (namespaces), but is virtually useless when going external. How could I make it so that an ES6 import statement is generated instead? That would be awesome. Such as:
import {} from "../playback/key";
It turns out what we are seeing is a built-in feature of Web-Essentials. I've filed a feature-request to get this available, hopefully in the near future.
In the meantime, the following Visual Commander automation snippet can replace all references to ES6 imports:
using EnvDTE;
using EnvDTE80;
using System.Text.RegularExpressions;
public class C : VisualCommanderExt.ICommand
{
// Called by Visual Commander extension.
public void Run(EnvDTE80.DTE2 DTE, Microsoft.VisualStudio.Shell.Package package)
{
TextDocument doc = (TextDocument)(DTE.ActiveDocument.Object("TextDocument"));
var p = doc.StartPoint.CreateEditPoint();
string s = p.GetText(doc.EndPoint);
p.ReplaceText(doc.EndPoint, this.ReplaceReferences(s), (int)vsEPReplaceTextOptions.vsEPReplaceTextKeepMarkers);
}
// Converts "reference" syntax to "ES6 import" syntax.
private string ReplaceReferences(string text)
{
string pattern = "\\/\\/\\/ *<reference *path *= *\"([^\"]*)(?:\\.ts)\" *\\/>";
var regex = new Regex(pattern);
var matches = Regex.Matches(text, pattern);
return Regex.Replace(text, pattern, "import {} from \"./$1\";");
}
}
The regex used to perform this replace is (without the double backslashes, more readable):
\/\/\/ *<reference *path *= *"([^"]*)(?:\.ts)" *\/>
This snippet will effectively convert all reference comments to ES6 imports in the currently active document, very useful.
Known issues:
a comment containing a reference tag is not recognized by Visual Studio if it is preceded by other text in the corresponding line, but it is still replaced by this snippet
additional text after a reference tag is valid, but after replace will cause syntax errors, since it is no longer a comment.
(Neither of these issues are relevant if the snippet is used on reference tags generated by Web-Essentials when a .ts file is drag-and-dropped.)
I created a Gui library that works fine when i test it from within the project. Now i want to use it as a library, for my sound generation application.
Seems simple, but i couldn't get anything despite many changes in my references or compiler options...
I use 1.6.2 version of typescript, target es5, use commonjs formodule in both tsconfig.json files . moduleResolution is classic.
I don't know if that matters, but i use experimentalDecorators and i output declaration file and inlined source map.
What i have so far is like (simplified version):
••• Library files •••
shapes.ts
shapes/rect.ts
shapes/roundrect.ts
shapes.ts is the main module. Since i've read that files are already modules, i did not use the modulekeyword.
// shapes.ts
/// <reference path="./shapes/rect.ts"/>
/// <reference path="./shapes/roundrect.ts"/>
export * from "./shapes/rect.ts";
export * from "./shapes/roundrect.ts"
--
// rect.ts
export class Rect {
x : number;
y : number;
...
}
--
// roundrect.ts
/// <reference path="./rect.ts"/>
import {Rect} from "./rect.ts";
export class RoundRect extends Rect {
cornerRadius : number;
...
}
••• App files •••
for the App file, i made many attemps, i would like to be able to write :
var MyRect = new Rect();
or :
var MyRect = new Shapes.Rect();
So i tried a lot of import syntax, since no two blogs or docs says the same about this syntax :
import * as Shapes from '../../shapes/dst/shapes';
Or
import Shapes = require('../../shapes/dst/shapes');
Or
import {Rect, RoundRect} from '../../shapes/dst/shapes';
Or
var Shapes = require('../../shapes/dst/shapes');
( Or all above examples from the src and not the dst folder) .
All those examples get marked as a wrong path in the editor.
I also tried all examples above with or without :
/// <reference path="../../shapes/rect.ts"/>
Rq the path is marked correct with reference, but when using a reference path, there are a lot of 'Cannot find module' errors.
So bottom line, i always get, for the module import, the same error :
Cannot find module '../../shapes/dst/shapes'
¿¿¿ How can i use my lib ???
If you have multiple classes exported inside a file, it makes sense to use a module.
If you'd rather export a class as a module itself, you can try export =
Example:
class RoundRect {
....
}
export = RoundRect;
http://www.typescriptlang.org/Handbook#modules-export-
I'm developing an NPM package using typescript. Within this package the TS files are setup as external modules. The compiler won't generate a single .d.ts for external modules. I'm trying to concat all tsc generated type definitions into a single .d.ts for the entire package.
I'm having issues laying out the single .d.ts file (following a similar approach to that used in grunt-dts-bundle). The condensed example below captures my issue.
Given this external module declaration and test file:
test.d.ts :
declare module "ExternalWrapper" {
export import Foo = require("FooModule");
}
declare module "FooModule" {
class Foo {
name: string;
}
export = Foo;
}
test.ts:
import externalWrapper = require( 'ExternalWrapper' );
var t = new externalWrapper.Foo();
Running tsc test.ts test.d.ts -m commonjs produces this error: TS2083: Invalid 'new' expression.
If you change 'test.ts' to look like this, importing 'FooModule' directly:
import Foo = require( "FooModule" );
var t = new Foo();
It compiles fine.
The compiler understands the type externalWrapper.Foo however it doesn't seem to represent it as the same type FooModule.Foo. There is something I'm not getting about how the compilers handles modules that are exported via 'export import'.
Failing the above I'll probably look to manually creating the .d.ts :(
Any help appreciated.
You are probably missing a reference tag:
/// <reference path="test.d.ts"/>
It works :
You should be able to fix this by modifying your .d.ts file to resemble the following:
declare module "ExternalWrapper" {
import FooModule = require("FooModule");
export var Foo: typeof FooModule;
}
declare module "FooModule" {
class Foo {
name: string;
}
export = Foo;
}
With the export import syntax the compiler was assuming you were exporting an instance of Foo, not Foo itself... a little quirky.
I feel a Little stuck right now. First I used nuget to
install-package Bootstrap.less
as well as
install-package dotless
Then, as shown in Rick Andersons Blogpost about bundling and minification in asp.net mvc, I created a LessTransform-Class. I set up 2 nearly empty .less files and created a new bundle packaging them...
var lessBundle = new Bundle("~/MyLess").IncludeDirectory("~/Content/MyLess", "*.less", true);
lessBundle.Transforms.Add(new LessTransformer());
lessBundle.Transforms.Add(new CssMinify());
bundles.Add(lessBundle);
That worked well. Then I added a new StyleBundle to the main bootstrap.less file (which basically uses #import to include all the other .less files that bootstrap.less ships)...
bundles.Add(new StyleBundle("~/Bootstrap").Include("~/Content/Bootstrap/less/bootstrap.less"));
and a ScriptBundle to the bootstrap JavaScripts...
bundles.Add(new ScriptBundle("~/bundles/Bootstrap").Include("~/Scripts/bootstrap/js/bootstrap-*"));
to include all shipped bootstrap-*.js files and TADAA everything worked fine. The CSS got compiled including all imported JavaScript files were properly loaded.
But ... all that only worked for development mode with
<compilation debug="true" targetFramework="4.5"/>
As soon as I disable debug to see if the bundling into one file and the minification works properly I encounter the Problem.
The bundling process seems to fail to import all those .less files imported into bootstrap.less
/* Minification failed. Returning unminified contents.
(11,1): run-time error CSS1019: Unexpected token, found '/'
(11,2): run-time error CSS1019: Unexpected token, found '/'
(12,1): run-time error CSS1031: Expected selector, found '#import'
(12,1): run-time error CSS1025: Expected comma or open brace, found '#import'
(12,27): run-time error CSS1019: Unexpected token, found '/'
(12,28): run-time error CSS1019: Unexpected token, found '/'
... here go many many lines like these
(60,25): run-time error CSS1019: Unexpected token, found ';'
(62,1): run-time error CSS1019: Unexpected token, found '/'
(62,2): run-time error CSS1019: Unexpected token, found '/'
(63,1): run-time error CSS1031: Expected selector, found '#import'
(63,1): run-time error CSS1025: Expected comma or open brace, found '#import'
(63,27): run-time error CSS1019: Unexpected token, found '/'
(63,28): run-time error CSS1019: Unexpected token, found '/'
: run-time error CSS1067: Unexpected end of file encountered
*/
/*!
* Bootstrap v2.3.1
*
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*
* Designed and built with all the love in the world #twitter by #mdo and #fat.
*/
// Core variables and mixins
#import "variables.less"; // Modify this for custom colors, font-sizes, etc
#import "mixins.less";
... and the rest of the original bootstrap.less... no style definitions
having a look at the minified bootstrap.javascript bundle also boggles me. in dev there was no Problem after loading the page, now after the bootstrap.javascript was bundled and minified in Google the JavaScript console states
Uncaught TypeError: Cannot read property 'Constructor' of undefined
I have had a look at several Topics that seemed closely related to my Problem, and I tried a few things, but so far without success.
Many thanks in advance to anyone who could shed some light into my Situation and who would point out what I am missing or doing wrong. Best regards, Ingo
If you want to use bootstrap as less-files and in addition want to stop worrying about bundling and minification on your development machine as well as on your production machine, you might consider using the following approach.
Note: you don't need all this if you only play around with Less-Files while DEBUGging is enabled; But as soon as you want your application to go live on a production server like Windows Azure, and still want to just modify your less files without having to take care about the bundling and minification procedures... well... then this approach will work
So in order to solve the problem I felt a little stuck in, I had to approach the problem differently and had to modify (see Modification 2 further down the post) the "BundleSource" I thought I'd like to have.
SO DONT FORGET TO READ THE 2nd Modification/Warning close to the bottom of this answer!
MODIFICATION 1)
So the first and bigger part of the job is to get the bundling of the bootstrap-less files working. In order to do that I took the liberty to fork a piece of code I found in the web that (if you only need one less-file bundle) itself solves my problem... unless you might want to use or be able to use multiple less-bundles with several base directories... So that is where I actually found the approach that helped me a lot ...
... wherefore I award many thanks to Kristof Claes for his Blog-Entry "Using ASP.NET bundling and minification with LESS files" which I accidently and gladly stumbled over.
Like me he tried to use the LessMinify.cs that Scott Hanselman was showing in his speeches to work with 1 LESS-file instead of just bundling every single file in 1 directory full of LESS-files.
But he had to extend the whole bundling procedure slightly as he shows in his Blog-Entry. That way the solution he proposes can bundle 1 less file that uses imports to load other less files. But as he statically implements the path that is added to the source directory in which to find the less files... whichever less bundle you define has to pick a less file in the same directory...
That is where I took the liberty to extend his solution a bit further. I created a file LessBundling.cs with the following content:
using dotless.Core.configuration;
using dotless.Core.Input;
using MvcApplication2.Utils;
using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Runtime.CompilerServices;
using System.Web;
using System.Web.Hosting;
using System.Web.Optimization;
namespace MvcApplication2.Extensions
{
// create Less-Minifier (use Type to define source directory of less files [see below at BootstrapFileReader])
public class LessMinify<TFileReader> : CssMinify
where TFileReader : IFileReader
{
public LessMinify() {}
public override void Process(BundleContext context, BundleResponse response)
{
var config = new DotlessConfiguration()
{
MinifyOutput = true,
ImportAllFilesAsLess = true,
CacheEnabled = false,
LessSource = typeof(TFileReader)
};
response.Content = dotless.Core.Less.Parse(response.Content, config);
base.Process(context, response);
}
}
// create a LessStyleBundler to allow initializing LessBundle with a single less file that uses imports
public class LessStyleBundle<TFileReader> : Bundle
where TFileReader : IFileReader
{
public LessStyleBundle(string virtualPath)
: base(virtualPath, new LessMinify<TFileReader>()) {}
public LessStyleBundle(string virtualPath, string cdnPath)
: base(virtualPath, cdnPath, new LessMinify<TFileReader>()) { }
}
// create abstract VirtualFileReader from dotless-IFileReader as a Base for localized
internal abstract class VirtualFileReader : IFileReader
{
public byte[] GetBinaryFileContents(string fileName)
{
fileName = GetFullPath(fileName);
return File.ReadAllBytes(fileName);
}
public string GetFileContents(string fileName)
{
fileName = GetFullPath(fileName);
return File.ReadAllText(fileName);
}
public bool DoesFileExist(string fileName)
{
fileName = GetFullPath(fileName);
return File.Exists(fileName);
}
public string GetFullPath(string path)
{
return HostingEnvironment.MapPath(SourceDirectory + path);
}
public abstract string SourceDirectory {get;}
// implement to return Path to location of less files
// e. g. return "~/Content/bootstrap/less/";
}
// create BootstrapFileReader overwriting the Path where to find the Bootstrap-Less-Files
internal sealed class BootstrapFileReader : VirtualFileReader
{
public override string SourceDirectory
{
get { return "~/Content/bootstrap/less/"; }
}
}
}
So what does this actually do?
LessMinify extends the CssMinify class and therefore brings everything needed to minify css files
The important difference to "usual" bundling is that you create a new Dotless-Configuration with the LessSource defined as typeof(TFileReader) ...
By using <TFileReader> you can define a class that will contain the source directory in which the bundler/minifier will look for the less files to be taken into account
LessStyleBundle extends Bundle and therefore brings everything needed to bundle the files
In this class I again use TFileReader as this is where the LessMinify(er) will be instantiated
VirtualFileReader implements IFileReader which is a dotless interface defining all methods required to parse less files and give information where to find files to be imported
In order to extend Kristof's solution to the problem I added the abstract property SourceDirectory... requiring me to also make the VirtualFileReader abstract class
Now with that setup you can create as many LessFileReaders as you want. You just have to extend the abstract VirtualFileReader as can be seen in
BootstrapFileReader extends VirtualFileReader
The only purpose of the BootstrapFileReader is to have a property-getter for the SourceDirectory in which the bundler/minifier will find the less files that are to be imported
Well in my case Bootstraps Less-Files where lying in ~/Content/bootstrap/less which should be the default location if you install the "twitter.bootstrap.less"-nugget.
If you'd have another directory in your application, which contained a less file which again has multiple imports you just create a new class extending VirtualFileReader and define the property-getter for the SourceDirectory to return the corresponding path
If you then want to use this Bundling method to actually bundle and minify less files in a production environment you just add the LessStyleBundle-instantion to the BundlerConfig.cs:
bundles.Add(new LessStyleBundle<BootstrapFileReader>("~/bundles/BootstrapCSS")
.Include("~/Content/bootstrap/less/bootstrap.less"));
and of course your _Layout.cshtml should also be aware of the readily prepared bundle
#Styles.Render("~/bundles/BootstrapCSS")
MODIFICATION 2)
now the minor Modification which I also had to add to get this working
In my first attempt to bundle bootstrap.less I used this
bundles.Add(new LessStyleBundle<BootstrapFileReader>("~/Content/BootstrapCSS")
.Include("~/Content/bootstrap/less/bootstrap.less"));
I thought I would use Content in the routes for CSS/Less and Bundles in the routes for Javascript.
But that does not work out of the box. ASP.net doesnt permit the creation of a Bundle that starts with ~/Content. You will get a 403 authorization failure. Therefore the easiest solution to that is to use ~/bundles instead:
bundles.Add(new LessStyleBundle<BootstrapFileReader>("~/bundles/BootstrapCSS")
.Include("~/Content/bootstrap/less/bootstrap.less"));
As there aren't many real solutions to this problem I hope this will help at least some of you if you plan to integrate twitter bootstrap into your asp.net mvc4 application.
best regards,
Ingo
I've modified Ingo workaround to get rid of custom classes for each directory.
Also, I've added proper exception output (because otherwise all exceptions was silent and you just got empty less file in case of error).
public class LessTransform : IItemTransform
{
[ThreadStatic]
internal static string CurrentParsedFileDirectory;
public string Process (string includedVirtualPath, string input)
{
CurrentParsedFileDirectory = Path.GetDirectoryName (includedVirtualPath);
var config = new DotlessConfiguration
{
MinifyOutput = false,
CacheEnabled = false,
MapPathsToWeb = true,
ImportAllFilesAsLess = true,
LessSource = typeof (VirtualFileReader),
Logger = typeof (ThrowExceptionLogger)
};
return Less.Parse (input, config);
}
}
internal class VirtualFileReader : IFileReader
{
public bool UseCacheDependencies
{
get { return false; }
}
public byte[] GetBinaryFileContents (string fileName)
{
return File.ReadAllBytes (GetFullPath (fileName));
}
public string GetFileContents (string fileName)
{
return File.ReadAllText (GetFullPath (fileName));
}
public bool DoesFileExist (string fileName)
{
return File.Exists (GetFullPath (fileName));
}
public string GetFullPath (string path)
{
if (string.IsNullOrEmpty (path))
return string.Empty;
return HostingEnvironment.MapPath (path[0] != '~' && path[0] != '/'
? Path.Combine (LessTransform.CurrentParsedFileDirectory, path)
: path);
}
}
public class ThrowExceptionLogger : Logger
{
public ThrowExceptionLogger (LogLevel level) : base (level)
{
}
protected override void Log (string message)
{
if (string.IsNullOrEmpty (message))
return;
if (message.Length > 100)
message = message.Substring (0, 100) + "...";
throw new LessTransformException (message);
}
}
[Serializable]
public sealed class LessTransformException : Exception
{
public LessTransformException (string message) : base (message)
{
}
}
Usage:
bundles.Add (new StyleBundle ("~/styles-bundle/common")
.Include ("~/content/bootstrap/bootstrap.less", new LessTransform ()));
I was having the same issue today, I found a work around but I'd like a better solution as well. I was also trying to use dotless and a custom transform like what you have.
Workaround:
Pre-build event:
"$(SolutionDir)packages\dotless.1.3.1.0\tool\dotless.compiler.exe" "$(ProjectDir)Content\less\bootstrap.less"
That will create a bootstrap.css file which you can then include as regular CSS instead of LESS.
This solution isn't ideal, as you'd have to update the build event each time you update dotless, and having the bundle handle it is cleaner as well.
I really, really recommend installing WebEssentials 2012 instead.
It will generate a css-file AND a minified css-file from your .less and you can reference the css instead. It will automatically update the css everytime you make a change to your .less so there is no need to remember any pre-build steps or anything...
When installing WebEssentials you'll also get other sweet features like preview of CoffeeScript, TypeScript and LESS. JSHint, automatic minification and lots and lots more "goodies"!
Simple question.
Does AMD DOJO implementation support these type of declarations?
text!./plain.html
define(["../Widget","text!./plain.html"],
function(Widget,plain){
return new Widget({name:"mainApp",template:plain});
});
Load non-modules, let's say underscore.js
require(['dir/underscore.js'], function(){
_.reduce ...
});
Yes, but the precise syntax is different to that used in the question.
The Dojo Loader (1.7)
Plugins
dojo/text
The plugin for loading character data is dojo/text.
The extension should not be used when loading a JavaScript library and the location of the file is set via either a relative of the dojotoolkit base or a packages location declaration in dojoConfig:
require(['underscore'], function( _ ){
_.reduce ...
});
Configure the namespace in the Dojo configuration to avoid messy import paths - see dojoConfig in the loader documentation.
Also, consider using the dojo/global module and/or defining a Dojo module as a wrapper for Underscore.js:
//_.js
define(['dojo/global', 'underscore'], function(global){
return global._
});
With the above consideration, you must have loaded the actual .js file manually. If in conjunction with the dojo/text plugin, one would create a wrapper which also loads the required JS and evaluates it, following could do the trick.
/var/www/dojo-release-1.7/ext_lib/_.js - this sample file is hierachially placed in a library namespace, alongside dojo, dijit, dojox
define(['dojo/global', 'dojo/text!./Underscore.js'], function(global, scriptContents){
global.eval(scriptContents);
return global._ // '_' is the evaluated reference from window['_']
/**
* Alternatively, wrap even further to maintain a closure scope thus hiding _ from global
* - so adapt global.eval to simply eval
* - remove above return statement
* - return a dojo declared module with a getInstance simple method
*/
function get_ () { return _ };
var __Underscore = declare('ext_lib._', [/*mixins - none*/], {
getInstance: get_
});
// practical 'static' reference too, callable by 'ext_lib.getInstance' without creating a 'new ext_lib._'
__Underscore.getInstance = get_;
return __Underscore;
});
A sample of defining own modules using declare here
Note: this code is untested; feel free to add corrections.