fix: Support div and other basic elements to be returned by `@kubb/…

…react`

.changeset/four-ties-greet.md

@@ -0,0 +1,5 @@
+---
+"@kubb/react": patch
+---
+
+Support `div` and other basic elements to be returned by `@kubb/react`

.github/workflows/release.yml

@@ -46,6 +46,7 @@ jobs:
           env:
             NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
             NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+            NPM_CONFIG_PROVENANCE: true
             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
         - name: Publish ${{ inputs.tag || 'canary' }}
@@ -57,6 +58,7 @@ jobs:
           env:
             NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
             GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+            NPM_CONFIG_PROVENANCE: true
 
 #        - name: Deploy to Coolify
 #          run: |

docs/changelog.md

@@ -4,10 +4,12 @@ title: Changelog
 
 # Changelog
 
+## 3.3.2
+- [`react/`](/helpers/react/): Support `div` and other basic elements to be returned by `@kubb/react`
+
 ## 3.3.1
 - [`plugin-zod`](/plugins/plugin-zod): Use of `tozod` util to create schema based on a type
 
-
 ## 3.3.0
 - [`plugin-client`](/plugins/plugin-client): `client` to use `fetch` or `axios` as HTTP client
 - [`plugin-zod`](/plugins/plugin-zod): Use Regular expression literal instead of RegExp-contructor

docs/getting-started/quick-start.md

@@ -102,6 +102,8 @@ When the cli is not an option, you could use the `@kubb/core` package to trigger
 ```typescript [index.ts]
 import { write } from '@kubb/fs'
 import { build, getSource } from '@kubb/core'
+import { pluginOas } from '@kubb/plugin-oas'
+import { pluginClient } from '@kubb/plugin-client'
 
 const { error, files, pluginManager } = await build({
   config: {
@@ -112,6 +114,10 @@ const { error, files, pluginManager } = await build({
     output: {
       path: './gen',
     },
+    plugins: [
+      pluginOas(),
+      pluginClient(),
+    ]
   },
 })
 

examples/generators/kubb.config.ts

@@ -4,6 +4,7 @@ import { defineConfig } from '@kubb/core'
 import { pluginOas } from '@kubb/plugin-oas'
 import { example1 } from './src/generators/example1'
 import { example2 } from './src/generators/example2'
+import { example3 } from './src/generators/example3'
 
 export default defineConfig(() => {
   return {
@@ -33,6 +34,13 @@ export default defineConfig(() => {
         validate: false,
         generators: [example2],
       }),
+      pluginOas({
+        output: {
+          path: './example3.tsx',
+        },
+        validate: false,
+        generators: [example3],
+      }),
     ],
   }
 })

examples/generators/src/gen/example3.tsx

@@ -0,0 +1,41 @@
+export function ListPets() {
+  const href = '/pets'
+
+  return (
+    <div className="test">
+      hello world
+      <a href={href}>Open get</a>
+      <button type="button" onClick={(e) => console.log(e)}>
+        Submit
+      </button>
+    </div>
+  )
+}
+
+export function CreatePets() {
+  const href = '/pets'
+
+  return (
+    <div className="test">
+      hello world
+      <a href={href}>Open post</a>
+      <button type="button" onClick={(e) => console.log(e)}>
+        Submit
+      </button>
+    </div>
+  )
+}
+
+export function ShowPetById() {
+  const href = '/pets/:petId'
+
+  return (
+    <div className="test">
+      hello world
+      <a href={href}>Open get</a>
+      <button type="button" onClick={(e) => console.log(e)}>
+        Submit
+      </button>
+    </div>
+  )
+}

examples/generators/src/generators/example3.tsx

@@ -0,0 +1,41 @@
+import transformers from '@kubb/core/transformers'
+import { URLPath } from '@kubb/core/utils'
+import type { PluginOas } from '@kubb/plugin-oas'
+import { createReactGenerator } from '@kubb/plugin-oas'
+import { useOperationManager } from '@kubb/plugin-oas/hooks'
+import { Const, File, Function } from '@kubb/react'
+import React from 'react'
+
+export const example3 = createReactGenerator<PluginOas>({
+  name: 'client-operation',
+  Operation({ operation }) {
+    const { getName, getFile } = useOperationManager()
+
+    const client = {
+      name: getName(operation, { type: 'function' }),
+      file: getFile(operation, { extname: '.tsx' }),
+    }
+
+    return (
+      <File baseName={client.file.baseName} path={client.file.path} meta={client.file.meta}>
+        <File.Source>
+          <Function name={transformers.pascalCase(operation.getOperationId())} export>
+            <Const name={'href'}>"{new URLPath(operation.path).URL}"</Const>
+            <br />
+            <br />
+            return
+            <div className="test">
+              hello world
+              {`
+              <a href={href}>Open ${operation.method}</a>
+              `}
+              <button type={'button'} onClick={(e) => console.log(e)}>
+                Submit
+              </button>
+            </div>
+          </Function>
+        </File.Source>
+      </File>
+    )
+  },
+})

packages/core/src/FileManager.ts

@@ -202,7 +202,10 @@ export async function getSource<TMeta extends FileMetaBase = FileMetaBase>(
   const parser = await getFileParser(file.extname)
   const source = await parser.print(file, { logger, extname })
 
-  return parser.format(source)
+  return parser.format(source).catch((err) => {
+    console.warn(err)
+    return source
+  })
 }
 
 function mergeFile<TMeta extends FileMetaBase = FileMetaBase>(a: KubbFile.File<TMeta>, b: KubbFile.File<TMeta>): KubbFile.File<TMeta> {

packages/react/src/components/File.test.tsx

@@ -148,9 +148,7 @@ describe('<File/>', () => {
         <>
           ignore
           <File baseName="test.ts" path="path">
-            <File.Source>
-              test<div>sdfs</div>
-            </File.Source>
+            <File.Source>test</File.Source>
           </File>
         </>
       )
@@ -184,6 +182,52 @@ describe('<File/>', () => {
     `)
   })
 
