chore: remove cjs exports and improve typescript performance (#472)

* add explicit return types for public apis

* remove ifDefined

* remove cjs exports

* remove redundant files

Author: mimshins

.changeset/chatty-actors-repair.md

@@ -0,0 +1,11 @@
+---
+"@tapsioss/react-components": minor
+"@tapsioss/web-components": minor
+"@tapsioss/react-icons": minor
+"@tapsioss/web-icons": minor
+"@tapsioss/icons": minor
+"@tapsioss/theme": minor
+---
+
+Remove cjs exports
+  

.changeset/hot-eggs-brake.md

@@ -1,6 +1,8 @@
+import type { Theme } from "vitepress";
 import defaultTheme from "vitepress/theme";
+
 import "./custom.css";
 
-export default {
-  extends: defaultTheme,
-};
+const theme: Theme = { extends: defaultTheme };
+
+export default theme;

docs/.vitepress/theme/index.ts

@@ -1,5 +1,6 @@
 import fs from "node:fs";
 import path from "node:path";
+import { type ResolvedRouteConfig } from "vitepress";
 import { getFileMeta } from "../../scripts/utils.ts";
 import {
   type ComponentMetadata,
@@ -26,7 +27,9 @@ const metadata = JSON.parse(
 
 packagesMetadata = metadata.package;
 
-export default {
+const routeConfig: {
+  paths(): Pick<ResolvedRouteConfig, "content" | "params">[];
+} = {
   paths() {
     return Object.values(metadata.components).map(c => {
       let content = "";
@@ -43,6 +46,8 @@ export default {
   },
 };
 
+export default routeConfig;
+
 const getPageMarkdown = (component: ComponentMetadata) => {
   let res = "\n";
 

docs/components/[component].paths.ts

@@ -1,7 +1,14 @@
 import icons from "@tapsioss/icons";
 import * as scrollLock from "body-scroll-lock";
 import { createFocusTrap, type FocusTrap } from "focus-trap";
-import { html, LitElement, nothing, svg, type PropertyValues } from "lit";
+import {
+  html,
+  LitElement,
+  nothing,
+  svg,
+  type PropertyValues,
+  type TemplateResult,
+} from "lit";
 import { customElement, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
@@ -28,7 +35,7 @@ type SVGIconInfo = {
 
 @customElement("doc-icon-grid")
 export class DocIconGrid extends LitElement {
-  protected override createRenderRoot() {
+  protected override createRenderRoot(): HTMLElement | DocumentFragment {
     return this;
   }
 
@@ -54,7 +61,7 @@ export class DocIconGrid extends LitElement {
     return inputString.toLowerCase().replace(/-/g, "").replace(/_/g, "");
   }
 
-  public override disconnectedCallback() {
+  public override disconnectedCallback(): void {
     super.disconnectedCallback();
 
     scrollLock.enableBodyScroll(this._iconModal);
@@ -65,8 +72,8 @@ export class DocIconGrid extends LitElement {
     window.removeEventListener("keydown", this._handleEscapeKey);
   }
 
-  protected override firstUpdated(_changedProperties: PropertyValues) {
-    super.firstUpdated(_changedProperties);
+  protected override firstUpdated(changed: PropertyValues): void {
+    super.firstUpdated(changed);
 
     this._focusTrapper = createFocusTrap(this._iconModal, {
       clickOutsideDeactivates: true,
@@ -275,7 +282,7 @@ export class DocIconGrid extends LitElement {
     return html`<div>No icon was found for "${this._searchString}"!</div>`;
   }
 
-  protected override render() {
+  protected override render(): TemplateResult {
     return html`
       ${this._renderModal()}${this._renderSearchbar()}
       <div id="icons-grid">${this._renderIcons()}</div>

docs/internals/components/DocIconGrid.ts

@@ -12,54 +12,52 @@ const metadataFile = path.join(
   "packages/web-components/metadata.json",
 );
 
-const getSidebarItems = (): DefaultTheme.Sidebar => {
-  const metadata = JSON.parse(
-    fs.readFileSync(metadataFile).toString("utf-8"),
-  ) as Metadata;
-
-  const components = Object.values(metadata.components)
-    .sort((a, b) => a.name.localeCompare(b.name))
-    .map(c => ({
-      text: c.titleCaseName,
-      link: `/components/${c.relativePath}`,
-    }));
-
-  const componentsSidebar = [
-    {
-      text: "Introduction",
-      link: "/components",
-      items: components,
-    },
-  ];
-
-  const themeSidebar = [
-    {
-      text: "Introduction",
-      link: "/theme",
-      items: [
-        { text: "Color", link: "/theme/color" },
-        { text: "Palette", link: "/theme/palette" },
-        { text: "Radius", link: "/theme/radius" },
-        { text: "Spacing", link: "/theme/spacing" },
-        { text: "Stroke", link: "/theme/stroke" },
-        { text: "Typography", link: "/theme/typography" },
-      ],
-    },
-  ];
-
-  const iconsSidebar = [
-    {
-      text: "Introduction",
-      link: "/icons",
-      items: [{ text: "Explore Icons", link: "/icons/explore" }],
-    },
-  ];
-
-  return {
-    "/components": componentsSidebar,
-    "/theme": themeSidebar,
-    "/icons": iconsSidebar,
-  };
+const metadata = JSON.parse(
+  fs.readFileSync(metadataFile).toString("utf-8"),
+) as Metadata;
+
+const components = Object.values(metadata.components)
+  .sort((a, b) => a.name.localeCompare(b.name))
+  .map(c => ({
+    text: c.titleCaseName,
+    link: `/components/${c.relativePath}`,
+  }));
+
+const componentsSidebar = [
+  {
+    text: "Introduction",
+    link: "/components",
+    items: components,
+  },
+];
+
+const themeSidebar = [
+  {
+    text: "Introduction",
+    link: "/theme",
+    items: [
+      { text: "Color", link: "/theme/color" },
+      { text: "Palette", link: "/theme/palette" },
+      { text: "Radius", link: "/theme/radius" },
+      { text: "Spacing", link: "/theme/spacing" },
+      { text: "Stroke", link: "/theme/stroke" },
+      { text: "Typography", link: "/theme/typography" },
+    ],
+  },
+];
+
+const iconsSidebar = [
+  {
+    text: "Introduction",
+    link: "/icons",
+    items: [{ text: "Explore Icons", link: "/icons/explore" }],
+  },
+];
+
+const items: DefaultTheme.Sidebar = {
+  "/components": componentsSidebar,
+  "/theme": themeSidebar,
+  "/icons": iconsSidebar,
 };
 
-export default getSidebarItems();
+export default items;

docs/sidebar.ts

@@ -12,17 +12,19 @@ export const tabulateData = (headers: string[], data: string[][]): string => {
 
 export const codify = (inputString: string) => `\`${inputString}\``;
 
-export const getFormattedTagUsageString = (tagName?: string) => {
+export const getFormattedTagUsageString = (tagName?: string): string => {
   if (!tagName) return "";
   return `<pre>&lt;<span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">${tagName}</span>&gt;&lt;/<span style="--shiki-light:#22863A;--shiki-dark:#85E89D;">${tagName}</span>&gt;</pre>`;
 };
 
-export const getFormattedImportUsageString = (path?: string) => {
+export const getFormattedImportUsageString = (path?: string): string => {
   if (!path) return "";
   return `<pre><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span> <span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">"${path}"</span>;</pre>`;
 };
 
-export const getUsageSectionMarkdown = (sections: [string, string?][]) => {
+export const getUsageSectionMarkdown = (
+  sections: [string, string?][],
+): string => {
   let res = "";
 
   if (sections.length === 0) return res;

docs/utils/markdown.ts

@@ -1,9 +1,9 @@
-import { defineConfig } from "vitepress";
+import { defineConfig, type DefaultTheme, type UserConfig } from "vitepress";
 import nav from "./nav.ts";
 import sidebar from "./sidebar.ts";
 import socialLinks from "./social-links.ts";
 
-export default defineConfig({
+const config: UserConfig<DefaultTheme.Config> = defineConfig({
   title: "Tapsi Design System",
   description: "A set of components based on Tapsi design system.",
   base: "/web-components/",
@@ -41,3 +41,5 @@ export default defineConfig({
     "components/index.md": "components.md",
   },
 });
+
+export default config;

docs/vitepress.config.ts

@@ -1,6 +1,6 @@
 {
   "name": "@internals/danger",
-  "main": "index.ts",
+  "main": "src/index.ts",
   "version": "0.0.0",
   "private": true,
   "type": "module"

internals/danger/package.json

@@ -59,28 +59,28 @@ class DangerClient {
     return `[^${++this.footnoteString}]`;
   }
 
-  public failWithFootnote(content: string, footnote: string) {
+  public failWithFootnote(content: string, footnote: string): void {
     const footnoteString = this.getFootnoteString();
 
     this.fail(`${content} ${footnoteString}`);
     this.markdown(`${footnoteString}: ${footnote}`);
   }
 
-  public warnWithFootnote(content: string, footnote: string) {
+  public warnWithFootnote(content: string, footnote: string): void {
     const footnoteString = this.getFootnoteString();
 
     this.warn(`${content} ${footnoteString}`);
     this.markdown(`${footnoteString}: ${footnote}`);
   }
 
-  public markdownWithFootnote(content: string, footnote: string) {
+  public markdownWithFootnote(content: string, footnote: string): void {
     const footnoteString = this.getFootnoteString();
 
     this.markdown(`${content} ${footnoteString}`);
     this.markdown(`${footnoteString}: ${footnote}`);
   }
 
-  public messageWithFootnote(content: string, footnote: string) {
+  public messageWithFootnote(content: string, footnote: string): void {
     const footnoteString = this.getFootnoteString();
 
     this.message(`${content} ${footnoteString}`);

internals/danger/DangerClient.ts renamed to internals/danger/src/DangerClient.ts

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "module": "ES2020",
+    "resolvePackageJsonExports": false
+  },
+  "include": ["src"]
+}

internals/danger/index.ts renamed to internals/danger/src/index.ts

@@ -1,6 +1,6 @@
 {
   "name": "@internals/test-helpers",
-  "main": "index.ts",
+  "main": "src/index.ts",
   "version": "0.0.0",
   "private": true,
   "type": "module"

internals/danger/plugins/checkLockFile.ts renamed to internals/danger/src/plugins/checkLockFile.ts

@@ -1,4 +1,9 @@
-const createPromiseResolvers = <T = void>() => {
+const createPromiseResolvers = <T = void>(): {
+  readonly promise: Promise<T>;
+  readonly resolve: (value: T | PromiseLike<T>) => void;
+  readonly reject: (reason?: unknown) => void;
+  renew: () => void;
+} => {
   const noop = () => void 0;
 
   let _resolve: (value: T | PromiseLike<T>) => void = noop;
@@ -12,18 +17,18 @@ const createPromiseResolvers = <T = void>() => {
 
   let _promise = createPromise();
 
-  const renew = () => {
+  const renew = (): void => {
     _promise = createPromise();
   };
 
   return {
-    get promise() {
+    get promise(): Promise<T> {
       return _promise;
     },
-    get resolve() {
+    get resolve(): (value: T | PromiseLike<T>) => void {
       return _resolve;
     },
-    get reject() {
+    get reject(): (reason?: unknown) => void {
       return _reject;
     },
     renew,

internals/danger/plugins/checkPlayground.ts renamed to internals/danger/src/plugins/checkPlayground.ts

@@ -3,7 +3,7 @@ import { type Locator } from "@playwright/test";
 export const forEachLocator = async (
   locators: Locator[],
   callback: (locator: Locator, index: number) => void | Promise<void>,
-) => {
+): Promise<void> => {
   for (const [index, locator] of locators.entries()) {
     await callback(locator, index);
   }

internals/danger/plugins/index.ts renamed to internals/danger/src/plugins/index.ts

@@ -0,0 +1,12 @@
+import type { ElementHandle, JSHandle, Page } from "@playwright/test";
+
+export const windowHandle = (
+  page: Page,
+): Promise<JSHandle<Window & typeof globalThis>> =>
+  page.evaluateHandle(() => window);
+
+export const documentHandle = (page: Page): Promise<ElementHandle<Document>> =>
+  page.evaluateHandle(() => document);
+
+export const bodyHandle = (page: Page): Promise<ElementHandle<HTMLElement>> =>
+  page.evaluateHandle(() => document.body);