How to create a soy (MetalJS) Portlet with JavaScript

[Severin Rohner, modificado 7 Anos atrás.]

I try out the Metal JS in the Liferay 7 GA3 as a soy portlet. To render the parameter from the render phase works fine. (As it is in the hello soy portlet)

But the additional JavaScript for states and interaction wasn't transpiled. I added the package.json file, but it didn't help. I also try to fix it like in this ticket: https://issues.liferay.com/browse/LPS-68563

How should the gradle and bnd file be that the es.js file will be transpiled and loaded in the Liferay AMD Loader?

Thanks lot for your help, Severin

[Chema Balsas, modificado 7 Anos atrás.]

Hey Severin,

We're working on a tutorial to create SoyPortlets.

Although still work in progress, you can check it out here

Could you please take a look and let us know if that answers your questions? If not, please, let us know so we can improve it before publishing it.

Thanks!

[Severin Rohner, modificado 7 Anos atrás.]

Hi Chema
Thank you very much, I will try it as fast as possible and give you Feedback.

[Chema Balsas, modificado 7 Anos atrás.]

Hey Severin,

The tutorial has been published. You can find it here

Please, let us know what you think as soon as you try it out!

[Severin Rohner, modificado 7 Anos atrás.]

Hey Chema

Manual
I tried it out. The manual is fine, there are just some small points:

• "This provides everything you need to create a Metal component based on Soy. Note that the values of name and version should match those in your bnd.bnd file." => Name don't match in the code example
• Musst the file .lfrbuild-portal be in the filetree?
• build.gradle: provided don't work, compileOnly is fine

Current state
The template is rendered by the Java Compiler and shows the values in the portlet.
The JavaScript file (....es.js) is transpiled in the build folder and the module config (config.json) is fine

FYI: My JavaScript wasn't compiled before, because I had a old version of plugins.workspace in the Gradle dependencies:
dependencies {
classpath group: "com.liferay", name: "com.liferay.gradle.plugins.workspace", version: "1.0.37" => "1.2.0"
}

Still open: JavaScript don't load
The JavaScript won't be loaded in the portlet. I added some logs to the JS, but nothing is in the log.

class View extends Component {
    constructor(opt_config) {
        console.log("constructor");
        super(opt_config);
    }

    /**
     * @inheritDoc
     */
    attached() {
        console.log('attached');
    }
}

Do you have a idea why it isn't loaded?

Other points for the documentation
Bruno Basto showed the Metal Router in his speak at the Liferay DevCon 16. Some documentation about that would be nice:

• How to add a router
• Read and write parameters to URL
• Choose between router link and SPA link
• History back with router

Thanks lot for your effort and help

[Eric COQUELIN, modificado 7 Anos atrás.]

I would add to your comments that themeDisplay is not known...

Caused by: com.google.template.soy.tofu.SoyTofuException: In 'print' tag, expression "$themeDisplay" evaluates to undefined.

As per the following source code, I understand it should be...

@Override
	public void prepare(
		Map<string, object> contextObjects, HttpServletRequest request) {

		ThemeDisplay themeDisplay = (ThemeDisplay)request.getAttribute(
			WebKeys.THEME_DISPLAY);

		contextObjects.put("locale", themeDisplay.getLocale());
		contextObjects.put("themeDisplay", themeDisplay);

		// Custom template context contributors

		for (TemplateContextContributor templateContextContributor :
				_templateContextContributors) {

			templateContextContributor.prepare(contextObjects, request);
		}
	}</string,>

I tried to add it manually but think that it has to follow some conventions (need to check)

Caused by: com.google.template.soy.data.SoyDataException: Attempting to convert unrecognized object to Soy data (object type com.liferay.portal.kernel.theme.ThemeDisplay).

[Eric COQUELIN, modificado 7 Anos atrás.]

Hi Chema,

Can you also remind names and github locations of Liferay portlets already transposed to Soy approach?

Thank you,

Eric

[Eric COQUELIN, modificado 7 Anos atrás.]

Chema,

Are you sure it should work with GA3 ???

Looks like there are many things not working, even in nominal cases.

In addition to that, it takes 10 seconds each time I want to deploy new version

C:\workspaces\appdeveloper\appdeveloper\modules\location>blade deploy
:modules:location:compileJava
:modules:location:buildCSS UP-TO-DATE
:modules:location:processResources
:modules:location:downloadNode SKIPPED
:modules:location:downloadMetalCli SKIPPED
:modules:location:npmInstall UP-TO-DATE
:modules:location:transpileJS
:modules:location:downloadLiferayModuleConfigGenerator SKIPPED
:modules:location:configJSModules
:modules:location:replaceSoyTranslation UP-TO-DATE
:modules:location:classes
:modules:location:jar
:modules:location:assemble
:modules:location:build

BUILD SUCCESSFUL

Total time: 10.685 secs
stop 493
update 493 file:/C:/workspaces/appdeveloper/appdeveloper/modules/location/build/libs/zango.sortir.location-1.0.0.jar
start 493
Updated bundle 493

transpileJS task takes nearly 5 seconds to complete. I'm running windows as you have noticed.

That's far too long and counter productive.

[Chema Balsas, modificado 7 Anos atrás.]

Hey guys, sorry for the late response...

@Severin

• Thanks for testing it out, we'll fix the documentation issues asap!
• The JS issue is hard to diagnose... could you share some source code to try it out myself?
• What Bruno showed regarding metal-router is a work in progress, not yet available. We are currently maturing it and using it in some internal projects. We're planning a big effort in the following weeks to figure out how to bring it as an external module, but this might not happen anytime sooner than Q2 of 2017.

@Eric

