How to implement?

[SturmB]

Please forgive me for asking this question, which may seem extraordinarily basic. I am new to TypeScript and Adobe CEP.

After downloading this package via npm (or yarn, in my case), how is it used?

I know I needed that .d.ts file for CSInterface to get the TypeScript compiler to stop throwing errors on the line let csInterface = new CSInterface();, but how?

I thought perhaps adding import * as CSInterface from "/node_modules/csinterface-ts/dist/csinterface-ts"; at the top of my TS file would work, but it just shifts the error message to that line and gives me a different one.

[BrightShadow]

Hello @SturmB!

Thanks for using this solution, that's first. Usage depends on your configuration. In my case I used it as a normally installed package. I suppose you have some Typescript code that is used to create some logic and then transpiled to JavaScript that is used directly in plugin. Next thing is what kind of transpilation are you using? Probably you are using some framework with loader for modules/packages, like Aurelia, React, Angular etc... That's the most comfortable way.

In this situation usage is quite simple, you just install library via npm like: npm install csinterface-ts --save

Then you are using it as following: import {CSInterface} from "csinterface-ts";

or for other interfaces/classes like UIColor, RGBColor, CSEvent you can continue importing like below: import {UIColor, RGBColor, CSEvent} from "csinterface-ts";

And this is a way, how I do this.

I'm using also WebStorm, so it automatically inserts or allows to automatically insert missing imports.

If it doesn't work, put here some errors you get, I will try to help you.

[SturmB]

Hey, @BrightShadow, thanks for replying.

First, I have, indeed, installed your library. (I use yarn, so for me, it was yarn add csinterface-ts.)

Second, yes, PhpStorm did, indeed, help me by auto-inserting the line import {CSInterface} from "csinterface-ts"; above let csInterface = new CSInterface();

I have no (current) need for UIColor and other such modules(?), so I don't need to import them just yet.

I'm sorry I didn't put in the exact error messages in my original post; I was in a bit of a hurry. So here's what's going on:

PhpStorm and tsc appear to be happy enough with the import statement, as well as the assignment statement following it. However, upon running the Extension and bringing up the remote debugging console in Chrome, I am greeted with the following error:

Uncaught (in promise) Error: Unable to resolve bare specifier "csinterface-ts" from file:///Library/Application%20Support/Adobe/CEP/extensions/sky-open-template/client/js/index.js at throwBare (file:///Library/Application%20Support/Adobe/CEP/extensions/sky-open-template/node_modules/systemjs/dist/system.js:186:11) at SystemJS.systemJSPrototype.resolve (file:///Library/Application%20Support/Adobe/CEP/extensions/sky-open-template/node_modules/systemjs/dist/system.js:685:12) at file:///Library/Application%20Support/Adobe/CEP/extensions/sky-open-template/node_modules/systemjs/dist/system.js:308:39 at Array.map (native) at file:///Library/Application%20Support/Adobe/CEP/extensions/sky-open-template/node_modules/systemjs/dist/system.js:306:43

At this point, I should state that I am using SystemJS. Should I? I am so new to both TypeScript and CEP that I honestly don't know. It just seemed like I should, after having completed Lynda's course on TypeScript. So that error message might be a SystemJS error and I don't know how to correct it.

As far as transpiling, I'm using PhpStorm's built-in transpiler, which (I think) uses tsc. I am unfamiliar with Aurelia and only peripherally familiar with React and Angular. I do not use any of those; should I? They seem like they might be overkill for a CEP project.

Finally, I should state that I am attempting to use the latest version of Adobe CEP, which is CEP 8. I think your csinterface-ts is based on CEP 7. Is there any chance you will update it to CEP 8?

[BrightShadow]

Hello @SturmB, firs of all, yes my project is based on previous version of CEP - 7.x. So it can be incompatible with newest release. You don't need to use any frontend framework for your plugin, System.js is OK. I mentioned it because my plugin was very UI-rich and I needed routing / view binding etc. (it is not overkill trust me, some people write plugin in node.js, building there whole server :p) If you don't need it, it's fine :-)

Are you using PhpStorm for web frontend development, really? I didn't know it is possible. However, regarding the error, I cannot help. I looks similar to this Stack Overflow topic.

Just one more thing to work with the project. You are not able to run your plugin directly in the Browser, you need to do it in Adobe target application (Photoshop, Illustrator InDesign....). I've created some kind of emulator, to work with my plugin in the browser without debugging it in Adobe Illustrator, but this is my plugin specific emulator and rather won't work for you. Did you try to debug it directly in application (then you are able to use Chrome debugger for it)?

Maybe this post can help somehow: Adobe Illustrator HTML Extensions in short ?

