Can be used in production?

[patrickalima98]

Hello @Gomah , this project can be used in production?

[Gomah]

Hey @patrickalima98, using the spa mode in your nuxt.config.js, yes, it's ready for production.

However, for universal & generate mode, Vue’s throwing few errors when hydrating on CSR, it's probably due to the comments that the stencil renderer injects when rendering stencil components. I'll investigate more.

[patrickalima98]

Hello @Gomah , i'm currently working on a components library built with Stencil and my Website is are built with Nuxt, I'II investigate also.

Thank you :)

[Gomah]

So after further investigation, I assume the issue is with the Vue client-side hydration:

I first thought the comments injected were causing the issue:

(elm ssr, vnode.text is CSR)

But even by removing those comments using a RegExp before returning the html to the DOM, I could see the issue persisting:

I think those nodes mismatch because the defineCustomElements function is called after the Vue hydration.

On the assertNodeMatch:

SSR:

<bm-button color="is-primary" class="hydrated" s-id="1">
  <button class="button is-primary" c-id="1.0.0.0">
    <!--s.1.1.1.0.--><!--t.0.1--> Click Me! 
  </button>
</bm-button>

CSR, before vue hydration:

<bm-button color="is-primary" class="hydrated" s-id="1">
  Click Me!
</bm-button>

After vue & stencil hydration:

<bm-button color="is-primary" class="hydrated">
<!---->
  <button class="button is-primary hydrated">
    Click Me!
  </button>
</bm-button>

Not sure where to go from there, maybe defineCustomElements needs to be called and hydrate the stencil components before the Vue hydration, I need to investigate further.

[patrickalima98]

Hi @Gomah, i can't understand the erros rss, i created a new project with Nuxt and added your plugin, after this, I included my library built in Stencil and works fine for me, please look my screenshots.

My prompt:

My console:

I'm using the hydrate folder with loader folder.

[Gomah]

@patrickalima98 What's your stencil configuration in the nuxt.config.js file?

[Gomah]

And yeah, it will visually work fine but the DOM will be re-rendered as there are mismatching nodes.

[patrickalima98]

@Gomah this is my nuxt.config.js

const path = require('path');
export default {
  mode: 'universal',
  /*
  ** Headers of the page
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    '@nuiverse/core/dist/nuiverse-ui/nuiverse-ui.css'
  ],
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: ['@nuxt/typescript-build', 'nuxt-stencil'],
  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    ['nuxt-i18n', {
      locales: [
        {
          code: 'pt-br',
          file: 'pt-BR.js'
        },
      ],
      lazy: true,
      langDir: 'lang/',
      strategy: 'prefix_and_default',
      defaultLocale: 'pt-br',
      // Enable browser language detection to automatically redirect user
      // to their preferred language as they visit your app for the first time
      // Set to false to disable
      detectBrowserLanguage: {
        // If enabled, a cookie is set once a user has been redirected to his
        // preferred language to prevent subsequent redirections
        // Set to false to redirect every time
        useCookie: true,
        // Cookie name
        cookieKey: 'i18n_redirected',
        // Set to always redirect to value stored in the cookie, not just once
        alwaysRedirect: true,
        // If no locale for the browsers locale is a match, use this one as a fallback
        fallbackLocale: null
      },
    }],
  ],
  /*
  ** Axios module configuration
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
  /*
  ** Build configuration
  */
  build: {
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
      config.module.rules.push(
        {
            test: /\.md$/,
            include: path.resolve(__dirname, "content"),
            loader: "frontmatter-markdown-loader",
        }
      );
    },
    babel: {
      plugins: [
        ["@babel/plugin-proposal-decorators", { legacy: true }],
        ["@babel/plugin-proposal-class-properties", { loose: true }]
      ]
    }
  },
  stencil: {
    /**
     * Required options
     */

    // Your library name, or the path to its root folder.
    lib: 'E:/Projetos/Nuinalp/nfw/website/node_modules/@nuiverse/core',

    // The prefix to whitelist
    prefix: 'nv-',

    // By default, it takes the lib name. e.g: bulmil/dist/hydrate
    hydratePath: 'E:/Projetos/Nuinalp/nfw/website/node_modules/@nuiverse/core/hydrate',

    // By default, it takes the lib name. e.g: bulmil/dist/loader
    loaderPath: 'E:/Projetos/Nuinalp/nfw/website/node_modules/@nuiverse/core/loader',
  },
}

[Gomah]

Potentially a Stencil issue, see https://github.com/ionic-team/stencil/issues/2068

[patrickalima98]

Yes @Gomah, I can see.

[paolodina]

Hello, I'm considering to use nuxt+stencil in the near future, with nuxt in generate mode. Now that the issue with stencil is fixed, does vue still throw errors when hydrating on CSR? If you could test and report... thanks!

[Gomah]

Hey @paolodina, sorry for the late reply.

I'll be jumping back to Stencil + Nuxt in May so I'll have time to have a look at it again!

[patrickalima98]

Hello @Gomah, How are you? Any news about the project?

[Gomah]

Hey @patrickalima98, the project is on pause at the moment, will probably continue work on this module once Nuxt 3 is released!

[patrickalima98]

Hello @Gomah, i'm very excited to it :)

[DirkWolthuis]

@Gomah Nuxt 3 is out ;) I can't find any information about how to use stencil / webcomponents in nuxt. Are you aiming to fix that problem?

[billsur]

Hello @Gomah , thanks for an awesome package. I have a question. Is possible on nuxt.config.js assign more than one stencil project? I have 2 stencil projects that I want to implement

Thank you