Skip to content

01 Writing Extensions And Themes

Jump to bottom
phoenixide edited this page Sep 17, 2024 · 1 revision

This document outlines how to write your own extensions and themes for Phoenix Code.

Quick Start

Click on one of the below links and follow the instructions there to start:

API docs

This is an evolving document, please refer the below links for extension API docs and how to's.

Running and Debugging your extension

Follow the below step to run and debug your Extension/Theme:

  • Clone your extension Repository into a folder. See this link to lean how to clone a repository from GitHub.
  • Go to https://create.phcode.dev .This is a special development centric website of phcode.dev which shows non minified js/css files in the browser developer tools.
  • Open the cloned folder and select Debug > Load Project As Extension

image

  • The Theme/Extension will be loaded in Phoenix Editor now.
  • You can now make code changes to your theme and live preview theme changes as you edit your theme css.

theme dev

  • You can also select Debug> Reload With Extensions to test the new code changes.
  • When you are done developing the extension/theme, select Debug> Unload Project As Extension to unload the extension.

image

  • You can use the browser developer tools to debug the extension/theme.

Publishing to the extension/theme store

Extensions created from the above GitHub template can be easily published from your GitHub repo to the store.

Just creating a release in GitHub with an attached extensions.zip file. Follow the below steps:

  1. Increment the version field in package.json file before publishing.
  2. Compress the extension folder into a zip file with name extension.zip. NB: It is important to name the file as exactly extension.zip image
  3. Create a new release in GitHub and attach the above extension.zip file in the release.
    1. On github.com, navigate to the main page of the repository.
    2. To the right of the list of files, click Releases. image
    3. Click on Draft New Release image
    4. Select choose a tag and type in your new extension version and Create new tag. image
    5. Fill out the remaining fields.
    6. Drag and drop the extension.zip file to the release. new extension
    7. Click on Publish release button.

    See Release Example: https://github.com/phcode-dev/extension-template/releases/tag/0.0.1

  4. You will get an issue in your issue tab regarding the publishing status of the extension/theme.

    See Example: https://github.com/phcode-dev/extension-template/issues/2

  5. If there are any errors in publishing, please visit the link in the issue to see the errors. Fix and retry publishing the release. image
  6. Once the extension is published, you should be able to see it in the extension store in https://phcode.dev image

Publishing legacy Brackets extensions

Follow this section only for old brackets extensions.

To publish Extensions/themes that are not created from the above theme and extension template or old Brackets extensions, please follow the below steps:

  1. Create a GitHub repo for your extension if it is not present.
  2. Create a file .github/workflows/publishToPhcode.yml in your repo with the following contents: https://github.com/phcode-dev/theme-template/blob/main/.github/workflows/publishToPhcode.yml

That's all, you can now follow the above Publishing to the extension/theme store section.

FAQ

Why is my extension is not being published?

Your repository must be public to be able to be published to the Phoenix Extension store. See this link on understanding how to change repo visibility to public in GitHub.

How do i get a Verified Badge for my extension?

The verified extension badge(tick mark) will be automatically granted to verified GitHub Organizations.

How do I delete my extension from the store

Please raise an issue here: https://github.com/phcode-dev/phoenix/issues/new/choose, mention your extension repository.

Links

Clone this wiki locally