Skip to main content
m1b
Community Expert
m1bCommunity Expert
Community Expert
May 3, 2021
Question

Converting ES6 modules for use in CEP HTML panel

  • May 3, 2021
  • 1 reply
  • 1587 views

I have a working app UI that I can view and test in chrome and I figured that it should work in a CEP 10 extension given that it doesn't use anything that isn't available in chrome 74. Except my UI uses components as native javascript modules. This shouldn't be a problem because chromium 74 supports native javascript modules, except that (I didn't realise!) html specs forbid loading modules from a file url which, it seems, is how CEP extensions load. So it has nothing to do with CEP and is just my lack of knowledge about this feature of html spec. (By the way, when I test with files served from a local web server, it works perfectly.)

 

So my question is: what's the best way to convert vanilla javscript modules (about 20 components) for use in a CEP extension but keep them modular? I'm wondering if webpack or maybe even typescript/babel might be a possibility? I don't have experience with any of these, and I'm happy to learn the one I need, but I'd love some advice.

 

(Note: everything I am talking about occurs on the JS side of the CEP panel. I don't care about the JSX side at this stage.)

This topic has been closed for replies.

1 reply

Silly-V
Silly-V
Legend
May 3, 2021

Hey you know more than I do about all this, all I can say is that you can use TypeScript which a target of "es6" and module as to be "commonjs". Here is a tsconfig that I have found to be working for me. I can write all sorts of modern Typescript gibberish, and it turns it all into proper old-skool JS gibberish!
I will add, my components aren't actually in TS, at this time - they are just regular JS but they execute a bunch of code that I made in TS because I'm mainly focused on making various logic work in a separate place than the front-end component. I know there's probably some way to make it also work properly to also create the components too. I actually do not see why not, since TS will transpile to valid JS and that valid JS can surely contain a component properly recognized by CEP!

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
  },
  "exclude": [
    "node_modules",
  ]
}
    m1b
    Community Expert
    m1bCommunity ExpertAuthor
    Community Expert
    May 4, 2021

    Yes I think typescript and commonjs seems like an excellent thing to try! Thanks heaps Silly-V that is really helpful.

    - Mark

      Silly-V
      Silly-V
      Legend
      May 4, 2021

      Let me know if this ends up working for you!

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices