Merge branch 'main' into feature/tree-item-extension-point

src/Umbraco.Web.UI.Client/.github/workflows/npm-publish-github-packages.yml

@@ -13,6 +13,7 @@ on:
       - 'package-lock.json'
       - '.github/workflows/npm-publish-github-packages.yml'
       - './rollup-libs.config.js'
+      - 'src/**/*.element.ts'
   pull_request:
     branches: [ main ]
     paths:
@@ -21,6 +22,7 @@ on:
       - 'package-lock.json'
       - '.github/workflows/npm-publish-github-packages.yml'
       - './rollup-libs.config.js'
+      - 'src/**/*.element.ts'
   workflow_dispatch:
 
 env:

src/Umbraco.Web.UI.Client/.gitignore

@@ -41,3 +41,8 @@ playwright/.cache/
 storybook-static/
 
 custom-elements.json
+
+# JSON for HTML Custom Data
+# https://github.com/runem/web-component-analyzer#vscode
+# https://github.com/microsoft/vscode-custom-data
+vscode-html-custom-data.json

src/Umbraco.Web.UI.Client/libs/package.json

@@ -20,11 +20,14 @@
 	},
 	"type": "module",
 	"files": [
-		"*.d.ts"
+		"*.d.ts",
+		"*.json",
+		"*.md"
 	],
 	"peerDependencies": {
 		"@types/uuid": "^9.0.1",
 		"@umbraco-ui/uui": "^1.2.0-rc.0",
 		"rxjs": "^7.8.0"
-	}
+	},
+	"customElements": "custom-elements.json"
 }

src/Umbraco.Web.UI.Client/package.json

@@ -28,7 +28,7 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build --mode staging",
-		"build:libs": "rollup -c rollup-libs.config.js && node utils/move-libs.js",
+		"build:libs": "npm run wc-analyze && npm run wc-analyze:vscode && rollup -c rollup-libs.config.js && node utils/move-libs.js",
 		"build:for:static": "tsc && vite build",
 		"build:for:cms": "tsc && vite build -c vite.cms.config.ts && npm run build:libs",
 		"build:for:cms:watch": "vite build -c vite.cms.config.ts --watch",
@@ -50,6 +50,7 @@
 		"build-storybook": "npm run wc-analyze && storybook build",
 		"generate:icons": "node ./devops/icons/index.js",
 		"wc-analyze": "wca **/*.element.ts --outFile custom-elements.json",
+		"wc-analyze:vscode": "wca **/*.element.ts --format vscode --outFile vscode-html-custom-data.json",
 		"new-extension": "plop  --plopfile ./devops/plop/plop.js",
 		"compile": "tsc",
 		"check": "npm run lint && npm run compile && npm run build-storybook"

src/Umbraco.Web.UI.Client/utils/move-libs.js

@@ -10,8 +10,12 @@
 // Note: This script is not used in the build process, it is only used to transform the d.ts files
 //       when the d.ts files are copied to the dist folder
 
+// Note: Updated to help copy the two JSON files generated from webcomponant analyzer tool
+// One is specific to VSCode HTMLCutomData for intellisense and the other is a more broad format used in storybook etc
+
 import { readdirSync, readFileSync, writeFileSync, cpSync, mkdirSync } from 'fs';
 
+const rootDir = './';
 const srcDir = './libs';
 const inputDir = './dist/libs';
 const outputDir = '../Umbraco.Cms.StaticAssets/wwwroot/umbraco/backoffice/libs';
@@ -19,6 +23,8 @@ const outputDir = '../Umbraco.Cms.StaticAssets/wwwroot/umbraco/backoffice/libs';
 // Copy package files
 cpSync(`${srcDir}/package.json`, `${inputDir}/package.json`, { recursive: true });
 cpSync(`${srcDir}/README.md`, `${inputDir}/README.md`, { recursive: true });
+cpSync(`${rootDir}/custom-elements.json`, `${inputDir}/custom-elements.json`, { recursive: true });
+cpSync(`${rootDir}/vscode-html-custom-data.json`, `${inputDir}/vscode-html-custom-data.json`, { recursive: true });
 
 const libs = readdirSync(inputDir);