@stacksjs/actions 0.59.11 → 0.61.1

package/src/domains/remove.ts

@@ -1,9 +1,9 @@
 import process from 'node:process'
+import { parseOptions } from '@stacksjs/cli'
+import { app } from '@stacksjs/config'
+import { deleteHostedZoneRecords } from '@stacksjs/dns'
 import { handleError } from '@stacksjs/error-handling'
 import { logger } from '@stacksjs/logging'
-import { deleteHostedZoneRecords } from '@stacksjs/dns'
-import { app } from '@stacksjs/config'
-import { parseOptions } from '@stacksjs/cli'
 
 interface RemoveOptions {
   domain?: string
@@ -19,15 +19,13 @@ const options: RemoveOptions = {
 if (!options.domain) {
   if (app.url) {
     options.domain = app.url
-  }
-  else {
+  } else {
     handleError('there was no domain provided when')
     process.exit(1)
   }
 }
 
-if (options.verbose)
-  logger.log(`Removing domain: ${options.domain}`)
+if (options.verbose) logger.log(`Removing domain: ${options.domain}`)
 
 // const result = await deleteHostedZone(options.domain)
 const result = await deleteHostedZoneRecords(options.domain)

package/src/examples.ts

@@ -1,20 +1,18 @@
 import process from 'node:process'
+import { NpmScript } from '@stacksjs/enums'
 import { log } from '@stacksjs/logging'
 import { hasComponents } from '@stacksjs/storage'
-import { runNpmScript } from '@stacksjs/utils'
 import type { ExamplesOptions } from '@stacksjs/types'
 import { ExitCode } from '@stacksjs/types'
-import { NpmScript } from '@stacksjs/enums'
+import { runNpmScript } from '@stacksjs/utils'
 
 export async function invoke(options: ExamplesOptions) {
-  if (options.components || options.vue)
-    await componentExample(options)
-
-  else if (options.webComponents || options.elements)
-    await webComponentExample(options)
-
+  if (options.components || options.vue) await componentExample(options)
+  else if (options.webComponents || options.elements) await webComponentExample(options)
   else
-    log.error('An unsupported option was used. Please try again, check the documentation & report the issue, if needed.')
+    log.error(
+      'An unsupported option was used. Please try again, check the documentation & report the issue, if needed.',
+    )
 }
 
 export async function examples(options: ExamplesOptions) {
@@ -25,8 +23,7 @@ export async function componentExample(options: ExamplesOptions) {
   if (hasComponents()) {
     await runNpmScript(NpmScript.ExampleVue, options)
     log.success('Your component library was built successfully')
-  }
-  else {
+  } else {
     log.info('No components found.')
     // todo: throw custom error here
   }
@@ -37,8 +34,7 @@ export async function webComponentExample(options: ExamplesOptions) {
     log.info('Building your Web Component library...')
     await runNpmScript(NpmScript.BuildWebComponents, options)
     log.success('Your Web Component library was built successfully')
-  }
-  else {
+  } else {
     log.info('No components found.')
     // todo: throw custom error here
     process.exit(ExitCode.FatalError)

package/src/find-projects.ts

@@ -1,7 +1,7 @@
 import process from 'node:process'
-import { findStacksProjects } from '@stacksjs/utils'
-import { log } from '@stacksjs/logging'
 import { parseOptions } from '@stacksjs/cli'
+import { log } from '@stacksjs/logging'
+import { findStacksProjects } from '@stacksjs/utils'
 
 try {
   const options = parseOptions()
@@ -9,13 +9,11 @@ try {
 
   if (projects.length > 0) {
     log.info('Found Projects:')
-    // eslint-disable-next-line no-console
-    projects.forEach(project => console.log(`   - ${project}`))
+    projects.forEach((project) => console.log(`   - ${project}`))
     process.exit()
   }
 
   log.info('No Stacks Projects found.')
-}
-catch (error: any) {
+} catch (error: any) {
   log.error('Error searching for Stacks projects:', error)
 }

package/src/fresh.ts

@@ -1,8 +1,9 @@
 import process from 'node:process'
-import { ExitCode } from '@stacksjs/types'
 import { runCommand } from '@stacksjs/cli'
+import { handleError } from '@stacksjs/error-handling'
 import { logger } from '@stacksjs/logging'
 import { projectPath } from '@stacksjs/path'
+import { ExitCode } from '@stacksjs/types'
 import { cleanProject } from '@stacksjs/utils'
 
 logger.log('Cleaning project...')

package/src/generate/action-types.ts

@@ -1,6 +1,6 @@
 import { readdir } from 'node:fs/promises'
-import { path as p } from '@stacksjs/path'
 import { logger } from '@stacksjs/logging'
+import { path as p } from '@stacksjs/path'
 import { storage } from '@stacksjs/storage'
 
 logger.log('Generating action types...')
@@ -14,12 +14,10 @@ const validActions = `// This file is auto-generated by Stacks. Do not edit this
 //
 // For more information, please visit: https://stacksjs.org/docs
 
-export type ActionPath = ${
-  files
-    .filter(file => file.endsWith('.ts'))
-    .map(value => `'${domain}/${value.replace('.ts', '')}'`)
-    .join(' | ')
-}
+export type ActionPath = ${files
+  .filter((file) => file.endsWith('.ts'))
+  .map((value) => `'${domain}/${value.replace('.ts', '')}'`)
+  .join(' | ')}
 `
 
 await storage.writeFile(p.frameworkPath('types/actions.d.ts'), validActions)

package/src/generate/component-meta.ts

@@ -10,10 +10,7 @@ import { generateComponentMeta } from '../helpers/component-meta'
 
 log.info('Generating component meta...')
 
-if (hasComponents())
-  generateComponentMeta()
-
-else
-  log.info('No components found. Skipping component meta generation.')
+if (hasComponents()) generateComponentMeta()
+else log.info('No components found. Skipping component meta generation.')
 
 log.success('Generated component meta.')

package/src/generate/custom-cli-file.ts

@@ -1,8 +1,9 @@
 import process from 'node:process'
-import { ExitCode } from '@stacksjs/types'
-import { writeTextFile } from '@stacksjs/storage'
-import { projectPath } from '@stacksjs/path'
 import { cli } from '@stacksjs/config'
+import { log } from '@stacksjs/logging'
+import { projectPath } from '@stacksjs/path'
+import { writeTextFile } from '@stacksjs/storage'
+import { ExitCode } from '@stacksjs/types'
 
 log.info('Ensuring Component Library Entry Point...')
 

package/src/generate/env-files.ts

@@ -1,7 +1,7 @@
+import { env as e, envEnum } from '@stacksjs/env'
+import { logger } from '@stacksjs/logging'
 import { path as p } from '@stacksjs/path'
 import { storage } from '@stacksjs/storage'
-import { env as e, enums } from '@stacksjs/env'
-import { logger } from '@stacksjs/logging'
 import { envKeys } from '../../../../env'
 
 logger.log('Generating type env files...')
@@ -15,53 +15,48 @@ const envTypes = `
 
 declare module 'bun' {
   namespace env {
-    ${envKeys.map((key) => {
-      let type: string | undefined = typeof e[key]
-      let value: string | boolean | number | undefined = e[key]
+    ${envKeys
+      .map((key) => {
+        let type: string | undefined = typeof e[key]
+        let value: string | boolean | number | undefined = e[key]
 
-      if (!value) {
-        if (enums[key]) {
-          type = enums[key]?.map(item => `'${item}'`).join(' | ')
-          value = enums[key]?.[0] // default to the first enum value
-        }
- else {
-          switch (type) {
-            case 'number':
-              value = '0'
-              break
-            case 'boolean':
-              value = false
-              break
-            default:
-              value = ''
+        if (!value) {
+          if (envEnum[key]) {
+            type = envEnum[key]?.map((item) => `'${item}'`).join(' | ')
+            value = envEnum[key]?.[0] // default to the first enum value
+          } else {
+            switch (type) {
+              case 'number':
+                value = '0'
+                break
+              case 'boolean':
+                value = false
+                break
+              default:
+                value = ''
+            }
           }
         }
-      }
 
-      type = 'string'
-      if (typeof value === 'string') {
-        if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') {
-          type = 'boolean'
-        }
-        else if (!Number.isNaN(Number.parseFloat(value)) && Number.isFinite(Number(value))) {
+        type = 'string'
+        if (typeof value === 'string') {
+          if (value.toLowerCase() === 'true' || value.toLowerCase() === 'false') {
+            type = 'boolean'
+          } else if (!Number.isNaN(Number.parseFloat(value)) && Number.isFinite(Number(value))) {
+            type = 'number'
+          } else if (envEnum[key]) {
+            // @ts-expect-error envEnum[key] is defined
+            type = envEnum[key].map((item) => `'${item}'`).join(' | ')
+          }
+        } else if (typeof value === 'number') {
           type = 'number'
+        } else if (typeof value === 'boolean') {
+          type = 'boolean'
         }
-        else if (enums[key]) {
-          // @ts-expect-error enums[key] is defined
-          type = enums[key].map(item => `'${item}'`).join(' | ')
-        }
-      }
-
-      else if (typeof value === 'number') {
-        type = 'number'
-      }
-
-      else if (typeof value === 'boolean') {
-        type = 'boolean'
-      }
 
-      return `const ${key}: ${type}`
-    }).join('\n    ')}
+        return `const ${key}: ${type}`
+      })
+      .join('\n    ')}
   }
 }
 `
@@ -78,7 +73,7 @@ const env = `
 // For more information, please visit: https://stacksjs.org/docs
 
 export const envKeys = [
-  ${envKeys.map(key => `'${key}'`).join(',\n  ')}
+  ${envKeys.map((key) => `'${key}'`).join(',\n  ')}
 ] as const
 
 export type EnvKey = typeof envKeys[number]

package/src/generate/ide-helpers.ts

@@ -12,7 +12,6 @@ import { generateVsCodeCustomData, generateWebTypes } from '../helpers/vscode-cu
 if (hasComponents()) {
   await generateWebTypes()
   await generateVsCodeCustomData()
-}
-else {
+} else {
   log.info('No components found. Skipping IDE helper generation.')
 }

package/src/generate/index.ts

@@ -1,35 +1,23 @@
 import process from 'node:process'
-import { log } from '@stacksjs/logging'
+import { runCommand } from '@stacksjs/cli'
 import { Action, NpmScript } from '@stacksjs/enums'
+import { log } from '@stacksjs/logging'
+import { frameworkPath, projectPath } from '@stacksjs/path'
 import type { GeneratorOptions } from '@stacksjs/types'
-import { runCommand } from '@stacksjs/cli'
 import { runNpmScript } from '@stacksjs/utils'
-import { frameworkPath, projectPath } from '@stacksjs/path'
-import { runAction } from '../helpers/utils'
+import { runAction } from '../helpers'
+import { generateVsCodeCustomData as genVsCodeCustomData } from '../helpers/vscode-custom-data'
 
 // import { files } from '@stacksjs/storage'
 
 export async function invoke(options?: GeneratorOptions) {
-  if (options?.types)
-    await generateTypes(options)
-
-  else if (options?.entries)
-    await generateLibEntries(options)
-
-  else if (options?.webTypes)
-    await generateWebTypes(options)
-
-  else if (options?.customData)
-    await generateVsCodeCustomData(options)
-
-  else if (options?.ideHelpers)
-    await generateIdeHelpers(options)
-
-  else if (options?.componentMeta)
-    await generateComponentMeta(options)
-
-  else if (options?.coreSymlink)
-    await generateCoreSymlink()
+  if (options?.types) await generateTypes(options)
+  else if (options?.entries) await generateLibEntries(options)
+  else if (options?.webTypes) await generateWebTypes(options)
+  else if (options?.customData) await generateVsCodeCustomData(options)
+  else if (options?.ideHelpers) await generateIdeHelpers(options)
+  else if (options?.componentMeta) await generateComponentMeta(options)
+  else if (options?.coreSymlink) await generateCoreSymlink()
 }
 
 export function generate(options: GeneratorOptions) {
@@ -62,17 +50,15 @@ export async function generateWebTypes(options?: GeneratorOptions) {
 }
 
 export async function generateVsCodeCustomData(options?: GeneratorOptions) {
-  const result = await runNpmScript(NpmScript.GenerateVsCodeCustomData, {
-    cwd: frameworkPath(),
-    ...options,
-  })
+  const result = await genVsCodeCustomData()
 
   if (result.isErr()) {
     log.error('There was an error generating the custom-elements.json file.', result.error)
     process.exit()
   }
 
-  await runAction(Action.LintFix, { verbose: true }) // the generated json file needs to be linted
+  await runAction(Action.LintFix, { verbose: true }) // because the generated json file needs to be linted
+
   log.success('Successfully generated the custom-elements.json file')
 }
 
@@ -89,7 +75,7 @@ export async function generateIdeHelpers(options?: GeneratorOptions) {
 }
 
 export async function generateComponentMeta(options?: GeneratorOptions) {
-  const result = await runNpmScript(NpmScript.GenerateComponentMeta, options)
+  const result = await genVsCodeCustomData()
 
   if (result.isErr()) {
     log.error('There was an error generating your component meta information.', result.error)
@@ -114,16 +100,6 @@ export async function generateTypes(options?: GeneratorOptions) {
   log.success('Types were generated successfully')
 }
 
-export function generateMigrations() {
-  // const path = frameworkPath('database/schema.prisma')
-
-  // await migrate(path, { database: database.driver })
-
-  // await runCommand(`bunx prisma migrate dev --schema=${path}`)
-
-  log.success('Successfully updated migrations')
-}
-
 export function generatePkgxConfig() {
   // write the yaml string to a file in your project root
   // files.put(projectPath('./pkgx.yaml'), yamlStr)

package/src/generate/lib-entries.ts

@@ -1,18 +1,15 @@
 #!/usr/bin/env bun
-import { log } from '@stacksjs/logging'
 import { library } from '@stacksjs/config'
+import { log } from '@stacksjs/logging'
 import { hasComponents, hasFunctions } from '@stacksjs/storage'
 import { generateLibEntry } from '../helpers/lib-entries'
 
 if (library.releaseable && hasComponents()) {
   await generateLibEntry('vue-components')
   await generateLibEntry('web-components')
-}
-else {
+} else {
   log.info('No components found. Skipping building component entry points.')
 }
 
-if (library.releaseable && hasFunctions())
-  await generateLibEntry('functions')
-else
-  log.info('No functions found. Skipping building function entry point.')
+if (library.releaseable && hasFunctions()) await generateLibEntry('functions')
+else log.info('No functions found. Skipping building function entry point.')

package/src/generate/pkgx-file.ts

@@ -1,12 +1,11 @@
+import { log, runCommand } from '@stacksjs/cli'
 // generates the pkgx file based on the user configuration
 import { config } from '@stacksjs/config'
-import { runCommand } from '@stacksjs/cli'
 
 // @ts-expect-error - no types
 import data from '../../../../../pkgx.yaml'
 
-if (!data)
-  throw new Error('pkgx.yaml file not found')
+if (!data) throw new Error('pkgx.yaml file not found')
 
 if (data.dependencies['aws.amazon.com/cdk'] === undefined) {
   log.info('aws.amazon.com/cdk dependency not found in pkgx.yaml.')
@@ -27,16 +26,14 @@ if (data.dependencies['bun.sh'] === undefined) {
   log.info('bun.sh dependency not found in pkgx.yaml.')
   // throw an error unless its installed locally
   const result = await runCommand('which aws')
-  if (result.isErr())
-    throw new Error('bun.sh dependency not found in pkgx.yaml. To confirm, run `which bun`')
+  if (result.isErr()) throw new Error('bun.sh dependency not found in pkgx.yaml. To confirm, run `which bun`')
 }
 
 if (data.dependencies['info-zip.org/zip'] === undefined) {
   log.info('info-zip.org/zip dependency not found in pkgx.yaml.')
   // throw an error unless its installed locally
   const result = await runCommand('which zip')
-  if (result.isErr())
-    throw new Error('info-zip.org/zip dependency not found in pkgx.yaml. To confirm, run `which zip`')
+  if (result.isErr()) throw new Error('info-zip.org/zip dependency not found in pkgx.yaml. To confirm, run `which zip`')
 }
 
 if (data.dependencies['info-zip.org/unzip'] === undefined) {
@@ -59,14 +56,12 @@ if (data.dependencies['redis.io'] === undefined) {
   log.info('redis.io dependency not found in pkgx.yaml.')
   // throw an error unless its installed locally
   const result = await runCommand('which redis')
-  if (result.isErr())
-    throw new Error('redis.io dependency not found in pkgx.yaml. To confirm, run `which redis`')
+  if (result.isErr()) throw new Error('redis.io dependency not found in pkgx.yaml. To confirm, run `which redis`')
 }
 
 if (config.database.default === 'sqlite' && data.dependencies['sqlite.org'] === undefined) {
   log.info('sqlite.org dependency not found in pkgx.yaml.')
   // throw an error unless its installed locally
   const result = await runCommand('which sqlite')
-  if (result.isErr())
-    throw new Error('sqlite.org dependency not found in pkgx.yaml. To confirm, run `which sqlite`')
+  if (result.isErr()) throw new Error('sqlite.org dependency not found in pkgx.yaml. To confirm, run `which sqlite`')
 }

package/src/generate/vscode-custom-data.ts

@@ -11,9 +11,7 @@ import { generateVsCodeCustomData } from '../helpers/vscode-custom-data'
 
 log.info('Generating VS Code custom data...')
 
-if (hasComponents())
-  await generateVsCodeCustomData()
-
+if (hasComponents()) await generateVsCodeCustomData()
 else log.info('No components found. Skipping VS Code custom data generation.')
 
 log.success('Generated VS Code custom data.')

package/src/helpers/component-meta.ts

@@ -1,4 +1,4 @@
-import { frameworkPath, join, parse, projectPath } from '@stacksjs/path'
+import { path, frameworkPath, join, projectPath } from '@stacksjs/path'
 import { existsSync, glob, mkdirSync, writeFileSync } from '@stacksjs/storage'
 import MarkdownIt from 'markdown-it'
 import { type ComponentMeta, type MetaCheckerOptions, createComponentMetaChecker } from 'vue-component-meta'
@@ -21,10 +21,7 @@ export function generateComponentMeta() {
     printer: { newLine: 1 },
   }
 
-  const tsconfigChecker = createComponentMetaChecker(
-    projectPath('tsconfig.json'),
-    checkerOptions,
-  )
+  const tsconfigChecker = createComponentMetaChecker(projectPath('tsconfig.json'), checkerOptions)
 
   const filterMeta = (meta: ComponentMeta): ComponentApi => {
     // const clonedMeta: ComponentMeta = JSON.parse(JSON.stringify(meta))
@@ -32,8 +29,7 @@ export function generateComponentMeta() {
     // Exclude global props
     const props: ComponentApiProps[] = []
     meta.props.forEach((prop) => {
-      if (prop?.global)
-        return
+      if (prop?.global) return
 
       const { name, description, required, type, default: defaultValue } = prop
 
@@ -55,22 +51,21 @@ export function generateComponentMeta() {
     }
   }
 
-  const components = glob.sync(['components/*.stx', 'components/**/*.stx'], {
+  const components = glob.sync(['components/*.stx', 'components/**/*.stx', 'components/*.vue', 'components/**/*.vue'], {
     cwd: projectPath(),
     absolute: true,
   })
 
   components.forEach((componentPath) => {
     // Thanks: https://futurestud.io/tutorials/node-js-get-a-file-name-with-or-without-extension
-    const componentExportName = parse(componentPath).name
+    const componentExportName = path.parse(componentPath).name
     const meta = filterMeta(tsconfigChecker.getComponentMeta(componentPath, componentExportName))
 
     const metaDirPath = frameworkPath('component-meta')
 
     // if meta dir doesn't exist create
 
-    if (!existsSync(metaDirPath))
-      mkdirSync(metaDirPath)
+    if (!existsSync(metaDirPath)) mkdirSync(metaDirPath)
 
     const metaJsonFilePath = join(metaDirPath, `${componentExportName}.json`)
     writeFileSync(metaJsonFilePath, JSON.stringify(meta, null, 4))

package/src/helpers/index.ts

@@ -0,0 +1,5 @@
+// export * from './component-meta'
+// export * from './lib-entries'
+// export * from './package-json'
+export * from './utils'
+// export * from './vscode-custom-data'

package/src/helpers/lib-entries.ts

@@ -1,11 +1,11 @@
 import process from 'node:process'
 import { log } from '@stacksjs/logging'
-import { kebabCase } from '@stacksjs/strings'
 import type { LibraryType } from '@stacksjs/path'
 import { componentsPath, functionsPath, libraryEntryPath } from '@stacksjs/path'
 import { writeTextFile } from '@stacksjs/storage'
-import { determineResetPreset } from '@stacksjs/utils'
+import { kebabCase } from '@stacksjs/strings'
 import { ExitCode } from '@stacksjs/types'
+import { determineResetPreset } from '@stacksjs/utils'
 import library from '~/config/library'
 
 /**
@@ -19,14 +19,11 @@ export async function generateLibEntry(type: LibraryType) {
 }
 
 export async function createLibraryEntryPoint(type: LibraryType) {
-  if (type === 'vue-components')
-    await createVueLibraryEntryPoint()
+  if (type === 'vue-components') await createVueLibraryEntryPoint()
 
-  if (type === 'web-components')
-    await createWebComponentLibraryEntryPoint()
+  if (type === 'web-components') await createWebComponentLibraryEntryPoint()
 
-  if (type === 'functions')
-    await createFunctionLibraryEntryPoint()
+  if (type === 'functions') await createFunctionLibraryEntryPoint()
 }
 
 export async function createVueLibraryEntryPoint(type: LibraryType = 'vue-components') {
@@ -75,16 +72,18 @@ export function generateEntryPointData(type: LibraryType): string {
   let arr = []
 
   if (type === 'functions') {
-    if (!library.functions?.functions) {
-      log.error(new Error('There are no functions defined to be built. Please check your config/library.ts file for potential adjustments'))
+    if (!library.functions?.files) {
+      log.error(
+        new Error(
+          'There are no functions defined to be built. Please check your config/library.ts file for potential adjustments',
+        ),
+      )
       process.exit()
     }
 
-    for (const fx of library.functions?.functions) {
-      if (Array.isArray(fx))
-        arr.push(`export * as ${fx[1]} from '${functionsPath(fx[0])}'`)
-      else
-        arr.push(`export * from '${functionsPath(fx)}'`)
+    for (const fx of library.functions.files) {
+      if (Array.isArray(fx)) arr.push(`export * as ${fx[1]} from '${functionsPath(fx[0])}'`)
+      else arr.push(`export * from '${functionsPath(fx)}'`)
     }
 
     // join the array into a string with each element being on a new line
@@ -93,17 +92,20 @@ export function generateEntryPointData(type: LibraryType): string {
 
   if (type === 'vue-components') {
     if (!library.vueComponents?.tags) {
-      log.error(new Error('There are no components defined to be built. Please check your config/library.ts file for potential adjustments'))
+      log.error(
+        new Error(
+          'There are no components defined to be built. Please check your config/library.ts file for potential adjustments',
+        ),
+      )
       process.exit()
     }
 
     arr = determineResetPreset()
 
-    for (const component of library.vueComponents?.tags.map(tag => tag.name)) {
+    for (const component of library.vueComponents.tags.map((tag) => tag.name)) {
       if (Array.isArray(component))
         arr.push(`export { default as ${component[1]} } from '${componentsPath(component[0])}.stx'`)
-      else
-        arr.push(`export { default as ${component} } from '${componentsPath(component)}.stx'`)
+      else arr.push(`export { default as ${component} } from '${componentsPath(component)}.stx'`)
     }
 
     // join the array into a string with each element being on a new line
@@ -112,22 +114,25 @@ export function generateEntryPointData(type: LibraryType): string {
 
   // at this point, we know it is a Web Component we are building
   arr = determineResetPreset()
-  const imports = [...arr, 'import { defineCustomElement } from \'vue\'']
+  const imports = [...arr, "import { defineCustomElement } from 'vue'"]
   const declarations = []
   const definitions = []
 
   if (!library.webComponents?.tags) {
-    log.error(new Error('There are no components defined to be built. Please check your config/library.ts file for potential adjustments'))
+    log.error(
+      new Error(
+        'There are no components defined to be built. Please check your config/library.ts file for potential adjustments',
+      ),
+    )
     process.exit()
   }
 
-  for (const component of library.webComponents?.tags.map(tag => tag.name)) {
+  for (const component of library.webComponents.tags.map((tag) => tag.name)) {
     if (Array.isArray(component)) {
       imports.push(`import ${component[1]} from '${componentsPath(component[0])}.stx'`)
       declarations.push(`const ${component[1]}CustomElement = defineCustomElement(${component[1]})`)
-      definitions.push(`customElements.define('${kebabCase(component[1])}', ${component[1]}CustomElement)`)
-    }
-    else {
+      definitions.push(`customElements.define('${kebabCase(component[1] as string)}', ${component[1]}CustomElement)`)
+    } else {
       imports.push(`import ${component} from '${componentsPath(component)}.stx'`)
       declarations.push(`const ${component}CustomElement = defineCustomElement(${component})`)
       definitions.push(`customElements.define('${kebabCase(component)}', ${component}CustomElement)`)