stacks 0.41.1 → 0.44.9

package/core/actions/src/copy-types.ts

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+/**
+ * This action copies all the generated types.
+ */
+
+import { frameworkPath } from '@stacksjs/path'
+import { copyFolder } from '@stacksjs/storage'
+
+// relative to scripts directory
+const destinations = [
+  [frameworkPath('dist/types/components'), frameworkPath('components/vue/dist/types')],
+  [frameworkPath('dist/types/components'), frameworkPath('components/web/dist/types')],
+  [frameworkPath('dist/types/functions'), frameworkPath('functions/dist/types')],
+]
+
+destinations.forEach(([src, dest]) => {
+  // const srcPath = resolve(__filename, '..', src)
+  // const destPath = resolve(__filename, '..', dest)
+
+  copyFolder(src, dest)
+})

package/core/actions/src/dev.ts

@@ -0,0 +1,55 @@
+import { log } from '@stacksjs/logging'
+import { runNpmScript } from '@stacksjs/utils'
+import type { DevOptions } from '@stacksjs/types'
+import { NpmScript } from '@stacksjs/types'
+
+export async function invoke(options: DevOptions) {
+  if (options.components || options.all)
+    await components(options)
+
+  else if (options.docs || options.all)
+    await docs(options)
+
+  else if (options.pages || options.all)
+    await pages(options)
+
+  else if (options.functions || options.all)
+    await functions(options)
+
+  else if (options.desktop || options.all)
+    await desktop(options)
+}
+
+/**
+ * An alias of the invoke method.
+ * @param options
+ * @returns
+ */
+export async function dev(options: DevOptions) {
+  return invoke(options)
+}
+
+export async function components(options: DevOptions) {
+  log.info('Starting your components dev server...')
+  await runNpmScript(NpmScript.DevComponents, options)
+}
+
+export async function docs(options: DevOptions) {
+  log.info('Starting your docs dev server...')
+  await runNpmScript(NpmScript.DevDocs, options)
+}
+
+export async function desktop(options: DevOptions) {
+  log.info('Starting your Desktop engine...')
+  await runNpmScript(NpmScript.DevDesktop, options)
+}
+
+export async function pages(options: DevOptions) {
+  log.info('Starting your page engine...')
+  await runNpmScript(NpmScript.DevPages, options)
+}
+
+export async function functions(options: DevOptions) {
+  log.info('Starting your function\'s dev server...')
+  await runNpmScript(NpmScript.DevFunctions, options)
+}

package/core/actions/src/examples.ts

@@ -0,0 +1,48 @@
+import { log } from '@stacksjs/logging'
+import { hasComponents } from '@stacksjs/storage'
+import { runNpmScript } from '@stacksjs/utils'
+import { type ExamplesOptions, ExitCode, NpmScript } from '@stacksjs/types'
+
+export async function invoke(options: ExamplesOptions) {
+  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.')
+}
+
+/**
+ * An alias of the invoke method.
+ * @param options
+ * @returns
+ */
+export async function examples(options: ExamplesOptions) {
+  return invoke(options)
+}
+
+export async function componentExample(options: ExamplesOptions) {
+  if (hasComponents()) {
+    await runNpmScript(NpmScript.ExampleVue, options)
+    log.success('Your component library was built successfully')
+  }
+  else {
+    log.info('No components found.')
+    // todo: throw custom error here
+  }
+}
+
+export async function webComponentExample(options: ExamplesOptions) {
+  if (hasComponents()) {
+    log.info('Building your Web Component library...')
+    await runNpmScript(NpmScript.BuildWebComponents, options)
+    log.success('Your Web Component library was built successfully')
+  }
+  else {
+    log.info('No components found.')
+    // todo: throw custom error here
+    process.exit(ExitCode.FatalError)
+  }
+}

package/core/actions/src/fresh.ts

@@ -0,0 +1,27 @@
+import { intro, outro, runCommands } from '@stacksjs/cli'
+import type { CliOptions as FreshOptions } from '@stacksjs/types'
+import { ExitCode } from '@stacksjs/types'
+
+export async function invoke(options?: FreshOptions) {
+  const perf = intro('buddy fresh')
+  const results = await runCommands(['pnpm run clean', 'pnpm install'], options)
+
+  for (const result of results) {
+    if (result.isErr()) {
+      outro('While running the fresh command, there was an issue', { startTime: perf, useSeconds: true, isError: true }, result.error)
+      process.exit(ExitCode.FatalError)
+    }
+  }
+
+  outro('Freshly reinstalled your dependencies.', { startTime: perf, useSeconds: true })
+  process.exit(ExitCode.Success)
+}
+
+/**
+ * An alias of the invoke method.
+ * @param options
+ * @returns
+ */
+export async function fresh(options: FreshOptions) {
+  return invoke(options)
+}

