liquid-to-js - 编译liquid主题模板文件夹至可nodejs中运行的mjs模块

安装

npm i -D liquid-to-js
# or
pnpm add -D liquid-to-js

编译示例 - 编译模板文件

import parseThemeDir from 'liquid-to-js/parser';
(async () => {
  const liquidThemeDir = 'some-liquid-theme-dir';
  const mjsThemeDir = 'dist-mjs-theme-dir';
  const themeEntryInfo = await parseThemeDir(liquidThemeDir, mjsThemeDir);
  console.log(themeEntryInfo);
})();

渲染示例 - 渲染模板文件

import renderTemplate from 'liquid-to-js/runner';
import fsPromises from 'fs/promises';
(async () => {
  let themeEntryInfo;
  {
    const liquidThemeDir = 'some-liquid-theme-dir';
    const mjsThemeDir = 'dist-mjs-theme-dir';
    const themeIndexJsonPath = mjsThemeDir + '/.index.json';
    const themeIndexJsonString = await fsPromises.readFile(themeIndexJsonPath);
    themeEntryInfo = JSON.parse(themeIndexJsonString);
  }

  const defaultRenderOptions = {
    // 主题模板的索引信息
    themeEntryInfo,
    // 多市场的handle
    contextCode: '',
    // 语言包的handle
    localeCode: 'zh-CN',
    // liquid中tag的handlers
    tags: {},
    // liquid中filter的handlers
    filters: {},
    // liquid中drop的handlers
    drops: {},
    // liquid中object/settings中object的查询方法
    async loadData(objectNames, settingTypeAndValues) {
      const objectValues = await Promise.all(
        objectNames.map(
          async objectName => await this.getObjectValue(objectName),
        ),
      );
      const settingValues = await Promise.all(
        settingTypeAndValues.map(
          async typeAndValue => await this.getSettingValue(...typeAndValue),
        ),
      );
      return [objectValues, settingValues];
    },
    async getObjectValue(objectName) {
      // 查询 object
      // return xxx;
    },
    async getSettingValue(type, value) {
      // 查询 settings.value
      // return xxx;
    },
  };

  const pageName = 'index';
  const html = await renderTemplate(pageName, defaultRenderOptions);
  console.log(html);
})();