I recently wrote something in typescript. I used the Set data structure like this
var myset = new Set<string>();
I didn't need to include any extra libraries in Typescript and it just works. However, I found out that this only works in IE, as chrome cannot resolve Set data type. Also, when I publish I didn't see anything like lib.d.ts being included in the folder.
How does this work. I am running into some trouble researching as the word "set" has too many meanings and I can't get any useful search result.
Adding to the other answer, Set is part of the ECMAScript 6 collections API that is not enabled by default in Chrome. You can enable it by checking the "Enable Experimental JavaScript" box in the Chrome chrome://flags page, though you're probably better off just not using Set yet since very few people will have this enabled. It will be more widespread in browsers in a year or two, most likely.
See also https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set
The lib.d.ts file is a Typescript Definition file, and is only needed by the compiler to provide information about external libraries. The file does not contain any browser executable code, only interface and method information for the compiler, therefore it is not needed by the browser, so you will not see it load in the page, or in the published folder contents.
See this link for information on typescript definitions.
Now as far as your problem with the library, this is most likely a problem with the code itself. What library contains this Set object? Is it a third party library, or is it a library written by you?
Related
Edit: Fixed!
The Google Apps Script team rolled this out for our team earlier this week (week of January 10th).
Original Post
I'm a frequent GAS user, and I've noticed that, since the upgrade to the V8 runtime, formatting in the GAS IDE is awful. I've seen a somewhat similar question here, but my problem is that the GAS IDE is terrible at formatting ES6 Javascript.
Expected Behavior
variables defined with const or let appear similarly to variables defined with var
the omission of a semicolon will not completely break the indention / formatting of a script
destructured variables will be recognized as variables by the IDE
template literals will be recognized by the IDE
Current Behavior
The IDE basically doesn't recognize any of my JavaScript ES6 syntax. Here's an example:
/** Comments about some function.
* #dev Why does this look like garbage!?
*/
function foo() {
...
}
In the above example, it's impossible to get the IDE to properly indent the function. Instead, each line of code is indented to the same extent by default.
Has anyone figured out how to use ES6 syntax, omit semicolons, etc. and gotten the browser-based GAS IDE to format properly?
Thanks!
You might try to use a web browser extension that allow you to set custom CSS styles but the effort required might not be worthy because the new Google Apps Script is being rolled out.
According to the last announcement update the rollout should finish during January 2021
Reference
Use the new Apps Script Integrated Development Environment (IDE) Script Editor
Related
Get ready to up your Apps Script!
Workaround
If there are any missing features or behaviours that you don't like on the Apps Script IDE you can:
Update to the newer version of the IDE with more features described here
Use clasp which allows you to develop and manage Apps Script projects from your terminal rather than the Apps Script editor therefore being able to use the IDE of your choice with the features you like.
If there is a specific missing feature you would like the Apps Script editor to have you can report a feature request
I often run into the problem of an javascript es6 import statement (transpilled via babel) failing to actually find the file the developer intended. This is particularly concerning during refactoring or during auto-fixing/formatting.
Is there a way to automatically flag imports, that are bringing in undefined? edit: at runtime?
It is standard practice to have a developer console of some kind or another (such as Chrome Developer Tools - hit F12, if working on web pages) open during refactoring or development of the Javascript.
So any imports that are not found would generate errors in that console, and thus be visible to the developer.
Missing imports however are not of concern (or should not be) to the User, and far as I know there is no mechanism to flag this to a User (non-developer) of the page. Dood design dictates it is not something they should be concerned with.
So you're probably thinking okay, during development time the we detect during our refactoring via the console that some imports have gone missing, we fix them and publish the latest code/page. Later the imports go missing.
Well that's the thing. If the imports live on external sources and can just randomly go missing, you need to fix That problem. If the imports need to live locally (same location as the javascript being served up) so they are available with 100% accuracy, then do that.
I need access to the bootstrap entry points but also want access to the nice features that the Firefox Add-on SDK provides.
What's the best way to go about this?
After more investigation, the most elegant option seems to be the use of the experimental --templatedir=TEMPLATEDIR option that appears perfectly suited for doing precisely this (using a custom bootstrap.js file). This allows me to hook into those install/uninstall functions (if necessary) and use the rest of the SDK like normal.
Edit: someone asked me to give a clarification on how cfx is to be used with --templatedir.
Copy somewhere the directory called app-extension that contains the bootstrap.js, application.ini, and install.rdf files in it from the downloaded SDK.
Run your cfx xpi command like regular but add --templatedir=path/to/cloned/directory to the options.
You can use the Loader. This is the same thing that the SDK uses and you can actually set it up to be able to load SDK modules. Although IIRC this isn't well documented and there are some subtle details on how you need to do the setup or some SDK modules will not work correctly.
I suggest you read the linked documentation above and then use the SDK bootstrap.js as a base and strip it down as needed (e.g. remove all those fancy test stuff).
Also, to give another example, #erikvold (who works or worked on the SDK team as well) implemented minimal support for internally loading (some) SDK modules in Scriptish.
I just bought WebStorm 5 and so far have been really enjoying its Inspection features. One hitch I've run in to when developing my Chrome extension is that it doesn't recognize the chrome variable:
Is there a way I can add the chrome variable to the Inspector so that it can autocomplete as I type? I'm guessing I would need to add Chromium as an External Library but I'm unsure where to start.
First Time Setup
Open the Settings dialog (File > Settings)
Click Languages & Frameworks > Javascript > Libraries
Click Download
Make sure TypeScript community stubs is selected
Select chrome from the list (you can find it quickly by just typing chrome)
Click Download and Install
Click OK to close the Settings dialog.
Steps 2-6 illustrated below:
In Subsequent Projects
In any subsequent project, you just:
Open the Settings dialog again (File > Settings)
Click Languages & Frameworks > Javascript > Libraries again
Check chrome-DefinitelyTyped
Click OK to close the dialog.
Steps 2-4 shown below:
UPDATE 2:
It's now supported out of the box, see the complete answer below.
UPDATE:
There is a more complete stub file that can be added as a library to get code completion. It's a part of the Closure Compiler project. Download chrome_extensions.js.
See also the feature request for WebStorm to add this library automatically from the IDE.
You need to get the JavaScript library for the Chrome API somewhere, or use a stub to get basic completion.
Library or a stub can be configured in WebStorm.
I found the JSON files with the Extension API. One can write a script that will build JS stubs from these JSON files, the stubs can look like the basic version linked on GitHub above, but with the automatic generation they will contain almost complete API and JSDoc comments so that documentation like here can be viewed directly in the IDE.
JSON => JavaScript object stubs mapping is pretty straightforward in this case and writing this kind of converter should not take more than a day (or several hours for the skilled coder).
If someone goes ahead and implements it, please post the link to the results here.
WebStorm should one day accept json definitions directly to enable autocomplete for the functions defined. Meanwhile, you can use the program at https://github.com/QuickrWorld/jsgen to convert the json files to js to enable auto-complete for the chrome extension APIs.
For writing AppScript, functions and classes such as DriveApp, SpreadsheetApp, there is a plugin in WebStorm or Intellij called google-app-script.
The installation method is the same as above. On the other hand, you should mark or open the .gs file as JavaScript. (July 2017)
Anyone know where is some usable XPJS, or XPCOM in JS, documentation for recent versions of Firefox/Gecko? And sample code/ tutorials would be great too.
I need to write my own Component, but without .IDL (no C++ compiled interface), so I could access it via
Components.classes['#com.mareksebera/compname;1']
.getService().wrappedJSObject;
or this way is not supported anymore? I can't use
Components.classes['#com.mareksebera/compname;1']
.createInstance(Components.interfaces.nsICompName);
Because of missing compiled interface nsICompName
And yes, I know that NSGetModule is deprecated, and I use NSGetFactory and XPCOMUtils.jsm
I know these, but those are not usable with up to date browsers versions
https://developer.mozilla.org/en/Creating_Custom_Firefox_Extensions_with_the_Mozilla_Build_System
https://developer.mozilla.org/en/Using_XPCOM_in_JavaScript_without_leaking
https://developer.mozilla.org/en/how_to_build_an_xpcom_component_in_javascript
The third link you mentioned is pretty good. Another way to get examples though is to actually download the Mozilla source code and look in the /tests subdirectories. There are some examples there of javascript created XPCOM objects.
One example that comes to mind can be found at:
<mozilla-central>\content\xtf\test\unit
But there are a ton of examples throughout the codebase.
If you prefer you can also browse the code online via mxr.