Function componentToLiquid

packages/core/src/generators/liquid/generator.ts:138–189

(options = {})

// TODO: add JS support similar to componentToHtml()
export const componentToLiquid: TranspilerGenerator<ToLiquidOptions> =
  (options = {}) =>
  ({ component }) => {
    let json = fastClone(component);
    if (options.plugins) {
      json = runPreJsonPlugins({ json, plugins: options.plugins });
    }
    const css = collectCss(json);
    stripMetaProperties(json);
    if (options.plugins) {
      json = runPostJsonPlugins({ json, plugins: options.plugins });
    }
    let str = json.children.map((item) => blockToLiquid(item)).join('\n');

    if (css.trim().length) {
      str += `<style>${css}</style>`;
    }

    if (options.reactive) {
      const stateObjectString = getStateObjectStringFromComponent(json);
      if (stateObjectString.trim().length > 4) {
        str += `<script reactive>
        export default {
          state: ${stateObjectString}
        }
      </script>`;
      }
    }

    if (options.plugins) {
      str = runPreCodePlugins({ json, code: str, plugins: options.plugins });
    }
    if (options.prettier !== false) {
      try {
        str = format(str, {
          parser: 'html',
          htmlWhitespaceSensitivity: 'ignore',
          plugins: [
            // To support running in browsers
            require('prettier/parser-html'),
            require('prettier/parser-postcss'),
            require('prettier/parser-babel'),
          ],
        });
      } catch (err) {
        console.warn('Could not prettify', { string: str }, err);
      }
    }
    if (options.plugins) {
      str = runPostCodePlugins({ json, code: str, plugins: options.plugins });
    }
    return str;
  };