Converting ES6 modules for use in CEP HTML panel

Adobe Community Professional ,
May 02, 2021 May 02, 2021

Copy link to clipboard

Copied

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.)

TOPICS
How to , Scripting , SDK

Views

385

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

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",
  ]
}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 03, 2021 May 03, 2021

Copy link to clipboard

Copied

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

- Mark

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 04, 2021 May 04, 2021

Copy link to clipboard

Copied

Let me know if this ends up working for you!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
May 10, 2021 May 10, 2021

Copy link to clipboard

Copied

Frustratingly I've been unable to get back to this project but as soon as I can, I'll let you know how it went. Thanks again!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jul 22, 2022 Jul 22, 2022

Copy link to clipboard

Copied

Did you ever end up figuring this issue out?  Running into a similiar issue for Spectrum Web Components node modules

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 22, 2022 Jul 22, 2022

Copy link to clipboard

Copied

LATEST

Hi @TreyP123, not yet. Unfortunately, running into this issue derailed my project for long enough that I've been distracted by other "more important" (or often easier) things. I still plan to solve it, but not enough time at the moment.

- Mark

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines