Fixed typescript and svelte check step

kashishbehl · kashishbehl · commit 5dce0a2df4c9 · 2026-01-08T17:37:45.000+05:30
diff --git a/.github/workflows/blade-validate.yml b/.github/workflows/blade-validate.yml
@@ -34,24 +34,16 @@ jobs:
       - name: Build Blade Svelte
         run: yarn build
         working-directory: packages/blade-svelte
-      - name: Lint Blade
-        run: yarn lint:blade
-      - name: Lint Blade Core
-        run: yarn lint:blade-core
-      - name: Lint Blade Svelte
-        run: yarn lint:blade-svelte
-      - name: Lint ESLint Plugin
-        run: yarn lint:eslint-plugin
-      - name: Lint Stylelint
-        run: yarn lint:stylelint
+      - name: Lint Source Code
+        run: yarn lint
       - name: Run TypeScript Checks (Blade)
         run: yarn typecheck
         working-directory: packages/blade
       - name: Run TypeScript Checks (Blade Core)
         run: yarn typecheck
         working-directory: packages/blade-core
       - name: Run Svelte Checks (Blade Svelte)
-        run: yarn check
+        run: yarn svelte-check
         working-directory: packages/blade-svelte
 
   test:
diff --git a/packages/blade-core/tsconfig.json b/packages/blade-core/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig.json",
   "include": ["src", "src/@types"],
+  "exclude": ["**/*.native.ts", "**/*.native.tsx", "src/tokens/theme/__tests__"],
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
diff --git a/packages/blade-svelte/package.json b/packages/blade-svelte/package.json
@@ -41,8 +41,8 @@
     "build:clean": "rm -rf dist",
     "build:generate-types": "tsc -p ./tsconfig-generate-types.json",
     "build:lib": "rollup -c",
-    "check": "svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "svelte-check": "svelte-check --tsconfig ./tsconfig.json",
+    "svelte-check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build -o storybook-static"
   },
diff --git a/packages/blade-svelte/src/App.svelte b/packages/blade-svelte/src/App.svelte
@@ -10,10 +10,6 @@
   let isLoading = $state(false);
   let isLoading2 = $state(false);
   
-  function handleClick(): void {
-    alert('Button clicked!')
-  }
-
   function handleLinkClick(event: MouseEvent): void {
     console.log('Link clicked!', event)
   }
diff --git a/packages/blade-svelte/src/components/Amount/Amount.svelte b/packages/blade-svelte/src/components/Amount/Amount.svelte
@@ -22,8 +22,8 @@
 <BaseAmount
   {value}
   {suffix}
-  {type}
-  {size}
+  type={type as 'body'}
+  size={size as 'medium'}
   {weight}
   {isAffixSubtle}
   {isStrikethrough}
diff --git a/packages/blade-svelte/src/components/Button/BaseButton/BaseButton.svelte b/packages/blade-svelte/src/components/Button/BaseButton/BaseButton.svelte
@@ -1,9 +1,10 @@
 <script lang="ts">
-  import { makeAccessible, makeAnalyticsAttribute, metaAttribute, MetaConstants } from '@razorpay/blade-core/utils';
+  import { makeAccessible, makeAnalyticsAttribute, metaAttribute, MetaConstants, type AriaRoles } from '@razorpay/blade-core/utils';
   import { useInteraction } from '../../../utils/useInteraction';
   import BaseText from '../../Typography/BaseText/BaseText.svelte';
   import BaseSpinner from '../../Spinner/BaseSpinner/BaseSpinner.svelte';
   import type { BaseButtonProps } from './types';
