Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SSR support #675

Closed
Mister-Hope opened this issue Dec 18, 2023 · 5 comments
Closed

SSR support #675

Mister-Hope opened this issue Dec 18, 2023 · 5 comments
Labels
enhancement New feature or request

Comments

@Mister-Hope
Copy link
Collaborator

Mister-Hope commented Dec 18, 2023

It would be great for artalk to support SSR (or SSG in another way).

To support this, artalk must not access any dom realted variables before actual api call (i.e.: Artalk.init)

Currently artalk is at least accessing window object in main context.

Solution

before:

// ...
window.localstorage
// ...

export default class Aralk {
  // ..
}

after:

// ...

const getLocalConfig = () => {
 // ...
  window.localstorage
 // ...

 return xxx;
}

// ...

export default class Aralk {
  // ..
  init() {
   const config = getLocalConfig()
  }
  // ...
}
ReferenceError: window is not defined
    at new <anonymous> (/home/mister-hope/projects/vuepress/vuepress-theme-hope/node_modules/.pnpm/artalk@2.7.1/node_modules/artalk/dist/Artalk.js:1:10052)
    at /home/mister-hope/projects/vuepress/vuepress-theme-hope/node_modules/.pnpm/artalk@2.7.1/node_modules/artalk/dist/Artalk.js:1:9941
    at /home/mister-hope/projects/vuepress/vuepress-theme-hope/node_modules/.pnpm/artalk@2.7.1/node_modules/artalk/dist/Artalk.js:1:1281
    at Object.<anonymous> (/home/mister-hope/projects/vuepress/vuepress-theme-hope/node_modules/.pnpm/artalk@2.7.1/node_modules/artalk/dist/Artalk.js:1:1419)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at cjsLoader (node:internal/modules/esm/translators:345:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:294:7)
 ELIFECYCLE  Command failed with exit code 1.
@qwqcode
Copy link
Member

qwqcode commented Dec 18, 2023

感谢反馈,这个问题是我以前没有考虑到的,现在正在进行持续改进!

@Mister-Hope
Copy link
Collaborator Author

我晚点提一个pr修复它

@qwqcode
Copy link
Member

qwqcode commented Dec 18, 2023

我已经找出所有顶层的 const xxx = window.xxx 了,刚刚测试跑 SSG 编译,似乎能通过!🤣 这个问题似乎已经修复了

@qwqcode
Copy link
Member

qwqcode commented Dec 18, 2023

我再测测,非常感谢!

@qwqcode
Copy link
Member

qwqcode commented Dec 18, 2023

image

目前这个测试用例已经通过编译,之前会报 window undefined 的错误:

https://github.com/ArtalkJS/Artalk/blob/master/test/ssg-test/.vitepress/theme/Artalk.vue

该用例中包含:

  • 在 SSG 编译时 import Artalk from 'artalk' 引入而不是 import('artalk') 动态引入
  • onMounted 外调用 Artalk.use (非 Artalk.init 的方法,没有引用 window) 不报错
  • onMountedonUnmounted 以及 watch 调用 Artalk.init, Artalk.updateArtalk.destroy 不报错

相关参考文档:

fixes #608

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants