Feature request: Free-form tags (for usage with Vue.js and other libraries)
Closed this issue · 10 comments
Hi (setf paul 'ruricolist),
I kindly request the :free-tag meta-tag to be added to Spinneret, as specified here:
https://github.com/defunkydrummer/spinneret-vue
This is to make easier the generation of HTML5 for frameworks like Vue, React and Angular. This means generating a tag with any kind of name and any attribute names -- bypassing spinneret validations.
Currently the "dynamic tag generation" feature on Spinneret only allows tags that are valid HTML5 tags.
I have already implemented this as a hack, see:
https://github.com/defunkydrummer/spinneret-vue/blob/master/spinneret-vue-patcher.lisp#28
However it would be nice if this meta-tag was available there.
Edit: I see i was working on spinneret 2.3. I am currently testing my code with the version that is available on the latest QL dist.
incf Edit: Yes, it works with version 2.7 too.
This sounds like a good idea. I'm not familiar with Vue, though, so you'll have to give some time to understand the changes.
By the way, Serapeum is only at version 2.0. I think you may have been deceived by the *version* variable, which is inherited from Parenscript: 2.7 is the current version of Parenscript. I should probably shadow the binding.
So the Vue docs encourage you to name your components with names that are valid according to the W3C standard for valid custom element names:
https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name
My first thought is that, if I implement those rules as part of the tag validation logic -- that is, anything that looks like a custom tag (all-lowercase with a hyphen) gets a pass -- then that would work for Vue or anything else compatible with the spec.
What do you think?
Hi (list 'rurico),
I feel encouraged by your quick response and offering.
About version: Oops, my bad!! So there isn't any way to fingerprint spinneret?!
About Vue: The following attr names are often used with vue:
-
attributes that start with a colon: this is shorthand:
v-bind:<var name>==:<var-name> -
attributes that start with
@: more shorthand -
"slot", "slot-scope" : to be deprecated in vue 3
-
anything that starts with
v-
"all lowercase with a hypen" wouldn't work since sometimes the variables to bind will have camelcase, thus you could have something like v-bind:DataSource.
There might be more, i'm learning Vue yet. But I think having a free-tag metatag without any kind of validation is good. Honestly, the attribute validation enforcement is what I like the least about spinneret, otherwise it rules the world.
In fact, it would be easier to just have a config parameter that just disables attribute validation altogether...
Just about versioning: you can use (asdf:version-satisfies (asdf:find-system "spinneret") "2.0") for Spinneret (or any other system that specifies a version number). Or, equivalently, you can change the :depends-on clause the system definition from :spinneret to (:version "spinneret" "2.0").
There is a trick to disable attribute validation, which I've added to the readme: you can add the empty string to *unvalidated-attribute-prefixes*.
I've added support for custom elements: basically, any tag that starts with an alphabetic character and includes a hyphen is now considered valid, and its attributes are not validated.
Thanks Paul!! I'll take a look and update my own lib as soon as I get the time.
Should this issue be closed now?
I'm going to close this issue for now. @defunkydrummer, feel free to re-open if necessary.