From cef131028e9673508fa9ae43d8fb4e636b9a85a3 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Tue, 4 Mar 2025 19:07:49 +0330 Subject: [PATCH 1/8] feat: marge analyze and metadata generation scripts --- package.json | 7 +-- scripts/generate-cem.ts | 41 -------------- ...-docs-metadata.ts => generate-metadata.ts} | 56 +++++++++++++++++-- 3 files changed, 55 insertions(+), 49 deletions(-) delete mode 100644 scripts/generate-cem.ts rename scripts/{generate-docs-metadata.ts => generate-metadata.ts} (76%) diff --git a/package.json b/package.json index 6b2432cf..89a0d188 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,10 @@ "docs:vitepress:dev": "pnpm --filter docs run dev", "docs:vitepress:build": "pnpm --filter docs run build", "docs:vitepress:preview": "pnpm --filter docs run preview", - "docs:dev": "run-s analyze docs:gen:metadata docs:vitepress:dev", - "docs:build": "run-s analyze docs:gen:metadata docs:vitepress:build", + "docs:dev": "run-s gen:metadata docs:vitepress:dev", + "docs:build": "run-s gen:metadata docs:vitepress:build", "docs:preview": "run-s docs:vitepress:preview", - "docs:gen:metadata": "tsx ./scripts/generate-docs-metadata.ts", - "analyze": "tsx ./scripts/generate-cem.ts" + "gen:metadata": "tsx ./scripts/generate-metadata.ts" }, "devDependencies": { "@custom-elements-manifest/analyzer": "^0.10.2", diff --git a/scripts/generate-cem.ts b/scripts/generate-cem.ts deleted file mode 100644 index 9b75fe91..00000000 --- a/scripts/generate-cem.ts +++ /dev/null @@ -1,41 +0,0 @@ -/* eslint-disable no-console */ -import { exec } from "node:child_process"; -import * as path from "node:path"; -import { cwd } from "node:process"; -import { promisify } from "node:util"; -import { getFileMeta } from "./utils.ts"; - -const { dirname } = getFileMeta(import.meta.url); - -const workspaceDir = path.resolve(dirname, ".."); -const distDir = path.relative(cwd(), path.join(workspaceDir, "dist")); - -const entrypoint = path.resolve(workspaceDir, "./packages/web-components/src"); - -const globs: string[] = [ - `${entrypoint}/**/index.ts`, - `${entrypoint}/**/*/index.ts`, - `!${entrypoint}/utils/**`, - `!${entrypoint}/internals/**`, -]; - -void (async () => { - console.log("🧩 generating custom elements manifest..."); - - const asyncExec = promisify(exec); - - await asyncExec(`shx rm -rf ${distDir}`); - await asyncExec( - [ - "cem", - "analyze", - "--litelement", - "--outdir", - distDir, - globs.map(g => `--globs ${g}`).join(" "), - ].join(" "), - ); - - console.log("✅ custom elements manifest generated."); -})(); -/* eslint-enable no-console */ diff --git a/scripts/generate-docs-metadata.ts b/scripts/generate-metadata.ts similarity index 76% rename from scripts/generate-docs-metadata.ts rename to scripts/generate-metadata.ts index d9e1843d..767b29e5 100644 --- a/scripts/generate-docs-metadata.ts +++ b/scripts/generate-metadata.ts @@ -4,12 +4,17 @@ import { type Declaration, type Package, } from "custom-elements-manifest"; +import { exec } from "node:child_process"; import * as fs from "node:fs"; import * as path from "node:path"; +import { cwd } from "node:process"; +import { promisify } from "node:util"; import { type DefaultTheme } from "vitepress"; import type { Component, ImportPaths } from "../types/docs.ts"; import { getFileMeta } from "./utils.ts"; +const asyncExec = promisify(exec); + const { dirname } = getFileMeta(import.meta.url); const workspaceDir = path.resolve(dirname, ".."); const webComponentsSrcDir = path.join( @@ -19,9 +24,50 @@ const webComponentsSrcDir = path.join( const workspaceDistDir = path.join(workspaceDir, "dist"); const metadataFile = path.join(workspaceDistDir, "components-metadata.json"); -const cemFile = path.join(workspaceDistDir, "custom-elements.json"); -const cem = JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package; +const generateCem = async (): Promise => { + const entrypoint = path.resolve( + workspaceDir, + "./packages/web-components/src", + ); + + const distDir = path.relative(cwd(), path.join(workspaceDir, "dist")); + + const globs: string[] = [ + `${entrypoint}/**/index.ts`, + `${entrypoint}/**/*/index.ts`, + `!${entrypoint}/utils/**`, + `!${entrypoint}/internals/**`, + ]; + + await asyncExec(`shx rm -rf ${distDir}`); + const { stderr: cemAnalyzeStderr, stdout: cemAnalyzeStdout } = + await asyncExec( + [ + "cem", + "analyze", + "--litelement", + "--outdir", + distDir, + globs.map(g => `--globs ${g}`).join(" "), + ].join(" "), + ); + + if (cemAnalyzeStdout) console.log(cemAnalyzeStdout); + if (cemAnalyzeStderr) console.error(cemAnalyzeStderr); + + const cemFile = path.join(workspaceDistDir, "custom-elements.json"); + const cem = JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package; + + const { stderr: cemRmStderr, stdout: cemRmStdout } = await asyncExec( + ["rm", cemFile].join(" "), + ); + + if (cemRmStdout) console.log(cemAnalyzeStdout); + if (cemRmStderr) console.error(cemAnalyzeStderr); + + return cem; +}; const getKebabCaseComponentName = (component: Declaration) => { if (!("tagName" in component) || !component.tagName) return null; @@ -31,8 +77,10 @@ const getKebabCaseComponentName = (component: Declaration) => { return tagName.replace("tapsi-", ""); }; -void (() => { - console.log("🧩 generating docs metadata..."); +void (async () => { + console.log("🧩 generating metadata..."); + + const cem = await generateCem(); const sidebarItemsMap: Record = {}; const components: Component[] = []; From afb10525625e4abaf6ee507e9e4ddf6f7352dcec Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Tue, 4 Mar 2025 19:17:40 +0330 Subject: [PATCH 2/8] feat: update react generation script --- packages/react-components/scripts/generate.ts | 168 +++++++----------- .../react-components/templates/component.txt | 4 +- 2 files changed, 70 insertions(+), 102 deletions(-) diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts index 5517ca91..20603ea5 100644 --- a/packages/react-components/scripts/generate.ts +++ b/packages/react-components/scripts/generate.ts @@ -1,5 +1,4 @@ /* eslint-disable no-console */ -import type { Package } from "custom-elements-manifest"; import Mustache from "mustache"; import { exec } from "node:child_process"; import * as fs from "node:fs"; @@ -10,39 +9,80 @@ import { chain } from "stream-chain"; import Parser from "stream-json/Parser"; import StreamValues from "stream-json/streamers/StreamValues"; import { fileExists, getFileMeta } from "../../../scripts/utils.ts"; +import { type Component, type Metadata } from "../../../types/docs.ts"; const asyncExec = promisify(exec); +const COMPONENT_NAMESPACE = "ComponentNamespace"; +const LIT_REACT_NAMESPACE = "LitReact"; + const { dirname } = getFileMeta(import.meta.url); const packageDir = path.resolve(dirname, ".."); const workspaceDir = path.resolve(packageDir, "../../"); const srcDir = path.join(packageDir, "src"); const templatesDir = path.join(packageDir, "templates"); -const webComponentsSrcDir = path.join( + +const barrelFilePath = path.join(srcDir, "index.ts"); +const metadataGeneratorPath = path.join( workspaceDir, - "packages/web-components/src", + "scripts/generate-metadata.ts", ); -const barrelFilePath = path.join(srcDir, "index.ts"); -const cemGeneratorPath = path.join(workspaceDir, "scripts/generate-cem.ts"); const componentTemplatePath = path.join(templatesDir, "component.txt"); -const cemPath = path.join(workspaceDir, "dist/custom-elements.json"); +const metadataPath = path.join(workspaceDir, "dist/components-metadata.json"); const START_COMMENT = "/* START: AUTO-GENERATED [DO_NOT_REMOVE] */"; const END_COMMENT = "/* END: AUTO-GENERATED [DO_NOT_REMOVE] */"; -const generateImports = ( - elementClass: string, - moduleResolutionRegistryPath: string, -) => { +const getComponentImports = (component: Component) => { return [ - `import { createComponent } from "@lit/react";`, + `import * as ${LIT_REACT_NAMESPACE} from "@lit/react";`, `import * as React from "react";`, - `import { ${elementClass} } from "${moduleResolutionRegistryPath}";`, + `import * as ${COMPONENT_NAMESPACE} from "${component.importPaths.webComponents}";`, ].join("\n"); }; +const getComponentCode = async (component: Component): Promise => { + const componentTemplateStr = await fs.promises.readFile( + componentTemplatePath, + { encoding: "utf-8" }, + ); + + const events = `{ ${ + component.events + ?.map(event => { + const eventName = event.name; + const eventClass = event.type.text; + + const eventNameInReact = [ + `on`, + String(eventName).charAt(0).toUpperCase() + + String(eventName).slice(1), + ].join(""); + + if (eventClass === "Event") { + return `${eventNameInReact}: '${eventName}'`; + } + + return `${eventNameInReact}: '${eventName}' as ${LIT_REACT_NAMESPACE}.EventName<${COMPONENT_NAMESPACE}.${eventClass}>`; + }) + .join(",") || "" + } }`; + + return Mustache.render( + componentTemplateStr, + { + componentName: component.name.replace("Tapsi", ""), + elementTag: component.tagName, + elementClass: `${COMPONENT_NAMESPACE}.${component.name}`, + events, + }, + {}, + { escape: v => v as string }, + ); +}; + const generateExports = (componentName: string) => { return [ `const ${componentName} = __${componentName};\n`, @@ -50,105 +90,39 @@ const generateExports = (componentName: string) => { ].join("\n"); }; -type ComponentData = Array<{ - webComponentResolutionPath: string; - elementTag: string; - elementClassName: string; - componentName: string; - componentCode: string; -}>; - -const transformToCEM = new Transform({ +const transformToComponentsMetadata = new Transform({ objectMode: true, transform( chunk: { key: PropertyKey; - value: Package; + value: Metadata; }, _, callback, ) { - callback(null, chunk.value); - }, -}); - -const transformToComponentData = new Transform({ - objectMode: true, - async transform(chunk: Package, _, callback) { - const streamData: ComponentData = []; - - for (const module of chunk.modules) { - if (module.kind !== "javascript-module") continue; - - const moduleSrc = module.path; - const moduleDir = path.dirname(moduleSrc); - const relativePath = path.relative(webComponentsSrcDir, moduleDir); - - const ceDefinitions = (module.exports ?? []).filter( - ex => ex.kind === "custom-element-definition", - ); - - if (ceDefinitions.length === 0) { - console.error(`No "custom-element-definition" found for ${moduleSrc}.`); - - continue; - } - - const webComponentResolutionPath = `@tapsioss/web-components/${relativePath}`; - - for (const ceDefinition of ceDefinitions) { - const elementTag = ceDefinition.name; - const elementClassName = ceDefinition.declaration.name; - const componentName = elementClassName.replace("Tapsi", ""); - - const componentTemplateStr = await fs.promises.readFile( - componentTemplatePath, - { encoding: "utf-8" }, - ); - - const componentCode = Mustache.render( - componentTemplateStr, - { - componentName, - elementTag, - elementClass: elementClassName, - events: JSON.stringify({}, null, 2), - }, - {}, - { escape: v => v as string }, - ); - - streamData.push({ - webComponentResolutionPath, - elementTag, - elementClassName, - componentName, - componentCode, - }); - } - } - - callback(null, streamData); + callback(null, chunk.value.components); }, }); const transformToComponentModule = new Transform({ objectMode: true, - async transform(chunk: ComponentData, _, callback) { + async transform(chunk: Component[], _, callback) { for (const component of chunk) { - const { - componentCode, - componentName, - elementClassName, - webComponentResolutionPath, - } = component; + const componentName = component.name.replace("Tapsi", ""); const modulePath = path.join(srcDir, `${componentName}.ts`); const moduleExists = fileExists(modulePath); + const componentCode = await getComponentCode(component); + if (moduleExists) { const tempModulePath = path.join(srcDir, `${componentName}.temp.ts`); + const readModule = fs.createReadStream(modulePath, { + encoding: "utf-8", + autoClose: true, + }); + const injectComponentCode = new Transform({ transform(chunk: Buffer, _, callback) { const lines = chunk.toString("utf-8").split("\n"); @@ -178,11 +152,6 @@ const transformToComponentModule = new Transform({ }, }); - const readModule = fs.createReadStream(modulePath, { - encoding: "utf-8", - autoClose: true, - }); - const writeToTemp = fs.createWriteStream(tempModulePath, { encoding: "utf-8", flags: "w", @@ -197,7 +166,7 @@ const transformToComponentModule = new Transform({ }); } else { const moduleContent = [ - generateImports(elementClassName, webComponentResolutionPath), + getComponentImports(component), "\n", START_COMMENT, componentCode, @@ -233,7 +202,7 @@ const transformToComponentModule = new Transform({ void (async () => { console.time("generate"); const { stdout, stderr } = await asyncExec( - ["tsx", cemGeneratorPath].join(" "), + ["tsx", metadataGeneratorPath].join(" "), ); if (stderr) console.error(stderr); @@ -243,7 +212,7 @@ void (async () => { if (fileExists(barrelFilePath)) await fs.promises.rm(barrelFilePath); - fs.createReadStream(cemPath, { + fs.createReadStream(metadataPath, { autoClose: true, encoding: "utf-8", }) @@ -251,8 +220,7 @@ void (async () => { chain([ Parser.make(), StreamValues.make(), - transformToCEM, - transformToComponentData, + transformToComponentsMetadata, transformToComponentModule, ] as const), ) diff --git a/packages/react-components/templates/component.txt b/packages/react-components/templates/component.txt index acb60aee..4cb3b3a0 100644 --- a/packages/react-components/templates/component.txt +++ b/packages/react-components/templates/component.txt @@ -1,6 +1,6 @@ -const __{{componentName}} = createComponent({ +const __{{componentName}} = LitReact.createComponent({ tagName: "{{elementTag}}", elementClass: {{elementClass}}, react: React, events: {{events}}, -}); \ No newline at end of file +}); From a74c974fb234440c45d2b662f10c3cdcf747186a Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Tue, 4 Mar 2025 19:18:29 +0330 Subject: [PATCH 3/8] feat: remove unnecessary imports from compound components --- packages/web-components/src/bottom-navigation/index.ts | 2 -- packages/web-components/src/segmented-view/index.ts | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/web-components/src/bottom-navigation/index.ts b/packages/web-components/src/bottom-navigation/index.ts index a2293bde..da068024 100644 --- a/packages/web-components/src/bottom-navigation/index.ts +++ b/packages/web-components/src/bottom-navigation/index.ts @@ -22,8 +22,6 @@ export { ItemSlots }; * @slot icon - The slot for the icon element. * @slot - The default slot for the content/label. * - * @fires {ActivateEvent} activate - Fired when the item activates (bubbles). - * * @prop {boolean} [active=false] - Indicates whether the item is active or not. * @prop {string} [value=""] - The value associated with the item. This value has to be unique among sibling items. */ diff --git a/packages/web-components/src/segmented-view/index.ts b/packages/web-components/src/segmented-view/index.ts index ebcda2af..4b586879 100644 --- a/packages/web-components/src/segmented-view/index.ts +++ b/packages/web-components/src/segmented-view/index.ts @@ -20,8 +20,6 @@ export { ItemSlots }; * * @slot - The default slot for the content/label. * - * @fires {ActivateEvent} activate - Fired when the item activates (bubbles). - * * @prop {boolean} [active=false] - Indicates whether the item is active or not. * @prop {string} [value=""] - The value associated with the item. This value has to be unique among sibling items. * @prop {"sm" | "md"} [size="md"] - The size of the item. From 51eaa3c7c73107546a5e357232660bc6eb32bebb Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Tue, 4 Mar 2025 19:20:26 +0330 Subject: [PATCH 4/8] feat: update react components --- packages/react-components/src/Avatar.ts | 9 +++++---- packages/react-components/src/Badge.ts | 9 +++++---- packages/react-components/src/BadgeWrapper.ts | 9 +++++---- packages/react-components/src/Banner.ts | 9 +++++---- .../react-components/src/BottomNavigation.ts | 14 +++++++++----- .../src/BottomNavigationItem.ts | 9 +++++---- packages/react-components/src/BottomSheet.ts | 19 ++++++++++++++----- packages/react-components/src/Button.ts | 9 +++++---- packages/react-components/src/ButtonGroup.ts | 9 +++++---- packages/react-components/src/ChatBubbleIn.ts | 9 +++++---- .../react-components/src/ChatBubbleOut.ts | 9 +++++---- packages/react-components/src/Checkbox.ts | 9 +++++---- packages/react-components/src/Chip.ts | 15 ++++++++++----- packages/react-components/src/ChipGroup.ts | 14 +++++++++----- packages/react-components/src/Divider.ts | 9 +++++---- packages/react-components/src/EmptyState.ts | 9 +++++---- packages/react-components/src/FileInput.ts | 13 ++++++++----- packages/react-components/src/IconButton.ts | 9 +++++---- packages/react-components/src/Modal.ts | 14 +++++++++----- packages/react-components/src/Notice.ts | 14 +++++++++----- packages/react-components/src/PinInput.ts | 14 +++++++++----- packages/react-components/src/Pinwheel.ts | 11 ++++++----- .../react-components/src/PinwheelGroup.ts | 9 +++++---- packages/react-components/src/PinwheelItem.ts | 9 +++++---- .../react-components/src/ProgressIndicator.ts | 9 +++++---- packages/react-components/src/Radio.ts | 9 +++++---- packages/react-components/src/RateSlider.ts | 11 ++++++----- .../react-components/src/SegmentedView.ts | 14 +++++++++----- .../react-components/src/SegmentedViewItem.ts | 9 +++++---- packages/react-components/src/Skeleton.ts | 9 +++++---- packages/react-components/src/Snackbar.ts | 14 +++++++++----- packages/react-components/src/Spinner.ts | 9 +++++---- packages/react-components/src/Stepper.ts | 11 ++++++----- packages/react-components/src/Switch.ts | 9 +++++---- packages/react-components/src/TextArea.ts | 9 +++++---- packages/react-components/src/TextField.ts | 9 +++++---- packages/react-components/src/Tooltip.ts | 14 +++++++++----- 37 files changed, 237 insertions(+), 162 deletions(-) diff --git a/packages/react-components/src/Avatar.ts b/packages/react-components/src/Avatar.ts index 7861c5e5..633a65e8 100644 --- a/packages/react-components/src/Avatar.ts +++ b/packages/react-components/src/Avatar.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiAvatar } from "@tapsioss/web-components/avatar"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/avatar"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Avatar = createComponent({ +const __Avatar = LitReact.createComponent({ tagName: "tapsi-avatar", - elementClass: TapsiAvatar, + elementClass: ComponentNamespace.TapsiAvatar, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Avatar = __Avatar; diff --git a/packages/react-components/src/Badge.ts b/packages/react-components/src/Badge.ts index 0582b013..8edf6649 100644 --- a/packages/react-components/src/Badge.ts +++ b/packages/react-components/src/Badge.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiBadge } from "@tapsioss/web-components/badge"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/badge"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Badge = createComponent({ +const __Badge = LitReact.createComponent({ tagName: "tapsi-badge", - elementClass: TapsiBadge, + elementClass: ComponentNamespace.TapsiBadge, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Badge = __Badge; diff --git a/packages/react-components/src/BadgeWrapper.ts b/packages/react-components/src/BadgeWrapper.ts index 81932538..237abea9 100644 --- a/packages/react-components/src/BadgeWrapper.ts +++ b/packages/react-components/src/BadgeWrapper.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiBadgeWrapper } from "@tapsioss/web-components/badge-wrapper"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/badge-wrapper"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __BadgeWrapper = createComponent({ +const __BadgeWrapper = LitReact.createComponent({ tagName: "tapsi-badge-wrapper", - elementClass: TapsiBadgeWrapper, + elementClass: ComponentNamespace.TapsiBadgeWrapper, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const BadgeWrapper = __BadgeWrapper; diff --git a/packages/react-components/src/Banner.ts b/packages/react-components/src/Banner.ts index 278a768d..579220f5 100644 --- a/packages/react-components/src/Banner.ts +++ b/packages/react-components/src/Banner.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiBanner } from "@tapsioss/web-components/banner"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/banner"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Banner = createComponent({ +const __Banner = LitReact.createComponent({ tagName: "tapsi-banner", - elementClass: TapsiBanner, + elementClass: ComponentNamespace.TapsiBanner, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Banner = __Banner; diff --git a/packages/react-components/src/BottomNavigation.ts b/packages/react-components/src/BottomNavigation.ts index 9d596fdd..36c4d886 100644 --- a/packages/react-components/src/BottomNavigation.ts +++ b/packages/react-components/src/BottomNavigation.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiBottomNavigation } from "@tapsioss/web-components/bottom-navigation"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/bottom-navigation"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __BottomNavigation = createComponent({ +const __BottomNavigation = LitReact.createComponent({ tagName: "tapsi-bottom-navigation", - elementClass: TapsiBottomNavigation, + elementClass: ComponentNamespace.TapsiBottomNavigation, react: React, - events: {}, + events: { + onActivechange: + "activechange" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const BottomNavigation = __BottomNavigation; diff --git a/packages/react-components/src/BottomNavigationItem.ts b/packages/react-components/src/BottomNavigationItem.ts index 4ac5756d..d3e2e298 100644 --- a/packages/react-components/src/BottomNavigationItem.ts +++ b/packages/react-components/src/BottomNavigationItem.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiBottomNavigationItem } from "@tapsioss/web-components/bottom-navigation"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/bottom-navigation"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __BottomNavigationItem = createComponent({ +const __BottomNavigationItem = LitReact.createComponent({ tagName: "tapsi-bottom-navigation-item", - elementClass: TapsiBottomNavigationItem, + elementClass: ComponentNamespace.TapsiBottomNavigationItem, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const BottomNavigationItem = __BottomNavigationItem; diff --git a/packages/react-components/src/BottomSheet.ts b/packages/react-components/src/BottomSheet.ts index d0048e26..fb2d8ae2 100644 --- a/packages/react-components/src/BottomSheet.ts +++ b/packages/react-components/src/BottomSheet.ts @@ -1,14 +1,23 @@ -import { createComponent } from "@lit/react"; -import { TapsiBottomSheet } from "@tapsioss/web-components/bottom-sheet"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/bottom-sheet"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __BottomSheet = createComponent({ +const __BottomSheet = LitReact.createComponent({ tagName: "tapsi-bottom-sheet", - elementClass: TapsiBottomSheet, + elementClass: ComponentNamespace.TapsiBottomSheet, react: React, - events: {}, + events: { + onSnapped: "snapped" as LitReact.EventName, + onOpening: "opening" as LitReact.EventName, + onClosing: "closing" as LitReact.EventName, + onOpened: "opened" as LitReact.EventName, + onClosed: "closed" as LitReact.EventName, + onHide: "hide" as LitReact.EventName, + onShow: "show" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const BottomSheet = __BottomSheet; diff --git a/packages/react-components/src/Button.ts b/packages/react-components/src/Button.ts index 1b52014a..d2531a8c 100644 --- a/packages/react-components/src/Button.ts +++ b/packages/react-components/src/Button.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiButton } from "@tapsioss/web-components/button/standard"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/button/standard"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Button = createComponent({ +const __Button = LitReact.createComponent({ tagName: "tapsi-button", - elementClass: TapsiButton, + elementClass: ComponentNamespace.TapsiButton, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Button = __Button; diff --git a/packages/react-components/src/ButtonGroup.ts b/packages/react-components/src/ButtonGroup.ts index a10f622e..5cc5f6ed 100644 --- a/packages/react-components/src/ButtonGroup.ts +++ b/packages/react-components/src/ButtonGroup.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiButtonGroup } from "@tapsioss/web-components/button-group"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/button-group"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __ButtonGroup = createComponent({ +const __ButtonGroup = LitReact.createComponent({ tagName: "tapsi-button-group", - elementClass: TapsiButtonGroup, + elementClass: ComponentNamespace.TapsiButtonGroup, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const ButtonGroup = __ButtonGroup; diff --git a/packages/react-components/src/ChatBubbleIn.ts b/packages/react-components/src/ChatBubbleIn.ts index a72c32e2..f1ad3a04 100644 --- a/packages/react-components/src/ChatBubbleIn.ts +++ b/packages/react-components/src/ChatBubbleIn.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiChatBubbleIn } from "@tapsioss/web-components/chat-bubble/in"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/chat-bubble/in"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __ChatBubbleIn = createComponent({ +const __ChatBubbleIn = LitReact.createComponent({ tagName: "tapsi-chat-bubble-in", - elementClass: TapsiChatBubbleIn, + elementClass: ComponentNamespace.TapsiChatBubbleIn, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const ChatBubbleIn = __ChatBubbleIn; diff --git a/packages/react-components/src/ChatBubbleOut.ts b/packages/react-components/src/ChatBubbleOut.ts index ea5580cf..c29f538f 100644 --- a/packages/react-components/src/ChatBubbleOut.ts +++ b/packages/react-components/src/ChatBubbleOut.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiChatBubbleOut } from "@tapsioss/web-components/chat-bubble/out"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/chat-bubble/out"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __ChatBubbleOut = createComponent({ +const __ChatBubbleOut = LitReact.createComponent({ tagName: "tapsi-chat-bubble-out", - elementClass: TapsiChatBubbleOut, + elementClass: ComponentNamespace.TapsiChatBubbleOut, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const ChatBubbleOut = __ChatBubbleOut; diff --git a/packages/react-components/src/Checkbox.ts b/packages/react-components/src/Checkbox.ts index c730a468..4ffae6cb 100644 --- a/packages/react-components/src/Checkbox.ts +++ b/packages/react-components/src/Checkbox.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiCheckbox } from "@tapsioss/web-components/checkbox"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/checkbox"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Checkbox = createComponent({ +const __Checkbox = LitReact.createComponent({ tagName: "tapsi-checkbox", - elementClass: TapsiCheckbox, + elementClass: ComponentNamespace.TapsiCheckbox, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Checkbox = __Checkbox; diff --git a/packages/react-components/src/Chip.ts b/packages/react-components/src/Chip.ts index b398f6d3..f3e961f4 100644 --- a/packages/react-components/src/Chip.ts +++ b/packages/react-components/src/Chip.ts @@ -1,14 +1,19 @@ -import { createComponent } from "@lit/react"; -import { TapsiChip } from "@tapsioss/web-components/chip"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/chip"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Chip = createComponent({ +const __Chip = LitReact.createComponent({ tagName: "tapsi-chip", - elementClass: TapsiChip, + elementClass: ComponentNamespace.TapsiChip, react: React, - events: {}, + events: { + onSelect: "select" as LitReact.EventName, + onDeselect: + "deselect" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Chip = __Chip; diff --git a/packages/react-components/src/ChipGroup.ts b/packages/react-components/src/ChipGroup.ts index df9dd222..51731bee 100644 --- a/packages/react-components/src/ChipGroup.ts +++ b/packages/react-components/src/ChipGroup.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiChipGroup } from "@tapsioss/web-components/chip-group"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/chip-group"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __ChipGroup = createComponent({ +const __ChipGroup = LitReact.createComponent({ tagName: "tapsi-chip-group", - elementClass: TapsiChipGroup, + elementClass: ComponentNamespace.TapsiChipGroup, react: React, - events: {}, + events: { + onSelectchange: + "selectchange" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const ChipGroup = __ChipGroup; diff --git a/packages/react-components/src/Divider.ts b/packages/react-components/src/Divider.ts index 85756baa..e23bcbe4 100644 --- a/packages/react-components/src/Divider.ts +++ b/packages/react-components/src/Divider.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiDivider } from "@tapsioss/web-components/divider"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/divider"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Divider = createComponent({ +const __Divider = LitReact.createComponent({ tagName: "tapsi-divider", - elementClass: TapsiDivider, + elementClass: ComponentNamespace.TapsiDivider, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Divider = __Divider; diff --git a/packages/react-components/src/EmptyState.ts b/packages/react-components/src/EmptyState.ts index 36799605..02ce3317 100644 --- a/packages/react-components/src/EmptyState.ts +++ b/packages/react-components/src/EmptyState.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiEmptyState } from "@tapsioss/web-components/empty-state"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/empty-state"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __EmptyState = createComponent({ +const __EmptyState = LitReact.createComponent({ tagName: "tapsi-empty-state", - elementClass: TapsiEmptyState, + elementClass: ComponentNamespace.TapsiEmptyState, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const EmptyState = __EmptyState; diff --git a/packages/react-components/src/FileInput.ts b/packages/react-components/src/FileInput.ts index d5f5bdbe..6b6ce17a 100644 --- a/packages/react-components/src/FileInput.ts +++ b/packages/react-components/src/FileInput.ts @@ -1,14 +1,17 @@ -import { createComponent } from "@lit/react"; -import { TapsiFileInput } from "@tapsioss/web-components/file-input"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/file-input"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __FileInput = createComponent({ +const __FileInput = LitReact.createComponent({ tagName: "tapsi-file-input", - elementClass: TapsiFileInput, + elementClass: ComponentNamespace.TapsiFileInput, react: React, - events: {}, + events: { + onRetry: "retry" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const FileInput = __FileInput; diff --git a/packages/react-components/src/IconButton.ts b/packages/react-components/src/IconButton.ts index 301bbd7a..efb8ee25 100644 --- a/packages/react-components/src/IconButton.ts +++ b/packages/react-components/src/IconButton.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiIconButton } from "@tapsioss/web-components/button/icon-button"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/button/icon-button"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __IconButton = createComponent({ +const __IconButton = LitReact.createComponent({ tagName: "tapsi-icon-button", - elementClass: TapsiIconButton, + elementClass: ComponentNamespace.TapsiIconButton, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const IconButton = __IconButton; diff --git a/packages/react-components/src/Modal.ts b/packages/react-components/src/Modal.ts index 59a2c808..808ffdbb 100644 --- a/packages/react-components/src/Modal.ts +++ b/packages/react-components/src/Modal.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiModal } from "@tapsioss/web-components/modal"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/modal"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Modal = createComponent({ +const __Modal = LitReact.createComponent({ tagName: "tapsi-modal", - elementClass: TapsiModal, + elementClass: ComponentNamespace.TapsiModal, react: React, - events: {}, + events: { + onShow: "show" as LitReact.EventName, + onHide: "hide" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Modal = __Modal; diff --git a/packages/react-components/src/Notice.ts b/packages/react-components/src/Notice.ts index 1714a05b..3124b841 100644 --- a/packages/react-components/src/Notice.ts +++ b/packages/react-components/src/Notice.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiNotice } from "@tapsioss/web-components/notice"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/notice"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Notice = createComponent({ +const __Notice = LitReact.createComponent({ tagName: "tapsi-notice", - elementClass: TapsiNotice, + elementClass: ComponentNamespace.TapsiNotice, react: React, - events: {}, + events: { + onShow: "show" as LitReact.EventName, + onHide: "hide" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Notice = __Notice; diff --git a/packages/react-components/src/PinInput.ts b/packages/react-components/src/PinInput.ts index 95c170d1..e5cd6b4b 100644 --- a/packages/react-components/src/PinInput.ts +++ b/packages/react-components/src/PinInput.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiPinInput } from "@tapsioss/web-components/pin-input"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/pin-input"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __PinInput = createComponent({ +const __PinInput = LitReact.createComponent({ tagName: "tapsi-pin-input", - elementClass: TapsiPinInput, + elementClass: ComponentNamespace.TapsiPinInput, react: React, - events: {}, + events: { + onComplete: + "complete" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const PinInput = __PinInput; diff --git a/packages/react-components/src/Pinwheel.ts b/packages/react-components/src/Pinwheel.ts index b159798f..c7cf6335 100644 --- a/packages/react-components/src/Pinwheel.ts +++ b/packages/react-components/src/Pinwheel.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiPinwheel } from "@tapsioss/web-components/pinwheel"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/pinwheel"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Pinwheel = createComponent({ +const __Pinwheel = LitReact.createComponent({ tagName: "tapsi-pinwheel", - elementClass: TapsiPinwheel, + elementClass: ComponentNamespace.TapsiPinwheel, react: React, - events: {}, + events: { onChange: "change" }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Pinwheel = __Pinwheel; diff --git a/packages/react-components/src/PinwheelGroup.ts b/packages/react-components/src/PinwheelGroup.ts index a434e720..54caf9a7 100644 --- a/packages/react-components/src/PinwheelGroup.ts +++ b/packages/react-components/src/PinwheelGroup.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiPinwheelGroup } from "@tapsioss/web-components/pinwheel-group"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/pinwheel-group"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __PinwheelGroup = createComponent({ +const __PinwheelGroup = LitReact.createComponent({ tagName: "tapsi-pinwheel-group", - elementClass: TapsiPinwheelGroup, + elementClass: ComponentNamespace.TapsiPinwheelGroup, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const PinwheelGroup = __PinwheelGroup; diff --git a/packages/react-components/src/PinwheelItem.ts b/packages/react-components/src/PinwheelItem.ts index c16e9f40..94138ff0 100644 --- a/packages/react-components/src/PinwheelItem.ts +++ b/packages/react-components/src/PinwheelItem.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiPinwheelItem } from "@tapsioss/web-components/pinwheel"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/pinwheel"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __PinwheelItem = createComponent({ +const __PinwheelItem = LitReact.createComponent({ tagName: "tapsi-pinwheel-item", - elementClass: TapsiPinwheelItem, + elementClass: ComponentNamespace.TapsiPinwheelItem, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const PinwheelItem = __PinwheelItem; diff --git a/packages/react-components/src/ProgressIndicator.ts b/packages/react-components/src/ProgressIndicator.ts index 4c308b5f..3fd6770c 100644 --- a/packages/react-components/src/ProgressIndicator.ts +++ b/packages/react-components/src/ProgressIndicator.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiProgressIndicator } from "@tapsioss/web-components/progress-indicator"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/progress-indicator"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __ProgressIndicator = createComponent({ +const __ProgressIndicator = LitReact.createComponent({ tagName: "tapsi-progress-indicator", - elementClass: TapsiProgressIndicator, + elementClass: ComponentNamespace.TapsiProgressIndicator, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const ProgressIndicator = __ProgressIndicator; diff --git a/packages/react-components/src/Radio.ts b/packages/react-components/src/Radio.ts index 20c1dcec..2ab2b095 100644 --- a/packages/react-components/src/Radio.ts +++ b/packages/react-components/src/Radio.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiRadio } from "@tapsioss/web-components/radio"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/radio"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Radio = createComponent({ +const __Radio = LitReact.createComponent({ tagName: "tapsi-radio", - elementClass: TapsiRadio, + elementClass: ComponentNamespace.TapsiRadio, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Radio = __Radio; diff --git a/packages/react-components/src/RateSlider.ts b/packages/react-components/src/RateSlider.ts index 7042db13..b3f48f4b 100644 --- a/packages/react-components/src/RateSlider.ts +++ b/packages/react-components/src/RateSlider.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiRateSlider } from "@tapsioss/web-components/rate-slider"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/rate-slider"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __RateSlider = createComponent({ +const __RateSlider = LitReact.createComponent({ tagName: "tapsi-rate-slider", - elementClass: TapsiRateSlider, + elementClass: ComponentNamespace.TapsiRateSlider, react: React, - events: {}, + events: { onChange: "change" }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const RateSlider = __RateSlider; diff --git a/packages/react-components/src/SegmentedView.ts b/packages/react-components/src/SegmentedView.ts index 56a70650..ac56d3e3 100644 --- a/packages/react-components/src/SegmentedView.ts +++ b/packages/react-components/src/SegmentedView.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiSegmentedView } from "@tapsioss/web-components/segmented-view"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/segmented-view"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __SegmentedView = createComponent({ +const __SegmentedView = LitReact.createComponent({ tagName: "tapsi-segmented-view", - elementClass: TapsiSegmentedView, + elementClass: ComponentNamespace.TapsiSegmentedView, react: React, - events: {}, + events: { + onActivechange: + "activechange" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const SegmentedView = __SegmentedView; diff --git a/packages/react-components/src/SegmentedViewItem.ts b/packages/react-components/src/SegmentedViewItem.ts index 328c0ab3..c2840717 100644 --- a/packages/react-components/src/SegmentedViewItem.ts +++ b/packages/react-components/src/SegmentedViewItem.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiSegmentedViewItem } from "@tapsioss/web-components/segmented-view"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/segmented-view"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __SegmentedViewItem = createComponent({ +const __SegmentedViewItem = LitReact.createComponent({ tagName: "tapsi-segmented-view-item", - elementClass: TapsiSegmentedViewItem, + elementClass: ComponentNamespace.TapsiSegmentedViewItem, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const SegmentedViewItem = __SegmentedViewItem; diff --git a/packages/react-components/src/Skeleton.ts b/packages/react-components/src/Skeleton.ts index a6fb6f81..6abf8239 100644 --- a/packages/react-components/src/Skeleton.ts +++ b/packages/react-components/src/Skeleton.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiSkeleton } from "@tapsioss/web-components/skeleton"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/skeleton"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Skeleton = createComponent({ +const __Skeleton = LitReact.createComponent({ tagName: "tapsi-skeleton", - elementClass: TapsiSkeleton, + elementClass: ComponentNamespace.TapsiSkeleton, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Skeleton = __Skeleton; diff --git a/packages/react-components/src/Snackbar.ts b/packages/react-components/src/Snackbar.ts index e6c719bc..3bd2240a 100644 --- a/packages/react-components/src/Snackbar.ts +++ b/packages/react-components/src/Snackbar.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiSnackbar } from "@tapsioss/web-components/snackbar"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/snackbar"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Snackbar = createComponent({ +const __Snackbar = LitReact.createComponent({ tagName: "tapsi-snackbar", - elementClass: TapsiSnackbar, + elementClass: ComponentNamespace.TapsiSnackbar, react: React, - events: {}, + events: { + onShow: "show" as LitReact.EventName, + onHide: "hide" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Snackbar = __Snackbar; diff --git a/packages/react-components/src/Spinner.ts b/packages/react-components/src/Spinner.ts index 82bfcafb..257e7c5b 100644 --- a/packages/react-components/src/Spinner.ts +++ b/packages/react-components/src/Spinner.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiSpinner } from "@tapsioss/web-components/spinner"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/spinner"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Spinner = createComponent({ +const __Spinner = LitReact.createComponent({ tagName: "tapsi-spinner", - elementClass: TapsiSpinner, + elementClass: ComponentNamespace.TapsiSpinner, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Spinner = __Spinner; diff --git a/packages/react-components/src/Stepper.ts b/packages/react-components/src/Stepper.ts index c069f603..69efe2c3 100644 --- a/packages/react-components/src/Stepper.ts +++ b/packages/react-components/src/Stepper.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiStepper } from "@tapsioss/web-components/stepper"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/stepper"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Stepper = createComponent({ +const __Stepper = LitReact.createComponent({ tagName: "tapsi-stepper", - elementClass: TapsiStepper, + elementClass: ComponentNamespace.TapsiStepper, react: React, - events: {}, + events: { onChange: "change" }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Stepper = __Stepper; diff --git a/packages/react-components/src/Switch.ts b/packages/react-components/src/Switch.ts index 1f763821..914faecb 100644 --- a/packages/react-components/src/Switch.ts +++ b/packages/react-components/src/Switch.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiSwitch } from "@tapsioss/web-components/switch"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/switch"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Switch = createComponent({ +const __Switch = LitReact.createComponent({ tagName: "tapsi-switch", - elementClass: TapsiSwitch, + elementClass: ComponentNamespace.TapsiSwitch, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Switch = __Switch; diff --git a/packages/react-components/src/TextArea.ts b/packages/react-components/src/TextArea.ts index a56433a7..c9da1b7c 100644 --- a/packages/react-components/src/TextArea.ts +++ b/packages/react-components/src/TextArea.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiTextArea } from "@tapsioss/web-components/text-area"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/text-area"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __TextArea = createComponent({ +const __TextArea = LitReact.createComponent({ tagName: "tapsi-text-area", - elementClass: TapsiTextArea, + elementClass: ComponentNamespace.TapsiTextArea, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const TextArea = __TextArea; diff --git a/packages/react-components/src/TextField.ts b/packages/react-components/src/TextField.ts index a7955f9a..9b1acb0a 100644 --- a/packages/react-components/src/TextField.ts +++ b/packages/react-components/src/TextField.ts @@ -1,14 +1,15 @@ -import { createComponent } from "@lit/react"; -import { TapsiTextField } from "@tapsioss/web-components/text-field"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/text-field"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __TextField = createComponent({ +const __TextField = LitReact.createComponent({ tagName: "tapsi-text-field", - elementClass: TapsiTextField, + elementClass: ComponentNamespace.TapsiTextField, react: React, events: {}, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const TextField = __TextField; diff --git a/packages/react-components/src/Tooltip.ts b/packages/react-components/src/Tooltip.ts index a3ff4f85..7c789d86 100644 --- a/packages/react-components/src/Tooltip.ts +++ b/packages/react-components/src/Tooltip.ts @@ -1,14 +1,18 @@ -import { createComponent } from "@lit/react"; -import { TapsiTooltip } from "@tapsioss/web-components/tooltip"; +import * as LitReact from "@lit/react"; +import * as ComponentNamespace from "@tapsioss/web-components/tooltip"; import * as React from "react"; /* START: AUTO-GENERATED [DO_NOT_REMOVE] */ -const __Tooltip = createComponent({ +const __Tooltip = LitReact.createComponent({ tagName: "tapsi-tooltip", - elementClass: TapsiTooltip, + elementClass: ComponentNamespace.TapsiTooltip, react: React, - events: {}, + events: { + onShow: "show" as LitReact.EventName, + onHide: "hide" as LitReact.EventName, + }, }); + /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ const Tooltip = __Tooltip; From 6e8c534f81c4ce974818e5d2b2e6b8b145ca9b09 Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Wed, 5 Mar 2025 12:19:08 +0330 Subject: [PATCH 5/8] fix: remove event listeners from compound items index file --- .../src/bottom-navigation/index.ts | 36 +------------------ .../src/segmented-view/index.ts | 34 +----------------- 2 files changed, 2 insertions(+), 68 deletions(-) diff --git a/packages/web-components/src/bottom-navigation/index.ts b/packages/web-components/src/bottom-navigation/index.ts index da068024..5ec6aa70 100644 --- a/packages/web-components/src/bottom-navigation/index.ts +++ b/packages/web-components/src/bottom-navigation/index.ts @@ -2,11 +2,7 @@ import { customElement } from "lit/decorators.js"; import bottomNavigationStyles from "./bottom-navigation.style.ts"; import { BottomNavigation } from "./bottom-navigation.ts"; import { type ActiveChangeEvent } from "./events.ts"; -import { - type ActivateEvent, - BottomNavigationItem, - Slots as ItemSlots, -} from "./item/index.ts"; +import { BottomNavigationItem, Slots as ItemSlots } from "./item/index.ts"; import itemStyles from "./item/item.style.ts"; export { Slots } from "./constants.ts"; @@ -28,36 +24,6 @@ export { ItemSlots }; @customElement("tapsi-bottom-navigation-item") export class TapsiBottomNavigationItem extends BottomNavigationItem { public static override readonly styles = [itemStyles]; - - /** - * @internal - */ - declare addEventListener: ( - type: K, - listener: ( - this: TapsiBottomNavigationItem, - ev: TapsiBottomNavigationItemEventMap[K], - ) => void, - options?: boolean | AddEventListenerOptions, - ) => void; - - /** - * @internal - */ - declare removeEventListener: < - K extends keyof TapsiBottomNavigationItemEventMap, - >( - type: K, - listener: ( - this: TapsiBottomNavigationItem, - ev: TapsiBottomNavigationItemEventMap[K], - ) => void, - options?: boolean | EventListenerOptions, - ) => void; -} - -interface TapsiBottomNavigationItemEventMap extends HTMLElementEventMap { - [ActivateEvent.type]: ActivateEvent; } /** diff --git a/packages/web-components/src/segmented-view/index.ts b/packages/web-components/src/segmented-view/index.ts index 4b586879..efffa09c 100644 --- a/packages/web-components/src/segmented-view/index.ts +++ b/packages/web-components/src/segmented-view/index.ts @@ -1,10 +1,6 @@ import { customElement } from "lit/decorators.js"; import { type ActiveChangeEvent } from "./events.ts"; -import { - type ActivateEvent, - Slots as ItemSlots, - SegmentedViewItem, -} from "./item/index.ts"; +import { Slots as ItemSlots, SegmentedViewItem } from "./item/index.ts"; import itemStyles from "./item/item.style.ts"; import segmentedViewStyles from "./segmented-view.style.ts"; import { SegmentedView } from "./segmented-view.ts"; @@ -34,34 +30,6 @@ export { ItemSlots }; @customElement("tapsi-segmented-view-item") export class TapsiSegmentedViewItem extends SegmentedViewItem { public static override readonly styles = [itemStyles]; - - /** - * @internal - */ - declare addEventListener: ( - type: K, - listener: ( - this: TapsiSegmentedViewItem, - ev: TapsiSegmentedViewItemEventMap[K], - ) => void, - options?: boolean | AddEventListenerOptions, - ) => void; - - /** - * @internal - */ - declare removeEventListener: ( - type: K, - listener: ( - this: TapsiSegmentedViewItem, - ev: TapsiSegmentedViewItemEventMap[K], - ) => void, - options?: boolean | EventListenerOptions, - ) => void; -} - -interface TapsiSegmentedViewItemEventMap extends HTMLElementEventMap { - [ActivateEvent.type]: ActivateEvent; } /** From 8120f4245eb3ccfcc96987a7354ce0249877a6ce Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Wed, 5 Mar 2025 15:25:42 +0330 Subject: [PATCH 6/8] fix: keep custom element manifest file --- packages/react-components/scripts/generate.ts | 3 ++- packages/react-components/src/Pinwheel.ts | 2 +- packages/react-components/src/RateSlider.ts | 2 +- packages/react-components/src/Stepper.ts | 2 +- scripts/generate-metadata.ts | 10 +--------- 5 files changed, 6 insertions(+), 13 deletions(-) diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts index 20603ea5..51987cc7 100644 --- a/packages/react-components/scripts/generate.ts +++ b/packages/react-components/scripts/generate.ts @@ -62,11 +62,12 @@ const getComponentCode = async (component: Component): Promise => { ].join(""); if (eventClass === "Event") { - return `${eventNameInReact}: '${eventName}'`; + return null; } return `${eventNameInReact}: '${eventName}' as ${LIT_REACT_NAMESPACE}.EventName<${COMPONENT_NAMESPACE}.${eventClass}>`; }) + .filter(event => event !== null) .join(",") || "" } }`; diff --git a/packages/react-components/src/Pinwheel.ts b/packages/react-components/src/Pinwheel.ts index c7cf6335..754f85a8 100644 --- a/packages/react-components/src/Pinwheel.ts +++ b/packages/react-components/src/Pinwheel.ts @@ -7,7 +7,7 @@ const __Pinwheel = LitReact.createComponent({ tagName: "tapsi-pinwheel", elementClass: ComponentNamespace.TapsiPinwheel, react: React, - events: { onChange: "change" }, + events: {}, }); /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ diff --git a/packages/react-components/src/RateSlider.ts b/packages/react-components/src/RateSlider.ts index b3f48f4b..110087c3 100644 --- a/packages/react-components/src/RateSlider.ts +++ b/packages/react-components/src/RateSlider.ts @@ -7,7 +7,7 @@ const __RateSlider = LitReact.createComponent({ tagName: "tapsi-rate-slider", elementClass: ComponentNamespace.TapsiRateSlider, react: React, - events: { onChange: "change" }, + events: {}, }); /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ diff --git a/packages/react-components/src/Stepper.ts b/packages/react-components/src/Stepper.ts index 69efe2c3..2738ebe5 100644 --- a/packages/react-components/src/Stepper.ts +++ b/packages/react-components/src/Stepper.ts @@ -7,7 +7,7 @@ const __Stepper = LitReact.createComponent({ tagName: "tapsi-stepper", elementClass: ComponentNamespace.TapsiStepper, react: React, - events: { onChange: "change" }, + events: {}, }); /* END: AUTO-GENERATED [DO_NOT_REMOVE] */ diff --git a/scripts/generate-metadata.ts b/scripts/generate-metadata.ts index 767b29e5..9bee05c3 100644 --- a/scripts/generate-metadata.ts +++ b/scripts/generate-metadata.ts @@ -57,16 +57,8 @@ const generateCem = async (): Promise => { if (cemAnalyzeStderr) console.error(cemAnalyzeStderr); const cemFile = path.join(workspaceDistDir, "custom-elements.json"); - const cem = JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package; - const { stderr: cemRmStderr, stdout: cemRmStdout } = await asyncExec( - ["rm", cemFile].join(" "), - ); - - if (cemRmStdout) console.log(cemAnalyzeStdout); - if (cemRmStderr) console.error(cemAnalyzeStderr); - - return cem; + return JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package; }; const getKebabCaseComponentName = (component: Declaration) => { From 60e6cde3e667652510d7d5de7490ae3831caf9ea Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Wed, 5 Mar 2025 16:49:03 +0330 Subject: [PATCH 7/8] refactor: move metadata to web-components package --- .gitignore | 4 + docs/components/[component].paths.ts | 3 +- docs/sidebar.ts | 3 +- package.json | 2 +- packages/react-components/scripts/generate.ts | 9 +- packages/web-components/package.json | 14 ++-- .../scripts}/generate-metadata.ts | 84 ++++++++----------- 7 files changed, 51 insertions(+), 68 deletions(-) rename {scripts => packages/web-components/scripts}/generate-metadata.ts (81%) diff --git a/.gitignore b/.gitignore index 862d03e0..c1f34122 100644 --- a/.gitignore +++ b/.gitignore @@ -75,3 +75,7 @@ test-results/ playwright-report/ blob-report/ playwright/.cache/ + +# Web components metadata +packages/web-components/components-metadata.json +packages/web-components/custom-elements.json diff --git a/docs/components/[component].paths.ts b/docs/components/[component].paths.ts index 6d603f8a..5fa372ff 100644 --- a/docs/components/[component].paths.ts +++ b/docs/components/[component].paths.ts @@ -16,8 +16,7 @@ export default { const docsDir = path.resolve(dirname, ".."); const workspaceDir = path.join(docsDir, ".."); - const distDir = path.join(workspaceDir, "dist"); - const metadataFile = path.join(distDir, "components-metadata.json"); + const metadataFile = path.join(workspaceDir, "packages/web-components/components-metadata.json"); const metadata = JSON.parse( fs.readFileSync(metadataFile).toString(), diff --git a/docs/sidebar.ts b/docs/sidebar.ts index efbbf26f..919a700c 100644 --- a/docs/sidebar.ts +++ b/docs/sidebar.ts @@ -7,8 +7,7 @@ import { type Metadata } from "../types/docs.ts"; const { dirname } = getFileMeta(import.meta.url); const workspaceDir = path.join(dirname, ".."); -const distDir = path.join(workspaceDir, "dist"); -const metadataFile = path.join(distDir, "components-metadata.json"); +const metadataFile = path.join(workspaceDir, "packages/web-components/components-metadata.json"); const getSidebarItems = (): DefaultTheme.Sidebar => { return ( diff --git a/package.json b/package.json index 89a0d188..8eb68dd7 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "docs:dev": "run-s gen:metadata docs:vitepress:dev", "docs:build": "run-s gen:metadata docs:vitepress:build", "docs:preview": "run-s docs:vitepress:preview", - "gen:metadata": "tsx ./scripts/generate-metadata.ts" + "gen:metadata": "pnpm --filter @tapsioss/web-components run gen:metadata" }, "devDependencies": { "@custom-elements-manifest/analyzer": "^0.10.2", diff --git a/packages/react-components/scripts/generate.ts b/packages/react-components/scripts/generate.ts index 51987cc7..cc654f55 100644 --- a/packages/react-components/scripts/generate.ts +++ b/packages/react-components/scripts/generate.ts @@ -19,18 +19,13 @@ const LIT_REACT_NAMESPACE = "LitReact"; const { dirname } = getFileMeta(import.meta.url); const packageDir = path.resolve(dirname, ".."); -const workspaceDir = path.resolve(packageDir, "../../"); const srcDir = path.join(packageDir, "src"); const templatesDir = path.join(packageDir, "templates"); const barrelFilePath = path.join(srcDir, "index.ts"); -const metadataGeneratorPath = path.join( - workspaceDir, - "scripts/generate-metadata.ts", -); const componentTemplatePath = path.join(templatesDir, "component.txt"); -const metadataPath = path.join(workspaceDir, "dist/components-metadata.json"); +const metadataPath = path.resolve(packageDir, "../web-components/components-metadata.json"); const START_COMMENT = "/* START: AUTO-GENERATED [DO_NOT_REMOVE] */"; const END_COMMENT = "/* END: AUTO-GENERATED [DO_NOT_REMOVE] */"; @@ -203,7 +198,7 @@ const transformToComponentModule = new Transform({ void (async () => { console.time("generate"); const { stdout, stderr } = await asyncExec( - ["tsx", metadataGeneratorPath].join(" "), + "pnpm --filter @tapsioss/web-components run gen:metadata", ); if (stderr) console.error(stderr); diff --git a/packages/web-components/package.json b/packages/web-components/package.json index 72a3589f..6907f4ed 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -3,9 +3,8 @@ "version": "0.8.0", "type": "module", "files": [ - "./dist/**/*.js", - "./dist/**/*.d.ts", - "./dist/**/package.json" + "./dist", + "custom-elements.json" ], "exports": { "./*": { @@ -16,11 +15,13 @@ "scripts": { "clear": "shx rm -rf dist", "prebuild": "pnpm run clear", - "build": "tsc --project ./tsconfig.build.json", + "build": "run-p gen:metadata bulld:compile", + "bulld:compile": "tsc --project ./tsconfig.build.json", "predev": "pnpm run clear", "test": "playwright test", "dev": "tsc --watch --project ./tsconfig.dev.json", - "release": "pnpm publish . --tag latest --access public" + "release": "pnpm publish . --tag latest --access public", + "gen:metadata": "tsx scripts/generate-metadata.ts" }, "dependencies": { "@floating-ui/dom": "^1.6.11", @@ -30,5 +31,6 @@ }, "devDependencies": { "@internals/test-helpers": "workspace:*" - } + }, + "customElements": "custom-elements.json" } diff --git a/scripts/generate-metadata.ts b/packages/web-components/scripts/generate-metadata.ts similarity index 81% rename from scripts/generate-metadata.ts rename to packages/web-components/scripts/generate-metadata.ts index 9bee05c3..c3198899 100644 --- a/scripts/generate-metadata.ts +++ b/packages/web-components/scripts/generate-metadata.ts @@ -7,48 +7,34 @@ import { import { exec } from "node:child_process"; import * as fs from "node:fs"; import * as path from "node:path"; -import { cwd } from "node:process"; import { promisify } from "node:util"; import { type DefaultTheme } from "vitepress"; -import type { Component, ImportPaths } from "../types/docs.ts"; -import { getFileMeta } from "./utils.ts"; +import { getFileMeta } from "../../../scripts/utils.ts"; +import type { Component, ImportPaths, Metadata } from "../../../types/docs.ts"; const asyncExec = promisify(exec); const { dirname } = getFileMeta(import.meta.url); -const workspaceDir = path.resolve(dirname, ".."); -const webComponentsSrcDir = path.join( - workspaceDir, - "packages/web-components/src", -); +const packageDir = path.join(dirname, ".."); +const packageSrcDir = path.join(packageDir, "src"); -const workspaceDistDir = path.join(workspaceDir, "dist"); -const metadataFile = path.join(workspaceDistDir, "components-metadata.json"); +const metadataFile = path.join(packageDir, "components-metadata.json"); const generateCem = async (): Promise => { - const entrypoint = path.resolve( - workspaceDir, - "./packages/web-components/src", - ); - - const distDir = path.relative(cwd(), path.join(workspaceDir, "dist")); - const globs: string[] = [ - `${entrypoint}/**/index.ts`, - `${entrypoint}/**/*/index.ts`, - `!${entrypoint}/utils/**`, - `!${entrypoint}/internals/**`, + `${packageSrcDir}/**/index.ts`, + `${packageSrcDir}/**/*/index.ts`, + `!${packageSrcDir}/utils/**`, + `!${packageSrcDir}/internals/**`, ]; - await asyncExec(`shx rm -rf ${distDir}`); const { stderr: cemAnalyzeStderr, stdout: cemAnalyzeStdout } = await asyncExec( [ "cem", "analyze", "--litelement", - "--outdir", - distDir, + "--packagejson", globs.map(g => `--globs ${g}`).join(" "), ].join(" "), ); @@ -56,24 +42,12 @@ const generateCem = async (): Promise => { if (cemAnalyzeStdout) console.log(cemAnalyzeStdout); if (cemAnalyzeStderr) console.error(cemAnalyzeStderr); - const cemFile = path.join(workspaceDistDir, "custom-elements.json"); + const cemFile = path.join(packageDir, "custom-elements.json"); return JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package; }; -const getKebabCaseComponentName = (component: Declaration) => { - if (!("tagName" in component) || !component.tagName) return null; - - const tagName = component.tagName; - - return tagName.replace("tapsi-", ""); -}; - -void (async () => { - console.log("🧩 generating metadata..."); - - const cem = await generateCem(); - +const generateMetadataFromCem = async (cem: Package): Promise => { const sidebarItemsMap: Record = {}; const components: Component[] = []; @@ -89,7 +63,7 @@ void (async () => { filteredModules.forEach(module => { const moduleSrc = module.path; const moduleDir = path.dirname(moduleSrc); - const relativePath = path.relative(webComponentsSrcDir, moduleDir); + const relativePath = path.relative(packageSrcDir, moduleDir); if (!relativePath) return; @@ -199,17 +173,27 @@ void (async () => { const sidebarItems = [iconsSidebarItem, componentSidebarItems]; - fs.writeFileSync( - metadataFile, - JSON.stringify( - { - components, - sidebarItems, - }, - null, - 2, - ), - ); + return { + sidebarItems, + components, + }; +}; + +const getKebabCaseComponentName = (component: Declaration) => { + if (!("tagName" in component) || !component.tagName) return null; + + const tagName = component.tagName; + + return tagName.replace("tapsi-", ""); +}; + +void (async () => { + console.log("🧩 generating metadata..."); + + const cem = await generateCem(); + const metadata = await generateMetadataFromCem(cem); + + fs.writeFileSync(metadataFile, JSON.stringify(metadata, null, 2)); console.log("✅ docs metadata generated."); })(); From c91645b4b025dbc5fbd45ca707d7b65426d6089e Mon Sep 17 00:00:00 2001 From: Amirhossein Alibakhshi Date: Wed, 5 Mar 2025 17:17:28 +0330 Subject: [PATCH 8/8] fix: make metadata generation config sync --- packages/web-components/scripts/generate-metadata.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/web-components/scripts/generate-metadata.ts b/packages/web-components/scripts/generate-metadata.ts index c3198899..e3664a83 100644 --- a/packages/web-components/scripts/generate-metadata.ts +++ b/packages/web-components/scripts/generate-metadata.ts @@ -47,7 +47,7 @@ const generateCem = async (): Promise => { return JSON.parse(fs.readFileSync(cemFile, "utf8")) as Package; }; -const generateMetadataFromCem = async (cem: Package): Promise => { +const generateMetadataFromCem = (cem: Package): Metadata => { const sidebarItemsMap: Record = {}; const components: Component[] = []; @@ -191,7 +191,7 @@ void (async () => { console.log("🧩 generating metadata..."); const cem = await generateCem(); - const metadata = await generateMetadataFromCem(cem); + const metadata = generateMetadataFromCem(cem); fs.writeFileSync(metadataFile, JSON.stringify(metadata, null, 2));