+  test('render File with source and React element', () => {
+    const description = 'description'
+    const Component = () => {
+      return (
+        <>
+          ignore
+          <File baseName="test.ts" path="path">
+            <File.Source>
+              {/* biome-ignore lint/a11y/useKeyWithClickEvents: <explanation> */}
+              <div className="className" aria-disabled={false} aria-valuemax={3} onClick={(e) => console.log(e)}>
+                sdfs
+              </div>
+            </File.Source>
+          </File>
+        </>
+      )
+    }
+    const root = createRoot()
+    root.render(<Component />)
+
+    expect(root.output).toMatchInlineSnapshot(`"<div className="className" aria-disabled={false} aria-valuemax={3} onClick={(e) => console.log(e)}>sdfs</div>"`)
+    expect(root.files).toMatchInlineSnapshot(`
+      [
+        {
+          "banner": undefined,
+          "baseName": "test.ts",
+          "exports": [],
+          "footer": undefined,
+          "imports": [],
+          "meta": {},
+          "override": undefined,
+          "path": "path",
+          "sources": [
+            {
+              "isExportable": undefined,
+              "isIndexable": undefined,
+              "isTypeOnly": undefined,
+              "name": undefined,
+              "value": "<div className="className" aria-disabled={false} aria-valuemax={3} onClick={(e) => console.log(e)}>sdfs</div>",
+            },
+          ],
+        },
+      ]
+    `)
+  })
+
   test('render File with multiple sources', async () => {
     const Component = () => {
       return (

packages/react/src/types.ts

@@ -1,6 +1,6 @@
 import type * as KubbFile from '@kubb/fs/types'
 import type { ReactNode } from 'react'
-type ReactElementNames = 'br'
+type ReactElementNames = 'br' | 'div'
 
 declare global {
   namespace JSX {

packages/react/src/utils/squashTextNodes.ts

@@ -3,6 +3,7 @@ import { print } from '@kubb/parser-ts'
 import * as factory from '@kubb/parser-ts/factory'
 
 import type { File } from '../components/File.tsx'
+import { nodeNames } from '../dom.ts'
 import type { DOMElement } from '../types.ts'
 
 export function squashTextNodes(node: DOMElement): string {
@@ -60,6 +61,18 @@ export function squashTextNodes(node: DOMElement): string {
       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