Comments (5)
Hey, author of lit-html and former Dart team member here :)
The technique behind lit-html is already proving to be extremely fast and lightweight for HTML templating, and now there's a proposal (that implementers are very interested in) being discussed to add something like the internals of lit-html directly to the web platform: https://github.com/w3c/webcomponents/blob/gh-pages/proposals/Template-Instantiation.md
It's really nice to be able to write HTML templates in your programming language where you have direct access to data, can use first-class language constructs, and in a way that doesn't require any reflection. I've been thinking about how to do something similar in Dart, but it really does hinge on some specifics of tagged template literals that are not possible in Dart currently.
The key feature of tagged template literals for this use case is that they separate the literal parts from expression results, and pass the literals as a single, immutable argument that's guaranteed to be referentially identical across evaluations of the tagged literal.
lit-html.dart:
Map<TemplateLiteralStrings, Template> _templateCache;
TemplateResult html(TemplateLiteralStrings strings, List values) {
Template template = _templateCache[strings];
if (template == null) {
template = _makeTemplate(strings);
_templateCache[strings] = template;
}
return new TemplateResult(template, values);
}
User code:
TemplateResult nameTemplate(name) => html`<div>$name</div>`;
// first render
// This passes TemplateLiteralStrings(["<div>", "</div>"]) and ["Kasper"] to html()
render(nameTemplate('Kasper'), window.document.body);
// efficient re-render
// This passes TemplateLiteralStrings(["<div>", "</div>"]) and ["Dan"] to html()
// the first argument to html is identical to the previous call
render(nameTemplate('Dan'), window.document.body);
This feature turns out to be really useful for all kinds of DSLs that are used in cases where the embedded snippet has to be evaluated repeatedly. I've seen similar techniques used in GraphQL tags that parse the GraphQS query once, the let it be re-evaluated efficiently with different query parameters.
/cc @kasperl
from language.
I'm the maintainer of gettext package.
I am working on a complete gettext ecosystem for dart and stumble upon interpolation.
For now, I have the only option is to separate the original string and placeholders and interpolate them only after I get the translated string. Something like:
gettext("Hello, %s", [userName])
Developers often make the same mistake, and habitually write:
gettext("Hello, ${userName}")
And in that case, localization will not work because inside gettext function, there is no option to find out the original string.
With tagged templates support, it will be possible to make gettext as it should be: simple and intuitive.
from language.
Thank you @justinfagnani !
html-lit is a super promising and interesting approach to HTML Templating and of course it's going to play an important role in the next polymer
major release).
That's why I'd like to support it in polymerize but to do that definitively ES6 tagged string interpolation should be supported in dart, and that's should be no such a big problem IMHO : with a little effort there could be a great advantage for the dart lang.
/cc @jakemac53 @jmesserly @vsmenon
from language.
Agreed that this is important for JS interop.
from language.
See #1988.
from language.
Related Issues (20)
- Problem with hierarchical generic types HOT 3
- Add the concept of Functional Interface to adopt the concept of Higher Order Function HOT 17
- Static Analysis Fails to Detect Type Mismatch in Generic With Nullable Types HOT 4
- Enable CFA / exhaustiveness-checking for exhaustive switch statements HOT 4
- Infer generic classes in subclasses HOT 2
- Non-spec compliant behavior of dynamic dispatch on Object methods with unusual arguments HOT 18
- Create an Open Source foundation for the Dart language HOT 2
- Consider creating `macros` repo; how to use it for `dart_model` HOT 7
- Allow a library prefix (not an import prefix) to support access to shadowed names HOT 6
- More flexibility for the `base` keyword HOT 3
- Next steps for `dart_model` prototype integration HOT 16
- Static type metadata guided shorthands and features HOT 4
- No macro.TypeDeclarationImpl for `dynamic` HOT 5
- Adoption of functional programming in the Dart language HOT 2
- Enhancing `library` and `part of` Declarations in Dart HOT 1
- Create the type `Monad` HOT 4
- Allow `import` and `part` to have wildcard path to import every lib in specific directory HOT 1
- Adding conditional imports/parts with macros. HOT 2
- Consider changing the context for the operand of `throw` to `Object`. HOT 4
- Allow statically known class fields to be used in switch statements HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from language.