+  import type { TextColors } from '../../Typography/BaseText/types';
   import { getStyledPropsClasses } from '@razorpay/blade-core/utils';
   import {
     getButtonClasses,
@@ -112,19 +113,19 @@
   const textSizes = getButtonTextSizes();
 
   // Compute text color token reactively
-  const textColorToken = $derived.by(() => {
+  const textColorToken = $derived.by((): TextColors => {
     return getButtonTextColorToken({
       variant,
       color,
       state: currentInteraction,
       property: 'text',
-    });
+    }) as TextColors;
   });
 
   // Compute icon color token reactively
   // Note: Currently unused but will be needed when Icon component is implemented
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  const iconColorToken = $derived(
+  // @ts-ignore - intentionally unused until Icon component is implemented
+  const _iconColorToken = $derived(
     getButtonTextColorToken({
       variant,
       color,
@@ -216,7 +217,7 @@
   // Accessibility attributes
   const accessibilityAttrs = $derived(
     makeAccessible({
-      role: accessibilityProps?.role ?? buttonRole,
+      role: (accessibilityProps?.role ?? buttonRole) as AriaRoles,
       disabled: isButtonDisabled,
       label: accessibilityProps?.label,
       describedBy: accessibilityProps?.describedBy,
diff --git a/packages/blade-svelte/src/components/Button/types.ts b/packages/blade-svelte/src/components/Button/types.ts
@@ -57,4 +57,20 @@ export type ButtonProps = BaseButtonProps & {
    * Function called when the button is clicked
    */
   onClick?: (event: MouseEvent) => void;
+  /**
+   * Accessibility role for the button
+   */
+  role?: string;
+  /**
+   * aria-describedby attribute
+   */
+  'aria-describedby'?: string;
+  /**
+   * aria-expanded attribute
+   */
+  'aria-expanded'?: boolean;
+  /**
+   * aria-haspopup attribute
+   */
+  'aria-haspopup'?: 'menu' | boolean;
 } & StyledPropsBlade;
diff --git a/packages/blade-svelte/src/components/Link/BaseLink/BaseLink.svelte b/packages/blade-svelte/src/components/Link/BaseLink/BaseLink.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { makeAccessible, makeAnalyticsAttribute, metaAttribute, MetaConstants } from '@razorpay/blade-core/utils';
+  import { makeAccessible, makeAnalyticsAttribute, metaAttribute, MetaConstants, type AriaRoles } from '@razorpay/blade-core/utils';
   import { useInteraction } from '../../../utils/useInteraction';
   import BaseText from '../../Typography/BaseText/BaseText.svelte';
+  import type { TextColors } from '../../Typography/BaseText/types';
   import type { StyledPropsBlade } from '@razorpay/blade-core/utils';
   import { getStyledPropsClasses } from '@razorpay/blade-core/utils';
   import { getBaseLinkClasses, getBaseLinkTemplateClasses, getLinkColorToken, getLinkTextSizes, type ActionStatesType } from '@razorpay/blade-core/styles';
@@ -136,7 +137,7 @@
         element: 'text',
         currentInteraction: currentInteraction as ActionStatesType,
         isDisabled,
-      }),
+      }) as TextColors,
       fontSize: textSizes.fontSize[size],
       lineHeight: textSizes.lineHeight[size],
       
@@ -184,7 +185,7 @@
   // Accessibility attributes
   const accessibilityAttrs = $derived(
     makeAccessible({
-      role: elementRole,
+      role: elementRole as AriaRoles,
       disabled: isElementDisabled,
       ...accessibilityProps,
     }),
@@ -297,7 +298,7 @@
         lineHeight={lineHeight}
         fontFamily="text"
         fontWeight="medium"
-        textDecorationLine={textDecorationLine}
+        textDecorationLine={textDecorationLine as 'none' | 'line-through' | 'underline'}
         componentName={MetaConstants.Link}
       >
         {#if typeof children === 'string'}
diff --git a/packages/blade-svelte/src/components/Typography/BaseText/BaseText.svelte b/packages/blade-svelte/src/components/Typography/BaseText/BaseText.svelte
@@ -39,7 +39,7 @@
       fontSize,
       lineHeight,
       fontWeight,
-      fontFamily,
+      fontFamily: fontFamily as 'text' | 'heading' | undefined,
       fontStyle,
       textDecorationLine,
       textAlign,
diff --git a/packages/blade-svelte/src/components/Typography/BaseText/types.ts b/packages/blade-svelte/src/components/Typography/BaseText/types.ts
@@ -66,7 +66,16 @@ export type BaseTextProps = {
    * React Native only - not applicable for Svelte but kept for API consistency
    */
   numberOfLines?: number;
-  componentName?: 'base-text' | 'text' | 'title' | 'heading' | 'code' | 'display';
+  componentName?:
+    | 'base-text'
+    | 'text'
+    | 'title'
+    | 'heading'
+    | 'code'
+    | 'display'
+    | 'button'
+    | 'spinner'
+    | 'link';
   testID?: string;
   // Analytics attributes
   [key: `data-analytics-${string}`]: string;
diff --git a/packages/blade-svelte/src/components/Typography/Code/Code.svelte b/packages/blade-svelte/src/components/Typography/Code/Code.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import BaseText from '../BaseText/BaseText.svelte';
   import type { CodeProps } from './types';
+  import type { TextColors } from '../BaseText/types';
   import { metaAttribute, MetaConstants } from '@razorpay/blade-core/utils';
   import { getStyledPropsClasses } from '@razorpay/blade-core/utils';
   import { getCodeClasses, getCodeFontSizeAndLineHeight, getCodeColor } from '@razorpay/blade-core/styles';
@@ -33,7 +34,7 @@
   });
 
   const { fontSize, lineHeight } = $derived(getCodeFontSizeAndLineHeight(finalSize));
-  const codeTextColor = $derived(getCodeColor({ isHighlighted: finalIsHighlighted, color }));
+  const codeTextColor = $derived(getCodeColor({ isHighlighted: finalIsHighlighted, color }) as TextColors);
 
   // Extract styled props and convert to classes
   // This ensures everything is class-based with no inline styles
diff --git a/packages/blade-svelte/src/components/Typography/Heading/Heading.svelte b/packages/blade-svelte/src/components/Typography/Heading/Heading.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import BaseText from '../BaseText/BaseText.svelte';
   import type { HeadingProps } from './types';
+  import type { TextColors, BaseTextProps } from '../BaseText/types';
   import { getHeadingProps, validHeadingAsValues } from '@razorpay/blade-core/styles';
 
   let {
@@ -20,7 +21,7 @@
   // Set defaults - use $derived for reactivity when props change
   const finalSize = $derived((size ?? 'small') as 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge');
   const finalWeight = $derived((weight ?? 'semibold') as 'regular' | 'medium' | 'semibold');
-  const finalColor = $derived(color ?? 'surface.text.gray.normal');
+  const finalColor = $derived((color ?? 'surface.text.gray.normal') as TextColors);
 
   // Validate as prop in development
   $effect(() => {
@@ -56,7 +57,7 @@
   });
 </script>
 
-<BaseText {...mergedProps}>
+<BaseText {...(mergedProps as unknown as Omit<BaseTextProps, 'children'>)}>
   {#if typeof children === 'string'}
     {children}
   {:else}
diff --git a/packages/blade-svelte/src/components/Typography/Text/Text.svelte b/packages/blade-svelte/src/components/Typography/Text/Text.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import BaseText from '../BaseText/BaseText.svelte';
   import type { TextBodyVariant, TextCaptionVariant } from './types';
-  import type { Snippet } from 'svelte';
+  import type { BaseTextProps } from '../BaseText/types';
+  import type { TextAs } from '@razorpay/blade-core/styles';
   import { getTextProps, validTextAsValues } from '@razorpay/blade-core/styles';
 
   type TextComponentProps = (TextBodyVariant | TextCaptionVariant) & {
@@ -10,7 +11,7 @@
   };
 
   let {
-    as = 'p',
+    as = 'p' as TextAs,
     variant = 'body',
     weight,
     size,
@@ -32,9 +33,9 @@
   // Validate as prop in development
   $effect(() => {
     if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-      if (as && !validTextAsValues.includes(as)) {
+      if (as && !validTextAsValues.includes(as as TextAs)) {
         console.error(
-          `[Blade: Text]: Invalid \`as\` prop value - ${as}. Only ${validTextAsValues.join(', ')} are accepted`,
+          `[Blade: Text]: Invalid \`as\` prop value - ${String(as)}. Only ${validTextAsValues.join(', ')} are accepted`,
         );
       }
     }
@@ -65,7 +66,7 @@
   });
 </script>
 
-<BaseText {...mergedProps}>
+<BaseText {...(mergedProps as unknown as Omit<BaseTextProps, 'children'>)}>
   {#if typeof children === 'string'}
     {children}
   {:else}
diff --git a/packages/blade-svelte/src/components/Typography/Text/types.ts b/packages/blade-svelte/src/components/Typography/Text/types.ts
@@ -1,12 +1,12 @@
 import type { Snippet } from 'svelte';
-import type { validTextAsValues } from '@razorpay/blade-core/styles';
+import type { TextAs } from '@razorpay/blade-core/styles';
 import type { StyledPropsBlade } from '@razorpay/blade-core/utils';
 import type { BaseTextProps, BaseTextSizes } from '../BaseText/types';
 
 export type TextVariant = 'body' | 'caption';
 
 type TextCommonProps = {
-  as?: keyof typeof validTextAsValues;
+  as?: TextAs;
   truncateAfterLines?: number;
   children: Snippet | string;
   weight?: Extract<BaseTextProps['fontWeight'], 'regular' | 'medium' | 'semibold'>;
diff --git a/packages/blade-svelte/tsconfig.json b/packages/blade-svelte/tsconfig.json
@@ -9,6 +9,8 @@
       "~src/*": ["src/*"]
     },
     "moduleSuffixes": [""],
-    "types": ["svelte"]
+    "types": ["svelte"],
+    "verbatimModuleSyntax": true,
+    "moduleResolution": "bundler"
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"extends": "../../tsconfig.json",`
`3`	`3`	`"include": ["src", "src/@types"],`
	`4`	`+ "exclude": ["*/.native.ts", "*/.native.tsx", "src/tokens/theme/__tests__"],`
`4`	`5`	`"compilerOptions": {`
`5`	`6`	`"baseUrl": ".",`
`6`	`7`	`"paths": {`