@kubb/react-fabric 0.11.8 → 0.12.0

package/src/components/Function.tsx

@@ -1,7 +1,6 @@
 import { NodeTreeContext, provide, useNodeTree } from '@kubb/fabric-core'
 import type { JSDoc, Key, KubbElement, KubbNode } from '../types.ts'
 import { createJSDoc } from '../utils/createJSDoc.ts'
-import { Indent } from './Indent.tsx'
 
 type Props = {
   key?: Key
@@ -87,8 +86,12 @@ export function Function({ children, ...props }: Props): KubbElement {
       )}
       {' {'}
       <br />
-      <Indent size={2}>{children}</Indent>
+      <indent />
+      {/* Indent component to handle indentation*/}
+      {children}
       <br />
+      <dedent />
+      {/* Indent component to handle indentation*/}
       {'}'}
     </>
   )
@@ -156,8 +159,12 @@ function ArrowFunction({ children, ...props }: ArrowFunctionProps) {
         <>
           {' => {'}
           <br />
-          <Indent size={2}>{children}</Indent>
+          <indent />
+          {/* Indent component to handle indentation*/}
+          {children}
           <br />
+          <dedent />
+          {/* Indent component to handle indentation*/}
           {'}'}
           <br />
         </>

package/src/components/__snapshots__/{arrow_function_generics.ts → exported_async_arrow_function_with_generics.ts}

@@ -1,3 +1,3 @@
 export const getData = async <TData>(): Promise<number> => {
-  return 2;
+  return 2
 }

package/src/components/__snapshots__/{multiple_functions.ts → exported_async_function_with_generics.ts}

@@ -1,3 +1,3 @@
 export async function getData<TData>(): Promise<number> {
-  2;
+  return 2
 }

package/src/createReactFabric.ts

@@ -1,6 +1,5 @@
-import type { Fabric } from '@kubb/fabric-core'
 import { createFabric } from '@kubb/fabric-core'
-import type { FabricConfig, FabricMode } from '@kubb/fabric-core/types'
+import type { Fabric, FabricConfig, FabricMode } from '@kubb/fabric-core/types'
 import { openDevtools } from './devtools.ts'
 import type { Options } from './plugins/reactPlugin.ts'
 import { reactPlugin } from './plugins/reactPlugin.ts'

package/src/dom.ts

@@ -72,4 +72,15 @@ export const setTextNodeValue = (node: TextNode, text: string): void => {
   node.nodeValue = text
 }
 
-export const nodeNames = new Set<ElementNames>(['kubb-export', 'kubb-file', 'kubb-source', 'kubb-import', 'kubb-text', 'kubb-root', 'kubb-app', 'br'])
+export const nodeNames = new Set<ElementNames>([
+  'kubb-export',
+  'kubb-file',
+  'kubb-source',
+  'kubb-import',
+  'kubb-text',
+  'kubb-root',
+  'kubb-app',
+  'br',
+  'indent',
+  'dedent',
+])

package/src/globals.ts

@@ -16,6 +16,8 @@ declare global {
       'kubb-import': KubbImportProps
       'kubb-export': KubbExportProps
       br: LineBreakProps
+      indent: {}
+      dedent: {}
     }
   }
 }

package/src/index.ts

@@ -2,7 +2,7 @@
 import * as React from 'react'
 
 // expose fabric core helpers
-export { createFabric, createFile, type Fabric, FileManager, FileProcessor } from '@kubb/fabric-core'
+export { createFabric, createFile, FileManager, FileProcessor } from '@kubb/fabric-core'
 
 // react helpers
 export const useState = React.useState
@@ -19,7 +19,6 @@ export { App } from './components/App.tsx'
 export { Const } from './components/Const.tsx'
 export { File } from './components/File.tsx'
 export { Function } from './components/Function.tsx'
-export { Indent } from './components/Indent.tsx'
 export { Type } from './components/Type.tsx'
 
 // composables

package/src/jsx-namespace.d.ts

@@ -24,6 +24,8 @@ export namespace JSX {
     'kubb-import': KubbImportProps
     'kubb-export': KubbExportProps
     br: LineBreakProps
+    indent: {}
+    dedent: {}
   }
   type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>
   interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}

package/src/types.ts

