vue-server-renderer: camelCased local directives are not applied in SSR

[manniL]

What problem does this feature solve?

Currently, SSR directives can be only passed in with 'kebab-case' keys. This isn't denoted anywhere (except in the tests, luckily!) and not "intuitive" as they can be provided as camelCased ones on the client as well.

Can we introduce camelCased SSR directives?
I'd be available to work on the impl.

What does the proposed API look like?

directives: {
  classPrefixer: (node, dir) => {/*...*/}
}

[posva]

Can you provide a code sample that doesn't work? Directives are always in kebab-case, event on client

[manniL]

Hey @posva! 👋

You can pass them in as camelCase variants as well on client side (repro: https://codesandbox.io/s/yv37k52vyv). That's why I assumed it's possible for the vue-server-renderer as well 🙈

[posva]

But can you provide the simple js file that fails when ran with node? That should work

[manniL]

@posva Sure! There you go: https://codesandbox.io/s/w0vjky43l5

The directive is passed directly to the createBundleRenderer fn in Nuxt (https://github.com/nuxt/nuxt.js/blob/d35fc8f01584c3566d96cd1844413bca177a54a7/lib/core/renderer.js#L158)

[posva]

I mean one single js file to reproduce the problem: https://ssr.vuejs.org

[manniL]

Whoops. There you go:

// Step 1: Create a Vue instance
const Vue = require("vue");
const app = new Vue({
  template: `
  <div v-make-red>
    <h1>This should have red style!</h1>
  </div>
  `,
  directives: {
    makeRed: {
      inserted(el) {
        console.log("client directive");
        el.style.backgroundColor = "blue";
      }
    }
  }
});

const makeRed = (node, dir) => {
  const style = node.data.style || (node.data.style = {});
  console.log("server directive");
  if (Array.isArray(style)) {
    style.push({ backgroundColor: "red" });
  } else {
    style.backgroundColor = "red";
  }
};

// Step 2: Create a renderer
const renderer = require("vue-server-renderer").createRenderer({
  directives: {
    makeRed
  }
});

// Step 3: Render the Vue instance to HTML
renderer.renderToString(app, (err, html) => {
  if (err) throw err;
  console.log(html);
  // <div data-server-rendered="true"><h1>This should have red style!</h1></div>
  // But should include red background-color style
});

[manniL]

Of course, simply changing the declaration to { 'make-red': makeRed } would make the example work, but there is an inconsistency between client-side directive registration (which works in both kebab-case and camelCase) and server-side directive registration (only kebab-case)

[posva]

go ahead, nobody is working on this atm