[V15] Updated dotnet template for Umbraco Packages with Bellisima

templates/Umbraco.Templates.csproj

@@ -19,7 +19,7 @@
     <Content Include="UmbracoPackage\**" Exclude="bin;obj" />
     <Content Include="UmbracoPackageRcl\**" Exclude="bin;obj" />
     <Content Include="UmbracoProject\**" Exclude="bin;obj" />
-    <Content Include="UmbracoDockerCompose\**" Exclude="bin;obj"/>
+    <Content Include="UmbracoDockerCompose\**" Exclude="bin;obj" />
     <Content Include="..\src\Umbraco.Web.UI\Views\Partials\blocklist\**">
       <Link>UmbracoProject\Views\Partials\blocklist\%(RecursiveDir)%(Filename)%(Extension)</Link>
       <PackagePath>UmbracoProject\Views\Partials\blocklist</PackagePath>
@@ -32,6 +32,13 @@
       <Link>UmbracoProject\Views\_ViewImports.cshtml</Link>
       <PackagePath>UmbracoProject\Views</PackagePath>
     </Content>
+    <Content Include="UmbracoExtension\.template.config\dotnetcli.host.json" />
+    <Content Include="UmbracoExtension\.template.config\ide.host.json" />
+    <Content Include="UmbracoExtension\.template.config\template.json" />
+  </ItemGroup>
+  <ItemGroup>
+    <None Include="UmbracoExtension\Client\.vscode\extensions.ts" />
+    <None Include="UmbracoExtension\UmbracoExtension.csproj" />
   </ItemGroup>
   <!-- Update template.json files with the default UmbracoVersion value set to the current build version -->
   <ItemGroup>

templates/UmbracoPackageRcl/.template.config/ide.host.json → templates/UmbracoExtension/.template.config/ide.host.json

@@ -3,8 +3,8 @@
   "order": 0,
   "icon": "../../icon.png",
   "description": {
-    "id": "UmbracoPackageRcl",
-    "text": "Umbraco Package RCL - An empty Umbraco package/plugin (Razor Class Library)."
+    "id": "UmbracoExtension",
+    "text": "Umbraco Extension - An empty Umbraco extension/plugin (Razor Class Library)."
   },
   "symbolInfo": [
     {

templates/UmbracoPackageRcl/.template.config/template.json → templates/UmbracoExtension/.template.config/template.json

@@ -5,21 +5,21 @@
     "Web",
     "CMS",
     "Umbraco",
-    "Package",
+    "Extension",
     "Plugin",
     "Razor Class Library"
   ],
-  "name": "Umbraco Package RCL",
-  "description": "An empty Umbraco package/plugin (Razor Class Library).",
-  "groupIdentity": "Umbraco.Templates.UmbracoPackageRcl",
-  "identity": "Umbraco.Templates.UmbracoPackageRcl.CSharp",
-  "shortName": "umbracopackage-rcl",
+  "name": "Umbraco Extension",
+  "description": "An empty Umbraco extension (Razor Class Library).",
+  "groupIdentity": "Umbraco.Templates.UmbracoExtension",
+  "identity": "Umbraco.Templates.UmbracoExtension",
+  "shortName": "umbraco-extension",
   "tags": {
     "language": "C#",
     "type": "project"
   },
-  "sourceName": "UmbracoPackage",
-  "defaultName": "UmbracoPackage1",
+  "sourceName": "UmbracoExtension",
+  "defaultName": "UmbracoExtension1",
   "preferNameDirectory": true,
   "symbols": {
     "Framework": {
@@ -39,7 +39,7 @@
     },
     "UmbracoVersion": {
       "displayName": "Umbraco version",
-      "description": "The version of Umbraco.Cms to add as PackageReference.",
+      "description": "The version of Umbraco.Cms to add as PackageReference. By default it installs the latest non pre-release version",
       "type": "parameter",
       "datatype": "string",
       "defaultValue": "*",
@@ -58,11 +58,17 @@
       "defaultValue": "false",
       "displayName": "Support pages and views",
       "description": "Whether to support adding traditional Razor pages and Views to this library."
+    },
+    "kebabCasedName": {
+      "type": "derived",
+      "valueSource": "name",
+      "replaces": "PROJECT_NAME_KEBABCASE_FOR_NPM",
+      "valueTransform": "kebabCase"
     }
   },
   "primaryOutputs": [
     {
-      "path": "UmbracoPackage.csproj"
+      "path": "UmbracoExtension.csproj"
     }
   ],
   "postActions": [

templates/UmbracoExtension/Client/.vscode/extensions.ts

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "runem.lit-plugin"
+  ]
+}

templates/UmbracoExtension/Client/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "PROJECT_NAME_KEBABCASE_FOR_NPM",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "tsc && vite build --watch",
+    "build": "tsc && vite build"
+  },
+  "devDependencies": {
+    "@umbraco-cms/backoffice": "^UMBRACO_VERSION_FROM_TEMPLATE",
+    "typescript": "^5.2.2",
+    "vite": "^4.4.9"
+  }
+}

templates/UmbracoExtension/Client/public/umbraco-package.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "../../umbraco-package-schema.json",
+  "id": "UmbracoExtension",
+  "name": "UmbracoExtension",
+  "version": "0.0.0",
+  "allowPackageTelemetry": true,
+  "extensions": [
+    {
+      "name": "UmbracoExtension EntryPoint",
+      "alias": "PROJECT_NAME_KEBABCASE_FOR_NPM.entrypoint",
+      "type": "backofficeEntryPoint",
+      "js": "/App_Plugins/UmbracoExtension/PROJECT_NAME_KEBABCASE_FOR_NPM.js"
+    }
+  ]
+}

templates/UmbracoExtension/Client/src/entrypoint.ts

