diff --git a/templates/Umbraco.Templates.csproj b/templates/Umbraco.Templates.csproj index b75df9f9a5fd..b527b043ad65 100644 --- a/templates/Umbraco.Templates.csproj +++ b/templates/Umbraco.Templates.csproj @@ -19,7 +19,7 @@ - + UmbracoProject\Views\Partials\blocklist\%(RecursiveDir)%(Filename)%(Extension) UmbracoProject\Views\Partials\blocklist @@ -32,6 +32,13 @@ UmbracoProject\Views\_ViewImports.cshtml UmbracoProject\Views + + + + + + + diff --git a/templates/UmbracoPackageRcl/.template.config/dotnetcli.host.json b/templates/UmbracoExtension/.template.config/dotnetcli.host.json similarity index 100% rename from templates/UmbracoPackageRcl/.template.config/dotnetcli.host.json rename to templates/UmbracoExtension/.template.config/dotnetcli.host.json diff --git a/templates/UmbracoPackageRcl/.template.config/ide.host.json b/templates/UmbracoExtension/.template.config/ide.host.json similarity index 79% rename from templates/UmbracoPackageRcl/.template.config/ide.host.json rename to templates/UmbracoExtension/.template.config/ide.host.json index 8e630f1e99f8..904e8ae047f5 100644 --- a/templates/UmbracoPackageRcl/.template.config/ide.host.json +++ b/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": [ { diff --git a/templates/UmbracoPackageRcl/.template.config/template.json b/templates/UmbracoExtension/.template.config/template.json similarity index 74% rename from templates/UmbracoPackageRcl/.template.config/template.json rename to templates/UmbracoExtension/.template.config/template.json index c03c86014123..88ed5a8bc22c 100644 --- a/templates/UmbracoPackageRcl/.template.config/template.json +++ b/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": [ diff --git a/templates/UmbracoExtension/Client/.vscode/extensions.ts b/templates/UmbracoExtension/Client/.vscode/extensions.ts new file mode 100644 index 000000000000..c15237847740 --- /dev/null +++ b/templates/UmbracoExtension/Client/.vscode/extensions.ts @@ -0,0 +1,5 @@ +{ + "recommendations": [ + "runem.lit-plugin" + ] +} diff --git a/templates/UmbracoExtension/Client/package.json b/templates/UmbracoExtension/Client/package.json new file mode 100644 index 000000000000..69331b031844 --- /dev/null +++ b/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.5.3", + "vite": "^5.4.8" + } +} diff --git a/templates/UmbracoExtension/Client/public/umbraco-package.json b/templates/UmbracoExtension/Client/public/umbraco-package.json new file mode 100644 index 000000000000..dcc6243dca5c --- /dev/null +++ b/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" + } + ] +} diff --git a/templates/UmbracoExtension/Client/src/entrypoint.ts b/templates/UmbracoExtension/Client/src/entrypoint.ts new file mode 100644 index 000000000000..1bab16d54645 --- /dev/null +++ b/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([ + //]); + + +}; diff --git a/templates/UmbracoExtension/Client/tsconfig.json b/templates/UmbracoExtension/Client/tsconfig.json new file mode 100644 index 000000000000..44132da14208 --- /dev/null +++ b/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, + "isolatedModules": true, + "moduleDetection": "force", + "noEmit": true, + + /* Linting */ + "strict": true, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noFallthroughCasesInSwitch": true + }, + "include": [ "src" ] +} diff --git a/templates/UmbracoExtension/Client/vite.config.ts b/templates/UmbracoExtension/Client/vite.config.ts new file mode 100644 index 000000000000..8c65ffdad617 --- /dev/null +++ b/templates/UmbracoExtension/Client/vite.config.ts @@ -0,0 +1,24 @@ +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/], + }, + }, + + // Used to allow serving SVG, images & other assets from /Client/public + // Such as + // or + // import imageUrl from '/logo.jpg'; + // + base: '/App_Plugins/UmbracoExtension', +}); diff --git a/templates/UmbracoExtension/README.txt b/templates/UmbracoExtension/README.txt new file mode 100644 index 000000000000..d23f1ec95207 --- /dev/null +++ b/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 diff --git a/templates/UmbracoPackageRcl/UmbracoPackage.csproj b/templates/UmbracoExtension/UmbracoExtension.csproj similarity index 58% rename from templates/UmbracoPackageRcl/UmbracoPackage.csproj rename to templates/UmbracoExtension/UmbracoExtension.csproj index b959751c8762..a247ebcf5139 100644 --- a/templates/UmbracoPackageRcl/UmbracoPackage.csproj +++ b/templates/UmbracoExtension/UmbracoExtension.csproj @@ -4,16 +4,14 @@ enable enable true - UmbracoPackage - App_Plugins/UmbracoPackage + UmbracoExtension + / - UmbracoPackage - UmbracoPackage - UmbracoPackage - ... - umbraco plugin package + UmbracoExtension + UmbracoExtension + UmbracoExtension @@ -24,4 +22,13 @@ + + + + + + + + + diff --git a/templates/UmbracoPackage/.template.config/dotnetcli.host.json b/templates/UmbracoPackage/.template.config/dotnetcli.host.json deleted file mode 100644 index 6473c5c643b5..000000000000 --- a/templates/UmbracoPackage/.template.config/dotnetcli.host.json +++ /dev/null @@ -1,18 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/dotnetcli.host.json", - "symbolInfo": { - "Framework": { - "longName": "Framework", - "shortName": "F", - "isHidden": true - }, - "UmbracoVersion": { - "longName": "version", - "shortName": "v" - }, - "SkipRestore": { - "longName": "no-restore", - "shortName": "" - } - } -} diff --git a/templates/UmbracoPackage/.template.config/ide.host.json b/templates/UmbracoPackage/.template.config/ide.host.json deleted file mode 100644 index 0464cfeb1f10..000000000000 --- a/templates/UmbracoPackage/.template.config/ide.host.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/ide.host.json", - "order": 0, - "icon": "../../icon.png", - "description": { - "id": "UmbracoPackage", - "text": "Umbraco Package - An empty Umbraco CMS package/plugin." - }, - "symbolInfo": [ - { - "id": "UmbracoVersion", - "isVisible": true - } - ] -} diff --git a/templates/UmbracoPackage/.template.config/template.json b/templates/UmbracoPackage/.template.config/template.json deleted file mode 100644 index 5c93b1d68df9..000000000000 --- a/templates/UmbracoPackage/.template.config/template.json +++ /dev/null @@ -1,108 +0,0 @@ -{ - "$schema": "https://json.schemastore.org/template.json", - "author": "Umbraco HQ", - "classifications": [ - "Web", - "CMS", - "Umbraco", - "Package", - "Plugin" - ], - "name": "Umbraco Package", - "description": "An empty Umbraco package/plugin project ready to get started.", - "groupIdentity": "Umbraco.Templates.UmbracoPackage", - "identity": "Umbraco.Templates.UmbracoPackage.CSharp", - "shortName": "umbracopackage", - "tags": { - "language": "C#", - "type": "project" - }, - "sourceName": "UmbracoPackage", - "defaultName": "UmbracoPackage1", - "preferNameDirectory": true, - "symbols": { - "Framework": { - "displayName": "Framework", - "description": "The target framework for the project.", - "type": "parameter", - "datatype": "choice", - "choices": [ - { - "displayName": ".NET 9.0", - "description": "Target net9.0", - "choice": "net9.0" - } - ], - "defaultValue": "net9.0", - "replaces": "net9.0" - }, - "UmbracoVersion": { - "displayName": "Umbraco version", - "description": "The version of Umbraco.Cms to add as PackageReference.", - "type": "parameter", - "datatype": "string", - "defaultValue": "*", - "replaces": "UMBRACO_VERSION_FROM_TEMPLATE" - }, - "SkipRestore": { - "displayName": "Skip restore", - "description": "If specified, skips the automatic restore of the project on create.", - "type": "parameter", - "datatype": "bool", - "defaultValue": "false" - }, - "Namespace": { - "type": "derived", - "valueSource": "name", - "valueTransform": "safe_namespace", - "fileRename": "UmbracoPackage", - "replaces": "UmbracoPackage" - }, - "MsBuildName": { - "type": "generated", - "generator": "regex", - "dataType": "string", - "parameters": { - "source": "name", - "steps": [ - { - "regex": "\\s", - "replacement": "" - }, - { - "regex": "\\.", - "replacement": "" - }, - { - "regex": "-", - "replacement": "" - }, - { - "regex": "^[^a-zA-Z_]+", - "replacement": "" - } - ] - }, - "replaces": "UmbracoPackageMsBuild" - } - }, - "primaryOutputs": [ - { - "path": "UmbracoPackage.csproj" - } - ], - "postActions": [ - { - "id": "restore", - "condition": "(!SkipRestore)", - "description": "Restore NuGet packages required by this project.", - "manualInstructions": [ - { - "text": "Run 'dotnet restore'" - } - ], - "actionId": "210D431B-A78B-4D2F-B762-4ED3E3EA9025", - "continueOnError": true - } - ] -} diff --git a/templates/UmbracoPackage/App_Plugins/UmbracoPackage/umbraco-package.json b/templates/UmbracoPackage/App_Plugins/UmbracoPackage/umbraco-package.json deleted file mode 100644 index 153f0b057678..000000000000 --- a/templates/UmbracoPackage/App_Plugins/UmbracoPackage/umbraco-package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "id": "UmbracoPackage", - "name": "UmbracoPackage", - "allowPackageTelemetry": true, - "extensions": [] -} diff --git a/templates/UmbracoPackage/UmbracoPackage.csproj b/templates/UmbracoPackage/UmbracoPackage.csproj deleted file mode 100644 index 9790da947cbf..000000000000 --- a/templates/UmbracoPackage/UmbracoPackage.csproj +++ /dev/null @@ -1,27 +0,0 @@ - - - net9.0 - enable - enable - . - UmbracoPackage - - - - UmbracoPackage - UmbracoPackage - UmbracoPackage - ... - umbraco plugin package - - - - - - - - - - - - diff --git a/templates/UmbracoPackage/buildTransitive/UmbracoPackage.targets b/templates/UmbracoPackage/buildTransitive/UmbracoPackage.targets deleted file mode 100644 index 4c376ac97b36..000000000000 --- a/templates/UmbracoPackage/buildTransitive/UmbracoPackage.targets +++ /dev/null @@ -1,21 +0,0 @@ - - - $(MSBuildThisFileDirectory)..\App_Plugins\UmbracoPackage\**\*.* - - - - - - - - - - - - - - - - - - diff --git a/templates/UmbracoPackageRcl/wwwroot/umbraco-package.json b/templates/UmbracoPackageRcl/wwwroot/umbraco-package.json deleted file mode 100644 index 153f0b057678..000000000000 --- a/templates/UmbracoPackageRcl/wwwroot/umbraco-package.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "id": "UmbracoPackage", - "name": "UmbracoPackage", - "allowPackageTelemetry": true, - "extensions": [] -}