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

[feature] allow template to be function in vue-server-renderer #9324

Merged
merged 9 commits into from
Jan 18, 2019

Conversation

AlbertMarashi
Copy link

@AlbertMarashi AlbertMarashi commented Jan 15, 2019

What kind of change does this PR introduce? (check at least one)

  • Bugfix
  • Feature
  • Code style update
  • Refactor
  • Build-related changes
  • Other, please describe:

Does this PR introduce a breaking change? (check one)

  • Yes
  • No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

If adding a new feature, the PR's description includes:

  • A convincing reason for adding this feature (to avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it)

Other information:

@yyx990803 I've found a solution to #9205

It's a very simple addition, to the vue-server-renderer package that has tonnes of use-cases and actually makes the vue-server-renderer much easier to use, as it provides a template function to the bundle renderer template compiler.

This isn't a breaking change and doesn't really need any tests, as it is a user-provided function

It would be amazing if this could be added in 2.6, so I could use it in my package

Use cases

  1. Allows head management within single file components (see [ssr] Add Vue function to render VNode to html string #9205)
  2. Allows async functions within the template option
  3. Makes the vue-server-renderer templater much easier to use, and allows users to use javascript interpolations. For example: <!--vue-ssr-outlet--> becomes ${result}

Bonus

I'm creating a serverside rendering templating engine for Vue that will use this feature. It includes:

  • A super simple head management system that exists entirely within the <template>, like native html
  • full server-side rendering with Webpack
  • CommonJS based, so users can easily implement it into koa/express projects
  • templating using slots
  • runtime compilation of Vue files (which are cached)

The package is aimed for users who want to start using Vue but want to keep express/koa routing which will make building serverside applications much easier for users, and will increase Vue adoption in the process

@AlbertMarashi
Copy link
Author

AlbertMarashi commented Jan 15, 2019

Please see #9205 for use case

It's great for head management, and actually makes the vue-server-renderer templating system much easier to use for users.

Example of new feature:

const { createBundleRenderer } = require("vue-server-renderer")

const renderer = createBundleRenderer(serverbundle, {
    async template (result, context){
          return `<!DOCTYPE html>
               <html>
               <head>
                   ${ context.renderStyles() }
               </head>
               <body>
                   ${result}
               </body>
           </html>`
    }
})

@AlbertMarashi
Copy link
Author

AlbertMarashi commented Jan 15, 2019

Tests for npm run test:ssr are broken. Just tested a fresh vue dev installation

But code works fine

@AlbertMarashi AlbertMarashi changed the title allow template to be function in vue-server-renderer [feature] allow template to be function in vue-server-renderer Jan 18, 2019
@AlbertMarashi
Copy link
Author

@yyx990803 will this be making 2.6? If so, I can assist in writing the documentation for this feature

@yyx990803 yyx990803 added this to In progress in 2.6 Jan 18, 2019
@yyx990803 yyx990803 merged commit b65f6d7 into vuejs:dev Jan 18, 2019
2.6 automation moved this from In progress to Done Jan 18, 2019
yyx990803 added a commit that referenced this pull request Jan 18, 2019
@AlbertMarashi AlbertMarashi deleted the async-function-for-template branch January 19, 2019 01:03
@@ -23,7 +23,7 @@ export type RenderOptions = {
directives?: Object;
isUnaryTag?: Function;
cache?: RenderCache;
template?: string;
template?: string | (content: string, context: any) => string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Wouldn't (context, content) be a better API, consistent with, for example, vuex actions, which have context as their first argument?

f2009 pushed a commit to f2009/vue that referenced this pull request Jan 25, 2019
f2009 pushed a commit to f2009/vue that referenced this pull request Jan 25, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
No open projects
2.6
  
Done
Development

Successfully merging this pull request may close these issues.

None yet

3 participants