flow error for Highcharts - highcharts

I've added module highcharts in Flow project as it is written over here. Basically the problem is that whenever I use library Highcharts , I have to put into the code import Highcharts from "highcharts"; The results outcome with no errors in FlowJs interface, but with error in browser Unexpected token import( so it doesn't compile js file properly) . Does anyone know the answer for that? I would be appreciated!

Flow in general uses nonstandard syntax for type annotations, etc. In your case, the import is standard ES6 syntax, but it's not yet supported in whatever browser you are using.
Either way, the solution is to use Babel to transpile your code. You can configure it to target older versions of JavaScript and to strip Flow types. There's a bit more info about using it with Flow on the Running Flow code page.

Related

Issue with npm and Highcharts

I am trying to install high-charts through npm and use it on the server side to output the data to a jade template. I am using basic express framework.
The first section in the link below is the guide that I am following.
http://www.highcharts.com/docs/getting-started/install-from-npm
However I am getting an error when I use this line of code
require('highcharts/modules/exporting')(Highcharts);
I have tried this across multiple computers and it's the same error across all.
Code used:
I have no idea why its failing. Any help would be great.
The problem is that you are trying to use Highcharts on the server side, but that library requires DOM nodes from the client's HTML document to work (like the document object from the error you show and also the container where the chart will be drawn).
You can emulate the client side using PhantomJS. This way you can render your charts on the server.
You can try following this guide from Highcharts documentation website.
However, it's definitely easier to load and use the library on the client side and use the server only to send the chart data to the client.

Using javascript library in Dart

I try to use JavaScript library visjs.org in Dart. I prepared ‘adapter’ code according examples on Dart site pub.dartlang.org/packages/js and github.com/google/chartjs.dart/blob/master/lib/chartjs.dart.
Also according basic use case example from http://visjs.org I prepare client dart code.
While code compiles without any errors and warnings nothing happens in browser, expected to see graph-tree.
What I did wrong or miss to do?
https://gist.github.com/EdSv/e274a4d12ad3491c383fb4fe76ee671e
The attribute #anonymous is meant to be used when the object you're describing doesn't actually exist in the JS library you're binding, and is only used as a plain old data object. By adding it to all of your objects, my guess is that dart is never attempting to create anything from the visjs library.
Try removing the #anonymous from your Network class and see if that has an effect. You will likely also need to make these abstract classes as well.

WebSharper 3.4 with working HelloWorld example?

The current HelloWorld example on websharper.com doesn't work anymore due to changes made in WebSharper 3.4. It now requires some attributes and other stuff to compile correctly.
I am just getting started with WebSharper and I would like to see a minimum (html+javascript client-side hello world) example that works. Any help would be appreciated!
The samples on the website use Html.Client (the HTML language soon to be retired in favor of UI.Next), so to run them you need to start from a template that isn't based on UI.Next.
Following the instructions here, I was able to run them without any issues, extra attributes, etc.

Cordova white screen of death iOS - browserify, react, cordova

I have a strange situation with a project for iOS.
Its created using browserify and React for Cordova and aimed at iOS.
We have built the project for iOS using Cordova commands without any issues. It runs with no xcode errors or Javascript errors either however none of the JS ui appears on screen. We just get a blank white screen with the system bar at the top. See attached screen shot.
So far we have found out that if you add HTML to the index.html in WWW folder it prints that fine so I assume its the JS.
When we run in a browser it works as well as building for Android.
We have no problems with anything other than iOS (simulator and device build).
hopefully someone can help me out here because I'm stumped. Please let me know what files you need to look at and I'll make them available.
Thanks in advance.
IMAGES
The error screen: http://www.voidapplications.co.uk/errorScreen.png
What we expect to be shown: http://www.voidapplications.co.uk/whatWeExpect.png
If you are using internationalization component that's because you need to use the Intl polyfill:
Intl.js and FT Polyfill Service
Intl.js polyfill was recently added to the Polyfill service, which is developed and maintained by a community of contributors led by a team at the Financial Times. It is available thru cdn.polyfill.io domain, which routes traffic through Fastly, which makes it available with global high availability and superb performance no matter where your users are.
To use the Intl polyfill thru the Polyfill service just add one script tag in your page before you load or parse your own JavaScript:
<script src="https://cdn.polyfill.io/v1/polyfill.min.jsfeatures=Intl.~locale.en"></script>
When specifying the features to use thru the polyfill service, you have to specify what locale, or locales to load along with the Intl polyfill for the page to function, in the example above we are specifying Intl.~locale.en, which means only en, but you could do something like this:
<script src="https://cdn.polyfill.io/v1/polyfill.min.js?features=Intl.~locale.fr,Intl.~locale.pt"></script>
note: the example above will load the polyfill with two locale data set, fr and pt.
This is by far the best option to use the Intl polyfill since it will only load the polyfill code and the corresponding locale data when it is really needed (e.g.: safari will get the code and patch the runtime while chrome will get an empty script tag).
source & other ways to include Intl polyfill: https://github.com/andyearnshaw/Intl.js#getting-started
You can debug the UIWebView in the simulator with Safari http://moduscreate.com/enable-remote-web-inspector-in-ios-6/. You'll probably see a big error message in the console, if not you will have access to the debugger so you can step through and sort it out.
I have had this issue in the past, it turned out to be unsupported javascript features. for example, setting default parameters in the function. I.e:
function test( myvalue=0 ) { /* ... */ };
I had to initialise the value inside the function instead. You could also try removing any ecma script 2016 features you may have implemented.
Trouble shooting this type of issue was painful. I created a minimal version of the smallest part of my product compiled and ran it on ios emulator, added another chunk of the product, rinse and repeat.
Im sure there's a better way to detect these issues, but I do not know it.

Firefox extension: Embed javascript in a webpage

I want to insert some script into every page, which have some functions that will be called by the modified HTML of that page, using a Firefox extension. I am able to insert the JavaScript into the head of the HTML, and also modify the page, but the java script functions are not called by the onmouseover event.
Does someone has any pointer on how to do that, using java script in local extension or as a online resource.
No GreaseMonkey, I need to do it with my plugin and not ask user to install greasemonkey, my plugin and the scripts.
Greasemonkey does this. It's excellent!
Make a Greasemonkey script. See Userscripts.org for lots of example ones to work off.
Why not use Greasemonkey? It allows you to execute javascript on any page on Firefox, and if executing the code you enter isn't good enough you could dynamically add links to the head, too.
you can modify the DOM using Firebug. I am not sure if you can load files locally.. sounds malicious. Also, you can just run arbitrary javascript commands in the Firebug console (a la python/ruby console)
There are some Greasemonkey-to-extension "compilers" (or extension-wrappers) out there:
Arantius's GM compiler
Gina Trapani's multiple-GM-script compiler
I've used the first one with extensive internal tweaking over time. However, I don't believe the compiler is actively maintained (default max-version is only 3.0), so may not be up-to-date with the latest GreaseMonkey, or FireFox.
I think Gina Trapani's is more designed for multiple scripts targetting the same domain, but I haven't used it.
Neither of these is a "GreaseMonkey solution" per se, as the end-user never has to install GreaseMonkey. They get a real-live FireFox extension. The core is very similar to GM, but you can change or add as much as you like.

Resources