package/core/actions/src/generate-component-meta.ts

@@ -0,0 +1,15 @@
+#!/usr/bin/env node
+
+/**
+ * This action generates the component meta.
+ */
+
+import { log } from '@stacksjs/logging'
+import { hasComponents } from '@stacksjs/storage'
+import { generateComponentMeta } from './helpers/component-meta'
+
+if (hasComponents())
+  await generateComponentMeta()
+
+else
+  log.info('No components found. Skipping component meta generation.')

package/core/actions/src/generate-ide-helpers.ts

@@ -0,0 +1,19 @@
+#!/usr/bin/env node
+
+/**
+ * This action generates the web-types.json & custom-elements.json
+ * files for the components.
+ */
+
+import { log } from '@stacksjs/logging'
+import { hasComponents } from '@stacksjs/storage'
+import { generateVsCodeCustomData } from './helpers/vscode-custom-data'
+// import { generateVsCodeCustomData, generateWebTypes } from './generate/vscode-custom-data'
+
+if (hasComponents()) {
+  // await generateWebTypes()
+  await generateVsCodeCustomData()
+}
+else {
+  log.info('No components found. Skipping IDE helper generation.')
+}

package/core/actions/src/generate-lib-entries.ts

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

package/core/actions/src/generate-package-json.ts

@@ -0,0 +1,11 @@
+#!/usr/bin/env node
+import { hasComponents, hasFunctions } from '@stacksjs/storage'
+import { generatePackageJson } from './helpers/package-json'
+
+if (hasComponents()) {
+  await generatePackageJson('vue-components')
+  await generatePackageJson('web-components')
+}
+
+if (hasFunctions())
+  await generatePackageJson('functions')

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

@@ -0,0 +1,16 @@
+#!/usr/bin/env node
+
+/**
+ * This action generates the web-types.json & custom-elements.json
+ * files for the components.
+ */
+
+import { log } from '@stacksjs/logging'
+import { hasComponents } from '@stacksjs/storage'
+import { generateVsCodeCustomData } from './helpers/vscode-custom-data'
+
+if (hasComponents())
+  await generateVsCodeCustomData()
+
+else
+  log.info('No components found. Skipping VS Code custom data generation.')

package/core/actions/src/generate-vue-compat.ts

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+/**
+ * Thanks for inspiration:
+ * https://github.com/vueuse/vueuse/blob/main/scripts/fix-types.ts
+ */
+
+import { generateVueCompat } from './helpers/vue-compat'
+
+await generateVueCompat(['wip'])

package/core/actions/src/generate.ts