[SturmB]

Hey, so I was able to get it all working (with one major exception) after several more days of work. I even tried toying with Webpack and such to get things to work. However, it seems that I don't really need external modules for the CEP side of things. Thus, I won't really need SystemJS and CEP doesn't even support CommonJS, anyway.

I have also been in (brief) contact with a fellow from the TypeScript Gitter chat and he created a newer, 8.x type definition file. That said, it turns out I didn't need it anyway; The CSInterface.js library is all I need, so long as I bring it in the CEP HTML file and make sure it's in a good location to be seen by TypeScript. And I was about to get the ExtendScript side of things working once I set up my TypeScript file and tsconfig.json file to reference Types for Adobe properly.

In all, I was finally able to get it working. You can see my progress on it if you like. Now, about that major exception that I mentioned at the top of this post…

Well, one of the big reasons why I wanted to move to TypeScript for creating extensions for Illustrator and InDesign was so that I could leverage External Modules. That is, keeping interfaces and classes in separate files for organizational purposes, so everything isn't in one gigantic file consisting of thousands of lines of code. However, it appears that this dream may not be able to be fulfilled. Since ExtendScript is based on ES3 and even modern web browsers haven't fully implemented External Module Loading, I don't think it's up to the task. I know ExtendScript supports the #include "whatever.jsx" or //@include "whatever.jsx" syntax for importing 3rd-party libraries, but I cannot even seem to get that working through TypeScript. (See above link to my "Sky Open Template" repo.)

If there's any chance you happen to know of a way to use External Modules or some way of splitting up the code into separate files, please let me know. Now that I think about it, I may have to try and look into Webpack once again. Ugh. Still, please let me know your thoughts.

[BrightShadow]

Hi again!

Let me call ExtendedScript - JSX, that's simpler. So, I don;t know why you are using JSX so extensively? You need to do many things there? If you need JSX file divided into modules it mean's it can be quite complicated. I don't understand how you wan;t to use Typescript for JSX (maybe I don;t understand your solution well). In my opinion the most important rule is KIS here, Keep It Simple 📦

I've used TypeScript to define whole my code and logic. JSX files were just used as necessary evil, because JSX is very poor and is used rather as legacy solution that cannot be abandoned by Adobe as a proxy between HTML/JS world and C++ world (yeah we can always write extensions in C++, I did it once, it was quite hard...). They don;t wan't to give use direct access to Host, which could be done by using JS/Node or whatever. But going back to your project.

I wouldn't use JSX as main technology here. Try to create some generic useful functions, that will be exported from JSX to your JS/TS over CEP. I did it in that way. I needed e.g. an event when selection changed on the artboard in Illustrator. This event probably is still not available, even from C++, but can be simulated. I've created a function in JSX that returned currently selected object. Then when I called it once a 300ms (in my TS code) I was able to generated event com.cep.event.selectionChanged (created by me in my TS service called CepEventAggregator).

And I never relied on JSX too much, I've used it as a proxy. for simple operations, but whole complicated logic was put in my own code in TypeScript. So sorry, I don;t know a good way to scale up your JSX files hierarchy into modules. I would say, I shouldn't do that in JSX, that's all.

If you're interested with more details how I solved it in my code, I can share some code with you, maybe over Github, but this can take some time, cause I need to find some time on it, but I'm busy guy 😆

[SturmB]

So, I don;t know why you are using JSX so extensively? You need to do many things there?

Bingo. For this one simple project, I don't need to, but I have two other Adobe CEP projects that definitely will need to leverage JSX extensively. They run through a bunch of processes in InDesign and Illustrator, automating a great many tasks that used to be done by hand.

I don't understand how you wan;t to use Typescript for JSX

While I generally also subscribe to the KISS principle, I'm also looking to de-tangle an old 10,000+ line JSX script into something that is more modular and easier to maintain in the future. (See my post on Adobe's forums about this.)

I wouldn't use JSX as main technology here. Try to create some generic useful functions, that will be exported from JSX to your JS/TS over CEP.

I think I see what you're getting at. Use the Panel (JS) as the main "organizer" of everything, calling the various JSX scripts in turn to do this series of tasks that need to be done. I think I like that idea and I'll probably see how it goes if I try to implement that on a smaller scale. Thank you!

[BrightShadow]

I think I see what you're getting at. Use the Panel (JS) as the main "organizer" of everything, calling the various JSX scripts in turn to do this series of tasks that need to be done. I think I like that idea and I'll probably see how it goes if I try to implement that on a smaller scale.

Yes, that's the idea. I think that this will help you organize it. I definitely like a lot more to use TypeScript language than pure JSX.

Thank you!

You're welcome!