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

feat: add escape tagged function to escape html #112

Merged
merged 3 commits into from
Jan 28, 2024

Conversation

JacopoPatroclo
Copy link

It would be nice to have a tag function to escape unsafe inputs.
It improves readability in cases like this.

function Comp(props: { something: string, times: number }) {
   return <div>{Html.escape`You have ${props.something} ${props.times} times`}</div>
}

instead of:

function Comp(props: { something: string, times: number }) {
   return <div>You have {Html.escapeHtml(props.something)} {Html.escapeHtml(props.times)} times</div>
}

Let me know if it makes sense and if you like the implementation.
If you agree I will also make a PR to support this new way of escaping in the ts plugin

Copy link

codecov bot commented Jan 27, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Comparison is base (3ab074a) 98.71% compared to head (447b088) 98.74%.
Report is 1 commits behind head on master.

Additional details and impacted files
@@            Coverage Diff             @@
##           master     #112      +/-   ##
==========================================
+ Coverage   98.71%   98.74%   +0.02%     
==========================================
  Files           4        4              
  Lines        1009     1032      +23     
==========================================
+ Hits          996     1019      +23     
  Misses         13       13              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

@arthurfiorette
Copy link
Member

Hey @JacopoPatroclo awesome idea! Yes I'd love if you could add support for it in the ts plugin!

I'll change the implementation to follow this package's code standards and also export an alias called e, which would reduce verbosity in this case.

import { Html, e } from '@kitajs/html';

html = <div>{e`...`}</div>

@arthurfiorette arthurfiorette self-assigned this Jan 27, 2024
@arthurfiorette arthurfiorette added the enhancement New feature or request label Jan 27, 2024
@arthurfiorette arthurfiorette self-requested a review January 27, 2024 16:42
@arthurfiorette
Copy link
Member

@JacopoPatroclo what do you think?

@JacopoPatroclo
Copy link
Author

Hey @JacopoPatroclo awesome idea! Yes I'd love if you could add support for it in the ts plugin!

I'll change the implementation to follow this package's code standards and also export an alias called e, which would reduce verbosity in this case.

import { Html, e } from '@kitajs/html';

html = <div>{e`...`}</div>

I do not like such an extreme shortening, makes the code more obscure. But of course, this is my opinion and this is not my project 🤓
I'm glad that you liked the idea of using a tag function.
I'm going to open a PR in the other repo to support this new way of escaping HTML.

@arthurfiorette arthurfiorette merged commit 337573e into kitajs:master Jan 28, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

2 participants