Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tnt Prefixed Components #111

Closed
wants to merge 7 commits into from
Closed

Tnt Prefixed Components #111

wants to merge 7 commits into from

Conversation

thombruce
Copy link
Owner

closes #80

By submitting this pull request, you agree to follow our Code of Conduct: https://github.com/thombruce/.github/blob/main/CODE_OF_CONDUCT.md


Internal use. Do not delete.

  • Tests passing
  • Coverage sufficient
  • Manual review
  • No A11y regression
  • Translations provided or not needed

@thombruce
Copy link
Owner Author

TntIcon and docs updated.

Note about docs: We could really do with a means of variably displaying different versions of the code, maybe making use of tabs to select the language; in this case Vue, Pug and Markdown.

@thombruce
Copy link
Owner Author

Ran into a bit of a roadblock trying to avoid duplication between Tnt Core and Tnt Content.

On TNT Core, we want all components to be prefixed with Tnt. On TNT Content, we want certain components to be usable without that prefix in markdown documents (:breadcrumbs rather than :tnt-breadcrumbs). This is easy enough to achieve but... we don't want to duplicate code unnecessarily.

The issue...

I've been creating component duplicates that aim to just render the actual component and pass along the props... and the slots. It's there we run into an issue. Slots are more difficult than props to pass along directly, and I've been trying to make use of Vue Render functions (h()) but these just aren't working.


Alternative solution:

The whole point of this effort was consistency. That tnt- prefix isn't actually what we want; it just seemed like the best approach. We could instead do away with it and offer up only prefix-less components. Then this duplication I'm attempting wouldn't be necessary at all; components wouldn't need to go by two separate names.

It's simpler... it's actually easier to migrate too, as well (we just look for uses of "Tnt" or "tnt-" in the consuming applications and remove the relevant instances). It sets up a cleaner foundation on which to... maybe develop on this idea more in future.

I think it sounds like the best option: scrap the prefixes, recommend against installing other libraries that might conflict with TNT.

@thombruce
Copy link
Owner Author

One thing's got me returning to the idea of using the Tnt- prefix... The Button component. <button> already exists in HTML. We could call it Btn instead, but this is the opposite of what we're already having to do for Image which would conflict with the <img> element.

Simply having a prefix avoids all of these conflicts, and potential future conflicts (future-proofing is important! You never know when a new HTML element will be added which conflicts with one of our components).

So to the problems I was having with using render functions to create duplicate components... let's just not worry about that, and instead fully duplicate the components where we need to. It is annoying but... so long as we have working components, we can look to refactor them for DRY code in the future.

@thombruce
Copy link
Owner Author

Cancelling this as it's tedious and not a priority. It can and will be circled back to as a later consideration late in the progress towards v1.0.

@thombruce thombruce closed this Dec 11, 2024
@thombruce thombruce deleted the tnt-components branch December 11, 2024 18:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Feature]: Prepend all components with Tnt...
1 participant