search

balmjs / balm-ui

:diamonds: A modular and customizable UI library based on Material Design and Vue
https://material.balmjs.com
MIT License
505 stars 31 forks source link

SSR Support! #55

Open folamy opened 3 years ago

folamy commented 3 years ago

Can I use balm-ui in vue ssr?

elf-mouse commented 3 years ago

Yes.

You can use Nuxt:

npx create-nuxt-app <my-project>

Choose BalmUI

And edit nuxt.config.js:

import { resolve } from "path";

export default {
  // ...
  alias: {
    vue$: resolve(__dirname, './node_modules/vue/dist/vue.esm.js')
  }
};

Then, enjoy :)

folamy commented 3 years ago

@elf-mouse Thank you for your response. However, I am using Vitejs with ssr-vue(vue 3 SSR) example here:

[https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue]()

Can you help me with this, please?

folamy commented 3 years ago

@elf-mouse @ I did another test and discovered that trying to import BalmUIPlus from 'balm-ui-plus'causes this error:

[vite] Error when evaluating SSR module /node_modules/balm-ui/dist/balm-ui-plus.esm.js: TypeError: Cannot read property 'undefined' of undefined at new renderSlot (/home/folamy/Desktop/vitessr/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:712:21) at U (/node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:4384) at /node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:7516 at /node_modules/balm-ui/dist/balm-ui-plus.esm.js:1:8699 at instantiateModule (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68197:166) (node:20329) UnhandledPromiseRejectionWarning: TypeError: Line must be greater than or equal to 1, got -1 at BasicSourceMapConsumer.SourceMapConsumer_findMapping [as _findMapping] (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:67083:13) at BasicSourceMapConsumer.SourceMapConsumer_originalPositionFor [as originalPositionFor] (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:67152:22) at /home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68098:34 at String.replace () at /home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68088:21 at Array.map () at ssrRewriteStacktrace (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68087:10) at Object.ssrFixStacktrace (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68408:27) at /home/folamy/Desktop/vitessr/server.js:77:20 (Use node --trace-warnings ... to show where the warning was created) (node:20329) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:20329) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Also, trying to do Individual Usage import UiButton from 'balm-ui/components/button' and import $alert from 'balm-ui/plugins/alert' causes this error: [vite] Error when evaluating SSR module /src/main.js: TypeError: Cannot read property 'createVNode' of undefined at /home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:2993 at /home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:23038 at Object. (/home/folamy/Desktop/vitessr/node_modules/balm-ui/components/button/index.js:1:23060) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at nodeRequire (/home/folamy/Desktop/vitessr/node_modules/vite/dist/node/chunks/dep-e9a16784.js:68211:17)

Otherise, doing import BalmUI from 'balm-ui'; works fine, but I need some components and directive/utils from BalmUIPlus tools. How do I resolve this, please?

elf-mouse commented 3 years ago

Hi @folamy ,

SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr.

I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite example can not work correctly @vitejs:

Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry
folamy commented 3 years ago

Hi @folamy ,

SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr.

I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:

Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry

You need to manually install vite. yarn add vite -D

folamy commented 3 years ago

@elf-mouse Is there any update on this?

folamy commented 3 years ago

Do I have to open another issue for this?

elf-mouse commented 3 years ago

Hi @folamy , SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr. I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:

Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry

You need to manually install vite. yarn add vite -D

(node v16.2.0) My steps:

  1. clone vite repository
  2. cd /path/to/vite/packages/playground/ssr-vue
  3. yarn add -D vite & yarn add balm-ui@next
  4. yarn dev or npm run dev, it's not work :(

Please give me your demo repository, I would to debug or fix it.

elf-mouse commented 3 years ago

Hi @folamy ,

I will to write a demo/scaffold for vue3 ssr with BalmUI when I have time later.

Thank you so much~

folamy commented 3 years ago

Hi @folamy , SSR support is still experimental for vite, so I haven't fully verified balm-ui@next in vue3 ssr. I'm try to using https://github.com/vitejs/vite/tree/main/packages/playground/ssr-vue, and the vite can not work correctly @vitejs:

