From 0660e4031d1b5ebf32c482e00e133440d942e2bc Mon Sep 17 00:00:00 2001 From: Warren Buckley Date: Fri, 24 Mar 2023 11:43:52 +0000 Subject: [PATCH] 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 --- .../.github/workflows/npm-publish-github-packages.yml | 4 ++++ src/Umbraco.Web.UI.Client/.gitignore | 5 +++++ src/Umbraco.Web.UI.Client/libs/package.json | 3 ++- src/Umbraco.Web.UI.Client/package.json | 1 + src/Umbraco.Web.UI.Client/utils/move-libs.js | 6 ++++++ 5 files changed, 18 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/.github/workflows/npm-publish-github-packages.yml b/src/Umbraco.Web.UI.Client/.github/workflows/npm-publish-github-packages.yml index 7a99f6fd45..b322c4aeb5 100644 --- a/src/Umbraco.Web.UI.Client/.github/workflows/npm-publish-github-packages.yml +++ b/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: diff --git a/src/Umbraco.Web.UI.Client/.gitignore b/src/Umbraco.Web.UI.Client/.gitignore index 48fcabe2ce..d2ebc9b225 100644 --- a/src/Umbraco.Web.UI.Client/.gitignore +++ b/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 \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/libs/package.json b/src/Umbraco.Web.UI.Client/libs/package.json index cc2b8932a7..199d2a6914 100644 --- a/src/Umbraco.Web.UI.Client/libs/package.json +++ b/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" } diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json index 833bb4bde1..4553da30f2 100644 --- a/src/Umbraco.Web.UI.Client/package.json +++ b/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" diff --git a/src/Umbraco.Web.UI.Client/utils/move-libs.js b/src/Umbraco.Web.UI.Client/utils/move-libs.js index 95c64e855d..59c3f7d044 100644 --- a/src/Umbraco.Web.UI.Client/utils/move-libs.js +++ b/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);