为何评论统计和浏览统计单独使用的模块中没umd版本呢？ || Why is there no umd version in the separate modules for comment statistics and browsing statistics?

[elkan1788]

Describe the bug | 问题描述

近期准备升级Waline3，但发现新版本是基于ES模块开发的，这与当前使用主题中Waline的懒加载模式不支持：hugo-theme-next-waline，尝试用了下waline.umd.js可以维系原有方法使用，但是评论统计和浏览统计模块并没有找到umd版本，不知道大家有何解法？

顺便问下要是想在hugo-theme-next-waline代码中使用ES模块引入Waline，应该如何修正，鄙人前端开发不太懂，还请大神赐教谢谢。

Website URL | 问题网站

https://hugo-next.eu.org/

Where your waline deploy? | 服务部署在哪里？

Vercel (Default)

Where your comment data store? | 数据存储在哪里？

LeanCloud(https://leancloud.app)

---

Describe the bug | Problem description

I was preparing to upgrade Waline3 recently, but found that the new version was developed based on ES modules, which is not supported by the lazy loading mode of Waline in the current theme: [hugo-theme-next-waline](https://github.com/hugo- next/hugo-theme-next/blob/main/assets/js/third-party/comments/waline.js ), tried using waline.umd.js to maintain the original method, but the comment statistics and browsing statistics modules I didn't find the umd version. I wonder if you have any solution?

By the way, if you want to use [hugo-theme-next-waline](https://github.com/hugo-next/hugo-theme-next/blob/main/assets/js/third-party/comments/waline .js) code using the ES module to introduce Waline, how should it be corrected? I don’t know much about front-end development. Please give me some advice. Thank you.

Website URL | Problem website

https://hugo-next.eu.org/

Where your waline deploy? | Where is the service deployed?

Vercel (Default)

Where your comment data store? | Where is the data stored?

LeanCloud(https://leancloud.app)

[lizheming]

这个是因为 Hopes 老师认为未来是 ES Module 的天下，所以原本 Waline 3 是只包含 ES Module 格式的。后来是我强烈建议增加一个 UMD 的导出方便历史已有的网站升级到 Waline 3 方便，所以才有了 waline.umd.js 导出。

不过话说回来，next 主题应该只会加载 waline.umd.js 才对，评论统计和浏览量都是通过这个脚本提供的，应该不会有问题。

如果你要加载 es module 版本的话，可以尝试把 getScript 那段按照如下代码改改试试

NexT.utils.getScript(waline_js, { module: true }).then(function(){
    const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
    NexT.utils.getStyle(waline_css, 'before');

    Waline.init({
      locale,
      el            : element,
      pageview      : pageview,
      comment       : comment,
      emoji         : emoji,
      imageUploader : imguploader,
      wordLimit     : wordlimit,
      requiredMeta  : requiredmeta,
      reaction      : reaction,
      serverURL     : serverurl,
      lang          : NexT.CONFIG.lang,
      dark          : 'html[data-theme="dark"]'
    });

    NexT.utils.hiddeLodingCmp(element);
  })

---

This is because Mr. Hopes believes that the future will be dominated by ES Modules, so originally Waline 3 only included the ES Module format. Later, I strongly recommended adding a UMD export to facilitate the upgrade of existing websites to Waline 3, so there was a waline.umd.js export.

But having said that, the next theme should only load waline.umd.js. Comment statistics and page views are provided through this script, so there should be no problem.

If you want to load the es module version, you can try changing the getScript section to the following code.

NexT.utils.getScript(waline_js, { module: true }).then(function(){
    const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline.css);
    NexT.utils.getStyle(waline_css, 'before');

    Waline.init({
      locale,
      el : element,
      pageview: pageview,
      comment: comment,
      emoji: emoji,
      imageUploader : imguploader,
      wordLimit : wordlimit,
      requiredMeta: requiredmeta,
      reaction: reaction,
      serverURL: serverurl,
      lang : NexT.CONFIG.lang,
      dark : 'html[data-theme="dark"]'
    });

    NexT.utils.hiddeLodingCmp(element);
  })

[elkan1788]

@lizheming 谢谢提示，不过个getScript的方法似乎得再改造一下，通过 module:true和type:module都没有让生成的script标签有type=module属性，回头再研究下如何来支持。

在开发主题时，考虑到首页和列表页面不需要显示评论，所以需要单独加载评论统计和浏览量模块的JS，这样页面加载的资源小些，速度也会更多快。

---

@lizheming Thanks for the tip, but it seems that the getScript method needs to be modified. Neither module:true nor type:module allows the generated script tag to have the type=module attribute. I will look into how to support it later. .

When developing the theme, considering that the homepage and list pages do not need to display comments, it is necessary to load the JS of the comment statistics and page views modules separately, so that the resources loaded on the page will be smaller and the speed will be faster.

[elkan1788]

尝试过很多方法，发现还是没有办法实现传统的script引用方式，只能是再重新构造一个动态的Script注入，参考如下：

/* Waline3 comment plugin */
NexT.plugins.comments.waline3 = function () {
  const element = '.waline-container';
  if (!NexT.CONFIG.waline3
    || !NexT.utils.checkDOMExist(element)) return;

  const {
    comment,
    emoji,
    search,
    imguploader,
    pageview,
    placeholder,
    sofa,
    requiredmeta,
    serverurl,
    wordlimit,
    reaction,
    reactiontext,
    reactiontitle
  } = NexT.CONFIG.waline3.cfg;

  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline3.js);

  NexT.utils.lazyLoadComponent(element, function () {
    const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline3.css);
    NexT.utils.getStyle(waline_css, 'before');

    // Content struct Waline init script
    const walineInit = document.createElement('script');
    walineInit.type = 'module';
    walineInit.textContent = `
    let locale = {
      placeholder   : '${placeholder}',
      sofa          : '${sofa}',
      reactionTitle : '${reactiontitle}'
    };

    let recatt = ${JSON.stringify(reactiontext)}
    recatt.forEach(function(value, index){
      locale['reaction'+index] = value;
    });
  
    import('${waline_js}').then((Waline) => {
      Waline.init({
        locale,
        el            : '${element}',
        emoji         : ${emoji},
        search        : ${search},
        imageUploader : ${imguploader},
        wordLimit     : ${wordlimit},
        requiredMeta  : ${JSON.stringify(requiredmeta)},
        reaction      : ${reaction},
        serverURL     : '${serverurl}',
      })
    });
    `;
    document.head.appendChild(walineInit);

    NexT.utils.hiddeLodingCmp(element);
  });
}

@lizheming 建议还是给所有的组件模块发布个umd版本，这样兼容性会更好些，毕竟有很多用户的浏览器未必会更新到最新版本，我们还是尽量考虑到用户的体验。

---

After trying many methods, I found that there is still no way to implement the traditional script reference method. The only way is to reconstruct a dynamic Script injection. The reference is as follows:

/* Waline3 comment plugin */
NexT.plugins.comments.waline3 = function () {
  const element = '.waline-container';
  if (!NexT.CONFIG.waline3
    || !NexT.utils.checkDOMExist(element)) return;

  const {
    comment,
    emoji,
    search,
    imguploader,
    pageview,
    placeholder,
    sofa, sofa
    requiredmeta,
    serverurl,
    wordlimit,
    reaction,
    reactiontext,
    reactiontitle
  } = NexT.CONFIG.waline3.cfg;

  const waline_js = NexT.utils.getCDNResource(NexT.CONFIG.waline3.js);

  NexT.utils.lazyLoadComponent(element, function () {
    const waline_css = NexT.utils.getCDNResource(NexT.CONFIG.waline3.css);
    NexT.utils.getStyle(waline_css, 'before');

    //Content struct Waline init script
    const walineInit = document.createElement('script');
    walineInit.type = 'module';
    walineInit.textContent = `
    let locale = {
      placeholder : '${placeholder}',
      sofa : '${sofa}',
      reactionTitle : '${reactiontitle}'
    };

    let recatt = ${JSON.stringify(reactiontext)}
    recat.forEach(function(value, index){
      locale['reaction'+index] = value;
    });
  
    import('${waline_js}').then((Waline) => {
      Waline.init({
        locale,
        el : '${element}',
        emoji: ${emoji},
        search : ${search},
        imageUploader: ${imguploader},
        wordLimit : ${wordlimit},
        requiredMeta: ${JSON.stringify(requiredmeta)},
        reaction : ${reaction},
        serverURL : '${serverurl}',
      })
    });
    `;
    document.head.appendChild(walineInit);

    NexT.utils.hiddeLodingCmp(element);
  });
}

@lizheming It is recommended to release a umd version for all component modules, so that the compatibility will be better. After all, many users' browsers may not be updated to the latest version. We still try to consider the user experience.