Integrating Javascript code in a DevPack Component

Elements API
21

Just to be clear: JS code will not be executed inside of Elements — your JS will only be included in preview and publish.

I’m not sure from your post if you are expecting the JS to execute in Elements?

22

I’ve just reviewed the Page Assets documentation and can confirm everything is working as expected.

Given that you have a file located at:

YourPack.elementsdevpack/components/com.yourdomain.yourComponent/assets/page/test.js

You can use the following in your hooks.js file:

const transformHook = (rw) => {
  rw.setProps({
    assetPath: rw.component.assetPath,
  });
};

exports.transformHook = transformHook;

Then, in your component’s template, include:

@portal(headEnd)
    <script src="{{assetPath}}/test.js"></script>
@endportal

This will correctly inject the test.js file into the of your page.

If you’re still running into issues, just let me know and I’ll be happy to help you debug further :slightly_smiling_face:

Quick side note: None of our core components currently use Page Assets — we typically lean on the newer @portal approach or shift shared logic into shared assets for better reuse.

23

@ben Yes, I was using all of the above but could never get it to work. I was never expecting it to work in the editor but it did not work in the browser either.

I eventually solved the problem by adding the JS code to the HTML template code and using the PORTAL approach to relocate it to the desired location.

This seems to work really well.

Not sure why the other approach doesn’t work, but I tried everything I could to make it happen.