@@ -0,0 +1,119 @@
+import { log } from '@stacksjs/logging'
+import { NpmScript } from '@stacksjs/types'
+import type { GeneratorOptions } from '@stacksjs/types'
+import { runNpmScript } from '@stacksjs/utils'
+import { projectPath } from '@stacksjs/path'
+import { runCommand } from '@stacksjs/cli'
+import { lintFix } from './lint'
+
+export async function invoke(options?: GeneratorOptions) {
+  if (options?.types)
+    await types(options)
+
+  else if (options?.entries)
+    await libEntries(options)
+
+  else if (options?.webTypes)
+    await webTypes(options)
+
+  else if (options?.customData)
+    await vsCodeCustomData(options)
+
+  else if (options?.ideHelpers)
+    await ideHelpers(options)
+
+  else if (options?.vueCompatibility)
+    await vueCompat(options)
+
+  else if (options?.componentMeta)
+    await componentMeta(options)
+}
+
+/**
+ * An alias of the invoke method.
+ * @param options
+ * @returns
+ */
+export async function generate(options: GeneratorOptions) {
+  return invoke(options)
+}
+
+export async function libEntries(options: GeneratorOptions) {
+  const result = await runCommand('esno .stacks/core/actions/src/generate-package-json.ts', { ...options, debug: true, cwd: projectPath() })
+
+  if (result.isErr()) {
+    log.error('There was an error generating your library entry points.', result.error)
+    process.exit()
+  }
+
+  log.success('Library entry points were generated successfully')
+}
+
+export async function vueCompat(options?: GeneratorOptions) {
+  const result = await runNpmScript(NpmScript.GenerateVueCompat, options)
+
+  if (result.isErr()) {
+    log.error('There was an error generating Vue 2 compatibility.', result.error)
+    process.exit()
+  }
+
+  log.success('Libraries are now Vue 2 & 3 compatible')
+}
+
+export async function webTypes(options?: GeneratorOptions) {
+  const result = await runNpmScript(NpmScript.GenerateWebTypes, options)
+
+  if (result.isErr()) {
+    log.error('There was an error generating the web-types.json file.', result.error)
+    process.exit()
+  }
+
+  log.success('Successfully generated the web-types.json file')
+}
+
+export async function vsCodeCustomData(options?: GeneratorOptions) {
+  const result = await runNpmScript(NpmScript.GenerateVsCodeCustomData, options)
+
+  if (result.isErr()) {
+    log.error('There was an error generating the custom-elements.json file.', result.error)
+    process.exit()
+  }
+
+  await lintFix({ fix: true }) // the created json file needs to be linted
+  log.success('Successfully generated the custom-elements.json file')
+}
+
+export async function ideHelpers(options?: GeneratorOptions) {
+  const result = await runNpmScript(NpmScript.GenerateIdeHelpers, options)
+
+  if (result.isErr()) {
+    log.error('There was an error generating IDE helpers.', result.error)
+    process.exit()
+  }
+
+  await lintFix({ fix: true }) // the created json file needs to be linted
+  log.success('Successfully generated IDE helpers')
+}
+
+export async function componentMeta(options?: GeneratorOptions) {
+  const result = await runNpmScript(NpmScript.GenerateComponentMeta, options)
+
+  if (result.isErr()) {
+    log.error('There was an error generating your component meta information.', result.error)
+    process.exit()
+  }
+
+  await lintFix({ fix: true }) // the created json file needs to be linted
+  log.success('Successfully generated component meta information')
+}
+
+export async function types(options?: GeneratorOptions) {
+  const result = await runNpmScript(NpmScript.GenerateTypes, options)
+
+  if (result.isErr()) {
+    log.error('There was an error generating your types.', result.error)
+    process.exit()
+  }
+
+  log.success('Types were generated successfully')
+}

package/core/actions/src/helpers/component-meta.ts

@@ -0,0 +1,93 @@
+import { existsSync, mkdirSync, writeFileSync } from 'node:fs'
+import fg from 'fast-glob'
+import MarkdownIt from 'markdown-it'
+import { type ComponentMeta, type MetaCheckerOptions, createComponentMetaChecker } from 'vue-component-meta'
+import { frameworkPath, join, parse, projectPath } from '@stacksjs/path'
+
+/**
+ * ℹ️ Useful Links
+ *
+ * vue-component-meta tests: https://github.com/johnsoncodehk/volar/blob/master/vue-language-tools/vue-component-meta/tests/index.spec.ts
+ * Discord thread about improving vue-component-meta: https://discord.com/channels/793943652350427136/1027819645677350912
+ * GitHub issue for improving vue-component-meta based on runtime/dynamic props: https://github.com/johnsoncodehk/volar/issues/1854
+ * Discord chat: https://discord.com/channels/793943652350427136/1027819645677350912
+ * original script: https://raw.githubusercontent.com/jd-solanki/anu/main/scripts/gen-component-meta.ts
+ */
+
+export async function generateComponentMeta() {
+  const md = new MarkdownIt()
+  const checkerOptions: MetaCheckerOptions = {
+    forceUseTs: true,
+    schema: { ignore: ['MyIgnoredNestedProps'] },
+    printer: { newLine: 1 },
+  }
+
+  const tsconfigChecker = createComponentMetaChecker(
+    projectPath('tsconfig.json'),
+    checkerOptions,
+  )
+
+  const filterMeta = (meta: ComponentMeta): ComponentApi => {
+  // const clonedMeta: ComponentMeta = JSON.parse(JSON.stringify(meta))
+
+    // Exclude global props
+    const props: ComponentApiProps[] = []
+    meta.props.forEach((prop: any) => {
+      if (prop.global)
+        return
+
+      const { name, description, required, type, default: defaultValue } = prop
+
+      props.push({
+        name: `${name}${required ? '' : '?'}`,
+        description: md.render(description),
+
+        // required,
+
+        type,
+        default: defaultValue || 'unknown',
+      })
+    })
+
+    return {
+      props,
+      events: meta.events,
+      slots: meta.slots,
+    }
+  }
+
+  const components = fg.sync(['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 meta = filterMeta(tsconfigChecker.getComponentMeta(componentPath, componentExportName))
+
+    const metaDirPath = frameworkPath('component-meta')
+
+    // if meta dir doesn't exist create
+    if (!existsSync(metaDirPath))
+      mkdirSync(metaDirPath)
+
+    const metaJsonFilePath = join(metaDirPath, `${componentExportName}.json`)
+    writeFileSync(metaJsonFilePath, JSON.stringify(meta, null, 4))
+  })
+}
+
+export interface ComponentApiProps {
+  name: ComponentMeta['props'][number]['name']
+  description: ComponentMeta['props'][number]['description']
+
+  // required: ComponentMeta['props'][number]['required']
+  type: ComponentMeta['props'][number]['type']
+  default: ComponentMeta['props'][number]['default']
+}
+
+export interface ComponentApi {
+  props: ComponentApiProps[]
+  events: ComponentMeta['events']
+  slots: ComponentMeta['slots']
+}