@@ -2,7 +2,7 @@ import type { KubbFile } from '@kubb/fabric-core/types'
 import type React from 'react'
 import type { JSX, ReactNode } from 'react'
 
-type ReactElementNames = 'br' | 'div'
+type ReactElementNames = 'br' | 'div' | 'indent' | 'dedent'
 
 export type ElementNames = ReactElementNames | 'kubb-text' | 'kubb-file' | 'kubb-source' | 'kubb-import' | 'kubb-export' | 'kubb-root' | 'kubb-app'
 

package/src/utils/squashExportNodes.ts

@@ -3,8 +3,8 @@ import type { KubbFile } from '@kubb/fabric-core/types'
 import { nodeNames } from '../dom.ts'
 import type { DOMElement } from '../types.ts'
 
-export function squashExportNodes(node: DOMElement): Set<KubbFile.ResolvedExport> {
-  const exports = new Set<KubbFile.ResolvedExport>()
+export function squashExportNodes(node: DOMElement): Set<KubbFile.Export> {
+  const exports = new Set<KubbFile.Export>()
 
   const walk = (current: DOMElement): void => {
     for (const child of current.childNodes) {

package/src/utils/squashTextNodes.ts

@@ -1,12 +1,16 @@
+import { renderIndent } from '@kubb/fabric-core'
 import { createExport, createImport, print } from '@kubb/fabric-core/parsers/typescript'
-
+import type { RenderContextProps } from '@kubb/fabric-core/types'
 import { nodeNames } from '../dom.ts'
 import type { DOMElement, KubbFile } from '../types.ts'
 
-export function squashTextNodes(node: DOMElement): string {
+export function squashTextNodes(
+  node: DOMElement,
+  renderContext: RenderContextProps = { indentLevel: 0, indentSize: 2, currentLineLength: 0, shouldBreak: false },
+): string {
   let text = ''
 
-  const walk = (current: DOMElement): string => {
+  const walk = (current: DOMElement, context: RenderContextProps): string => {
     let content = ''
 
     for (const child of current.childNodes) {
@@ -50,16 +54,27 @@ export function squashTextNodes(node: DOMElement): string {
       }
 
       if (child.nodeName === '#text') {
-        nodeText = child.nodeValue
+        nodeText = renderIndent(child.nodeValue, context)
       } else {
         if (child.nodeName === 'kubb-text' || child.nodeName === 'kubb-file' || child.nodeName === 'kubb-source') {
-          nodeText = walk(child)
+          nodeText = walk(child, context)
         }
 
         nodeText = getPrintText(nodeText)
 
         if (child.nodeName === 'br') {
           nodeText = '\n'
+          context.currentLineLength = 0
+        }
+
+        if (child.nodeName === 'indent') {
+          context.indentLevel++
+          nodeText = ''
+        }
+
+        if (child.nodeName === 'dedent') {
+          context.indentLevel = Math.max(0, context.indentLevel - 1)
+          nodeText = ''
         }
 
         if (!nodeNames.has(child.nodeName)) {
@@ -72,9 +87,9 @@ export function squashTextNodes(node: DOMElement): string {
           }
 
           if (hasAttributes) {
-            nodeText = `<${child.nodeName}${attrString}>${walk(child)}</${child.nodeName}>`
+            nodeText = `<${child.nodeName}${attrString}>${walk(child, context)}</${child.nodeName}>`
           } else {
-            nodeText = `<${child.nodeName}>${walk(child)}</${child.nodeName}>`
+            nodeText = `<${child.nodeName}>${walk(child, context)}</${child.nodeName}>`
           }
         }
       }
@@ -85,7 +100,7 @@ export function squashTextNodes(node: DOMElement): string {
     return content
   }
 
-  text = walk(node)
+  text = walk(node, renderContext)
 
   return text
 }

package/dist/types-DNU0IVoW.d.ts

@@ -1,159 +0,0 @@
-import { r as __name } from "./chunk-DkQCb-7t.js";
-import { _ as Import, g as File, l as FileManager, m as Export, x as Source } from "./Fabric-7NilNj9Y.js";
-import React, { JSX, Key, ReactNode } from "react";
-
-//#region ../fabric-core/src/utils/TreeNode.d.ts
-type BarrelData = {
-  file?: File;
-  path: string;
-  name: string;
-};
-type Graph = {
-  nodes: Array<{
-    id: string;
-    label: string;
-  }>;
-  edges: Array<{
-    from: string;
-    to: string;
-  }>;
-};
-declare class TreeNode<TData = unknown> {
-  #private;
-  data: TData;
-  parent?: TreeNode<TData>;
-  children: Array<TreeNode<TData>>;
-  constructor(data: TData, parent?: TreeNode<TData>);
-  addChild(data: TData): TreeNode<TData>;
-  getChildByName(name: string): TreeNode<TData> | undefined;
-  get leaves(): Array<TreeNode<TData>>;
-  forEach(callback: (node: TreeNode<TData>) => void): this;
-  findDeep(predicate: (node: TreeNode<TData>) => boolean): TreeNode<TData> | undefined;
-  static toGraph(root: TreeNode<BarrelData>): Graph;
-  static fromFiles(files: Array<File>, rootFolder?: string): TreeNode<BarrelData> | null;
-}
-//#endregion
-//#region ../fabric-core/src/composables/useNodeTree.d.ts
-type ComponentNode = {
-  type: string;
-  props: Record<string, unknown>;
-};
-//#endregion
-//#region ../fabric-core/src/contexts/RootContext.d.ts
-type RootContextProps = {
-  /**
-   * Exit (unmount) the whole app.
-   */
-  exit: (error?: Error) => void;
-  /**
-   * TreeNode representing the tree structure of the app.
-   */
-  treeNode: TreeNode<ComponentNode>;
-  /**
-   * FileManager instance for managing files within the app.
-   */
-  fileManager: FileManager;
-};
-//#endregion
-//#region ../fabric-core/src/types.d.ts
-type JSDoc = {
-  comments: string[];
-};
-//#endregion
-//#region src/utils/getFunctionParams.d.ts
-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 Params = Record<string, Param | undefined>;
-type Options = {
-  type: 'constructor' | 'call' | 'object' | 'objectValue';
-  transformName?: (name: string) => string;
-  transformType?: (type: string) => string;
-};
-declare function createFunctionParams(params: Params): Params;
-declare class FunctionParams {
-  #private;
-  static factory(params: Params): FunctionParams;
-  constructor(params: Params);
-  get params(): Params;
-  get flatParams(): Params;
-  toCall({
-    transformName,
-    transformType
-  }?: Pick<Options, 'transformName' | 'transformType'>): string;
-  toObject(): string;
-  toObjectValue(): string;
-  toConstructor(): string;
-}
-//#endregion
-//#region src/types.d.ts
-type ReactElementNames = 'br' | 'div';
-type ElementNames = ReactElementNames | 'kubb-text' | 'kubb-file' | 'kubb-source' | 'kubb-import' | 'kubb-export' | 'kubb-root' | 'kubb-app';
-type Node = {
-  parentNode: DOMElement | undefined;
-  internal_static?: boolean;
-};
-type DOMNodeAttribute = boolean | string | number;
-type TextName = '#text';
-type TextNode = {
-  nodeName: TextName;
-  nodeValue: string;
-} & Node;
-type DOMNode<T = {
-  nodeName: NodeNames;
-}> = T extends {
-  nodeName: infer U;
-} ? U extends '#text' ? TextNode : DOMElement : never;
-type OutputTransformer = (s: string, index: number) => string;
-type DOMElement = {
-  nodeName: ElementNames;
-  attributes: Map<string, DOMNodeAttribute>;
-  childNodes: DOMNode[];
-  internal_transform?: OutputTransformer;
-  isStaticDirty?: boolean;
-  staticNode?: DOMElement;
-  onComputeLayout?: () => void;
-  onRender?: () => void;
-  onImmediateRender?: () => void;
-} & Node;
-type NodeNames = ElementNames | TextName;
-type KubbNode = ReactNode;
-type KubbElement = JSX.Element;
-type KubbTextProps = {
-  children?: KubbNode;
-};
-type KubbFileProps = {
-  id?: string;
-  children?: KubbNode;
-  baseName: string;
-  path: string;
-  override?: boolean;
-  meta?: File['meta'];
-};
-type KubbSourceProps = Source & {
-  children?: KubbNode;
-};
-type KubbImportProps = Import;
-type KubbExportProps = Export;
-type LineBreakProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
-//#endregion
-export { TreeNode as S, Params as _, Key as a, RootContextProps as b, KubbFileProps as c, KubbSourceProps as d, KubbTextProps as f, Param as g, FunctionParams as h, ElementNames as i, KubbImportProps as l, TextNode as m, DOMNode as n, KubbElement as o, LineBreakProps as p, DOMNodeAttribute as r, KubbExportProps as s, DOMElement as t, KubbNode as u, createFunctionParams as v, ComponentNode as x, JSDoc as y };

package/dist/types-DmtVGJ2r.d.cts

@@ -1,158 +0,0 @@
-import { S as __name, _ as Import, g as File, l as FileManager, m as Export, x as Source } from "./Fabric-aSfkC_Bb.cjs";
-import React, { JSX, Key, ReactNode } from "react";
-
-//#region ../fabric-core/src/utils/TreeNode.d.ts
-type BarrelData = {
-  file?: File;
-  path: string;
-  name: string;
-};
-type Graph = {
-  nodes: Array<{
-    id: string;
-    label: string;
-  }>;
-  edges: Array<{
-    from: string;
-    to: string;
-  }>;
-};
-declare class TreeNode<TData = unknown> {
-  #private;
-  data: TData;
-  parent?: TreeNode<TData>;
-  children: Array<TreeNode<TData>>;
-  constructor(data: TData, parent?: TreeNode<TData>);
-  addChild(data: TData): TreeNode<TData>;
-  getChildByName(name: string): TreeNode<TData> | undefined;
-  get leaves(): Array<TreeNode<TData>>;
-  forEach(callback: (node: TreeNode<TData>) => void): this;
-  findDeep(predicate: (node: TreeNode<TData>) => boolean): TreeNode<TData> | undefined;
-  static toGraph(root: TreeNode<BarrelData>): Graph;
-  static fromFiles(files: Array<File>, rootFolder?: string): TreeNode<BarrelData> | null;
-}
-//#endregion
-//#region ../fabric-core/src/composables/useNodeTree.d.ts
-type ComponentNode = {
-  type: string;
-  props: Record<string, unknown>;
-};
-//#endregion
-//#region ../fabric-core/src/contexts/RootContext.d.ts
-type RootContextProps = {
-  /**
-   * Exit (unmount) the whole app.
-   */
-  exit: (error?: Error) => void;
-  /**
-   * TreeNode representing the tree structure of the app.
-   */
-  treeNode: TreeNode<ComponentNode>;
-  /**
-   * FileManager instance for managing files within the app.
-   */
-  fileManager: FileManager;
-};
-//#endregion
-//#region ../fabric-core/src/types.d.ts
-type JSDoc = {
-  comments: string[];
-};
-//#endregion
-//#region src/utils/getFunctionParams.d.ts
-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 Params = Record<string, Param | undefined>;
-type Options = {
-  type: 'constructor' | 'call' | 'object' | 'objectValue';
-  transformName?: (name: string) => string;
-  transformType?: (type: string) => string;
-};
-declare function createFunctionParams(params: Params): Params;
-declare class FunctionParams {
-  #private;
-  static factory(params: Params): FunctionParams;
-  constructor(params: Params);
-  get params(): Params;
-  get flatParams(): Params;
-  toCall({
-    transformName,
-    transformType
-  }?: Pick<Options, 'transformName' | 'transformType'>): string;
-  toObject(): string;
-  toObjectValue(): string;
-  toConstructor(): string;
-}
-//#endregion
-//#region src/types.d.ts
-type ReactElementNames = 'br' | 'div';
-type ElementNames = ReactElementNames | 'kubb-text' | 'kubb-file' | 'kubb-source' | 'kubb-import' | 'kubb-export' | 'kubb-root' | 'kubb-app';
-type Node = {
-  parentNode: DOMElement | undefined;
-  internal_static?: boolean;
-};
-type DOMNodeAttribute = boolean | string | number;
-type TextName = '#text';
-type TextNode = {
-  nodeName: TextName;
-  nodeValue: string;
-} & Node;
-type DOMNode<T = {
-  nodeName: NodeNames;
-}> = T extends {
-  nodeName: infer U;
-} ? U extends '#text' ? TextNode : DOMElement : never;
-type OutputTransformer = (s: string, index: number) => string;
-type DOMElement = {
-  nodeName: ElementNames;
-  attributes: Map<string, DOMNodeAttribute>;
-  childNodes: DOMNode[];
-  internal_transform?: OutputTransformer;
-  isStaticDirty?: boolean;
-  staticNode?: DOMElement;
-  onComputeLayout?: () => void;
-  onRender?: () => void;
-  onImmediateRender?: () => void;
-} & Node;
-type NodeNames = ElementNames | TextName;
-type KubbNode = ReactNode;
-type KubbElement = JSX.Element;
-type KubbTextProps = {
-  children?: KubbNode;
-};
-type KubbFileProps = {
-  id?: string;
-  children?: KubbNode;
-  baseName: string;
-  path: string;
-  override?: boolean;
-  meta?: File['meta'];
-};
-type KubbSourceProps = Source & {
-  children?: KubbNode;
-};
-type KubbImportProps = Import;
-type KubbExportProps = Export;
-type LineBreakProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLBRElement>, HTMLBRElement>;
-//#endregion
-export { TreeNode as S, Params as _, Key as a, RootContextProps as b, KubbFileProps as c, KubbSourceProps as d, KubbTextProps as f, Param as g, FunctionParams as h, ElementNames as i, KubbImportProps as l, TextNode as m, DOMNode as n, KubbElement as o, LineBreakProps as p, DOMNodeAttribute as r, KubbExportProps as s, DOMElement as t, KubbNode as u, createFunctionParams as v, ComponentNode as x, JSDoc as y };

package/src/components/Indent.tsx

@@ -1,59 +0,0 @@
-import type { KubbElement } from '@kubb/react-fabric/types'
-import dedent from 'dedent'
-import indentString from 'indent-string'
-import React from 'react'
-
-type IndentProps = {
-  size?: number
-  children?: React.ReactNode
-}
-
-/**
- * Indents all children by `size` spaces.
- * Collapses consecutive <br /> tags to at most 2.
- *
- * Indent will dedent and re-indent string children and will prefix
- * non-string children with the requested number of spaces.
- */
-export function Indent({ size = 2, children }: IndentProps): KubbElement {
-  if (!children) {
-    return <></>
-  }
-
-  const childrenArray = React.Children.toArray(children)
-  const result: React.ReactNode[] = []
-
-  let prevWasBr = false
-  let brCount = 0
-
-  for (const child of childrenArray) {
-    if (React.isValidElement(child) && child.type === 'br') {
-      if (!prevWasBr || brCount < 2) {
-        result.push(child)
-        brCount++
-      }
-      prevWasBr = true
-    } else {
-      prevWasBr = false
-      brCount = 0
-      result.push(child)
-    }
-  }
-
-  return (
-    <>
-      {result.map((child) => {
-        if (typeof child === 'string') {
-          const cleaned = dedent(child)
-          return <>{indentString(cleaned, size)}</>
-        }
-        return (
-          <>
-            {' '.repeat(size)}
-            {child}
-          </>
-        )
-      })}
-    </>
-  )
-}

package/src/components/__snapshots__/arrow_function.ts

@@ -1,3 +0,0 @@
-export const getData = async () => {
-  return 2;
-}

package/src/components/__snapshots__/arrow_function_default.ts

@@ -1,3 +0,0 @@
-export default const getData = async () => {
-  return 2;
-}

package/src/components/__snapshots__/arrow_function_single_line.ts

@@ -1 +0,0 @@
-export const getData = async <TData>(): Promise<number> => 2;

package/src/components/__snapshots__/function_generics.ts

@@ -1,3 +0,0 @@
-export async function getData<TData>(): Promise<number> {
-  return 2;
-}

package/src/components/__snapshots__/function_with_comments.ts

@@ -1,6 +0,0 @@
-/**
- * @deprecated
- */
-export async function getData() {
-  return 2;
-}

package/src/components/__snapshots__/function_with_params.ts

@@ -1,3 +0,0 @@
-function myFunc(a: string, b: number) {
-  return true;
-}

package/src/components/__snapshots__/function_with_returnType.ts

@@ -1,3 +0,0 @@
-function myFunc(): boolean {
-  return true;
-}