Use wca to generate the JSON format for VSCode for HTMLCustomData (#619)

* Use web-component-analyzer to generate the JSON format for VSCode for HTMLCustomData

https://github.com/microsoft/vscode-custom-data
https://github.com/runem/web-component-analyzer#vscode

* Adds in the suggested path 'src/**/*.element.ts'

* Runs npm run script for webcomponent analayzer tool

Note its before npm run build:libs as this run runs the script move-libs.js ready for packaging

* move-libs util script updated to copy over the two JSON files from wca cli tool

* Copied file from wrong location as they are being generated and put at the root of the main project

* Adds customElements prop to package.json from this spec

https://github.com/webcomponents/custom-elements-manifest#referencing-manifests-from-npm-packages

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:
@@ -36,6 +38,8 @@ jobs:
           node-version: 18
           cache: 'npm'
       - run: npm ci
+      - run: npm run wc-analyze
+      - run: npm run wc-analyze:vscode
       - run: npm run build:libs
       - uses: actions/upload-artifact@v3
         with:

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

@@ -26,5 +26,6 @@
 		"@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

@@ -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);