How to inject a Dart file in tab? - dart

Dartium does interpret dart files and it opens plenty of fun to develop new toys, and Chrome extensions and apps. But when it comes to do scripts injection in web pages, the executeScript method only takes files supposedly one of the .css and .js formats. Files in other mimetype (typically application/dart) is offbound. Therefore, the question is pretty much naive:
Is there anyway to directly inject a Dart file?
Thanks.

Not a way to directly inject dart-files, but a workaround to inject your dart-application would be to use dart2js and than inject the compiled js-file myDartScript.dart.precompiled.js of your dart-script.
(Use the precompiled-version to avoid errors against the Content Security Policy)
Maybe you also have to inject packages/browser/dart.js and packages/browser/interop.js.
Untested

Related

Use typescript within <script/> tag

Is it possible to use typescript within <script/> tags?
<script type="text/typescript">
...
</script>
Context:
My platform is ASP.NET Core 2.1 using razor MVC (.cshtml).
Yes it is possible. You can run a filter that replaces all script tags with that type with the compiled source (and the text/javascript type).
I have implemented that before but it was really slow because i did not find any typescript compiler assembly that could be called directly. Calling the tsc executable, which also requires a file (that i temporarily created) takes very long. If you have no static components you could cache it of course.
Also, if you use VS, it does not recognize those tags properly so you do not get highlighting or completion which is a pain.

Best approach for efficiently loading multiple Typescript files in ASP.NET MVC page.

In an Angular style app, I would expect the typescript files to be bundled together and basically all loaded at start up of the app. In an MVC type app (a view per page, not a SPA), I would expect to only load typescript for that page. I don't want to load typescript that is not relevant for that page.
I split my typescript into separate files (basically one class per file). I then set up import/export clauses in the files to reference the classes. I think this approach will work better when I go to use external libraries (jquery, etc). If I use namespace, later on when I go to use third party libraries I don't think it will work.
However, that means I need to look at some sort of loader. If I have lots of little typescript files I don't necessarily know when all files have loaded before attempting to use them, which is the sort of thing that requirejs looks after. I haven't used web pack but I think it does the same sort of thing?
But that would mean I would need a requirejs config for each MVC page which doesn't seem to be very efficient. What approach should I be taking to load all the typescript files I require for the specific MVC page, bearing in mind I could end up with dozens of MVC pages?
There is now (2021) a partial solution to this question. I'm not sure it is "efficient" but it does load multiple Typescript files on different MVC pages.
If you alter your typescript config to output ES6 modules, tsc will create one JS file fore each TS file, each in an ES6 module. If you then use a module script tag, the browser will import the files as needed
<script src="scripts/modules/start.js" type="module"></script>
<!-- and/or -->
<script type="module">
import { loadStats } from 'pages/homepage.js'
<!-- note that this is JavaScript -->
loadStats();
<script>
This does require users to be using a modern browser: https://caniuse.com/es6-module
This is not a panacea - there are lots of gottchas and work arounds, one big one being that import statements must be in JavaScript Module style, not TS style
import { loadStats } from 'pages/homepage' // <-- Will not work at runtime
import { loadStats } from 'pages/homepage.js' // <-- Use this style. Note the JS extension
as tsc does not correctly convert import statements. This should point at the TS file (as the created JS files will have the same relative path), Visual Studio appears to be able to cope for the purposes of intellisence and compiling.
We managed to get npm to work for typings, but struggled for other packages. We have, though, been able to retro-fit typescript into an older MVC app this way (we wanted/needed type checking for API calls).

Packaging an html template, javascript and css to be consumed by multiple platforms

I have a large rails application that I am wanting to split out into smaller applications. The one piece of this application that will be universal to all smaller applications is the mast and footer. I would like to extract the html, javascript and css for the mast and footer into it's own package that each app can load and render.
The main issue I'm running into is that the apps will likely not all be written in rails. Some will be rails, some will be expressjs, some written in Go, and some may end up being written in other languages, so my solution needs to be language agnostic.
My thought is that I can extract the html, css and javascript into it's own git repo, use mustache templates for the html, and then use grunt or a similar build tool to build a gem, a package.json structure and a golang module. Possibly each in it's own git submodule.
I'm curious if there is a more standardized way of doing this. Or if anyone knows of a simpler way of achieving this goal.
Sounds like the technology in common is HTML/JS/CSS.
Wouldn't it be better to export the mast and footer as a self contained JS library, or more precisely, as widgets?
So whatever the application server tech stack would be, you could always generate the HTML in the form of:
<script src="your_widgets.js"></script>
<script>new Footer.render('id_of_dom_element_to_render_to');</script>
By doing so, whether you want the widget library to load the template or you want to embed the template into the widget library or whether you want to simply just construct it using HTMLFragment will not be limited by the server tech choice.

TypeScript in MVC

Im bulding a website using MVC4. Recently I've read about TypeScript. It looks really nice however I cannot find any use for it in a MVC website. Am I missing something? Do you use it? Where?
TypeScript is a pre-compiler for JavaScript. Hence you can use TypeScript only as a replacement for JavaScript (server-side, e.g. Node.js, or client-side, i.e. in the browser).
As you are probably writing MVC4 code with C#, TypeScript will be of no use for you in relation to MVC4.
Regarding the client-side it's somewhat different.
I guess the main point you need to know is that TypeScript is not (yet) just another language on the server, that you can exchange with C#.
I find it quite useful for building largish apps with lots of logic on the client. The interfaces help avoid some errors. It compiles to javascript so you could use it instead of javascript. If you're just writing a couple of lines I wouldn't bother though.
You can link to the generated javascript files from TS files directly in the script bundles or HTML. If you want to automatically link to many JS files, use require JS. This will save you having to link to many js files.

Using processing.js inside a Firefox extension

I am curious to know if anyone has been successful using processing.js inside a Firefox extension. I am aware of the difficulties of using external libraries inside extensions and the fact that it has to be loaded in a way that will not pollute the global namespace, conflict with other extensions or Firefox itself.
But with those concerns aside, I wonder if there is anything else that should be considered before attempting it (performance, etc).
I am thinking about using it on a new window, in xhtml loaded from the chrome. Any experiences, ideas and suggestions?
I had the same doubt right now, but I think it can be done, we just hace to include processing.js file in content folder of our .xpi

Resources