@@ -0,0 +1,15 @@
+import { UmbEntryPointOnInit } from '@umbraco-cms/backoffice/extension-api';
+
+// load up the manifests here
+export const onInit: UmbEntryPointOnInit = (_host, _extensionRegistry) => {
+
+  console.log('Hello from my extension 🎉');
+
+  // We can use extensionRegistry to register one or manifests/extensions via code
+  // as opposed to a very long umbraco-package.json file
+  // https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/backoffice-entry-point
+  //_extensionRegistry.registerMany([
+  //]);
+
+
+};

templates/UmbracoExtension/Client/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

templates/UmbracoExtension/Client/vite.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: "src/entrypoint.ts", // Entrypoint file (registers other manifests)
+      formats: ["es"],
+      fileName: "PROJECT_NAME_KEBABCASE_FOR_NPM",
+    },
+    outDir: "../wwwroot/App_Plugins/UmbracoExtension", // your web component will be saved in this location
+    emptyOutDir: true,
+    sourcemap: true,
+    rollupOptions: {
+      external: [/^@umbraco/],
+    },
+  },
+});

templates/UmbracoExtension/README.txt

@@ -0,0 +1,38 @@
+      _       _              _                                                          
+     | |     | |            | |                                                         
+   __| | ___ | |_ _ __   ___| |_   _ __   _____      __                                 
+  / _` |/ _ \| __| '_ \ / _ \ __| | '_ \ / _ \ \ /\ / /                                 
+ | (_| | (_) | |_| | | |  __/ |_  | | | |  __/\ V  V /                                  
+  \__,_|\___/ \__|_| |_|\___|\__| |_| |_|\___| \_/\_/   _                 _             
+                 | |                                   | |               (_)            
+  _   _ _ __ ___ | |__  _ __ __ _  ___ ___     _____  _| |_ ___ _ __  ___ _  ___  _ __  
+ | | | | '_ ` _ \| '_ \| '__/ _` |/ __/ _ \   / _ \ \/ / __/ _ \ '_ \/ __| |/ _ \| '_ \ 
+ | |_| | | | | | | |_) | | | (_| | (_| (_) | |  __/>  <| ||  __/ | | \__ \ | (_) | | | |
+  \__,_|_| |_| |_|_.__/|_|  \__,_|\___\___/   \___/_/\_\\__\___|_| |_|___/_|\___/|_| |_|
+
+
+== Requirements ==
+* Node LTS Version 20.17.0+
+* Use a tool such as NVM (Node Version Manager) for your OS to help manage multiple versions of Node
+
+== Node Version Manager tools ==
+* https://github.com/coreybutler/nvm-windows
+* https://github.com/nvm-sh/nvm
+* https://docs.volta.sh/guide/getting-started
+
+== Steps ==
+* Open a terminal inside the `\Client` folder
+* Run `npm install` to install all the dependencies
+* Run `npm run build` to build the project
+* The build output is copied to `wwwroot\App_Plugins\UmbracoExtension\PROJECT_NAME_KEBABCASE_FOR_NPM.js`
+
+== File Watching ==
+* Add this Razor Class Library Project as a project reference to an Umbraco Website project
+* From the `\Client` folder run the command `npm run watch` this will monitor the changes to the *.ts files and rebuild the project
+* With the Umbraco website project running the Razor Class Library Project will refresh the browser when the build is complete
+
+== Suggestion ==
+* Use VSCode as the editor of choice as it has good tooling support for TypeScript and it will recommend a VSCode Extension for good Lit WebComponent completions
+
+== Other Resources ==
+* Umbraco Docs - https://docs.umbraco.com/umbraco-cms/customizing/extend-and-customize-editing-experience

templates/UmbracoPackageRcl/UmbracoPackage.csproj → templates/UmbracoExtension/UmbracoExtension.csproj

@@ -4,16 +4,14 @@
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
     <AddRazorSupportForMvc Condition="'$(SupportPagesAndViews)' == 'True'">true</AddRazorSupportForMvc>
-    <RootNamespace Condition="'$(name)' != '$(name{-VALUE-FORMS-}safe_namespace)'">UmbracoPackage</RootNamespace>
-    <StaticWebAssetBasePath>App_Plugins/UmbracoPackage</StaticWebAssetBasePath>
+    <RootNamespace Condition="'$(name)' != '$(name{-VALUE-FORMS-}safe_namespace)'">UmbracoExtension</RootNamespace>
+    <StaticWebAssetBasePath>/</StaticWebAssetBasePath>
   </PropertyGroup>
 
   <PropertyGroup>
-    <PackageId>UmbracoPackage</PackageId>
-    <Product>UmbracoPackage</Product>
-    <Title>UmbracoPackage</Title>
-    <Description>...</Description>
-    <PackageTags>umbraco plugin package</PackageTags>
+    <PackageId>UmbracoExtension</PackageId>
+    <Product>UmbracoExtension</Product>
+    <Title>UmbracoExtension</Title>
   </PropertyGroup>
 
   <ItemGroup Condition="'$(SupportPagesAndViews)' == 'True'">
@@ -24,4 +22,13 @@
     <PackageReference Include="Umbraco.Cms.Web.Website" Version="UMBRACO_VERSION_FROM_TEMPLATE" />
     <PackageReference Include="Umbraco.Cms.Web.Common" Version="UMBRACO_VERSION_FROM_TEMPLATE" />
   </ItemGroup>
+
+  <ItemGroup>
+    <!-- Dont include the client folder as part of packaging nuget build -->
+    <Content Remove="Client\**" />
+
+    <!-- However make the Umbraco-package.json not part of the nuget package but visible to the solution -->
+    <None Include="Client\public\umbraco-package.json" Pack="false" />
+  </ItemGroup>
+
 </Project>