chore: Update base-component handling (#25)

Author: just-boris

scripts/test-utils.js

@@ -81,5 +81,5 @@ function generateIndexFileContent({ testUtilType, buildFinderInterface }) {
 
 function compileTypescript() {
   const config = path.resolve("src/test-utils/tsconfig.json");
-  execaSync("tsc", ["-p", config, "--sourceMap"], { stdio: "inherit" });
+  execaSync("tsc", ["-p", config, "--sourceMap", "--inlineSources"], { stdio: "inherit" });
 }

src/__tests__/base-props-support.test.tsx

@@ -19,9 +19,9 @@ describe(`base props support for code-view`, async () => {
     expect(container.firstElementChild).toHaveAttribute("data-testid", "example");
   });
 
-  test("should allow id", () => {
+  test("should not allow id", () => {
     const { container } = renderComponent(<Component {...props} id="example" />);
-    expect(container.querySelector("#example")).not.toBeNull();
+    expect(container.querySelector("#example")).toBeNull();
   });
 
   test("should not allow className", () => {

src/internal/base-component/get-data-attributes.ts

@@ -27,28 +27,18 @@ export default function useBaseComponent<T = any>(componentName: string, config?
   return { __internalRootRef: elementRef };
 }
 
-export interface BaseComponentProps {
-  /**
-   * Adds the specified classes to the root element of the component.
-   * @deprecated Custom CSS is not supported. For other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).
-   */
-  className?: string;
-  /**
-   * Adds the specified ID to the root element of the component.
-   * @deprecated Custom CSS is not supported. For other use cases, use [data attributes](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes).
-   */
-  id?: string;
-  // we also support data-* attributes, but they are always implicitly allowed by typescript
-  // http://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking
-  // "Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error"
-}
+// we also support data-* attributes, but they are always implicitly allowed by typescript
+// http://www.typescriptlang.org/docs/handbook/jsx.html#attribute-type-checking
+// "Note: If an attribute name is not a valid JS identifier (like a data-* attribute), it is not considered to be an error"
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface BaseComponentProps {}
 
 export function getBaseProps(props: BaseComponentProps) {
-  const baseProps: Record<string, any> = {};
+  const baseProps: Record<string, string> = {};
   Object.keys(props).forEach((prop) => {
-    if (prop === "id" || prop.match(/^data-/)) {
-      baseProps[prop] = (props as Record<string, any>)[prop];
+    if (prop.startsWith("data-")) {
+      baseProps[prop] = (props as Record<string, string>)[prop];
     }
   });
-  return baseProps as BaseComponentProps;
+  return baseProps;
 }

src/internal/base-component/use-base-component.ts

@@ -17,7 +17,7 @@ export default defineConfig({
       enabled: process.env.CI === "true",
       provider: "istanbul",
       include: ["src/**", "lib/components/**"],
-      exclude: ["**/debug-tools/**", "**/__tests__/**", "**/*.d.ts"],
+      exclude: ["**/__tests__/**", "**/*.d.ts", "**/api-docs/**", "**/test-utils/selectors/**"],
     },
   },
 });