I use Play! Scala 2.4 with scala js, and I would like to know if there is a way to get the routing config file from the scala js files.
It would be very convenient since it would allow me to replace urls as string by something like application.routes.Application.admin().
Do you know any workaround to do this?
You can use javascript reverse routing.
It will help you to define routes from your js code.
It will look like this:
#helper.javascriptRouter("jsRoutes")(
routes.javascript.Application.admin
)
...
<script>
console.log(jsRoutes.routes.Application.admin())
</script>
Supporting the previous answer, you can take a look at my code for a rather complex real-world example.
The JavaScript side
The Scala.js facade around that
Related
It is a noob question, but I am looking for a solution, to include one coffeescript into another one, like in SASS or Pug(former Jade).
Like in sass:
#import ../sass/vars.sass
or in jade
include ../jade/footer.jade
I cannot find something like this in CoffeeScript. Is there any way?
Coffeescript is just a semi-language that is being translated into JS later on anyways, it does not allow modularization by itself. To build your app module-way, i prefer to use RequireJS, it works fine with CS.
http://requirejs.org/
I send form errors from Play side to front end like this:
JsError.toJson(errors)
And on front end I got something like this:
{"obj.comment":[{"msg":["error.minLength"],"args":[10]}],"obj.name":[{"msg":["error.path.missing"],"args":[]}]}
I need to know how to check if I have error for specific field and if there is error get messages for this field.
Is it possible to use Play Json in Scala.js?
You can't use Play Json, because it relies on reflection which Scala.js currently doesn't support.
Have a look a µPickle. It's a great lightweight JSON parser that works with Scala.js, because it doesn't use reflection. Check it out here.
I am a newbie in angular2 and want to know the purpose of following imports we do in our angular2 app.
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
so my questions regarding these imports are:
what are these imports for?
does the sequence of these imports metter?
are there any other useful imports that we must be aware of?
Thanks in advance.
I don't see any imports in your code sample. Its just including the files of various libraries into web page. If you read some of them one by one:
es6-shim.min.js - adds ES6 language features to browsers (full list)
Rx.js adds Observables library (GitHub RxJS)
http.dev.js - adds angular2 $http module to make requests
So you can google each of the names and figure out for yourself if that's applicable for your project.
More on modules and actual imports in ES2015/ES6 you can read here https://ponyfoo.com/articles/es6-modules-in-depth for example.
"useful imports that we must be aware of?"
Totally depends on your needs. By I assume angular2.dev.js and http.dev.js would be a good to start.
"does the sequence of these imports matter?"
Not now, but only if you're using proper module system so that browser can load missing parts before executing the blocks that depend on them. And also the loader file (system.js/require.js) should be in the first before all the other files.
Here are the details about what you specified in your script elements:
The two first files aren't necessary if you use TypeScript and have configuted ES5 output.
angular2-polyfills.js - Contains ZoneJS (to trigger change detection - see What is the Angular2 equivalent to an AngularJS $watch?) and reflect-metadata (to set metadata on objects from decorators)
system.src.js - SystemJS, the library that manages modules. In short when you use import and export in TypeScript the corresponding compiled code relies on it.
Rx.js - RxJS, a library that provides an implementation of Reactive Programming concepts. In short, it provides an implementArion of observables and their operators. EventEmitters, HTTP rely on this.
angular2.dev.js - Angular2 core bundle
http.dev.js - HTTP support of Angular2
I am looking for an example about combining the four technologies in the title :) I have a working ReactJS application using Play, Scala and WebJars, it's here on GitHub.
Now I would like to add RequireJS, but I'm not sure how to go, especially because it seems to require a different JSXTransformer? If anybody has a pointer (or even a PR) it would be very appreciated.
This is not the easiest thing to do, but I was able to pull it off. I will give you some tips here. I also uploaded my own project to github. This is a very simple snake game built using React and RequireJs. It based on Webjars and Play Framework.
Remember that RequireJs is part of Play Framework. Here's a step by step guide to create React/RequireJs/WebJars/Play integration:
In your plugins.sbt add addSbtPlugin("com.github.ddispaltro" % "sbt-reactjs" % "0.5.2"). This is a plugin which transforms JSXes into JSes and also strips flow types if you want that.
In your main scala.html file add #helper.requireJs(core = routes.WebJarAssets.at(WebJarAssets.locate("require.js")).url, module = routes.Assets.at("javascripts/main").url). This will add add a script tag with data-main and src attributes that are used to bootstrap your RequireJs app.
Create react.js file in your assets/javascripts folder:
define(['../lib/react/react-with-addons'], function(React) {
window.React = React;
return React;
});
Create main.jsx file in your assets/javascripts folder:
require.config({
// standard requirejs config here
});
require(['react', 'components/YourComponent'], function(React, YourComponent) {
'use strict';
$(document).ready(function() {
React.render(<YourComponent />, document.getElementById('container'));
});
});
Your standard React component goes to assets/javascripts/components/YourComponent.jsx and is defined like standard RequireJs module. Remember to return a React class:
define(function(require) {
var React = require('react');
var AnotherComponent = require('components/AnotherComponent');
return React.createClass({ ... });
}
I hope that helps. If you have any questions, please let me know.
Someone said to have got the text plugin working with sbt-rjs: https://groups.google.com/forum/#!topic/play-framework/F789ZzTOthc
I would attempt with the text plugin first, as it's the simplest plugin of all, right? Once this is successful, move on to the JSX plugin:
https://github.com/philix/jsx-requirejs-plugin
Have a look at: https://github.com/nemoo/democratizer
This is an example project that uses play framework, scala, slick, mysql as a restful backend.
The client is a javascript single page application (SPA) written in react. It uses react router for client site routing and ES6 javascript.
The build process combines webpack and play activator which enables simple automatic browser refresh for server and client side code.
I would like to generate documentation in a Dancer application in the same way that Mojolicious does with Mojolicious::Plugin::PODRenderer, I mean in the browser, under the /perldoc path.
Does somebody knows a module that can help? I found no ready-made plugin for Dancer. If it don't exist, any recommandation is welcome.
Porting Mojolicious' PODRenderer to Dancer should be fairly simple - it's an example plugin and the code is fairly short. I've done this for my own use in my CGI framework at work.
https://github.com/kraih/mojo/blob/master/lib/Mojolicious/Plugin/PODRenderer.pm#L34
Essentially what the plugin does is define the route /perldoc/:module to call the _perldoc method; the _perldoc method uses Pod::Simple::Search to find a documentation file matching the module param in the #INC directories; If it doesn't, it redirects the search to MetaCPAN. If it does, it uses Pod::Simple::HTML to convert the documentation to HTML, which is then tidied up with Mojo::DOM and wrapped in a lovely template.
Finding the location of that template is left as an exercise for... oh, nevermind, here it is: https://github.com/kraih/mojo/blob/master/lib/Mojolicious/templates/perldoc.html.ep