feat(lib): Added VSCode/JetBrains custom types for web components

package.json

@@ -17,7 +17,7 @@
   "scripts": {
     "start": "npm run storybook",
     "build": "npm run clean && npm run build:styles && npm run build:typescript && npm run cem && npm run build:meta",
-    "build:publish": "node scripts/build.mjs",
+    "build:publish": "npm run cem && node scripts/build.mjs",
     "build:typescript": "tsc",
     "cem": "cem analyze --config cem.config.mjs",
     "cem:watch": "cem analyze --config cem.config.mjs --watch",
@@ -74,6 +74,8 @@
     "autoprefixer": "^10.4.19",
     "browser-sync": "^3.0.2",
     "concurrently": "^8.2.2",
+    "custom-element-jet-brains-integration": "^1.5.0",
+    "custom-element-vs-code-integration": "^1.3.0",
     "globby": "^14.0.1",
     "husky": "^9.0.11",
     "ig-typedoc-theme": "^5.0.3",

scripts/_package.json

@@ -63,5 +63,6 @@
     "@floating-ui/dom": "^1.6.0",
     "@lit-labs/virtualizer": "^2.0.10",
     "lit": "^3.1.0"
-  }
+  },
+  "web-types": "./web-types.json"
 }

scripts/build-styles.mjs

@@ -4,7 +4,7 @@ import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { globby } from 'globby';
 import * as sass from 'sass-embedded';
-import report from './report.js';
+import report from './report.mjs';
 import { compileSass, fromTemplate } from './sass.mjs';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));

scripts/build.mjs

@@ -3,43 +3,90 @@ import { copyFile } from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { promisify } from 'node:util';
+import { generateJetBrainsWebTypes } from 'custom-element-jet-brains-integration';
+import { generateVsCodeCustomElementData } from 'custom-element-vs-code-integration';
+import customElements from '../custom-elements.json' assert { type: 'json' };
 import { buildThemes } from './build-styles.mjs';
+import report from './report.mjs';
 
 const exec = promisify(_exec);
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 const DEST_DIR = path.join.bind(null, path.resolve(__dirname, '../dist'));
 
+async function runTask(cmd, tag) {
+  report.info(`[${tag}] Building...`);
+  try {
+    await cmd();
+    report.success(`[${tag}] Done`);
+  } catch (e) {
+    report.error(`[${tag}] Failed with: ${e}`);
+  }
+}
+
 (async () => {
   await exec('npm run clean');
 
-  console.info('Building styles...');
-  await exec('npm run build:styles');
+  await runTask(exec.bind(null, 'npm run build:styles'), 'Styles');
 
   // https://github.com/microsoft/TypeScript/issues/14619
-  console.info('Building components...');
-  await exec(
-    'tsc -p scripts/tsconfig.prod.json && tsc -p scripts/tsconfig.dts.prod.json'
+  await runTask(
+    exec.bind(
+      null,
+      'tsc -p scripts/tsconfig.prod.json && tsc -p scripts/tsconfig.dts.prod.json'
+    ),
+    'Components'
   );
 
-  console.info('Generating theme files...');
-  await buildThemes();
+  await runTask(buildThemes, 'Themes');
 
-  console.info('Generating custom-elements.json file...');
-  await exec('npm run cem');
-  await copyFile('custom-elements.json', DEST_DIR('custom-elements.json'));
+  await runTask(
+    copyFile.bind(
+      null,
+      'custom-elements.json',
+      DEST_DIR('custom-elements.json')
+    ),
+    'custom-elements.json'
+  );
 
-  console.info('Generating package.json...');
-  await copyFile('scripts/_package.json', DEST_DIR('package.json'));
+  await runTask(
+    generateVsCodeCustomElementData.bind(null, customElements, {
+      outdir: 'dist',
+      cssFileName: 'igniteui-webcomponents.css-data.json',
+      htmlFileName: 'igniteui-webcomponents.html-data.json',
+      hideMethodDocs: true,
+      hideCssPartsDocs: false,
+      hideLogs: true,
+    }),
+    'VSCode custom data'
+  );
 
-  console.info('Copying CHANGELOG.md...');
-  await copyFile('CHANGELOG.md', DEST_DIR('CHANGELOG.md'));
+  await runTask(
+    generateJetBrainsWebTypes.bind(null, customElements, {
+      outdir: 'dist',
+      hideMethodDocs: true,
+      hideCssPartsDocs: false,
+      hideLogs: true,
+    }),
+    'JetBrains web types'
+  );
 
-  console.info('Copying LICENSE...');
-  await copyFile('LICENSE', DEST_DIR('LICENSE'));
+  await runTask(
+    copyFile.bind(null, 'scripts/_package.json', DEST_DIR('package.json')),
+    'package.json'
+  );
 
-  console.info('Copying README.md...');
-  await copyFile('README.md', DEST_DIR('README.md'));
+  await runTask(
+    copyFile.bind(null, 'CHANGELOG.md', DEST_DIR('CHANGELOG.md')),
+    'CHANGELOG'
+  );
+
+  await runTask(copyFile.bind(null, 'LICENSE', DEST_DIR('LICENSE')), 'LICENSE');
+
+  await runTask(
+    copyFile.bind(null, 'README.md', DEST_DIR('README.md')),
+    'README'
+  );
 
-  console.log('Done! 🎉');
+  report.success('Done! 🎉');
 })();

scripts/report.mjs

@@ -0,0 +1,6 @@
+export default {
+  error: (s) => console.error('\x1b[31m%s\x1b[0m', s),
+  success: (s) => console.info('\x1b[32m%s\x1b[0m', s),
+  warn: (s) => console.warn('\x1b[33m%s\x1b[0m', s),
+  info: (s) => console.info('\x1b[36m%s\x1b[0m', s),
+};

scripts/styles-watcher.mjs

@@ -1,7 +1,7 @@
 import { writeFile } from 'node:fs/promises';
 import watch from 'node-watch';
 import * as sass from 'sass-embedded';
-import report from './report.js';
+import report from './report.mjs';
 import { compileSass, fromTemplate } from './sass.mjs';
 
 const watchOptions = {