Good day!
Please, help me to deal with Atlassian rich capabilities in UI.
I was forced up to use *.soy template as config-form for my hook, because these templates perform some unique UI features (e.g. BranchSelctor).
{namespace my.namespace} {template .configForm} {call Stash.template.branchSelector.field} {params}...{/params} {/call} {/template}
But also I need to use some other Atlassian modules (e.g. util/navbuilder, 'util/ajax', 'util/events', 'model/page-state', 'model/pull-request'), which I used to load throught requireJS. So I have UI module like this:
define('MyModule', ['util/navbuilder'], function(nav){ //render smth })
So, how does I should combine SOY templates and RJS modules for my config-form?
I have tried to import module in SOY by adding:
{literal} <script type='text/javascript'> require(['MyModule'], function(mod){ mod.render(); }) </script> {/literal}
Also I had imported requireJS module as stash-resource in atlassian-plugin.xml:
<stash-resource key='require-js-dynamic-renderer'> <directory location="/ui/"/> <dependency>com.atlassian.auiplugin:ajs</dependency> </stash-resource>
But there is error with loading it: 'MyModule' has not yet been defined.
Community moderators have prevented the ability to post new answers.
As Jason commented, RequireJS isn't what we're using. Our version of AMD so far has been entirely synchronous (so maybe just MD) and never supported (UPDATE 2015: we support both syntax options. Still loaded synchronously) the
require([], callback);
syntax, only the
var module = require('module');
syntax. The former syntax has been added to the codebase recently (yet to be released).
The AMD dependencies don't actually ensure your module is loaded onto the page. We have some experiments for how to move in that direction, but we're not there yet.
The <stash-resource> XML needs to be used to get your code loaded in the browser. See Web Resources for more info. You'll need to either add a context to your stash resource or have other web resources depend on it so it's loaded when they are. You don't have a context in the stash-resource, so if nothing is depending on "require-js-dynamic-renderer" then it's expected that it's not available.
Consider moving your module's JS into the config form <directory> (see the docs) so it gets included when your form is shown, or add a dependency to your config form on your module resource.
I'd also note that we don't actually have a public API in JS yet, so modules like 'util/navbuilder' might change between versions.
Cheers,
Adam
hi @Adam Ahmed,
you mentioned that Plugins in atlassian doesnt support RequireJS?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Ronald, Sorry, you'll have to be more specific with your question. You can use RequireJS on your own pages just fine - you can manually include <script> tags for any JS you like. You can also use r.js at build time to pre-compile all your modules and dependencies and resolve dependencies. But in terms of loading Web Resources (the API for adding JS and CSS to the minified batches on our pages - see https://developer.atlassian.com/display/DOCS/Web+Resource+Plugin+Module for what that is), RequireJS currently doesn't play well with the Atlassian pipeline. The main issue is that, since all the JS is batched, you can't reference modules by their relative URL paths. You can {{define}} and {{require}} any modules you like with explicit names, but you'll also have to use the Web resource XML to ensure that those modules are actually loaded onto the page (check out the <dependency> XML element on the page linked above). Cheers, Adam
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Could you explain I little bit deeper? What does "cut down shim" mean?
I have retrieved the one solution:
{namespace my.namespace} {template .configForm} {call Stash.template.branchSelector.field} {params}...{/params} {/call} {literal} <script type='text/javascript'> explicit javascript, jQuery, AJS - are available </script> {/literal} {/template}
1) But, what If I would like to use the 'util/navbuilder' and other AtlassianAUI mentioned above?
2) I would be grateful if somebody explained - why does explicit javascript, jQuery, AJS - are available inside script although other modules and libs are not available? Which config-file is responsible for it?
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
It should be noted that Stash does not use requirejs. It uses a cut down shim. It does not support asynchronous requiring of modules (as shown in your second code snippet).
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Community moderators have prevented the ability to post new answers.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.