Type of class attribute allows array of strings

[rothsandro]

Describe the bug The parameter type of the class attribute function accepts a string or an array of strings. But when using an array it will call .join() which results in class="one,two,three".

To Reproduce Steps to reproduce the behavior:

1. Create an element: h.p.class(['one', 'two', 'three'])('hello')
2. Inspect the element in the DOM
3. The classes are joined with ,

<p class="one,two,three">hello</p>

Expected behavior The classes should be joined using spaces:

<p class="one two three">hello</p>

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Brave
• Version: 1.36
• Node: 16.13.0
• Eleventy: 1.0.0

Additional context Right now we either need to use a string or add a custom plugin:

setPlugins(h, [
  {
    attribute: (tagName, key, args) => {
      if (key === "class" && Array.isArray(args)) {
        return [key, args.join(" ")];
      }
      return [key, args];
    },
  },
]);

[willmartian]

Thank you for the issue! I am trying to figure out the API for this one.

Would you prefer that the core library contain built-in helpers like this, where various attributes can accept objects and arrays that are properly spread?

Or is it better to move all of these helpers to a single plugin, and keep the core library as close to HTML as possible?

[rothsandro]

Hm, good question 🤔 As long as this doesn't blow up the core lib too much it could be part of the core.

But having it as a plugin would also be nice if (and that's the tricky part) the core would only accept a string and adding the plugin would also extend the types to accept arrays/objects. Doing that magically is probably not possible (or is it?). Maybe when the plugin is a separate package and installing will register the types (similar to Jest plugins). Or maybe adding a plugin needs to return a new h that then needs to be used instead of the original h?

import { h as _h, setPlugins } from 'hdot'; 

_h.p.class("only string is allowed");

export const h = setPlugins(_h, [ ... ]);

h.p.class(["an", "array", "is", "allowed"]);