Integrating Spectrum Web Components into an Adobe CEP Panel

[tpfleging]

I'm relatively new to programming (<1 year) so apologies on any dumb questions. Would love some advice from any experts on here like @Westbrook

For context I'm trying to use Spectrum Web Components to build out an Adobe Premiere CEP Panel. Two issues I'm having:

1. I can get most everything to work using the unrecommended setup using src="https://jspm.dev/@spectrum-web-components/bundle/elements.js" in the HTML. However, text fields and number fields don't let the user input any values. Maybe this is an issue with the unrecommended setup?

2. I'm having trouble figuring out the recommended set up of using individual components with LitElement. Do I have to use Typescript for this or can I use just JS and HTML? I've never used TypeScript and it seems more rare to use with Adobe CEP.

Thanks!!

[Westbrook]

I don't really know much of the specifics for integrating with Adobe Premiere CEP Panel, but let's see what we can learn here together!

1. When you say "don't let the use input any values" do you literally mean that they can't type into the fields? or something else? If you were able to share a video of the experience you are having here, it may go a long way to clarifying what to are seeing for the team here. Additionally, you may want to track Loosen API for form inputs? #2369 where we are looking at adding better support for use of our elements within <form> elements.
2. You can absolutely leverage our package with HTML and JS. We develop them in TS, but DO NOT ship TS to users. All consumption can happen in the language that you the consuming developer feel most comfortable with.

[Westbrook]

contentEditable does some other things that I'm not sure you mean, and is specifically the sort of workaround that I would think comes with peculiarities of Premiere CEP. You should definitely see if they can't get you information about that.

For the imports, you should be able to use:

import '@spectrum-web-components/theme/sp-theme.js';

But, if you don't have a bundler that resolves that, then it's hard for me to explain how you'd leverage our packages. If you HAVE to use relative pathing, then you might be able to do:

import '../node_modules/spectrum-web-components/theme/sp-theme.js';

But that opens you up to so many troubles down the line.

How are you preparing your code for delivery to production? Webpack, Rollup, etc...

[tpfleging]

Ohhh wow I think that's my issue then is that I'm not using any bundler. This is the only module I have in the project so I didn't need one, and I haven't used one before. Do you have a recommendation on Webpack vs Rollup?

[tpfleging]

Good news: Webpack worked perfectly and everything shows correctly now in an HTML preview
Bad news: Still doesn't work in a Premiere CEP Panel. Very strange that the jspm.dev way works but this doesn't.

[Westbrook]

This is likely due to the process by which you publish to CEP. Make sure that the JS you are building with Webpack is being included in your publication and that the directory relationship between your HTML and JS is the same locally as it in the published location.

[tpfleging]

Hmmmm yea I'm not publishing it anywhere, CEP just opens it directly from that folder I'm building in. I'm still trying to figure it out but no luck so far.