Git Product home page Git Product logo

photoshop.d.ts's Introduction

Photoshop.d.ts

npm version Build Status dependencies status

Type-safe Photoshop scripting

This project aims to create and maintain TypeScript declaration files for Adobe ExtendScript, focussed on Photoshop. It enables you to write Photoshop scripts with the power and safety of TypeScript.

Features:

  • TypeScript type safety for ExtendScript projects
  • View ExtendScript object documentation in-place for various code editors
  • Live type checking, code completion, parameter info, quick info, and member lists for ExtendScript objects with e.g. IntelliSense

Demo:

Alt text

Getting Started

Prerequisites: node, npm and TypeScript (2.4+) are installed.

  1. Install photoshop.d.ts using npm in your project folder:
npm install --save-dev photoshop.d.ts
  1. Add a tsconfig.json to your project with the following recommended settings and modify it to your needs:
{
    "compilerOptions": {
        // Output config
        "outFile": "./app.jsx",
        "sourceMap": false,
        "target": "es3",

        // Module resolution
        "module": "none",

        // JS handling
        "allowJs": true,
        "checkJs": false,
        "downlevelIteration": true,

        // Type checking
        "strict": true,
        "noLib": false,
        "lib": ["es5"], // exclude DOM and ScriptHost
        
        // Include photoshop.d.ts type definitions
        "types": ["./photoshop.d.ts/dist/cc"]
        // Alternatively for Photoshop CS6:
        // "types": ["./photoshop.d.ts/dist/cs6"]
    },
     "include": [
        "./app.ts"
    ]
}

Note: If you want to use modules in ExtendScript, you need a module loader like requirejs and set the module option to "amd". The setup of requirejs for ExtendScript requires some configuration.

ECMAScript version and JavaScript Polyfills

Adobe ExtendScript is based on ECMAScript version 3. Hence the target option in the tsconfig.json should be set to es3. TypeScript will transpile your code into valid ES3 syntax, though it won't transpile any methods like ES5 somearray.forEach or .filter into ES3 for you.

You can use ECMAScript 5 features by adding polyfills to your project. The es5.js polyfill for example works fine with ExtendScript. To prepend a polyfill to your output file, follow these instructions:

  1. Download es5.js and place it into your project folder.
  2. Assure checkJS ist set to false in your tsconfig.json when using a JS polyfill library.
  3. Link the polyfill in the files section of your tsconfig.json:
{   
    // ...
    "files": [
        "./somefolder/es5.js"  // prepends ES5 polyfill to jsx output file
    ]
}

Note: You can also restrict your use of JS functions to an ES3 level in TypeScript and replace the built-in ES5 standard lib with an ES3 declaration file manually.

For developers

Building

The TypeScript declarations are generated from the official JavaScript reference PDFs. The text is copied and pasted into local files. The parser will parse the raw text file and extract meaningful information from the respective chapters of the documentation. Once the parser has delivered an in-memory representation of the types and constants, the emitter will render types and constants as TypeScript files. After cloning this repository, install dependencies and test it by calling:

npm install && npm test

Notes

The parsers do a pretty good job, although some manual fix-ups need to be made to the raw text documents before parsing (remove typos, inconsistent array notations etc.). Since the source docs rarely change, they are committed to this project and maintained here.

License

This project is licensed under the BSD 2-Clause License.

photoshop.d.ts's People

Contributors

dee-see avatar felixschl avatar perludum avatar qinqinghai avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

photoshop.d.ts's Issues

rename ps.d.ts to index.d.ts

Iโ€™d like to propose renaming the files named "ps.d.ts" to "index.d.ts" to get them automatically recognized when adding "types": ["photoshop.d.ts/dist/cc/"] to the tsconfig.json.

No need to add a reference path in each file any more and Intellisense gets activated in VSCode too.

Publish on NPM as @types package

Since TypeScript 2.x, typings are installed via npm install @types/<package>. It would be nice if this were available under npm install @types/photoshop.

ScriptUI declarations

The complete ScriptUI needs declarations, however this is non-trivial as the docs are written in prose rather than parseable format. However, unlike the File and Folder objects, the ScriptUI consists of considerably more methods and supporting classes etc.

The reference is found in the "JavaScript Tools Guide" available from the ExtendScript Toolkit.

$.level should be writable

Hi, in the official documentation Photoshop CC Javascript Reference 2015 page 132

$.level = 1;

indicating we can actually write into $.level.

I have a project depending overwriting the value of $.level

Can we remove the readonly from extendscript/es.dollar.d.ts line 93
static readonly level: number

return types of methods

Currently all methods in the /dist declarations are of type void, though many methods actually have return values.

There seems to be a little bug in parsers/types.ts lines 225-267 where the "name" of the return type of methods somehow gets mapped twice into objects like {"name":{"name":"string","range":null}}

Workaround: Changing method.returns.name to method.returns.name.name in line 60 of renderers/types.ts produces correct declarations files with return types, but does not fix the bug at its root.

$ declarations

Dollar object declarations need to be added, e.g. $.writeln(...).

Requirejs instructions in readme.md

I'm really interested in how to use 'real' modules with Typescript/ExtendScript.

@felixSchl In readme.md you mentioned that it is possible via requirejs:

Note: If you want to use modules in ExtendScript, you need a module loader like requirejs and set the module option to "amd". The setup of requirejs for ExtendScript requires some configuration.

I'm curios what configuration that might be? Can you describe that a little more please?

Thanks a lot,
Peter

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.