RC #239

package.json

@@ -77,11 +77,11 @@
     "inquirer": "^12.9.6",
     "markdown-table": "^3.0.4",
     "ora": "^8.2.0",
-    "rollup-plugin-dts": "^6.2.3",
     "rollup-plugin-scss-lit": "^2.1.0",
     "simple-git": "^3.28.0",
     "table": "^6.9.0",
-    "typescript": "^5.9.2"
+    "typescript": "^5.9.2",
+    "@wc-toolkit/jsx-types": "^1.4.3"
   },
   "devDependencies": {
     "@aurodesignsystem/auro-config": "^1.3.1",

src/configs/custom-elements-manifest.config.mjs

@@ -1,4 +1,5 @@
 import { cemSorterPlugin } from "@wc-toolkit/cem-sorter";
+import { jsxTypesPlugin } from "@wc-toolkit/jsx-types";
 
 export default {
   globs: ["src/**/*.*js", "scripts/wca/**/*.*js"],
@@ -10,5 +11,11 @@ export default {
     cemSorterPlugin({
       deprecatedLast: true,
     }),
+    jsxTypesPlugin({
+      fileName: "index.d.ts",
+      outdir: "dist",
+      defaultExport: true,
+      excludeCssCustomProperties: true,
+    })
   ],
 };

src/scripts/build/configUtils.js

@@ -1,7 +1,6 @@
 import { basename, join } from "node:path";
 import { nodeResolve } from "@rollup/plugin-node-resolve";
 import { glob } from "glob";
-import { dts } from "rollup-plugin-dts";
 import { litScss } from "rollup-plugin-scss-lit";
 import { watchGlobs } from "./plugins.js";
 
@@ -108,28 +107,6 @@ export function getDemoConfig(options = {}) {
   };
 }
 
-/**
- * Creates Rollup configuration for the d.ts files with output options.
- * @param {object} options - Configuration options
- * @returns {object} - Complete Rollup configuration object with input and output.
- */
-export function getDtsConfig(options = {}) {
-  const { input = ["./dist/index.js"], outputDir = "./dist" } = options;
-
-  return {
-    name: "DTS",
-    config: {
-      input,
-      output: {
-        format: "esm",
-        dir: outputDir,
-        entryFileNames: "[name].d.ts",
-      },
-      plugins: [dts()],
-    },
-  };
-}
-
 /**
  * Creates Rollup configuration for watch mode.
  * @param {boolean|object} watchOptions - Whether to enable watch mode or watch options

src/scripts/build/index.js

@@ -2,13 +2,11 @@ import terser from "@rollup/plugin-terser";
 import { watch } from "rollup";
 import {
   buildCombinedBundle,
-  buildTypeDefinitions,
   cleanupDist,
   generateDocs,
 } from "./bundleHandlers.js";
 import {
   getDemoConfig,
-  getDtsConfig,
   getMainBundleConfig,
 } from "./configUtils.js";
 import { startDevelopmentServer } from "./devServerUtils.js";
@@ -25,7 +23,6 @@ import {
 async function runProductionBuild(options) {
   const mainBundleConfig = getMainBundleConfig(options);
   const demoConfig = getDemoConfig(options);
-  const dtsConfig = getDtsConfig();
 
   // Add terser for minification in production
   mainBundleConfig.config.plugins.push(terser());
@@ -35,9 +32,6 @@ async function runProductionBuild(options) {
 
   // Build main and demo bundles
   await buildCombinedBundle(mainBundleConfig.config, demoConfig.config);
-
-  // Build TypeScript definitions
-  await buildTypeDefinitions(dtsConfig.config, dtsConfig.config.output);
 }
 
 /**

src/scripts/build/watchModeHandlers.js

@@ -3,14 +3,12 @@ import ora from "ora";
 import { rollup } from "rollup";
 import { analyzeComponents } from "#scripts/analyze.js";
 import { generateDocs } from "./bundleHandlers.js";
-import { getDtsConfig } from "./configUtils.js";
 
 // Track if any build is in progress to prevent overlapping operations
 let buildInProgress = false;
 
 // Track build states and times in a single object for cleaner management
 const builds = {
-  dts: { active: false, lastTime: 0 },
   analyze: { active: false, lastTime: 0 },
   docs: { active: false, lastTime: 0 },
 };
@@ -52,7 +50,7 @@ function isOutputFile(filePath) {
 
 /**
  * Runs a build task with proper tracking of state
- * @param {string} taskName - Type of task (dts, analyze, docs)
+ * @param {string} taskName - Type of task (analyze, docs)
  * @param {Function} taskFn - The actual task function to run
  * @returns {Promise<boolean>} - Success status
  */