Error: Cannot find module '/path/to/vite/node_modules/vite/dist/node/index.js'. Please verify that the package.json has a valid "main" entry

You need to manually install vite. yarn add vite -D

(node v16.2.0) My steps:

  1. clone vite repository
  2. cd /path/to/vite/packages/playground/ssr-vue
  3. yarn add -D vite & yarn add balm-ui@next
  4. yarn dev or npm run dev, it's not work :(

Please give me your demo repository, I would to debug or fix it.

@elf-mouse You should be able to work with this repo here:

folamy commented 3 years ago

Hi @folamy ,

I will to write a demo/scaffold for vue3 ssr with BalmUI when I have time later.

Thank you so much~

@elf-mouse, as you have requested, I commented with a demo repo above!

elf-mouse commented 3 years ago

Hi @folamy ,

NOW, The balm-ui@9.27.0 already supports SSR :)

Thank you so~ much!!!

folamy commented 3 years ago

Thank you @elf-mouse, I can see the changes already.

Now, how do I change the color theme? Remember, I am not using balm Cli, but vite!

elf-mouse commented 3 years ago

Please see BalmUI theme apis document.

simple example:

<template>
  <ui-button @click="$alert('hi')">SayHi</ui-button>
  <ui-button @click="onChangeTheme">Change Theme</ui-button>
</template>
export default {
  methods: {
    onChangeTheme() {
      this.$theme.primary = "red";
      this.$theme.onPrimary = "white";
    }
  }
};
elf-mouse commented 3 years ago

Hi @folamy ,

You need update your vite.config.js:

module.exports = {
  // ...
  resolve: {
    alias: {
      vue: "vue/dist/vue.esm-bundler.js",
      "balm-ui-plus": "balm-ui/dist/balm-ui-plus.esm.js",
      "balm-ui-css": "balm-ui/dist/balm-ui.css"
    }
  }
};
folamy commented 3 years ago

Please see BalmUI theme APIs document.

simple example:

<template>
  <ui-button @click="$alert('hi')">SayHi</ui-button>
  <ui-button @click="onChangeTheme">Change Theme</ui-button>
</template>
export default {
  methods: {
    onChangeTheme() {
      this.$theme.primary = "red";
      this.$theme.onPrimary = "white";
    }
  }
};

@elf-mouse Thank you, I just want to be able to change everything from application entry

`import $theme from '...' app.use($theme, { primary: #da2efc, .....

})`

Can this work? I'm using Vue compositional API, so I don't have access to this in my code.

elf-mouse commented 3 years ago

We use dart sass overwrite for defaults.

And I have updated the $theme init colors. Try to 9.28.0 again.

folamy commented 3 years ago

Hi @elf-mouse. Unfortunately, I am stil getting error app.use(BalmUI, { $theme: { primary: '#2e8b57' } }) I am getting these errors:

[Vue warn]: resolveDirective can only be used in render() or setup().

ReferenceError: document is not defined at n.value (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:583360) at /home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:581694 at Array.forEach () at n.set (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:581664) at Object.install (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:584274) at Object.use (/home/folamy/Desktop/balmui/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3016:28) at h (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:69482) at Object.Ry [as install] (/home/folamy/Desktop/balmui/node_modules/balm-ui/dist/balm-ui.js:1:603276) at Object.use (/home/folamy/Desktop/balmui/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:3016:28) at Module.createApp (/src/main.js:24:7)

elf-mouse commented 3 years ago

Oh! It's a lifecycle bug.

I have fixed this problem in 9.30.1.

But I still don’t have time to fully test SSR.

@folamy , thanks for your patience!

folamy commented 3 years ago

Hey! @elf-mouse, thanks once again! I am sorry this may be coming late, but there are still some clarification I would like to make.

  1. How do use SASS Variables with vite
  2. How do I use Material icons in vite thanks.
elf-mouse commented 3 years ago

Hi @folamy ,

You need to install sass first: yarn add -D sass

<style lang="scss">
@use '@material/theme/variables' as theme-variables with (
  $primary: #f00
);

@use 'balm-ui/components/icon' with (
  $font-path: 'balm-ui/fonts'
);

@use 'balm-ui/dist/balm-ui';

// your code
</style>