HTML, CSS, JavaScript
Advice on using JS library in WWC environment
Gravatar is a globally recognized avatar based on your email address. Advice on using JS library in WWC environment
  Richard Kaye
  All
  Apr 30, 2024 @ 06:49am

Hi Rick,

We use a 3rd party JS open source library called DOCX to generate Word docs out of our app. We're several versions behind and have been looking at newer versions of the library. Our current implementation can't get much simpler; it's a couple of script injections in the page. However, the examples in the newer versions are shown using Node/React/Angular/vue.js, etc and getting the library to load correctly has been a challenge for this old FoxPro guy. Any pointers or suggestions you can offer that could get me closer to where I want to go?

TIA

Gravatar is a globally recognized avatar based on your email address. re: Advice on using JS library in WWC environment
  Rick Strahl
  Richard Kaye
  Apr 30, 2024 @ 06:58am

Depends on what style of usage you're using:

  • Plain web references (plain <script>)
  • ECMAScript Modules (<script type="module">)
  • CommonJs (using require.js - avoid if possible)

If possible use the plain Web references - that's what we've used all along and essentially works with global components. Modules are a newer standard (and sparsely supported though as of yet) which allow for better dependency manages (you can basically import other modules building a self-loading dependency tree as opposed to having to explicitly load all dependencies up front and in the right order).

CommonJs is what NodeJs uses and many frameworks in the past used. It uses a special library called require.js and a very specific syntax to load 'modules' (which are different than ESM module).

Current state of JavaScript is confusing A.F. because of this. Even though ESM modules are now supported in all major browsers, very few libraries have good support for ESM modules. For example - I'm working on a Vue app at the moment and while Vue supports ESM modules, but many of the commonly used support libraries do not. It'll sort itself out, but we're not there at this point.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Advice on using JS library in WWC environment
  Richard Kaye
  Rick Strahl
  Apr 30, 2024 @ 09:37am

Thanks, Rick. The feedback is much appreciated.

We're using the first strategy of plain web references.

FWIW the current version of this library is distributed as an npm package and now I'm just trying to get my head wrapped around what that means, etc. package.json and build and .cjs and .mjs... Good times.

Gravatar is a globally recognized avatar based on your email address. re: Advice on using JS library in WWC environment
  Rick Strahl
  Richard Kaye
  Apr 30, 2024 @ 06:35pm

For an NPM package you can do the following:

  • Install NodeJs (NPM installs with Node)
  • Create a new folder
cd \temp\testProject
npm install <packageName>
explorer .\node_modules\<packageName>

In that folder you'll likely find the files you need either at the root or in a dist folder.

Take those files and copy them local to your project.

+++ Rick ---

Gravatar is a globally recognized avatar based on your email address. re: Advice on using JS library in WWC environment
  Richard Kaye
  Rick Strahl
  May 1, 2024 @ 02:40am

That's the road I've been going down. So far no success in getting the library to load using simple web references. My inexperienced hypothesis at the moment is it depends on the nodejs framework also being deployed/available. We haven't used any js "frameworks" besides jquery so more net new for me to grok. Again, I appreciate you taking the time to chime in. 😃

© 1996-2024