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

Support functional templates #1

Open
4 tasks
egoist opened this issue Jan 5, 2019 · 2 comments
Open
4 tasks

Support functional templates #1

egoist opened this issue Jan 5, 2019 · 2 comments
Labels
difficulty: hard enhancement New feature or request

Comments

@egoist
Copy link
Owner

egoist commented Jan 5, 2019

Current way:

const template = html`<div>{{ message }}</div>`

New syntax:

const template = vm => html`<div>${vm.message}</div>`
  • interpolations, like <span>${vm.message}</span>
  • prop values, like @click=${vm.inc}
  • v-for, impossible, we can convert .map to v-for but that's JSX not Vue template..
  • v-if v-else v-else-if, like <div v-if=${vm.foo}></div>
@egoist egoist added the enhancement New feature or request label Jan 5, 2019
@c01nd01r
Copy link

c01nd01r commented Jan 8, 2019

Hi!
What does it mean "functional templates" in current issue context?
It's "Vue functional components (with FunctionalRenderContext)" or "Local inline template for current Vue component" ?

If it's the second variant - can be possible using something like this with TypeScript?

const template = (vm: Hello) => html`<div>${vm.message}</div>`

@Component
export default class Hello extends Vue {
  message: string = 'Hello, world!';
  render() {
    return template(this);
  }
}

@egoist
Copy link
Owner Author

egoist commented Jan 9, 2019

@c01nd01r the second one, but that doesn't work for now, html`<div>{{ message }}</div>` returns undefined. I got an idea on how to implement this, but probably as 2.0

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
difficulty: hard enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants