To include a custom js file in bubble plugin developmant

Need help Plugins
1

Hi
I am trying to build a bubble plugin for my new application. In the Plugin action i require some functionalities from a third party java script file. How can i import the js file to the plugin editor??

2

This depend of what you build. If you are creating an element, inscript a script tag in the header of the element that point to the js file.

3

Going to give away more of my proprietary expertise here.

  1. You are building a server-side action. You’re in luck. You have the whole of the NPM repository available. Simply add the usual CommonJS requires statement and Bubble adds the dependencies to the plugin’s package.json.
  2. You are building an element or client-side action.
    2.1. You have the usual heterogeneously supported browser Web API.
    2.2. As well you can reference EcmaScript sources from one or more CDN hosted URLs, and URLs of files uploaded to the plugin shared resources.
    2.3. For client-side actions you can only place script tags in the shared header.
    2.4. For elements you have a separate headers section for script tags only loaded when the element is on the page.
    2.5. For ES5 files just use the regular script tag with the src set appropriately.
    2.6. Now here is my secret, for ES6 modules you will need to destructure and add the objects to the global window in the script tag:
<script type="module">

    // Destructure one or more module imports
    import { object1, object2,... } from "https://my.url/source1";
    import { object3, object4,... } from "https://my.url/source2";...

    // Now alias into the global scope
    window.aliasobject1 = object1;
    window.aliasobject2 = object2;
    window.aliasobject3 = object3;
    window.aliasobject4 = object4;...
</script>
11 Likes
4

Thank yo Jici. I am looking for an action. I got some example threads for the element build. But cannot find for the action purpose. I have to use the plugin in my workflow. Is there any solution to use the js for creating an action?

1 Like
5

@aaronsheldon give almost all options for each case. 2.3 apply to you or you can insert the js directly in the action

1 Like