Property 'tw' does not exist on type ...

[KaruroChori]

It seems like there are some issues with the configuration of tailwind in jsx. By default all instances were tw is used are marked as error by ts. tailwind.config.js seems to be configured properly, and all extensions which are suggested in the vscode config are there, so I am not sure what is causing this. Has anyone else encountered a similar problem with this repo?

[rvion]

👋 hi there

tw is magivally injected though custom jsx function : src/utils/custom-jsx/jsx-dev-runtime.js

export { Fragment } from 'react/jsx-dev-runtime'
import { jsxDEV as jsxDEV_ } from 'react/jsx-dev-runtime'

// type ClassLike = string | { [cls: string]: any } | null | undefined | boolean
export const joinCls = (tw /*: ClassLike[]*/) /*: string[]*/ => {
    if (typeof tw === 'string') return tw
    if (Array.isArray(tw)) {
        const out /*: string[]*/ = []
        for (const arg of tw) {
            if (arg == null) continue
            if (typeof arg === 'string') out.push(arg)
            if (typeof arg === 'object') {
                for (const key of Object.keys(arg)) {
                    if (arg[key]) out.push(key)
                }
            }
        }
        return out.join(' ')
    }
    return ''
}

export function jsxDEV(type, props, key, isStaticChildren, source, self) {
    if (
        !hasOwnProperty.call(props, 'tw') // && //
        // !hasOwnProperty.call(props, 'x')
    )
        return jsxDEV_(type, props, key, isStaticChildren, source, self)
    let className = props.className ?? ''
    if (props.tw) className += ' ' + joinCls(props.tw)
    // if (props.x) className += ' ' + joinCls(props.x)
    const newProps = { ...props, className, tw: undefined, x: undefined }
    return jsxDEV_(type, newProps, key, isStaticChildren, source, self)
}

injected in vite via the vite.config.ts

...
    plugins: [
        // dynamicModulePlugin(),
        react({ jsxImportSource: 'src/utils/custom-jsx' }),
        // viteSingleFile(),
    ],
...

it's made known by typescript here: src/utils/custom-jsx/global.d.ts

import 'react'

type ClassLike = string | { [cls: string]: any } | null | undefined | boolean

declare global {
    namespace JSX {
        interface IntrinsicAttributes {
            tw?: string | ClassLike[]
        }
    }
}

declare module 'react' {
    interface DOMAttributes<T> {
        tw?: string | ClassLike[]
    }
}

---

On first CushyStudio run, it will create a tsconfig.custom.ts based on you github username added in the app

{
    "include": ["src","schema/global.d.ts","library/rvion/**/*","library/CushyStudio/**/*"]
,    "exclude": []
}

---

If you open this project in vscode (with open folder, not open specific file outside of a workspace), everything should work.

happy to help if you still have an issue with the tw property

[rvion]

also, in vsode, there is a build task called 👁️ tsc that actually only make sure type-checking is as pleasant for devs as possible, by checking all files (not just open ones), and reporting errors in vscode. if this task yields no error on the tw property, it means it should work

[KaruroChori]

it's made known by typescript here: src/utils/custom-jsx/global.d.ts

That is the issue, such file is nowhere to be found. It is problably excluded by gitignore. I added it manually, and now both tsc & the vscode syntax checker are happy. Was it supposed to be generated by some build step?

[rvion]

LOL ! thanks !

Was it supposed to be generated by some build step?

nope, you're just the first one to report this; it has never been commited. This file was mistakenly ignored 🙃

[KaruroChori]

Now it works as expected :). By the way, thanks for all time you spent on this project. I started something similar few months ago, but never got the time to push it to the bitter end. It is nice to have good tooling for comfyui emerging.

[rvion]

thanks for the kind words ! :) I'm planning lots of cool releases over the next few days