Custom attributes on outer element

[Thoronir42]

I'm enjoying FormKit quite a lot and I'd like to be able to keep html structure as flat as possible.
As of now, I'm using a container element (flex / grid) and need to use dedicated child wrappers in order to target individual inputs and apply width or col/row constraints. Think:

<fieldset>
  <div class="row">
    <div class="col" data-name="email">
      <FormKit name="email" .../>
    </div>
  </div>
</fieldset>

I think I could use the outer FormKit outer wrapper to avoid the need for layouting boilerplate and my idea is:

<fieldset data-layout="flex">
  <FormKit name="email" .../>
</fieldst>

Diving deep into the plugins system is still bit of a spanish village to me. I have tried searching the documentations and I've came up with a plugin draft but this results in the [data-name] attributes being garbled and shared across the FormKit instances.
I feel like I won't be able to bring this idea to a PoC in reasonable time withouth help so I'd like to ask for suggestions what I could do differently. My attempt is as follows:

// formkit.config.js

function addDataNameToOuterPlugin(node) {
    node.on("created", () => {
        if (!node.name) return

        node.props.definition.schemaMemoKey = `data-named_${node.props.definition.schemaMemoKey}`
        
        const schemaFn = node.props.definition.schema;
        node.props.definition.schema = (sectionsSchema = {}) => {
            sectionsSchema = {...sectionsSchema} // an attempt to ungarble the attributes, fruitless

            sectionsSchema.outer = {attrs: {"data-name": node.name}}
            console.log(node.name, sectionsSchema) // logs expected name and expected structure as assigned in the line above
            return schemaFn(sectionsSchema)
        }
    })
}

export default {
    plugins: [
        addDataNameToOuterPlugin,
    ],
}

[fenilli]

It all depends on how you would like to use it, but if the case is just to add a data-attribute to all formkit outer sections with their specific name you're almost there, I would use the schema referencing instead of a variable: https://formkit.link/7fccc906f39c626a3ad80b80c04042e5

There are some other things you should also do, like cloning the definition and passing it back to the node.

[Thoronir42]

Ha! That seems to do the trick, thank you!

I think I understand your code sort of confidently and hopefully I'll be able to keep and expand the knowledge.

I've based my attempt on the Add an asterisk to the labels of all required inputs at the Example plugins page and I feel like I've noobed out at understanding the extension system of the schema and got scared off.

What really helped me understand the schema system a bit better was:

1. more precise param name (extensions instead of sectionsSchema)
2. explanation comments on schema specific usage - i didn't realize the definition in props was being shared
3. example implementation :P

If I may as a gratitude, I'd like to warn you about your function checking. It catches nothing because negation !typeof schema takes precedence over identity comparison false === 'function', feel free to run following test:

let checkTypeof = (a) => ({
    "typeof a": typeof a,
    'typeof a === "function"': typeof a === "function",
    '!typeof a === "function"': !typeof a === "function",
    '!(typeof a === "function")': !(typeof a === "function"),
})
console.table([
    checkTypeof((o) => (o)),
    checkTypeof(42),
])

Thanks again for helping me and keep up the good job! :)