How to implement interface defined in TypeScript? - visual-studio-code

I am using javascript to implement vs code plugin but have a few problems on using TreeDataProvider interface. My plugin only show the root node in the tree view but it doesn't show any children. I read the vscode tree-view-sample example and found that it uses typescript to create a class implementing TreeDataProvider interface. I wonder how I can do that in javascript. Will there be problems if I don't implement it?

TypeScript is pretty much just JavaScript + types. Just remove all the type annotations from the example code to convert it to JS.
VS Code extensions are run in a node environment so if your code is using import/export, you will also have to rewrite those to something that node can understand or use tsc or babel to down compile the js code

Related

Flutter Web Get Chrome Extension info from Polkadot.js web3Enable

I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);

Simple API call within the context of DocFx preprocessor

I would like to know if it is possible to make a simple API call (e.g. GitHub API v3) within the context of a DocFx custom template preprocessor. I have been trying all sorts of different approaches, but nothing has fully worked so far.
My goal is to make a call to an API to retrieve some data, and then update the model accordingly to be used in the *.liquid or *.tmpl renderers.
I have tried using the http/https node modules. I have also tried using node-fetch. It results in a docfx build error something like:
Error:Error transforming model ".../index.raw.json" generated from
".../index.md" using "conceptual.html.primary.js". Error running
Transform function inside template preprocessor
According to DocFx documentation, preprocessors follow the ES 5.1 standard. My code conforms to this.
Does anyone know if this is possible?
By the way, I am able to do simple model manipulation just fine, so I understand the basic concepts here with the DocFx preprocessors.
Thanks!
For the benefit of others, I discovered DocFX uses jint which cannot require a Node library directly. Therefore, it appears the plugin route is a better way to go for this use case.

Exporting a class and its methods in GWT for use in native JavaScript

I'm developing a GWT project at the moment and it's been up and running for a while. New functionality that is to be added require extensive testing, visualizing and simulating of a specific algorithm. I would like to export that specific algorithm so that I may call it directly from JavaScript and do some canvas magic.
How can I export a number of classes for direct use in JavaScript from a GWT project?
I've tried using the GWT exporter, following the Getting Started section closely.
I've noticed that my output directory contains a new generator class (TestClassExporterImpl.java) but the final JavaScript output contains no trace of my TestClass or the exported methods.
I'm sure I've made a mistake somewhere on the way or didn't understand the GWT exporter correctly.
Try to disable obfuscation, it will create the same names in Javascript as in the original Java code

How GWT code runs in development code

In GWT web/production mode, Java code is complied into Javascript code that is rendered in the browser.
Also,I have always thought that in GWT development mode, GWT developer plugin compiles my Java code into JavaScript to render it in the browser. But after reading on some site, I came to know that there's no compiling of code to JavaScript to view it in the browser in development mode.
So, I wonder: What are all these widgets I see in the browser during this mode if they aren't JavaScript code?. I don't understand it.
Please help understanding this.
The crux of the Dev Mode is that your code runs in Java. This is a prerequisite if you can use a standard Java debugger. You'll find a high-level overview in the GWT documentation.
The magic happens with JSNI methods and overlay types: when a class is loaded, all its JSNI methods are extracted and their JS body is sent to the browser, ready to be executed (as JavaScript then), and the class is rewritten on the fly to reimplement the JSNI method to make a call to the browser (via the Dev Plugin you installed there and is triggered by ?gwt.codesvr= in the URL) to execute the corresponding JS function. This is the reason why Java objects are seen as opaque handles in JSNI methods; they're assigned a numeric ID to pair the Java object with a dummy JS object on the server-side. A similar though more complex rewriting is done for overlay types, and the same ID mapping is used when JS objects are passed to Java code (as overlay types).
BTW, Super Dev Mode compiles to JavaScript (almost) on the fly.

How could I include a plugin system for my Dart app?

I have a Qt application containing a Webkit module and using Dart (compiled to JS). It's like a bare-bones browser written in Qt. The application basically replaces certain text on the webpage with different text. I want users to be able to make their own Dart files to replace their own text with their own different text.
Any recommendations for approaches to creating a plugin system?
I think that this question needs a little clarification: are you asking about using Dart for scripting Qt applications (where Dart plays the role of a scripting language), or are you asking about a plugin system for Dart application that is compiled to JS and used in a Qt application, probably via QtScript (in which case, the role of a scripting language is played by JavaScript)?
I presume that it is the latter variant (and I don't know enough about Qt to be able to answer about the former variant anyway).
Let's assume that all plugins for the Dart application are available at the build time of that Qt application, so that you don't need to compile Dart to JS dynamically. Then, if you compile a Dart script, resulting JS will include all necessary code from its #imports. All you need is to create a proper script that imports all plugins and calls them (importing isn't enough, as dead code will be eliminated).
Maybe an example will be more instructive. Let's say that you want to allow plugins to do some work on a web page. One way you might structure it is that every plugin will be a separate #library with a top-level function of a well known name (say doWork). Example of a plugin:
// my_awesome_plugin.dart
#library('My Awesome Plugin')
doWork(page) {
page.replaceAll('JavaScript is great', 'Dart is great');
}
You can have as many plugins of this nature as you wish. Then, you would (at the build time) generate a following simple main script in Dart:
// main.dart
// these lines are automatically generated -- for each plugin file,
// one #import with unique prefix
#import('my_awesome_plugin.dart', prefix: 'plugin1');
#import('another_plugin.dart', prefix: 'plugin2');
main() {
var page = ...; // provided externally, from your Qt app
// and these lines are automatically generated too -- for each plugin,
// call the doWork function (via the prefix)
plugin1.doWork(page);
plugin2.doWork(page);
}
Then, if you compile main.dart to JavaScript, it will include all those plugins.
There are other possibilities to structure the plugin system: each plugin could be a class implementing a specific interface (or inheriting from a specific base class), but the general approach would be the same. At least the approach that I would recommend -- making each plugin a separate library.
You probably don't like the step with generating the main script automatically, and I don't like it either. But currently, Dart only allows one way to dynamically load new code: spawning new isolates. I'm not sure how (or even if) that would work in QtScript, because isolates are implemented as web workers when compiled to JavaScript, so I won't discuss this here.
Things will get more complicated if you want to support compiling Dart scripts at the runtime of your Qt application, but I think that I'm already guessing too much about your project and I might be writing about something you don't really need. So I'll finish it like this for now.