@@ -90,7 +88,7 @@ export async function handleWatcherEvents(
   // Track if this is the first build
   let isInitialBuild = true;
   // biome-ignore lint/style/useConst: This is an object that is mutated.
-  let buildTasksResults = { dts: false, analyze: false, docs: false };
+  let buildTasksResults = {analyze: false, docs: false };
   let scheduledTasksTimer = null;
   let bundleSpinner;
 
@@ -99,22 +97,6 @@ export async function handleWatcherEvents(
 
   // The actual task functions
   const buildTasks = {
-    // Function to build d.ts files
-    dts: async () => {
-      const dtsSpinner = ora("Crafting type definitions...").start();
-      try {
-        const create_dts = await rollup(getDtsConfig().config);
-        await create_dts.write(getDtsConfig().config.output);
-        await create_dts.close();
-        dtsSpinner.succeed("Type files built.");
-        return true;
-      } catch (error) {
-        dtsSpinner.fail("Types trouble! Build failed.");
-        console.error("TypeScript definition build error:", error);
-        return false;
-      }
-    },
-
     // Function to analyze components
     analyze: async () => {
       const { wcaInput: sourceFiles, wcaOutput: outFile, skipDocs } = options;
@@ -172,7 +154,6 @@ export async function handleWatcherEvents(
   const checkInitialBuildComplete = () => {
     if (
       isInitialBuild &&
-      buildTasksResults.dts &&
       buildTasksResults.analyze &&
       buildTasksResults.docs &&
       typeof onInitialBuildComplete === "function"
@@ -190,7 +171,6 @@ export async function handleWatcherEvents(
 
     scheduledTasksTimer = setTimeout(async () => {
       // Run tasks with delays between them to avoid race conditions
-      buildTasksResults.dts = await runBuildTask("dts", buildTasks.dts);
 
       setTimeout(async () => {
         buildTasksResults.analyze = await runBuildTask(

src/scripts/docs/docs-generator.ts

@@ -258,14 +258,27 @@ export default class Docs {
     }
 
     const headers = ["Properties", "Attributes", "Modifiers", "Type", "Default", "Description"];
-    const rows = mergedData.map((item: MergedTableData) => [
-      escapeMarkdown(item.properties),
-      escapeMarkdown(item.attributes),
-      escapeMarkdown(item.modifiers),
-      escapeMarkdown(item.type),
-      escapeMarkdown(item.default),
-      escapeMarkdown(item.description),
-    ]);
+    const rows = mergedData.map((item: MergedTableData) => {
+      const defaultRaw = item.default || "";
+      const defaultTrimmed = defaultRaw.trim();
+      // Remove surrounding single quotes from default values like 'foo'
+      const defaultSanitized = defaultTrimmed.replace(/^'([^']+)'$/, "$1");
+      // Remove surrounding double quotes from default values like "foo"
+      const defaultDoubleSanitized = defaultSanitized.replace(/^"([^"]+)"$/, "$1");
+      const defaultWrapped = defaultDoubleSanitized
+        ? (defaultDoubleSanitized.startsWith('`') && defaultDoubleSanitized.endsWith('`')
+            ? defaultDoubleSanitized
+            : `\`${defaultDoubleSanitized}\``)
+        : "";
+      return [
+        escapeMarkdown(item.properties),
+        escapeMarkdown(item.attributes),
+        escapeMarkdown(item.modifiers),
+        escapeMarkdown(item.type),
+        escapeMarkdown(defaultWrapped),
+        escapeMarkdown(item.description),
+      ];
+    });
 
     const table = markdownTable([headers, ...rows]);
 
@@ -364,14 +377,23 @@ ${table}
 
     const { type } = obj;
 
+    // Utility to normalize type text: fix union spacing and replace single quotes with backticks
+    const normalizeType = (text: string): string => {
+      return text
+        // Normalize union separators to have spaces around |
+        .replace(/\s*\|\s*/g, ' | ')
+        // Replace any single-quoted type segments with backticks
+        .replace(/'([^']+)'/g, '`$1`');
+    };
+
     // Handle simple string type
     if (typeof type === 'string') {
-      return type.replace(/\s*\|\s*/g, ' | ');
+      return normalizeType(type);
     }
 
     // Handle type with text property
     if (type.text) {
-      return type.text.replace(/\s*\|\s*/g, ' | ');
+      return normalizeType(type.text);
     }
 
     // Handle union types or arrays of types
@@ -387,7 +409,7 @@ ${table}
 
     // Handle complex type objects
     if (type.name) {
-      return type.name.replace(/\s*\|\s*/g, ' | ');
+      return normalizeType(type.name);
     }
 
     // Handle references
@@ -398,9 +420,7 @@ ${table}
 
     // Fallback to string representation
     const result = String(type);
-
-    // Normalize all | separators to have spaces
-    return result.replace(/\s*\|\s*/g, ' | ');
+    return normalizeType(result);
   }
 
   /**