I'm trying to figure out the example of geocoding and I have the following code in my event handler for a click on a button.
locate() {
const coder = google.maps.Geocoder();
coder.geocode(
{ address: "stockholm" },
(result, status) => { ... });
}
It works as supposed to but the name google gets highlighted by VS Code with the warning that the name can't be found. I'm not sure where the object comes from and I don't know how to declare it so that it isn't flagged as unknown/undeclared.
When I run the google thingy in the console of Chrome, it actually does work producing some kind of object with maps in it. However, the same operation in the console of FireFox doesn't produce anything useful.
What's that googly-mappy object and how do I learn Angular that it's there?
You tell angular that a foreign JavaScript global object or lib is there by declaring it, as shown in previous answer:
declare const google: any;
You could also teach your typescript all the correct types so that VSCode will even help you:
npm install #types/googlemaps --save
Under your imports you can tell the typescript compiler that there will be a global variable google at run time.
// component.ts
declare const google;
Related
I have a Jest file that I am debugging in Intellij.
import { screen, waitFor } from '#testing-library/react';
import userEvent from '#testing-library/user-event';
describe('<SamplePage />', () => {
afterEach(() => {
jest.clearAllMocks();
});
it('Correct text in SampleForm', () => {
renderPage();
expect(screen.getByRole('heading')).toHaveTextContent(
"Text to check",
);
});
});
Then I normally put a breakpoint at the expect() line so that the view has been rendered by then. Once at the breakpoint, I open the Debugger Console and I start playing with the test api by testing various statements. However I immediately get an error in the Debugger console when trying to call the screen.debug():
Although the autocomplete is working in the debugger for the screen:
The workaround that I have been using is to assign the imported object screen into a variable x for example. Then when I get to the breakpoint I can play with the x variable as the screen and call various methods like debug or getByRole.
However this is cumbersome since there could be multiple imported objects that I want to explore and assigning each of them to a temporary variable is just not scalable. Does anybody know how to fix this in Intellij?
Undefined variables (screen in your case) while evaluating code during debugging is caused by the weird way imported objects are transpiled + missing name mappings in sourcemaps: if the variable is renamed while transpiling/obfuscating, and no appropriate name mapping is provided, the debugger won't be able to match variable in source code with the one in VM.
There are some known issues when evaluating ES6 imports in modules transpiled by babel/built by webpack. Please see https://github.com/webpack/webpack/issues/3957, https://github.com/babel/babel/issues/1468 for details. There is unfortunately no way to fix the issue on the IDE end.
I have configured codeceptjs and while writing the first test I am getting some errors which I could not figure out, the code is as below.
But the strange thing is it is executing perfectly. but i want to make sure why it is an error there. Am I missing anything in configuration or any other?
Config File:
Thanks in advance.
I'm think you are declined request of creating a custom actor when installation of codeceptjs:
? Where would you like to place custom steps? (./steps_file.js)
steps_file.js looks like this:
'use strict';
// in this file you can append custom step methods to 'I' object
module.exports = function() {
return actor({
// Define custom steps here, use 'this' to access default methods of I.
// It is recommended to place a general 'login' function here.
});
}
You can try create this file or remove "I": "./steps_file.js" from your configuration.
I am trying to load sounds through the SoundJS sound registration, and getting the following error:
createjs.js:15 Uncaught Error: Type not recognized.
I figure that the soundjs library is having issues either locating my files or having trouble with the file extensions, but I am using .ogg, which is inline with all the examples I've seen.
Here is my code:
createjs.Sound.alternateExtensions = ["mp3", "ogg"];
createjs.Sound.on("fileload", function(event) {
console.log(event);
}, this);
for (var i = 0; i < soundManifest.length; i++) {
soundManifest[i].loaded = false;
console.log("loading " + soundManifest[i].src);
createjs.Sound.registerSound(soundManifest[i].src, soundManifest[i].id)
}
soundManifest is an array of objects with a source item giving the path to the .ogg files, and an id. I've double and triple checked the path names, so pretty sure that's not it. Any ideas? I am developing on Chrome.
Thanks for posting a github link. It was helpful. Fortunately, I have a super simple answer for you.
Rename the "Object" class you made in Main.js, and you should be good to go.
-- The long answer --
I tossed a breakpoint the error that is thrown, and it showed that when SoundJS tries to create a LoadItem, it fails. This is because it should be treating the LoadItem it receives as an Object, but the line below is failing:
} else if (value instanceof Object && value.src) {
// This code should be executed
}
At first I thought there was a bug in SoundJS that we had somehow missed in the last 2 years, but closer inspection showed that object prototypes in your application are messed up. If you open any browser window, and hit the console, this will return true:
({}) instanceof Object
// true
However while running your app, it returns false.
The issue became clear when I removed all your other classes other than CreateJS and main, and then tried this:
new Object();
// Throws an error that includes info about "Victor"
In main.js, you are defining an "Object" class, which extends a CreateJS Shape. It is global because there is no method closure around the code, so it overwrites the global Object class/prototype.
The reason I included this explanation, is because I couldn't figure out what was going on until I had my steps to show that prototypes were broken in the app mostly written out before the reason dawned on me. I thought it might be of some interest :)
When I try to use the autosuggestion in Webstorm(V 10.0.4/ Linux machine)
with the Revealing-Module-Pattern and the definition of the module is in one File like this:
var testModule = testModule || (function(){
function myPrivateTestFunction(){
console.log("test");
}
return{
test: myPrivateTestFunction
}
})();
in another File I try to call the the function by:
testModule.test();
it correctly finds the module-object, defined in the other file but doesn't find the function.
If I look at the settings: File->Settings->Javascript
There is an option called "Weaker type guess for completion".
If I enable this, it indeed shows my desired function testModule.test().
But it also shows all private members of the module and of all other modules, defined somewhere, so this doesn't make sense to me.
Logged as WEB-18186, please vote for it to be notified on updates
The feature was implemented by the Webstorm Team.
I tested it (in the Early Access Program Version 142.5255).
It works perfectly!
Thanks to the Webstorm-Team who implemented the feature that fast and to lena who created the ticket!
I have a logging API I want to expose to some internal JS code. I want to be able to use this API to log, but only when I am making a debug build. Right now, I have it partially working. It only logs on debug builds, but the calls to this API are still in the code when there is a regular build. I would like the closure-compiler to remove this essentially dead code when I compiler with goog.DEBUG = false.
Log definition:
goog.provide('com.foo.android.Log');
com.foo.Log.e = function(message){
goog.DEBUG && AndroidLog.e(message);
}
goog.export(com.foo.Log, "e", com.foo.Log.e);
AndroidLog is a Java object provided to the webview this will run in, and properly externed like this:
var AndroidLog = {};
/**
* Log out to the error console
*
* #param {string} message The message to log
*/
AndroidLog.e = function(message) {};
Then, in my code, I can use:
com.foo.Log.e("Hello!"); // I want these stripped in production builds
My question is this: How can I provide this API, use this API all over my code, but then have any calls to this API removed when not compiled with goog.DEBUG = true? Right now, my code base is getting bloated with a bunch of calls to the Log API that are never called. I want the removed.
Thanks!
The Closure Compiler provides four options in CompilerOptions.java to strip code: 1) stripTypes, 2) stripNameSuffixes, 3) stripNamePrefixes and 4) stripTypePrefixes. The Closure build tool plovr, exposes stripNameSuffixes and stripTypePrefixes through its JSON configuration file options name-suffixes-to-strip and type-prefixes-to-strip.
There are excellent examples of how these options work in Closure: The Definitive Guide on pages 442 to 444. The following lines are provided as common use cases:
options.stripTypePrefixes = ImmutableSet.of(“goog.debug”, “goog.asserts”);
options.stripNameSuffixes = ImmutableSet.of(“logger”, “logger_”);
To understand the nuances of these options and avoid potential pitfalls, I highly recommend reading the complete examples in Closure: The Definitive Guide.
Instead of running your own script as jfriend00 suggested I would look at the define api of the compiler (which is where goog.DEBUG comes from as well), you have DEBUG, COMPILED by default, but there you can roll your own.
OK, it turns out this is easy to do if I stop exporting com.foo.Log() and its methods. If I really want to be able to log in some specific cases, but still strip out the log calls in my internal code, I can just declare two classes for this:
// This will get inlined and stripped, since its not exported.
goog.provide('com.foo.android.Log');
com.foo.Log.e = function(message){
goog.DEBUG && AndroidLog.e(message);
}
// Don't export.
// This be available to use after closure compiler runs, since it's exported.
goog.provide('com.foo.android.production.Log');
goog.exportSymbol("ProductionLog", com.foo.android.production.Log);
com.foo.android.production.Log.log = function(message){
goog.DEBUG && AndroidLog.e(message);
}
// Export.
goog.exportProperty(com.foo.android.production.Log, "log", com.foo.android.production.Log.log);
I have modified a compiler and packaged it as an npm package.
You can get it here: https://github.com/thanpolas/superstartup-closure-compiler#readme
It will strip all logging messages during compilation