I am a bit new to both JavaScript and TypeScript so this might be a simple mistake on my part. I am using Raphael 2.1.2 and the TypeScript definition file from https://github.com/borisyankov/DefinitelyTyped version 2.1. I have two simple lines of code:
var canvas: HTMLElement = document.getElementById("SVGCanvas");
var x = new Raphael(canvas, 800, 800);
Consistent with the example code I have seen, but typescript fails to compile it with the error below:
Call signatures used in a 'new' expression must have a 'void' return type
Can someone impart some wisdom here?
Thanks in advance.
Tim
That error is a bit misleading I admit. But the fix is not to use new.
var canvas: HTMLElement = document.getElementById("SVGCanvas");
var x = Raphael(canvas, 800, 800);
When in doubt about how to use a TypeScript definition always look at the tests: https://github.com/borisyankov/DefinitelyTyped/blob/master/raphael/raphael-tests.ts#L3 because they are garanteed to compile fine (that is what they test).
Update:
Verified that the TS definition is consistent with JS lib : http://raphaeljs.com/ . Don't use new
Update2:
For :
but I get a runtime error - 'Raphael' is undefined
Make sure raphael.js is included (e.g. using a script tag) before your compiled TypeScript (the generated JavaScript).
Related
I'm trying to implement biometric authentication on iOS from a C++ codebase. Here is one example.
In order to achieve this, I need to use the LAContext obj-c APIs. However, when I try to initialize the class from C++ I get a pointer/reference error:
// Cannot initialize a variable of type 'LAContext *__strong' with an rvalue of type 'LAContext'
LAContext* authContext = LAContext();
Is there any way to achieve this? Or is this struct available from Obj-c only?
Edit 1:
My file is in Obj-C++, so in theory I should be able to mix C++ and Obj-C code, however when I try to write a Obj-C function to alloc the LAContext object I get a missing symbols error:
-(bool)biometricsAvailable {
LAContext *myContext = [[LAContext alloc] init];
NSError *authError = nil;
return true;
}
On the compilation step this error is thrown:
Undefined symbol: _OBJC_CLASS_$_LAContext
XCode itself does not show any error while editing the file, only happens when I try to build/compile the app.
As it turns out, the problem was not with mixing C++ and Obj-C code, but rather with my library being linked via cocoapods and the LocalAuthentication framework being missing.
I needed to add:
s.frameworks = "LocalAuthentication"
to the podspec and creating a LAContext instance works just fine.
What does the extension function SemanticModel.TryGetSpeculativeSemanticModel return? What is it good for?
I could not find any meaningful documentation on the subject.
The documentation for TryGetSpeculativeSemanticModel says:
Get a SemanticModel object that is associated with X that did not appear in this source code. This can be used to get detailed semantic information about sub-parts of X that did not appear in source code.
The analyzer code for the StyleCop SX1101 diagnostic offers a great example of this API's usage. SX1101 tells you that it's safe to remove a this. qualifier from your code.
Lets step through a slightly simplified version of the analyzer code:
var memberAccessExpression = (MemberAccessExpressionSyntax)ctx.Node.Parent;
var originalSymbolInfo = context.SemanticModel.GetSymbolInfo(
memberAccessExpression,
context.CancellationToken);
var statement = context.Node.FirstAncestorOrSelf<StatementSyntax>();
var annotation = new SyntaxAnnotation();
var speculationRoot = statement.ReplaceNode(
memberAccessExpression,
memberAccessExpression.Name.WithAdditionalAnnotations(annotation));
context.Node is a ThisExpressionSyntax. speculationRoot is an expression where we replaced this.SomeMember with SomeMember. The annotation is used for quick lookup later.
Now that we have generated a modified version of the code, we want to check if it would a) still compile, and b) still refer to the same thing. Since the sources in Roslyn are immutable, we'd need to compile the entire project again (which would be doable, but more expensive) to get a new SemanticModel for the changed code.
Here is where TryGetSpeculativeSemanticModel steps in:
if(!context.SemanticModel.TryGetSpeculativeSemanticModel(
statement.SpanStart,
speculationRoot,
out var speculativeModel)) return;
var mappedNode = speculationRoot.GetAnnotatedNodes(annotation).Single();
var newSymbolInfo = speculativeModel.GetSymbolInfo(mappedNode, context.CancellationToken);
So now if we manage to get a speculative semantic model, it means SomeMember was valid at that same position in code as this.SomeMember. We've used the annotation to quickly look up the SomeMember syntax node and then get it's semantic info from the speculativeModel.
All that's left to do now is to check whether the modified statement means the same thing as the original one.
if (!Equals(originalSymbolInfo.Symbol, newSymbolInfo.Symbol)) return;
context.ReportDiagnostic(Diagnostic.Create(Descriptor, context.Node.GetLocation()));
Is there a way to have clearer error messages when something is wrong with ember?
For exemple, I have this error 05:10:32,332 Error: Assertion Failed: A helper named 'eq' could not be found1 vendor.self-4fd4ab06f1f66c1cec72e1ec3a2c99328df792e46fb1fdcd0258c341b30a7c3b.js:24472:0
. This error is not the subject of the question, this is just an example.
I have no idea where is eq. The console indicated this function :
function EmberError() {
var tmp = Error.apply(this, arguments);
// Adds a `stack` property to the given error object that will yield the
// stack trace at the time captureStackTrace was called.
// When collecting the stack trace all frames above the topmost call
// to this function, including that call, will be left out of the
// stack trace.
// This is useful because we can hide Ember implementation details
// that are not very helpful for the user.
if (Error.captureStackTrace) {
Error.captureStackTrace(this, _emberMetalCore.default.Error);
}
// Unfortunately errors are not enumerable in Chrome (at least), so `for prop in tmp` doesn't work.
for (var idx = 0; idx < errorProps.length; idx++) {
this[errorProps[idx]] = tmp[errorProps[idx]];
}
}
This is not related to my problem.
Obviouly, I searched eq in my code and I have no results. I suppose this is in a module but using grep is very ineffective.
Sometimes there is a stacktrace but its not very efficient too. To find an addon or the source in my code in a big vendor.js or myapp.js is not ideal.
Is there a better solution?
I think something in one of your addons or other third party code is using the ember-truth-helpers addon.
vendor.js typically contains third party code you've imported, not code that you've wrote.
As to the basic issue, it is really up to the maker of the third party code you've imported to document its dependencies and to ensure they are installed when you install that dependency. This really is not a failing of Ember itself, it has told you that there is no helper named eq and has given you the line number in the precompiled template where the eq was used. You can use the sources tab in Chrome to scroll to line 24472 in vendor.self-4fd4ab06f1f66c1cec72e1ec3a2c99328df792e46fb1fdcd0258c341b30a7c3b.js
#haehn Hi Haehn (XTK)
I'm using edge-XTK with GWT and trying to render a simple STL. However XTK code fails at the line where we assign color to the mesh.
mesh.color = [0.7,0,0] // this line fails
Error message emitted by XTK code: "Invalid color"
This behavior is observed only when using XTK with GWT.
The error seems to be coming from this XTK code snippet
X.displayable.prototype.__defineSetter__('color', function(color) {
// we accept only numbers as arguments
if (!goog.isDefAndNotNull(color) || !(color instanceof Array) ||
(color.length != 3)) {
throw new Error('Invalid color.');
}
I'm guessing that the issue is with the way GWT builds page with iframes... because of which the above if condition could be failing in GWT. I think if you replace the above check with following snippet (got idea from: here).
It might fix the problem.
use goog.isArray(color) instead of (color instanceof Array)
Can you please investigate and comment?
Edit:
Hi XTK
Here is the code snippet which shows how I'm using XTK with GWT.
public class TestGwtXtk implements EntryPoint {
public void onModuleLoad() {
testXtk();
}
// GWT JSNI method, which allows mixing Java and JS natively.
// it is akin using c++ or c libraries in java or android
private native void testXtk() /*-{
var r = new $wnd.X.renderer3D();
r.container = 'xtk_container'; // div ele
r.config.PROGRESSBAR_ENABLED = false;
r.init();
cube = new $wnd.X.cube();
cube.lengthX = cube.lengthY = cube.lengthZ = 20;
cube.color = [ 1, 1, 1 ]; // fails here in XTK code
cube.center = [ 0, 0, 0 ]; // fails here in XTK code
r.add(cube);
r.render();
}-*/;
}
As noted by the inline comments, use of javascript array fails. Failure is not because js array usage, such as [0,0,0] or new Array(0,0,0) is wrong. Failure is because the way XTK code checks for "instance of Array".
Edit: 2
Dear XTK
I was able to checkout XTK code from git, make changes that I'm proposing, re-build XTK.js and finally test successfully that my fix solves the problem.
for example: in displayable.js I commented one line and added another line thus:
// if (!goog.isDefAndNotNull(color) || !(color instanceof Array) || (color.length != 3)) {
if (!goog.isDefAndNotNull(color) || !(goog.isArray(color)) || (color.length != 3)) {
I made similar changes in couple of other places in the xtk codebase to get my usecase going. Explanation of why this is the right solution is here: Closure: The Definitive Guide. Would you please consider making this fix in the codebase for release 8? Thank you
Using XTK with GWT ? What do you mean ? Did you write your own wrappers to compile code with xtk calls from Java to JavaScript ? Or do you directly use xtk.js in the war file and write manualy some JavaScript using it ? Or do you only use GAE (Google App Engine), the Google environnement for web applications (the ones made with GWT, but also not compiled from Java ones). Could you be more accurate please ?
Here they deal with some issues with GWT and type test, did you try to create your array with the "new" operator ?
var mycolor = new Array(0.7,0,0);
mesh.color = mycolor;
What is the correct way to use hogan.js with express.js?
I've tried the following:
var hogan = require('hogan.js')
...
app.set('view engine', 'hogan');
followed by
app.register('.hogan', hogan);
But I end up with the following error:
500 Error: Cannot find module 'hogan'
TJ put out a library called consolidate.js ( https://github.com/visionmedia/consolidate.js ) but I'm having trouble getting it to work with Express 2.5.8. After spending the day trying to figure this out I also came across a library called hulk-hogan.js ( https://github.com/quangv/hulk-hogan ) and another called hogan-express ( http://allampersandall.blogspot.com/2011/12/hoganjs-expressjs-nodejs.html ). But, do I really need all that?
If the solution can not be as simple as setting the templating engine with app.set() and app.register(), it would be great if someone could help me understand why. I'm using Hogan on the client and it's working great, it would just be so much better if I could also use it on the server.
UPDATE: Turns out there are two issues here.
While this is not causing the 500 error, Express does not work with Hogan out of the box (see: Linus G Thiel's answer below)
What seems to be causing the 500 error is that I'm using a virtual host and when I call res.render(), my res.render() call is actually calling the res.render() of a different virtual host on my same server.
Adding the full Express error dump. It looks like my app ('dataviz') is trying to use the render call from a different app ('datavizblocks')? Again, the two apps are virtual hosts on the same server.
dataviz 8000
Error: Cannot find module 'hogan.js'
at Function._resolveFilename (module.js:332:11)
at Function._load (module.js:279:25)
at Module.require (module.js:354:17)
at require (module.js:370:17)
at View.templateEngine (/localhost/datavizblocks/node_modules/express/lib/view/view.js:134:38)
at Function.compile (/localhost/datavizblocks/node_modules/express/lib/view.js:68:17)
at ServerResponse._render (/localhost/datavizblocks/node_modules/express/lib/view.js:417:18)
at ServerResponse.render (/localhost/datavizblocks/node_modules/express/lib/view.js:318:17)
at /localhost/dataviz/routes/section.js:325:7
at callbacks (/localhost/dataviz/node_modules/express/lib/router/index.js:272:11)
dataviz 8000
Error: Cannot find module 'hogan.js'
at Function._resolveFilename (module.js:332:11)
at Function._load (module.js:279:25)
at Module.require (module.js:354:17)
at require (module.js:370:17)
at View.templateEngine (/localhost/datavizblocks/node_modules/express/lib/view/view.js:134:38)
at Function.compile (/localhost/datavizblocks/node_modules/express/lib/view.js:68:17)
at ServerResponse._render (/localhost/datavizblocks/node_modules/express/lib/view.js:417:18)
at ServerResponse.render (/localhost/datavizblocks/node_modules/express/lib/view.js:318:17)
at /localhost/dataviz/routes/section.js:325:7
at callbacks (/localhost/dataviz/node_modules/express/lib/router/index.js:272:11)
The 500 error goes away when I comment out the datavizblock vhost, or when I switch the order of the vhost declarations around to have the dataviz vhost declared after datavizblocks vhost (of course, this then causes problems for the datavizblocks vhost)
Apologies ahead of time for the confusing question, but I was really confused when I came across this issue and never expected that switching to Hogan would have conflicts with virtual hosting.
The issue is that Express requires an interface from template engines, where the template engine is expected to have a compile method, and that compile method is expected to return a function which can be called with the template data.
Hogan has a compile method, but it returns a template object which has a render method. You need to expose that render method to Express, and this seems to be what the hogan-express module does. It shouldn't have to be that involved though, I think this will work (I have only tested it slightly, might be some gotchas?):
var express = require('express'),
hogan = require('hogan.js'),
app = express.createServer();
app.set('view engine', 'hogan');
app.register('hogan', {
compile: function() {
var t = hogan.compile.apply(hogan, arguments);
return function() {
return t.render.apply(t, arguments);
}
}
});
Basically, we are just creating our own object that has a compile method that maps to Hogan's render method.
This expects your templates to be named e.g. index.hogan.
As Linus said, you need an adapter to use Hogan with Express. consolidate works fine as long as you don't need support for partials or layouts (they are working on it but I don't know when it will be ready).
I was in the same spot you're in a few months ago and found hulk-hogan's and express-hogan's documentations to be quite confusing so I coded my own wrapper that has support for partials, layouts, template caching and can be plugged in Express in one line of code. You can check it out here: h4e - templating with hogan for express