search

choojs / hyperx

🏷 - tagged template string virtual dom builder
BSD 2-Clause "Simplified" License
1.01k stars 48 forks source link

Feature: allow custom optional closed tags #47

Open SilentCicero opened 7 years ago

SilentCicero commented 7 years ago

In react a custom component can be notated like this: <MyCustomComponent />, in hyperx you have to notate is like this <MyCustomComponent><MyCustomComponent>.

I would like to notate optionally closable, non-html tags that could or could not be closed at the end.

So I would register with hyperx these in opts, under optionallySelfClosing: []. If they are closed (i.e. ending with />) then they are treated as closed tags. If they are not (i.e. ending in >) then they have children and are not yet closed.

Another way would be to have a loose setting in opts. Where any tag, html or otherwise could be optional open or closed. However, this seems like more work to implement.

slaskis commented 7 years ago

This might be related to issue #34

ghost commented 7 years ago

Perhaps this feature could take an array to explicitly enumerate options but also a function so that people can use conventions such as checking for the presence of a capital letter as is common in react land? I also think we could rework the parser so self-closing tags don't search for a closing element.

SilentCicero commented 7 years ago

@substack re-work the parser, and make the policy strict: if /> then closed. Dont allow <br> only <br />. I think this would be amazing.

You could then remove all this: 'area', 'base', 'basefont', 'bgsound', 'br', 'col', 'command', 'embed', 'frame', 'hr', 'img', 'input', 'isindex', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr', '!--', // SVG TAGS 'animate', 'animateTransform', 'circle', 'cursor', 'desc', 'ellipse', 'feBlend', 'feColorMatrix', 'feComposite', 'feConvolveMatrix', 'feDiffuseLighting', 'feDisplacementMap', 'feDistantLight', 'feFlood', 'feFuncA', 'feFuncB', 'feFuncG', 'feFuncR', 'feGaussianBlur', 'feImage', 'feMergeNode', 'feMorphology', 'feOffset', 'fePointLight', 'feSpecularLighting', 'feSpotLight', 'feTile', 'feTurbulence', 'font-face-format', 'font-face-name', 'font-face-uri', 'glyph', 'glyphRef', 'hkern', 'image', 'line', 'missing-glyph', 'mpath', 'path', 'polygon', 'polyline', 'rect', 'set', 'stop', 'tref', 'use', 'view', 'vkern'

SilentCicero commented 7 years ago

@substack this would also speed up parsing times due to not having to test through this large string everytime.

SilentCicero commented 7 years ago

@substack how would I go about implementing this, any directions, I could do a branch and PR?