AngularDart Transformation/Deployments - dart

I am building a client/server app in Dart using Angular for the front-end and Shelf on the backend. When I do a pub build it generates the javascript for the Dart files as expected but is does not replace the dart references in my HTML files. So in my index.html I have the following script reference:
<script type="application/dart" src="main.dart"></script>
This makes my application not load correctly. If I manually change it to
<script src="main.dart.js"></script>
My application works as expected. My question is, is there a way to configure my pub build to do this automatically? Or are dart files references not supposed to be replaced with JS references? If so, how do I build a basic server?

I know this produces an error message in the browser console but never experienced any problems because of this.
I haven't used it myself yet but I think this transformer https://pub.dartlang.org/packages/dart_to_js_script_rewriter does what you want.

Related

Intellij says Vaadin flow lumo theme css variables not found

Then working on my new Vaadin 14 based application Intellij cannot find the built in lumo theme variables...
These variables exist at runtime in my browser, but where can I point Intellij to see them?
It looks like it's not possible, at the moment, unfortunately.
The problem is that starting from V14 styles you want to reference are packaged as.js files, but styles are written in .css. For example, if in V13 you could import them in your template like this Sizing and spacing:
<link rel="import" href="bower_components/vaadin-lumo-styles/sizing.html">
This would be the current way in V14 instead, which is a js file:
<script type=“module”>
import “#vaadin/vaadin-lumo-styles/sizing.js”;
</script>
So you can use those custom variables in your styles without problems, as long as you load an appropriate js module on your page (like this #JsModule(value="#vaadin/vaadin-lumo-styles/sizing.js") Lumo), but I haven't found a way (and not sure there is one) to make Intellij aware of them.
So the underlying problem is that you can't import a variable from a js file into a css file.

Where to add ES6-Promise Script Tag In ASP.net MVC?

I'm using the sample here to embed a Power BI report into a web application.
The application compiles properly, but I'm getting an error involving Promises. I've tracked down the solution here. It seems that I need to add the following somewhere in my application:
<script src="https://npmcdn.com/es6-promise#3.2.1"></script>
However, I have absolutely no idea where this script tag should go. Any suggestions? Thank you.
The es6-promise library is a polyfill for Promises, mostly used in IE.
If you need it, you just need to put it anywhere in your <head> tag, preferably before your <script src='.../powerbi.js>.
For more info on es6-promise: https://github.com/stefanpenner/es6-promise

Distribution of polymer components

We have an application written entirely dart/polymer with quite a few polymer components. We use the custom tags in out index.html and compile to dart with pub build. The compile to javascript creates index.html of 24K lines. Original index.html is 150. The application works perfectly.
However we would like to distribute the code to third party sites so that they also can use the components with custom tags. Ideally by just linking to an already compiled script and simple using our custom tags in their pages.
I know this is possible without polymer. Question is does polymer support this? Is it possible to compile a polymer app and keep to a minimum amount of changes in the html file?
To reduce the problem to an example:
We would like our customers to be able to do some thing like this, without the use of dart sdk:
<head>
<script src="what_ever_required.js"></script>
<script src="our_application.js"></script>
</head>
<body>
<our-custom-tag></our-customer-tag>
<p>What ever else content</p>
</body>
Regards
That's currently not supported.
Currently an application that used Dart code needs to be compiled to JS as a whole at once. There is no way to build parts of a Dart application and compose an application from them later.
With the upcoming DDC (Dart Development Compiler) there might be a way to accomplish that. An experimental approach is https://pub.dartlang.org/packages/polymerize

Tutorial: Server Broadcast with SignalR 2

I read this excellent tutorial : http://www.asp.net/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr.
I then downloaded the NuGet example package Microsoft.AspNet.SignalR.Sample 2.2.0 (https://www.nuget.org/packages/microsoft.aspnet.signalr.sample), and then I created new asp.net mvc 5 project with vs 2015 with an index page.
I assume that app.MapSignalR() is called in the Startup.Configuration method.
Like lots of people I got the error: ticker.client is undefined.
The real problem is the var ticker = $.connection.stockTicker, is always null because $.connection has no stockTicker property defined - because the hub can't instantiate it.
Does anybody know the reason for this error?
The orignial tutorial is http://www.asp.net/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr I hosted my sample project zip to my open onedrive : https://onedrive.live.com/embed?cid=11357B31E08CCFEE&resid=11357B31E08CCFEE%21107&authkey=ALMOtmTFdCdsyV8
The "SignalR.Sample" directory content in the solution is the basic Template to integrate in asp.net mvc 4/5/6 project. So I integrate it in Views/Home/Index.cshtml page. Js refernces are in file Views/Shared/_Layout.cshtml .
Exact problem is var ticker = $.connection.stockTicker is null (no initialize connection done with the server).
If you can help me, i thank you.
Yes, you added the jQuery and Stockticker scripts in your _Layout, but you didn't add the signalr/hubs. The scripts must be loaded in this exact order:
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<script src="~/signalr/hubs"></script>
<script src="~/Scripts/SignalR.StockTicker.js"></script>
Reference:
ASP.NET SignalR Hubs API Guide - JavaScript Client
Make sure that the JavaScript file references in StockTicker.html are correct. That is, make sure that the jQuery version in your script tag (1.10.2 in the example) is the same as the jQuery version in your project's Scripts folder, and make sure that the SignalR version in your script tag is the same as the SignalR version in your project's Scripts folder. Change the file names in the script tags if necessary.
Make sure you have Any CPU as your active solution platform. I switched it to x64 and that made it so SignalR could not load since it had an incorrect platform.

Script injection of Dart code

On this Dart page https://www.dartlang.org/articles/embedding-in-html/ they say:
“No script injection of Dart code. We do not currently support or recommend dynamically injecting a script tag that loads Dart code. Recent browser security trends, like Content Security Policy, actively prevent this practice.”
What do they mean exactly by “No script injection of Dart code”? Can you show me a concrete example?
I assume this means adding a script tag like
<script src="main.dart" type="application/dart"></script>
imperatively from another Dart script.
Because there is no browser that supports Dart code directly this can't be used in production anyway but I guess it's the same for another <script> tag that loads additional "Dart" code, that was transpiled to JS, dynamically.

Resources