Stenciljs SSR with vitepress (vue)

[rriemann]

Dear all,

I am entirely new to stenciljs. A custom components (webcomponents) library I rely on is made with Stenciljs and I try to integrate this one in vitepress that uses vue.

I got it working in the developer preview of vitepress, but ran into hydration mismatches for production builds. I presume I need to add a hydrate target to the custom components stenciljs project and configure SSR support in vitepress with it.

I have not found any example code of stenciljs components, vue/vite and SSR. Is this supposed to work? Do you know of public examples to learn from?

[johnjenkins]

hey @rriemann 👋
I don't see any reason why it wouldn't work (I use Stencil ssr within Nuxt without issue)

1. you'd setup a dist-hydrate-script output in stencil.config
2. you'd import (I'd expect) renderToString from the script generated, where you'd pass it an html string

where you'd do ^ 2 will depend. Having just had a brief look at vitepress docs, I'd guess transformhtml is a likely candidate

[rriemann]

I tried with this config.js in my vitepress project unsuccessfully (shortened):

export default defineConfig({
  srcDir: ".",
  srcExclude: ['**/README.md', '**/TODO.md', 'news/authors/*.md'],
  lang: 'en-GB',
  base: '/',
  vite: {
    plugins: [
      vueJsx(),
      stencilSSR({
        module: import('@ecl/ecl-webcomponents-vue'),
        from: '@ecl/ecl-webcomponents-vue',
        hydrateModule: import('@ecl/ecl-webcomponents-hydrate'),
        serializeShadowRoot: {
          'scoped': ['my-counter'],
          default: 'declarative-shadow-dom',
        },
      }),
    ],
    resolve: {
      alias: {
        // this folder is copied together with the script of npm run docs:build
        '/build': resolve(__dirname, '../../node_modules/@ecl/ecl-webcomponents/dist/ecl-webcomponents/build'),
      },
    },
    define: {
      __VUE_PROD_DEVTOOLS__: 'true', // TODO
      // enable hydration mismatch details in production build
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true', // TODO
    },
  },
  vue: {
    template: {
      compilerOptions: {
        // treat all tags with a dash as custom elements
        isCustomElement: (tag) => tag.includes('ecl-'),
      },
    },
  },
}

I notice that all examples are about react and not vue. Your answer suggest as well that I cannot use such viteplugin, but have to use one of the render functions of the hydrate app. Can you please confirm?

So then I tried what you suggested (shortened):

export default defineConfig({
  srcDir: ".",
  srcExclude: ['**/README.md', '**/TODO.md', 'news/authors/*.md'],
  lang: 'en-GB',
  base: '/',
  vite: {
    plugins: [
      vueJsx(),
    ],
    resolve: {
      alias: {
        // this folder is copied together with the script of npm run docs:build
        '/build': resolve(__dirname, '../../node_modules/@ecl/ecl-webcomponents/dist/ecl-webcomponents/build'),
      },
    },
    define: {
      __VUE_PROD_DEVTOOLS__: 'true', // TODO
      // enable hydration mismatch details in production build
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true', // TODO
    },
  },
  vue: {
    template: {
      compilerOptions: {
        // treat all tags with a dash as custom elements
        isCustomElement: (tag) => tag.includes('ecl-'),
      },
    },
  },
  transformHtml: async (code, id, context) => {
    const hydrate = await import('@ecl/ecl-webcomponents-hydrate');
    console.log(context.page) // context.content
    const results = await hydrate.renderToString(
      code,
      {
        fullDocument: true,
        serializeShadowRoot: 'declarative-shadow-dom',
        prettyHtml: true,
      }
    )
    return results.html
  }
})

It works somehow. Not sure if my shadow DOM settings are right – so far I get a very visible "shadow" copy underneath with content from markdown not always in sync…

Can you please advise whether I should rather use renderToString or renderDocument? Should I not use fullDocument option? I played around with the settings a bit, but did not get it working.