Function componentToHtml

packages/core/src/generators/html/generator.ts:596–866

(_options = {})

// TODO: props support via custom elements
export const componentToHtml: TranspilerGenerator<ToHtmlOptions> =
  (_options = {}) =>
  ({ component }) => {
    const options: InternalToHtmlOptions = initializeOptions({
      target: 'html',
      component,
      defaults: {
        ..._options,
        onChangeJsById: {},
        js: '',
        namesMap: {},
        format: 'script',
      },
    });
    let json = fastClone(component);
    if (options.plugins) {
      json = runPreJsonPlugins({ json, plugins: options.plugins });
    }
    addUpdateAfterSet(json, options);
    const componentHasProps = hasProps(json);

    const hasLoop = hasComponent('For', json);
    const hasShow = hasComponent('Show', json);
    const hasTextBinding = hasBindingsText(json);

    if (options.plugins) {
      json = runPostJsonPlugins({ json, plugins: options.plugins });
    }
    const css = collectCss(json, {
      prefix: options.prefix,
    });

    let str = json.children.map((item) => blockToHtml(item, options)).join('\n');

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

    const hasChangeListeners = Boolean(Object.keys(options.onChangeJsById).length);
    const hasGeneratedJs = Boolean(options.js.trim().length);

    if (hasChangeListeners || hasGeneratedJs || json.hooks.onMount.length || hasLoop) {
      // TODO: collectJs helper for here and liquid
      str += `
      <script>
      (() => {
        const state = ${getStateObjectStringFromComponent(json, {
          valueMapper: (value) =>
            addUpdateAfterSetInCode(updateReferencesInCode(value, options), options),
        })};
        ${componentHasProps ? `let props = {};` : ''}
        let context = null;
        let nodesToDestroy = [];
        let pendingUpdate = false;
        ${!json.hooks?.onInit?.code ? '' : 'let onInitOnce = false;'}

        function destroyAnyNodes() {
          // destroy current view template refs before rendering again
          nodesToDestroy.forEach(el => el.remove());