Merge branch 'main' into line_wrap

Author: Ruben Carvalho

package-lock.json

@@ -20,10 +20,10 @@
     "preview": "vite preview",
     "start": "run-p start:server start:watch:ts start:watch:css",
     "start:server": "vite",
-    "start:watch:ts": "tsc --watch",
+    "start:watch:ts": "npm run build:src:js -- --watch",
     "start:watch:css": "chokidar \"./src/**/*.scss\" -c \"npm run build:src:css\"",
     "build:pkg": "node scripts/package-json.js",
-    "build:src:js": "tsc -p tsconfig.json",
+    "build:src:js": "tsc -p tsconfig.json --inlineSources --sourceMap",
     "build:src:css": "node scripts/compile-styles.js",
     "build:src:test-utils": "node scripts/test-utils.js",
     "build:src:copy": "cp README.md lib/components/",
@@ -45,7 +45,6 @@
     "./highlight/java": "./code-view/highlight/java.js",
     "./highlight/javascript": "./code-view/highlight/javascript.js",
     "./highlight/json": "./code-view/highlight/json.js",
-    "./highlight/jsx": "./code-view/highlight/jsx.js",
     "./highlight/kotlin": "./code-view/highlight/kotlin.js",
     "./highlight/markdown": "./code-view/highlight/markdown.js",
     "./highlight/php": "./code-view/highlight/php.js",

package.json

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

scripts/test-utils.js

@@ -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/__tests__/base-props-support.test.tsx

@@ -8,7 +8,9 @@ import { InternalCodeView } from "./internal";
 export type { CodeViewProps };
 
 export default function CodeView(props: CodeViewProps) {
-  const baseComponentProps = useBaseComponent("CodeView");
+  const baseComponentProps = useBaseComponent("CodeView", {
+    props: { lineNumbers: props.lineNumbers },
+  });
   return <InternalCodeView {...props} {...baseComponentProps} />;
 }
 

src/code-view/highlight/jsx.ts

@@ -1,7 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { initAwsUiVersions, useComponentMetadata } from "@cloudscape-design/component-toolkit/internal";
+import {
+  ComponentConfiguration,
+  initAwsUiVersions,
+  useComponentMetadata,
+} from "@cloudscape-design/component-toolkit/internal";
 import { MutableRefObject } from "react";
 import { PACKAGE_SOURCE, PACKAGE_VERSION } from "../environment";
 import { useTelemetry } from "./use-telemetry";
@@ -17,34 +21,24 @@ export interface InternalBaseComponentProps {
  * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
  * root DOM node and emits the telemetry for this component.
  */
-export default function useBaseComponent<T = any>(componentName: string) {
-  useTelemetry(componentName);
+export default function useBaseComponent<T = any>(componentName: string, config?: ComponentConfiguration) {
+  useTelemetry(componentName, config);
   const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);
   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/code-view/index.tsx

@@ -1,11 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { useComponentMetrics } from "@cloudscape-design/component-toolkit/internal";
+import { ComponentConfiguration, useComponentMetrics } from "@cloudscape-design/component-toolkit/internal";
 import { PACKAGE_SOURCE, PACKAGE_VERSION, THEME } from "../environment";
 import { useVisualRefresh } from "./use-visual-refresh";
 
-export function useTelemetry(componentName: string) {
+export function useTelemetry(componentName: string, config?: ComponentConfiguration) {
   const theme = useVisualRefresh() ? "vr" : THEME;
-  useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme });
+  useComponentMetrics(componentName, { packageSource: PACKAGE_SOURCE, packageVersion: PACKAGE_VERSION, theme }, config);
 }

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

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