This is a simple starter for Svelte in Adobe CEP using Webpack. Huge thanks to Koen Schmeets for helping out with Webpack.

• Bundles Extendscript, Javascript and Svelte code
• Automatically generates manifest.xml and .debug
• Supports multiple extensions in the extension bundle
• Allows separate Extendscript files for each Adobe CC app
• Includes Adobe's Spectrum CSS
• Symlinks the panel to the extensions folder
• Sets the CSXS debug flags
• Watches files for changes
• Does HMR (Hot Module Replacement)
• Extracts CSS from Svelte components to a single CSS file

This clones the repo without the whole Git history.

npx degit Klustre/cep-svelte-starter my-svelte-panel

cd my-svelte-panel
npm install

npm start

Find the extension under Window > Extensions and start developing 👍

1. When running npm start, Webpack's dev server loads the files in memory instead of building to /dist. When you run npm run build it builds all files to /dist

2. On Windows you'll have to change:

   • export IS_DEV=1 to set IS_DEV=1
   • sleep 5 to timeout 5

3. Using any Svelte modules throws an error where the component is undefined. This is likely due to a double inclusion of svelte/internal.

   Possible workarounds:

   • Import the module from svelte/internal
import { createEventDispatcher } from 'svelte/internal'
   • Remove the modules from Svelte after npm install
     "postinstall": "rimraf node_modules/svelte/*.mjs"

   See sveltejs/svelte#2896 and DeMoorJasper/parcel-plugin-svelte#46 (comment)

The bundler automatically:

• Starts a local server
• Generates the manifest.xml and .debug files
• Symlinks the /dist folder to the current user's extensions folder
• Copies Node dependencies to /dist/node_modules
• Copies everything in /public to /dist

Learn more at: Webpack and cep-bundler-webpack

panel.config.js & extendscript.config.js

See cep-bundler-core

When you open the project in VSCode it will prompt you to install the Svelte extension. This is the official Svelte language server which provides syntax highlighting and rich intellisense for Svelte components. To see the recommended extensions go to Extensions > Views and More Actions (…) > Show Recommended Extensions.