From d562b251b936ce7a079fdcd4fc6a3e5723570d84 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Thu, 23 Jan 2025 13:09:55 +0100 Subject: [PATCH 1/2] Fixes Issue 6797 --- .../customizing/development-flow/vite-package-setup.md | 10 ++++++---- .../tutorials/creating-a-property-editor/README.md | 2 +- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md index 17de26a7554..12983f2009f 100644 --- a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -63,12 +63,14 @@ npm install npm install -D @umbraco-cms/backoffice ``` -{% hint style="info" %} -Optionally you can use `--legacy-peer-deps` in the installation command to avoid installing Umbraco´s sub-dependencies like TinyMCE and Monaco Editor:\ -`npm install --legacy-peer-deps -D @umbraco-cms/backoffice` + * Ensure that you install the version relevant to your Umbraco installation. You can find the appropriate version on the [@umbraco-cms/backoffice npm page](https://www.npmjs.com/package/@umbraco-cms/backoffice). Alternatively, you can manually update the version in your `package.json` file to match your setup. + * Optionally, you can use `--legacy-peer-deps` flag in the installation command to avoid installing Umbraco´s sub-dependencies such as TinyMCE and Monaco Editor: + + ```bash +` npm install --legacy-peer-deps -D @umbraco-cms/backoffice` + ``` If this is used the Intellisense to those external references will not be available. -{% endhint %} 7. Open the `tsconfig.json` file. 8. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: diff --git a/15/umbraco-cms/tutorials/creating-a-property-editor/README.md b/15/umbraco-cms/tutorials/creating-a-property-editor/README.md index fb24bdab042..7b1acf66445 100644 --- a/15/umbraco-cms/tutorials/creating-a-property-editor/README.md +++ b/15/umbraco-cms/tutorials/creating-a-property-editor/README.md @@ -86,7 +86,7 @@ Now let's create the web component we need for our property editor. {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript import { LitElement, html, customElement, property } from "@umbraco-cms/backoffice/external/lit"; -import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/extension-registry"; +import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/property-editor"; @customElement('my-suggestions-property-editor-ui') export default class MySuggestionsPropertyEditorUIElement extends LitElement implements UmbPropertyEditorUiElement { From 4290ff7591bfff75ad93037437cf0ec881b0b431 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Fri, 24 Jan 2025 12:34:57 +0100 Subject: [PATCH 2/2] Incorporated review comments --- .../development-flow/vite-package-setup.md | 25 +++++++++++-------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md index 12983f2009f..9a918e3f5b2 100644 --- a/15/umbraco-cms/customizing/development-flow/vite-package-setup.md +++ b/15/umbraco-cms/customizing/development-flow/vite-package-setup.md @@ -27,22 +27,22 @@ Before following this guide, read the [Setup Your Development Environment](./) a npm create vite@latest ``` -This command will help you set up your new package, asking you to pick a framework and a compiler. +This command will set up your new package and ask you to pick a framework and a compiler. -3. Enter `Client` as both the **Project Name** and **Package name** when prompted, +3. Enter `Client` as both the **Project Name** and **Package name** when prompted. + +4. Choose **Lit** and **TypeScript** as the framework and language. {% hint style="info" %} -For following this tutorial, we recommend using the names given above, although you can choose any other you prefer. +For this tutorial, it is recommended to use the names given above. However, feel free to choose other names if preferred. {% endhint %} -4. Choose **Lit** and **TypeScript**. -

Create vite command choices

This creates a new folder called `Client`, sets up our new project, and creates a `package.json` file, which includes the necessary packages. This is where all your source files live. {% hint style="info" %} -Alternatively of the two steps above, you can type the following: +Alternatively, you can skip the interactive prompts and use this command: ```typescript npm create vite@latest Client -- --template lit-ts @@ -51,26 +51,29 @@ npm create vite@latest Client -- --template lit-ts This will create a Vite Package with Lit and TypeScript in a folder called **Client**. {% endhint %} -5. Navigate to the new project folder **Client** and install the packages using: +5. Navigate to the **Client** project folder and install the required packages: ```bash npm install ``` +Before proceeding, ensure that you install the version of the Backoffice package compatible with your Umbraco installation. You can find the appropriate version on the [@umbraco-cms/backoffice npm page](https://www.npmjs.com/package/@umbraco-cms/backoffice). + 6. Install the Backoffice package using the following command: ```bash npm install -D @umbraco-cms/backoffice ``` - * Ensure that you install the version relevant to your Umbraco installation. You can find the appropriate version on the [@umbraco-cms/backoffice npm page](https://www.npmjs.com/package/@umbraco-cms/backoffice). Alternatively, you can manually update the version in your `package.json` file to match your setup. - * Optionally, you can use `--legacy-peer-deps` flag in the installation command to avoid installing Umbraco´s sub-dependencies such as TinyMCE and Monaco Editor: +{% hint style="info" %} +To avoid installing Umbraco’s sub-dependencies such as TinyMCE and Monaco Editor, you can add the `--legacy-peer-deps` flag: +{% endhint %} ```bash ` npm install --legacy-peer-deps -D @umbraco-cms/backoffice` ``` -If this is used the Intellisense to those external references will not be available. +Using this flag will disable Intellisense for external references. 7. Open the `tsconfig.json` file. 8. Add the array `types` inside `compilerOptions`, with the entry of `@umbraco-cms/backoffice/extension-types`: @@ -111,7 +114,7 @@ export default defineConfig({ {% endcode %} {% hint style="info" %} -The `outDir` parameter specifies where the compiled files will be placed. In this case, it is the `App_Plugins/Client` folder. If you have a different structure such as a Razor Class Library (RCL) project, you should change this path to `wwwroot`. +The `outDir` parameter specifies where the compiled files are placed. In this example, they are stored in the `App_Plugins/Client` folder. If you are working with a different structure, such as a Razor Class Library (RCL) project, update this path to `wwwroot`. {% endhint %} This alters the Vite default output into a **library mode**, where the output is a JavaScript file with the same name as the `name` attribute in `package.json`. The name is `client.js` if you followed this tutorial with no changes.