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: allow innerHtml if no dynamic dependencies #3808

Conversation

@tanhauhau
Copy link
Member

tanhauhau commented Oct 27, 2019

if the mustache tag expression do not change, can use innerHtml.

For a this hello world example, saved 361 bytes without minified:

  • without this PR (1650 bytes)
  • with this PR (1289 bytes)

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR relates to an outstanding issue, so please reference it in your PR, or create an explanatory one for discussion. In many cases features are absent for a reason.
  • This message body should clearly illustrate what problems it solves. If there are related issues, remember to reference them.
  • Ideally, include a test that fails without this PR but passes with it. PRs will only be merged once they pass CI. (Remember to npm run lint!)

Tests

  • Run the tests tests with npm test or yarn test)
@tanhauhau tanhauhau force-pushed the tanhauhau:tanhauhau/mustache-tag-can-use-inner-html branch from abbfb04 to 464868b Oct 27, 2019
@mustafa0x

This comment has been minimized.

Copy link
Contributor

mustafa0x commented Oct 27, 2019

Suggestion: wouldn't it make more sense to use textContent instead of innerHTML?

Edit: I'm actually don't think that that is applicable here, sorry!

@Rich-Harris Rich-Harris merged commit 67bcc05 into sveltejs:master Oct 27, 2019
10 checks passed
10 checks passed
Tests (8, ubuntu-latest)
Details
Tests (8, windows-latest)
Details
Tests (8, macOS-latest)
Details
Tests (10, ubuntu-latest)
Details
Tests (10, windows-latest)
Details
Tests (10, macOS-latest)
Details
Tests (12, ubuntu-latest)
Details
Tests (12, windows-latest)
Details
Tests (12, macOS-latest)
Details
Lint
Details
@tanhauhau tanhauhau deleted the tanhauhau:tanhauhau/mustache-tag-can-use-inner-html branch Oct 27, 2019
@Rich-Harris

This comment has been minimized.

Copy link
Member

Rich-Harris commented Oct 27, 2019

Damn, this is nice! Took me a minute to work out why the lifecycle order is subtly different in that one case, but having understood it (at present, logRender is called before the fragment is actually 'created'), I think the behaviour in this PR is more correct, and it would make more sense if functions like logRender were always called in the c() method rather than at the let declaration site.

Found myself wishing that our hydration was smart enough that we could skip subtrees, making it possible to use innerHTML in that case as well but only if it has in fact changed. That's a conversation for another time though.

@tanhauhau

This comment has been minimized.

Copy link
Member Author

tanhauhau commented Oct 27, 2019

I havent really understood how svelte hydration works yet, but I guess I would have more bigger changes, that's why I left it as it is 🙈

@Conduitry

This comment has been minimized.

Copy link
Member

Conduitry commented Oct 27, 2019

Yeah this is definitely bad.

<div>{'<div onclick="alert(&quot;oh no&quot;)">click me</div>'}</div>
@tanhauhau

This comment has been minimized.

Copy link
Member Author

tanhauhau commented Oct 28, 2019

My bad for the security regression, i've made a PR to fix it:
#3816

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.