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

Projects
3 participants
@DominusVilicus
Copy link
Contributor

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 #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

@DominusVilicus

This comment has been minimized.

Copy link
Contributor Author

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>`
    }
})

@DominusVilicus DominusVilicus force-pushed the DominusVilicus:async-function-for-template branch from 8268430 to 638fd27 Jan 15, 2019

@DominusVilicus

This comment has been minimized.

Copy link
Contributor Author

commented Jan 15, 2019

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

But code works fine

@DominusVilicus DominusVilicus 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

@DominusVilicus

This comment has been minimized.

Copy link
Contributor Author

commented Jan 18, 2019

@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 added some commits Jan 18, 2019

@yyx990803 yyx990803 merged commit b65f6d7 into vuejs:dev Jan 18, 2019

5 checks passed

ci/circleci: install Your tests passed on CircleCI!
Details
ci/circleci: lint-flow-types Your tests passed on CircleCI!
Details
ci/circleci: test-cover Your tests passed on CircleCI!
Details
ci/circleci: test-e2e Your tests passed on CircleCI!
Details
ci/circleci: test-ssr-weex Your tests passed on CircleCI!
Details

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

@DominusVilicus DominusVilicus deleted the DominusVilicus:async-function-for-template branch Jan 19, 2019

@@ -23,7 +23,7 @@ export type RenderOptions = {
directives?: Object;
isUnaryTag?: Function;
cache?: RenderCache;
template?: string;
template?: string | (content: string, context: any) => string;

This comment has been minimized.

Copy link
@lbogdan

lbogdan Jan 19, 2019

Contributor

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
You can’t perform that action at this time.