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

Good intention, but have to forward with template literals #75

Open
gybfefe opened this issue Feb 12, 2018 · 3 comments
Open

Good intention, but have to forward with template literals #75

gybfefe opened this issue Feb 12, 2018 · 3 comments

Comments

@gybfefe
Copy link

gybfefe commented Feb 12, 2018

I think ES6 has a good evolution too, so why not implementing template literals?

@whiteinge
Copy link

Sounds like you want hyperx which can work alongside and with hyperscript.

Speaking for myself: If the markup will be primarily created by JS developers then I strongly prefer not using strings. Strings might be advantageous if the markup will be written by non-JS developers such as designers, UX, or CSS front end developers. Enclosing markup in a string sidesteps (or makes harder) all the programmatic advantages that come with generating individual elements via a direct JavaScript function -- syntax highlighting and parens balancing in my editor, linting, type checking, function composition, complex object/array spreading, and generating/combining arrays of elements via map/filter/reduce. Although the HTML syntax might be more familiar inside a string that's a temporary and small barrier to entry.

tl;dr: Choose whatever is best for the team doing the actual work. :-)

@gybfefe
Copy link
Author

gybfefe commented Feb 13, 2018

@whiteinge Not sure about your editor, but mine has a Template literal editor: https://marketplace.visualstudio.com/items?itemName=plievone.vscode-template-literal-editor

  • thnx the direction toward hyperx by the way

@nclu
Copy link

nclu commented May 12, 2018

I had the same thought about using templates, and decided to try out the same wrapper idea on the "emmet" thread and made my own:
https://github.com/nclu/template-literal-hyperscript

t`div#page
  div#header
    h1.classy ${{style: {'background-color': '#22f'}}}h
  div#menu${{style: {'background-color': '#2f2'}}}
    ul
      li one
      li two
      li three
  h2 ${{style: {'background-color': '#f22'}}}content title
  p
    $so it's just like a templating engine,${'\n'}
    $but easy to use inline with javascript
  p
    $the intention is for this to be used to create${'\n'}
    $reusable, interactive html widgets.`

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

No branches or pull requests

3 participants