• The ImageEditor Portlet is the best example of a full metal.js (soy) application. You can also check the Hello Soy Portlet as an implementation reference.
• GA3 does not contain many of the improvements we've been doing on the metal+soy infrastructure. I think that's why themeDisplay is not injected. Also, the error you see when trying to add it yourself happens because in GA3 we don't have automatic model serialization/deserialization. This is being backported as well and will be available soon. In any case, I'd say you'd be better off adding to your context what's needed only, and themeDisplay comes with a lot of baggage, so you may prefer to just pick from it and add whatever you need to your context.
• The soy infrastructure in GA3 is fully functional (as evidenced by the ImageEditor Portlet), but the ecosystem around it may be lagging a bit behind. We are constantly improving it and will make sure those changes reach the new releases.

[Severin Rohner, modificado 7 Anos atrás.]

Hey Chema
I've put a simple portlet to Github: soy-test-workspace

I added two JavaScript logs in this file META-INF/resources/View.es.js
If I make a page refresh, there is no JavaScript log in the browser.

(If the JavaScript will be loaded, I will try to add the variable 'releaseInfo' as a state to the js. My first goal would be to change the variable in the JS an get the updated view.)

Thanks for help, Severin

[Chema Balsas, modificado 7 Anos atrás.]

Hey Severin,

On a quick scan, I noticed that the versions in the bnd.bnd] and the package.json files don't match.

This is probably causing the loader to get misconfigured so the modules never load. Unfortunately, I think the SoyPortlet infrastructure wasn't surfacing that information in GA3, so that's probably why you're not seeing any issues

Could you please try one of these? (or both):

• Change the version in the bnd.bnd file to match the 1.0.3 in package.json or viceversa
• Completely remove the version in the bnd.bnd file. Since you're using our gradle tasks, our NpmAnalyzer should be kicking in and annotating the bundle with the version inside package.json, so you wouldn't need to add it

Hope that helps!

[Severin Rohner, modificado 7 Anos atrás.]

I try both, but it didn't work

If I remove the version in the bnd file, than the version is 0.0.0 in the MANIFEST.MF of the jar.
So I push a new version to github with 1.0.3 in the bnd file.

I also try it with a master build (28. Nov. 2016) from Liferay Portal, but there is no different, no log, no error...

Do you have any idea?

[Chema Balsas, modificado 7 Anos atrás.]

Hey Severin,

I think you're not using exactly our gradle configuration. This is causing the package.json file not to be bundled in the jar.

Just add -includeresource: package.json in your bnd.bnd file and it should work (I just tested it locally and it seems that's all it's missing).

Let me know if you still see other issues!

[Severin Rohner, modificado 7 Anos atrás.]

Hey Chema
Thank you for you fast answer. I added the package.json include to the bnd file. After 'blade deploy', the package.json file is in the jar and I can find the js file in the source finder of the browser dev. tool.
But IMHO the js file isn't link to my soy portlet. I don't have any js console log. I also try to use a js function in the soy template, but the portlet is broken after that. Commit to Github

Thanks again for your help.

Cheers Severin

P.s. There is an issue with blade deploy -w
Execution failed for task ':modules:soy-test-portlet:configJSModules'.

[Chema Balsas, modificado 7 Anos atrás.]

Hey Severin,

There's a soy compilation issue that's probably causing everything else to fail. One problem is that the gradle daemon hides the task output so you can't see it. I've sent you a Pull Request disabling the daemon so you can see it. It also fixes the issue in the soy template.

I'm simply running ./gradlew clean jar and deploying the bundle, which is working for me. Can you test with my changes and verify it works for you as well?

[Severin Rohner, modificado 7 Anos atrás.]

Hi Chema
Thanks for your pull request.
If I build the project, there is a log:

Could not find C:\dev\git\soy-test-workspace\modules\soy-test-portlet\build\resources\main\META-INF\resources\View.soy.js

I changed the View.es.js file to View.soy.js and the error is away. The change is already on Github. Is this fine?

There is also an error during the build I can't understand:

> Building 42% > :modules:soy-test-portlet:transpileJSRunning 'build'...
Compiling soy
Error in plugin 'metal-tools-soy'
Message:
    Compile error:
errors during Soy compilation
In file View.soy:1:17: parse error at '
': expected eof, {alias, {deltemplate, or {template
{namespace View}
                ^


Finished compiling soy
Building to format: amd

But in any case (View.es.js and View.es.js), there is no alert popup if I click my button.
Does the button work by you? Do you have any idea to fix it?

[Chema Balsas, modificado 7 Anos atrás.]

Hey Severin, that change is wrong, the error you were seeing is just a warning. We silenced those in some newer version of metal-cli. Go ahead and fetch the latest one and update your package.json and you should see the log gone.

Regarding the remaining soy issue, I see now that you are likely running on Windows. This is an issue with the closure compiler and eol characters . We filed it a while ago, but it doesn't seem to be fixed just yet. The safest fix would be for you to add a .gitattributes file like the one we have and checkout your files again for the changes to take effect.

[Severin Rohner, modificado 7 Anos atrás.]

Hi Chema

Now it works as expected!!!
Thank you very much.

I had some reload troubles because the developer mode wasn't enabled.

The blade watch function doesn't work yet, this is at the moment the only drawback. (Because this is so cool in JSP, so I miss it a lot ;-) )

[Chema Balsas, modificado 7 Anos atrás.]

Hey Severin,

Glad to know we got if working finally!

Sorry about the tooling. Watch should be recompiling and redeploying everything right now, so I'll take a look. We're also planning to try to improve it in the future, but not sure when we will be able to tackle that.

Thanks for reporting and staying on this until we figured it out. Please, let me know if you run into any other issues.