2 Replies Latest reply on Oct 6, 2019 1:09 PM by Daniel Merchán

    OJET Web Components using third-party libraries

    Daniel Merchán

      Hi friends of Oracle JET,

       

      I am developing some OJET Web Components which has dependencies on some third party JS libraries.

      By the moment I was placing them inside of the Web Component in a /lib folder. However, I do not like this approach.

       

      My idea is to have all dependencies registered (such as package.json) then I do not have to take care of the libs dependencies of my Web Component.

       

      Is there any good / best practice on how to develop Web Components with NPM JS Libraries / Module dependencies?

       

      Thanks.

      Kind regards.

        • 1. Re: OJET Web Components using third-party libraries
          Duncan Mills-Oracle

          It's rather buried in the JS Doc metadata section but you can create a special kind of component called a reference component.  This provides the information to define a NPM module and if your custom component adds such a reference component into its dependencies metadata then when your component is installed into a JET project or Visual Builder from the Component Exchange the library dependency is automatically resolved for you without the third party library code having to be embedded within your custom component - i.e. the OJET CLI will do an npm install for you and set up the requireJS path for the library. 

          Now there are three restrictions here:

          1) The library needs to be able to play nicely with RequireJs - you can control the name of the require path that is created but we don't have provision for adding shims to the require configuration

          2) You need to have the version of a library on a CDN somewhere if you want to use it from Visual Builder

          3) We've not told you how to set up and use the Component Exchange part - I'll contact you via email with info about how you might set that up.

           

          For reference a typical reference component definition looks like this (all that is needed is a component.json - the actual files come from NPM or your CDN at install / runtime)

           

          {

            "name": "oj-ref-moment",

            "displayName": "Moment library",

            "description": "Supplies reference information for moment.js used to parse, validate, manipulate, and display dates and times in JavaScript",

            "license": "https://opensource.org/licenses/MIT",

            "type": "reference",

            "package":"moment",

            "version": "2.22.2",

            "paths": {

              "npm": {

                "debug": "moment",

                "min": "min/moment.min"

              },

              "cdn": {

                "debug": "https://static.oracle.com/cdn/jet/packs/3rdparty/moment/2.22.2/moment.min",

                "min": "https://static.oracle.com/cdn/jet/packs/3rdparty/moment/2.22.2/moment.min"

              }

            }

          }

          • 2. Re: OJET Web Components using third-party libraries
            Daniel Merchán

            Thanks Duncan for the info,

             

            My initial idea was using NPM (by the moment).

            1) Yes, the library supports AMD Require and I made my custom libraries UMD usually.

            2) Not needed by the moment as we are not using VBCS yet.

            3) Ok .

             

            I will continue working on having the libs internally, I will switch them once the component is finished to be externalized as you explained.

             

            Thanks.