Any plan to support customization on vite?

[xhebox]

I mean https://github.com/vitejs/vite, which is backended by rollup. Of course, I can use the packed .js & .css normally.

But it is not even possible to just import WaveUI from 'wave-ui/src/wave-ui' on vite. It looks like vite can not resolve component without .vue.

Or maybe support customization without a deep path include(which is not encouraged by vite)? Maybe by the syntax sugar in vuejs/rfcs#182, css variables.

EDIT: BTW, nice project. I found it well-considered on many details.

[antoniandre]

Hi @xhebox,
Thanks for your feedback.

I'm going to help you with that by adding all the .vue needed for the components resolving (Webpack resolves in vue-cli).
But I know Vite needs ESM modules, there's not much I can do for that atm since Webpack cannot produce it yet (the feature is being developed).

So you will need to bundle from the source code provided in the package.
Will let you know when all the .vue are added!

[antoniandre]

I've done the change, let me know if that's enough.

[xhebox]

[vite] SFC style compilation error: 
/home/xhe/project/iolab/node_modules/.pnpm/[email protected]/node_modules/wave-ui/src/wave-ui/components/w-checkbox.vue:148:12
Undefined variable.
   ╷
29 │     width: $small-form-el-size;

OK, now it can resolve components normally. But looks like all components does not known about the .scss included in main.ts.

[antoniandre]

Mmm, I see.
this could come from the fact that Rollup does not have the same syntax as vue-cli & Webpack.
In the project, if you look at the vue.config.js

find this code:

  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "@/wave-ui/scss/_variables.scss";@import "@/documentation/scss/_variables.scss";`
      }
    }
  }

You probably have to resolve it differently in Rollup, I don't remember though.
Let me know if I can add something to the codebase to to facilitate the work without breaking the Webpack build.

BTW, you probably know but just to be clear, this piece of code injects the variables from wave-ui/ SCSS and from documentation/ SCSS to all the components. It's the same as adding the import of SCSS variables in each file (that would work in Rollup).

[xhebox]

This worked for me. Yes, I need to inject variables manually. src/variables.scss is my custom style file including _variables.scss.

ViteUserConfig {
        cssPreprocessOptions: {
                scss: {
                        includePaths: ['src', 'node_modules'],
                        additionalData: '@import "variables.scss";'
                },
        },
}

And now it works in vite with customization. It is enough to use it normally. Thx for your help :).

I know I should open another issue... But vue-router@next did not change the usage much:

app.use(createRouter(...)) // vue3, tree-shaking consisdered

app.use(new Router(...)) // vue2

I guess wave-ui can do same to make vue2/vue3 share a highly similar api. Or is that api change intended?

[antoniandre]

That's great, thanks for sharing a solution.

Regarding the instantiation process, this is the only way I could get it to work, after trying multiple ways to be frank I also opened the source code from vue-router next but found it quite different use case.

I will now close this issue as resolved.
If ever I find a better way in the future, I will let you know. or if you think of a way please let me know or raise a PR! :)