Flutter Web Get Chrome Extension info from Polkadot.js web3Enable - flutter

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']);

Related

Can you build an Excel task pane add-in with Svelte?

I'm thinking about developing an Excel add-in as described here.
Would that be possible with Svelte - and do you know of any guides/help if yes?
I have looked through the video here, and I'm about worried about the usage of webpack.
Well... let's break it down
Is it possible?
Short answer: yes
Long answer: the documentation clearly states that Excel add-in still uses jQuery for logic manipulations. If your question was about Angular or react it would probably be a hard NO since those frameworks use an engine that should be included as part of solution. This kind of dependencies when dealing with plugins development are pretty hard to implement and maintain as a function of time so it's better to use very lightweight, non-core dependencies instead. Since you are asking about svelte - it is "compiled" into a bundle that contains pure code (based on your app logic). So - as long as your app rely on the load event sequence described in the docs - you are good to go.
Do you really need Webpack?
Short answer: no
Long answer: svelte can be deployed using rollup instead - which is more suitable for micro-applications (such as yours). So, if you feel that webpack (somehow) is blocking your work pipeline - just use svelete default configuration with rollup and you are ready to go
Your workflow
Create a very simple svelte app (my suggestion - try to take the example in the docs and implement it using svelte)
Test it locally (just verify it works)
Build it (you should ended up with 3 files - 1 html file in public directory and 2 other files in public/build directory - 1 js file and 1 css file (both called bundle)
Here's the tricky part - the html file does nothing - just loading the css and js files. In your case - you don't really need it
Change the bundle.css file to Home.css file
Change the bundle.js file to Home.js file and put your app inside the add-in main function
'use strict';
(function () {
Office.onReady(function() {
// Office is ready
YOUR SVELTE APP CODE SHOULD BE PLACED HERE
});
})();
Pack your add-in and test it
Technical notes
If Excel blocks the creation of new elements (using dynamic injection) - this approach will NOT work (since your entire app is generated by your js file)
Please refer to this article for more information about packing your app
Try to make your app as lightweight and small-size as possible just to avoid the risk of exceeding the limits allowed for add-ins

Is it OK for me to develop against UWP with JavaScript on Visual Studio 2017?

My company is using RPG Maker MV (based on JavaScript) and looking to port over to Xbox UWP. It's no longer supported in the latest version of Visual Studio.
Is there a workaround or should I abandon this and convert over to C#?
Sadly this has indeed been deprecated, but as a workaround you can use a WebView to host the game which is what I do with mine. You'll still have to deal with a few extra things if you want to use the Xbox storage functions (see here for my commentary on this) and you still need to implement sign-in (which I'm still working on) but once you add the WebView to your MainPage.xaml name it something like ContentViewport and (immediately following your login and file processing logic) add the following line of code:
ContentViewport.Source = new Uri("ms-appx-web:///index.html");
Or wherever your index.html is, so if you prefer assets over package root with the www folder copied in as a base, you can use the following:
ContentViewport.Source = new Uri("ms-appx-web:///assets/www/index.html");

Using MEAN.IO how will my package's assets get aggregated?

I'm not an experienced Javascript application developer, however, I've recently been learning some MEAN using http://mean.io/#!/ as my scaffolding.
I can see that the out of the box assets are listed in:
/server/config/assets.json
and when the app is running the referenced assets get combined into client side files:
/modules/aggregated.css
/modules/aggregated.js
When I create a package using MEAN.IO's CLI:
mean package myPackage;
and start including css or scripts in this package, presumably it is bad practice to then put the packages assets into the application's assets.json as these packages are supposed to be reusable modules that could be added to someone else's MEAN application.
What's the right place to reference the new package's assets so that they are added into the aggregration process?
you want to add css or js files into your packages.
If so, it's easy. As the doc says in "Assets and Aggregation" http://learn.mean.io/#mean-packages-assets-and-aggregation
you should use
//Adding another library - global by default is false
MyPackage.aggregateAsset('js','jquery.min.js', {global:true});
//Adding some css to the mean project
MyPackage.aggregateAsset('css','default.css');

can there be two js files in main dir of mozilla addon? and can they both communicate with each other?

I have created two separate add ons. One for getting input from the user and storing in simple-storage. In the other one the actual add on function. Both work fine. But when i merge these both main add on code in to a single main code they didn't work. So i wonder whether there can be two js files in "main" add on directory and is communication possible between them?I need one of the js in main directory to be able to access the simple-storage of the other js in the same main directory.
I'm really not sure what your overall goal is, please provide an example for a more specific answer. If you're using the Add-on SDK, only code in main.js will be run, but you can use commonJS modules to implement various features and use require to import them into main.js.
Please see the docs for more information on how the Add-on SDK works:
https://developer.mozilla.org/en-US/Add-ons/SDK

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.