Skip to content

Unmodified content rerendered when code is compiled with TypeScript to ES5 #270

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

Closed
wlinna opened this issue Sep 7, 2018 · 3 comments
Closed

Comments

@wlinna
Copy link

wlinna commented Sep 7, 2018

In short, hyperHTM doesn't work with TypeScript, because when code is compiled with TypeScript to ES5, unmodified content is rerendered. With Babel that doesn't happen.

I created a pen to demonstrate this issue:

https://codepen.io/anon/pen/oPoWXX?editors=0011

To see the issue, select TypeScript as a preprocessor (if it isn't already), start the video, and then press the button. The problem doesn't occur when using Babel as a preprocessor.

While I know this is a TypeScript problem (and you won't like seeing this issue here), I reported it here for two reasons:

  • To let you know that this problem still exists, even after efforts to fix / workaround the the problem
  • I don't know how to show that this is a TypeScript problem. I tried to understand the issue myself first*, but I'm unable to comprehend this problem fully (or more specifically, the attempted fix in TypeScript).

I know that you attempted to workaround the issue, but I don't know if it is present in hyperHTML v2, or if it ever covered this issue (completely).

It might be worth mentioning in the documentation, that using TypeScript with ES5 output is problematic, even if the problem is on the TypeScript side.

*I read microsoft/TypeScript#17956, #101, microsoft/TypeScript#18300 and some of your blog-posts

@WebReflection
Copy link
Owner

WebReflection commented Sep 7, 2018

This is your issue in a nutshell: TypeScript does not transpile ES6 string literals in a standard way.

Literally nothing I can do with this, and lit-html has the same exact issue.

Please talk to TypeScript chaps or ask CodePen if they are embedding an updated version of TypeScript.

var invokes = [];
function test(template) {
  invokes.push(template); 
}

function update(value) {
  test`some ${value}!`;
}

update(1);
update(2);

document.body.textContent = invokes[0] === invokes[1];

That should be true but it's false in TypeScript.

@WebReflection
Copy link
Owner

FYI I've fixed with yet another workaround TypeScript shenanigans hoping they will stop breaking standards behavior.

As soon as unpkg/hyperhtml returns version 2.13.1 your code pen should work just fine even in TypeScript.

@WebReflection WebReflection removed the bug label Sep 8, 2018
WebReflection pushed a commit that referenced this issue Sep 8, 2018
@wlinna
Copy link
Author

wlinna commented Sep 8, 2018

Thank you very much. You were quicker than I anticipated, and you even came up with a workaround. The pen works correctly now.

I'm going to bring this up at TypeScript's issue tracker in the near future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants