Svelte Starter

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

Features

• 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

Getting Started

Clone the starter with Degit.

This clones the repo without the whole Git history.

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

Install dependencies

cd my-svelte-panel
npm install

Start the dev environment

npm start

Open your favorite Adobe CC app

Find the extension under Window > Extensions and start developing 👍

Troubleshooting

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 https://github.com/sveltejs/svelte/issues/2896 and https://github.com/DeMoorJasper/parcel-plugin-svelte/issues/46#issuecomment-494556534

Webpack and CEP-Bundler

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

Configuring CEP-Bundler

panel.config.js & extendscript.config.js

See cep-bundler-core

Svelte VSCode Extension

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.