@kubb/react-fabric 0.0.0-canary-20251020201500

package/src/utils/getFunctionParams.ts

@@ -0,0 +1,236 @@
+import { orderBy } from 'natural-orderby'
+
+export type Param = {
+  /**
+   * `object` will return the pathParams as an object.
+   *
+   * `inline` will return the pathParams as comma separated params.
+   * @default `'inline'`
+   * @private
+   */
+  mode?: 'object' | 'inline' | 'inlineSpread'
+  type?: 'string' | 'number' | (string & {})
+  optional?: boolean
+  /**
+   * @example test = "default"
+   */
+  default?: string
+  /**
+   * Used for no TypeScript(with mode object)
+   * @example test: "default"
+   */
+  value?: string
+  children?: Params
+}
+
+type ParamItem =
+  | (Pick<Param, 'mode' | 'type' | 'value'> & {
+      optional?: true
+      default?: never
+      children?: Params
+    })
+  | (Pick<Param, 'mode' | 'type' | 'value'> & {
+      optional?: false
+      default?: string
+      children?: Params
+    })
+
+export type Params = Record<string, Param | undefined>
+
+type Options = {
+  type: 'constructor' | 'call' | 'object' | 'objectValue'
+  transformName?: (name: string) => string
+  transformType?: (type: string) => string
+}
+
+function order(items: Array<[key: string, item?: ParamItem]>) {
+  return orderBy(
+    items.filter(Boolean),
+    [
+      ([_key, item]) => {
+        if (item?.children) {
+          return undefined
+        }
+        return !item?.default
+      },
+      ([_key, item]) => {
+        if (item?.children) {
+          return undefined
+        }
+        return !item?.optional
+      },
+    ],
+    ['desc', 'desc'],
+  )
+}
+
+function parseChild(key: string, item: ParamItem, options: Options): string | null {
+  // @ts-expect-error
+  const entries = order(Object.entries(item.children))
+
+  const types: string[] = []
+  const names: string[] = []
+
+  const optional = entries.every(([_key, item]) => item?.optional)
+
+  entries.forEach(([key, entryItem]) => {
+    if (entryItem) {
+      const name = parseItem(key, { ...entryItem, type: undefined }, options)
+      if (entryItem.children) {
+        const subTypes = Object.entries(entryItem.children)
+          .map(([key]) => {
+            return key
+          })
+          .join(', ')
+
+        if (subTypes) {
+          names.push(`${name}: { ${subTypes} }`)
+        } else {
+          names.push(name)
+        }
+      } else {
+        if (options.type === 'call' && options.transformName) {
+          names.push(`${key}: ${name}`)
+        } else {
+          names.push(name)
+        }
+      }
+
+      if (entries.some(([_key, item]) => item?.type)) {
+        types.push(parseItem(key, { ...entryItem, default: undefined }, options))
+      }
+    }
+  })
+
+  const name = item.mode === 'inline' ? key : names.length ? `{ ${names.join(', ')} }` : undefined
+  const type = item.type ? item.type : types.length ? `{ ${types.join('; ')} }` : undefined
+
+  if (!name) {
+    return null
+  }
+
+  return parseItem(
+    name,
+    {
+      type,
+      default: item.default,
+      optional: !item.default ? optional : undefined,
+    } as ParamItem,
+    options,
+  )
+}
+
+function parseItem(name: string, item: ParamItem, options: Options): string {
+  const acc: string[] = []
+  const transformedName = options.transformName ? options.transformName(name) : name
+  const transformedType = options.transformType && item.type ? options.transformType(item.type) : item.type
+
+  if (options.type === 'object') {
+    return transformedName
+  }
+
+  if (options.type === 'objectValue') {
+    return item.value ? `${transformedName}: ${item.value}` : transformedName
+  }
+
+  //LEGACY
+  if (item.type && options.type === 'constructor') {
+    if (item.optional) {
+      acc.push(`${transformedName}?: ${transformedType}`)
+    } else {
+      acc.push(`${transformedName}: ${transformedType}${item.default ? ` = ${item.default}` : ''}`)
+    }
+  } else if (item.default && options.type === 'constructor') {
+    acc.push(`${transformedName} = ${item.default}`)
+  } else if (item.value) {
+    acc.push(`${transformedName} : ${item.value}`)
+  } else if (item.mode === 'inlineSpread') {
+    acc.push(`... ${transformedName}`)
+  } else {
+    acc.push(transformedName)
+  }
+
+  return acc[0] as string
+}
+
+export function getFunctionParams(params: Params, options: Options): string {
+  const entries = order(Object.entries(params as Record<string, ParamItem | undefined>))
+
+  return entries
+    .reduce((acc, [key, item]) => {
+      if (!item) {
+        return acc
+      }
+
+      if (item.children) {
+        if (Object.keys(item.children).length === 0) {
+          return acc
+        }
+
+        if (item.mode === 'inlineSpread') {
+          return [...acc, getFunctionParams(item.children, options)]
+        }
+
+        const parsedItem = parseChild(key, item, options)
+        if (!parsedItem) {
+          return acc
+        }
+
+        return [...acc, parsedItem]
+      }
+
+      const parsedItem = parseItem(key, item, options)
+
+      return [...acc, parsedItem]
+    }, [] as string[])
+    .join(', ')
+}
+
+export function createFunctionParams(params: Params): Params {
+  return params
+}
+// TODO  use of zod
+//TODO use of string as `$name: $type` to create templates for functions instead of call/constructor
+export class FunctionParams {
+  #params: Params
+
+  static factory(params: Params) {
+    return new FunctionParams(params)
+  }
+  constructor(params: Params) {
+    this.#params = params
+  }
+
+  get params(): Params {
+    return this.#params
+  }
+
+  get flatParams(): Params {
+    const flatter = (acc: Params, [key, item]: [key: string, item?: Param]): Params => {
+      if (item?.children) {
+        return Object.entries(item.children).reduce(flatter, acc)
+      }
+      if (item) {
+        acc[key] = item
+      }
+
+      return acc
+    }
+    return Object.entries(this.#params).reduce(flatter, {} as Params)
+  }
+
+  toCall({ transformName, transformType }: Pick<Options, 'transformName' | 'transformType'> = {}): string {
+    return getFunctionParams(this.#params, { type: 'call', transformName, transformType })
+  }
+
+  toObject(): string {
+    return getFunctionParams(this.#params, { type: 'object' })
+  }
+  toObjectValue(): string {
+    return getFunctionParams(this.#params, { type: 'objectValue' })
+  }
+
+  toConstructor(): string {
+    return getFunctionParams(this.#params, { type: 'constructor' })
+  }
+}

package/src/utils/processFiles.ts

@@ -0,0 +1,44 @@
+import { nodeNames } from '../dom.ts'
+import { squashExportNodes } from './squashExportNodes.ts'
+import { squashImportNodes } from './squashImportNodes.ts'
+import { squashSourceNodes } from './squashSourceNodes.ts'
+
+import type { AppContext, KubbFile } from '@kubb/fabric-core'
+import type React from 'react'
+import type { File } from '../components/File.tsx'
+import type { DOMElement } from '../types.ts'
+
+export function processFiles(node: DOMElement, context: AppContext) {
+  for (let index = 0; index < node.childNodes.length; index++) {
+    const childNode = node.childNodes[index]
+
+    if (!childNode) {
+      continue
+    }
+
+    if (childNode.nodeName !== '#text' && childNode.nodeName !== 'kubb-file' && nodeNames.includes(childNode.nodeName)) {
+      processFiles(childNode, context)
+    }
+
+    if (childNode.nodeName === 'kubb-file') {
+      const attributes = childNode.attributes as React.ComponentProps<typeof File>
+
+      if (attributes.baseName && attributes.path) {
+        const sources = squashSourceNodes(childNode, ['kubb-export', 'kubb-import'])
+
+        const file: KubbFile.File = {
+          baseName: attributes.baseName,
+          path: attributes.path,
+          sources: [...sources],
+          exports: [...squashExportNodes(childNode)],
+          imports: [...squashImportNodes(childNode)],
+          meta: attributes.meta || {},
+          footer: attributes.footer,
+          banner: attributes.banner,
+        }
+
+        context.addFile(file)
+      }
+    }
+  }
+}

package/src/utils/squashExportNodes.ts

@@ -0,0 +1,23 @@
+import { nodeNames } from '../dom.ts'
+
+import type { KubbFile } from '@kubb/fabric-core'
+import type React from 'react'
+import type { File } from '../components/File.tsx'
+import type { DOMElement } from '../types.ts'
+
+export function squashExportNodes(node: DOMElement): Set<KubbFile.ResolvedExport> {
+  let exports = new Set<KubbFile.Export>()
+
+  node.childNodes.filter(Boolean).forEach((childNode) => {
+    if (childNode.nodeName !== '#text' && nodeNames.includes(childNode.nodeName)) {
+      exports = new Set([...exports, ...squashExportNodes(childNode)])
+    }
+
+    if (childNode.nodeName === 'kubb-export') {
+      const attributes = childNode.attributes as React.ComponentProps<typeof File.Export>
+      exports.add(attributes)
+    }
+  })
+
+  return exports
+}

package/src/utils/squashImportNodes.ts

@@ -0,0 +1,23 @@
+import { nodeNames } from '../dom.ts'
+
+import type { KubbFile } from '@kubb/fabric-core'
+import type React from 'react'
+import type { File } from '../components/File.tsx'
+import type { DOMElement } from '../types.ts'
+
+export function squashImportNodes(node: DOMElement): Set<KubbFile.Import> {
+  let imports = new Set<KubbFile.Import>()
+
+  node.childNodes.filter(Boolean).forEach((childNode) => {
+    if (childNode.nodeName !== '#text' && nodeNames.includes(childNode.nodeName)) {
+      imports = new Set([...imports, ...squashImportNodes(childNode)])
+    }
+
+    if (childNode.nodeName === 'kubb-import') {
+      const attributes = childNode.attributes as React.ComponentProps<typeof File.Import>
+      imports.add(attributes)
+    }
+  })
+
+  return imports
+}

package/src/utils/squashSourceNodes.ts

@@ -0,0 +1,40 @@
+import { nodeNames } from '../dom.ts'
+
+import type { KubbFile } from '@kubb/fabric-core'
+import type React from 'react'
+import type { File } from '../components/File.tsx'
+import type { DOMElement, ElementNames } from '../types.ts'
+import { squashTextNodes } from './squashTextNodes.ts'
+
+export function squashSourceNodes(node: DOMElement, ignores: Array<ElementNames>): Set<KubbFile.Source> {
+  let sources = new Set<KubbFile.Source>()
+
+  for (const childNode of node.childNodes) {
+    if (!childNode) {
+      continue
+    }
+
+    if (childNode.nodeName !== '#text' && ignores.includes(childNode.nodeName)) {
+      continue
+    }
+
+    if (childNode.nodeName === 'kubb-source') {
+      const attributes = childNode.attributes as React.ComponentProps<typeof File.Source>
+      const value = squashTextNodes(childNode)
+
+      sources.add({
+        ...attributes,
+        // remove end enter
+        value: value.trim().replace(/^\s+|\s+$/g, ''),
+      })
+
+      continue
+    }
+
+    if (childNode.nodeName !== '#text' && nodeNames.includes(childNode.nodeName)) {
+      sources = new Set([...sources, ...squashSourceNodes(childNode, ignores)])
+    }
+  }
+
+  return sources
+}

package/src/utils/squashTextNodes.ts

@@ -0,0 +1,82 @@
+import { createImport, createExport, print } from '@kubb/fabric-core/parsers/typescript'
+
+import type { File } from '../components/File.tsx'
+import { nodeNames } from '../dom.ts'
+import type { DOMElement } from '../types.ts'
+
+export function squashTextNodes(node: DOMElement): string {
+  let text = ''
+
+  for (const childNode of node.childNodes) {
+    if (!childNode) {
+      continue
+    }
+
+    let nodeText = ''
+
+    const getPrintText = (text: string): string => {
+      if (childNode.nodeName === 'kubb-import') {
+        const attributes = childNode.attributes as React.ComponentProps<typeof File.Import>
+
+        return print([
+          createImport({
+            name: attributes.name,
+            path: attributes.path,
+            root: attributes.root,
+            isTypeOnly: attributes.isTypeOnly,
+          }),
+        ])
+      }
+
+      if (childNode.nodeName === 'kubb-export') {
+        const attributes = childNode.attributes as React.ComponentProps<typeof File.Export>
+        if (attributes.path) {
+          return print([
+            createExport({
+              name: attributes.name,
+              path: attributes.path,
+              isTypeOnly: attributes.isTypeOnly,
+              asAlias: attributes.asAlias,
+            }),
+          ])
+        }
+      }
+
+      if (childNode.nodeName === 'kubb-source') {
+        return text
+      }
+
+      return text
+    }
+
+    if (childNode.nodeName === '#text') {
+      nodeText = childNode.nodeValue
+    } else {
+      if (['kubb-text', 'kubb-file', 'kubb-source'].includes(childNode.nodeName)) {
+        nodeText = squashTextNodes(childNode)
+      }
+
+      nodeText = getPrintText(nodeText)
+
+      if (childNode.nodeName === 'br') {
+        nodeText = '\n'
+      }
+
+      // no kubb element or br
+      if (![...nodeNames, 'br'].includes(childNode.nodeName)) {
+        const attributes = Object.entries(childNode.attributes).reduce((acc, [key, value]) => {
+          if (typeof value === 'string') {
+            return `${acc} ${key}="${value}"`
+          }
+
+          return `${acc} ${key}={${value}}`
+        }, '')
+        nodeText = `<${childNode.nodeName}${attributes}>${squashTextNodes(childNode)}</${childNode.nodeName}>`
+      }
+    }
+
+    text += nodeText
+  }
+
+  return text
+}