How to include requireJS module in *.soy?

Dana
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 29, 2013

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.

4 answers

1 accepted

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

2 votes
Answer accepted
Adam
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
October 1, 2013

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

0 votes
Ronald December 22, 2014

hi @Adam Ahmed,

you mentioned that Plugins in atlassian doesnt support RequireJS?

Adam
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
January 4, 2015

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

0 votes
Dana
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
September 30, 2013

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}
    &lt;script type='text/javascript'&gt;
      explicit javascript, jQuery, AJS - are available
    &lt;/script&gt; 
  {/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?

0 votes
jhinch _Atlassian_
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
September 29, 2013

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).

Comments for this post are closed

Community moderators have prevented the ability to post new answers.

Post a new question

TAGS
AUG Leaders

Atlassian Community Events