Unable to use `$remove:` in a schema definition

[Anthony Aslangul]

Reproduction

https://formkit.link/9d995065b46650a6cfeca1dec11242e5

Describe the bug

Consider this custom input:

import {
  $extend,
  outer,
} from '@formkit/inputs'

export const custom = {
  schema: $extend(
    outer(),
    {
      attrs: {
        class: "$classes.outer + ' $remove:text-orange'"
      }
    }
  ),

  type: 'input',
}

The rendered HTML contains the $remove: part inside the class attribute :

<div class="formkit-outer bg-green text-orange $remove:text-orange" data-type="custom" data-empty="true">
</div>

See the playground for a full reproduction with config files etc.

Just a hint, I talked about this issue on Discord and @andrew-boyd concluded to a problem with the class parsing.

Environment

• OS: Windows (WSL)
• Browser Chrome
• Version 123

[Andrew Boyd]

So thinking more on this I don't think it's actually a bug — when you modify the attr directly you're literally adding the string $remove:text-orange. There is no more parsing to be done. The parsed list is what is contained is classes.outer.

Alternatives:

• Do your $remove: at the config level if possible
• Do $remove via the component props which are part of the parsed pathway and end up becoming the classes.outer list. https://formkit.link/8126ad0dee4016979f9a62d0822701fb
• Use a feature (a plugin that is not inherited by children) to make modifications to the node as part of its definition: https://formkit.link/cffe8a25420a66efc371c01bfaf1bb00

[Anthony Aslangul]

Got it, thank you for your answer!

I think it might be interesting to improve the DX here. Note that I use the conditional here, I'm still learning FormKit and it's totally possible there are very good reasons unknown to me why this is not possible.

First, the string concatenation is not very intuitive / cumbersome. "$classes.outer + ' other-class'" works, but your brain really wants to write "$classes.outer other-class".

I was also sure it was possible to manipulate the $classes.outer in a way or another... and I tested a lot of things before asking on Discord (you know, the there must be a way to do it feeling).

What came to my mind at first glance when I was looking for a solution was:

1. Obviously, $classes.outer $remove:text-orange, but then the problem of "remove text-orange from where? $classes.outer ? What if there are multiple class pools concatened?
2. So maybe something like $classes.outer.replace('text-orange', ''), but I know, it's not javascript, it's explained in the doc (Although it looks very much like JavaScript — schema expressions are not JavaScript. They are better thought of as a templating language) :p It's tempting through.
3. Maybe $remove could be available in $fns? It's currently not, but since there are functions inside it, is there a way to implement something like $fns.remove($classes.outer, 'text-orange')?
4. Maybe it could be possible to access the $classes.outer output in JS, manipulate it and then use it in the attrs.class property. This point is interesting, I think accessing the final classes of a particular section could be awesome (using a helper function, a node function or anything else).

That was feedback as a newcomer writing his first inputs. For now I managed to progress without all that so it's obviously not mandatory :p

Have a nice day!