Is it possible to parse an HTML import file for TypeScript

Question

I'm working with custom elements. A lot of these (especially libraries like Polymer) use HTML imports to load the component.

Most elements involve some CSS, some HTML and some scripts, and these can be separate .css and .js/.ts, often with embedded HTML in strings (or React/Preact .tsx files).

There's a more elegant solution using HTML imports:

<link rel="import" href="my-component.html">

And then in my-component.html:

...
<template>
    <style>
        ...
    </style>
    <p>HTML content!</p>
</template>
<script>
    // Javascript to create custom element
</script>
...

I can use TypeScript externally with a separate .ts file, but that's a little messy. What I want to do is replace my-component.html with my-component.tshtml - a file that looks almost identical, but that has TypeScript instead of Javascript and that transpiles to the .html version in exactly the same way as .ts or .tsx files.

Is there any way to do this?

@Supersharp - so my compile-time TS is parsed at run-time by the server? That kind of defeats the point of having TS in the first place. If I was going to go down that route I'd have a regular .ts file and then have a post-build step that inserted it into the .html file, but that the bit I refer to as messy in the question. I'm looking for a better way. — Keith
– Keith, Commented Dec 13, 2016 at 10:03
Not at all. I wanted to say I didn't understand you question but I see my comment is worse so I will delete it! Are you looking for a tool like that stackoverflow.com/questions/14015899/… ? — Supersharp
– Supersharp, Commented Dec 13, 2016 at 10:42
@Supersharp not really - that question (and the selected action) are looking for runtime TypeScript compilation. That somewhat defeats the point of TypeScript and is useless for HTML import, as the whole point of them is grouping together HTML, CSS and script into a single fast download - an extra parsing step and library would completely nerf that. — Keith
– Keith, Commented Dec 13, 2016 at 13:37
OK so what you looking for is a parser that will generate inline javascript from inline typescript at compile time, isn't it? If so, a workaround could be to use a postbuild tool like gulp/grunt to concatenate HTML, CSS, JS in a single HTML file. — Supersharp
– Supersharp, Commented Dec 13, 2016 at 13:55
@Supersharp yes, exactly that. I can add post build command line stuff to do it, but that's messy and breaks map files. I'm wondering what the best way to do it is. — Keith
– Keith, Commented Dec 13, 2016 at 14:05

Supersharp · Accepted Answer · 2016-12-14 22:30:41Z

0

I'm not sure it's the best way to do this, but what I would do is create a script that :

Parse the .tshtml file for <script> content.
Call the TypeScript compiler to transpile the content to JavaScript.
Inject the result in replacement of the <script> element content.
Save the modified file as .html.

answered Dec 14, 2016 at 22:30

Supersharp

31.5k11 gold badges105 silver badges149 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keith Over a year ago

Yeah, I was thinking to write a gulp task that does just that (if I do I'll share it) but I don't want to reinvent the wheel.

Supersharp Over a year ago

Maybe you can find some useful code in the link in comments. Even if libs are client-side, some part could be reused in the server side... good luck anyway!

Collectives™ on Stack Overflow

Is it possible to parse an HTML import file for TypeScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related