package/core/actions/src/helpers/index.ts

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

package/core/actions/src/helpers/lib-entries.ts

@@ -0,0 +1,130 @@
+import { log } from '@stacksjs/logging'
+// import { kebabCase } from '@stacksjs/strings'
+import { libraryEntryPath } from '@stacksjs/path'
+import { writeTextFile } from '@stacksjs/storage'
+import { determineResetPreset } from '@stacksjs/utils'
+import type { LibEntryType } from '@stacksjs/types'
+import { library } from '@stacksjs/config'
+
+/**
+ * Based on the config values, this method
+ * will generate the library entry points.
+ *
+ * @param type string
+ */
+export async function generateLibEntry(type: LibEntryType) {
+  try {
+    if (type === 'vue-components')
+      await createVueLibraryEntryPoint()
+
+    if (type === 'web-components')
+      await createWebComponentLibraryEntryPoint()
+
+    if (type === 'functions')
+      await createFunctionLibraryEntryPoint()
+  }
+  catch (err) {
+    log.error('There was an error generating the library entry point.', err)
+    process.exit()
+  }
+}
+
+export async function createVueLibraryEntryPoint() {
+  log.info('Creating the Vue component library entry point...')
+
+  await writeTextFile({
+    path: libraryEntryPath('vue-components'),
+    data: generateEntryPointData('vue-components'),
+  })
+
+  log.success('Created Vue component library entry point.')
+}
+
+export async function createWebComponentLibraryEntryPoint() {
+  log.info('Creating the Web Component library entry point...')
+
+  await writeTextFile({
+    path: libraryEntryPath('web-components'),
+    data: generateEntryPointData('web-components'),
+  })
+
+  log.success('Created Web Component library entry point.')
+}
+
+export async function createFunctionLibraryEntryPoint() {
+  log.info('Creating the Function library entry point...')
+
+  await writeTextFile({
+    path: libraryEntryPath('functions'),
+    data: generateEntryPointData('functions'),
+  })
+
+  log.success('Created Functions library entry point.')
+}
+
+export function generateEntryPointData(type: 'vue-components' | 'web-components' | 'functions'): string {
+  let arr = []
+
+  if (type === 'functions') {
+    if (!library.functions.functions) {
+      log.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 '../../../functions/${fx[0]}'`)
+      else
+        arr.push(`export * from '../../../functions/${fx}'`)
+    }
+
+    // join the array into a string with each element being on a new line
+    return arr.join('\r\n')
+  }
+
+  if (type === 'vue-components') {
+    if (!library.vueComponents.tags) {
+      log.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)) {
+      if (Array.isArray(component))
+        arr.push(`export { default as ${component[1]} } from '../../../components/${component[0]}.vue'`)
+      else
+        arr.push(`export { default as ${component} } from '../../../components/${component}.vue'`)
+    }
+
+    // join the array into a string with each element being on a new line
+    return arr.join('\r\n')
+  }
+
+  // at this point, we know it is a Web Component we are building
+  arr = determineResetPreset()
+  const imports = [...arr, 'import { defineCustomElement } from \'vue\'']
+  const declarations = []
+  const definitions = []
+
+  if (!library.webComponents.tags) {
+    log.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)) {
+    if (Array.isArray(component)) {
+      imports.push(`import ${component[1]} from '../../../components/${component[0]}.vue'`)
+      declarations.push(`const ${component[1]}CustomElement = defineCustomElement(${component[1]})`)
+      definitions.push(`customElements.define('${kebabCase(component[1])}', ${component[1]}CustomElement)`)
+    }
+    else {
+      imports.push(`import ${component} from '../../../components/${component}.vue'`)
+      declarations.push(`const ${component}CustomElement = defineCustomElement(${component})`)
+      definitions.push(`customElements.define('${kebabCase(component)}', ${component}CustomElement)`)
+    }
+  }
+
+  // join the array into a string with each element being on a new line
+  return [...imports, ...declarations, ...definitions].join('\r\n')
+}