Function componentToAlpine

packages/core/src/generators/alpine/generate.ts:188–248

(_options = {})

export const componentToAlpine: TranspilerGenerator<ToAlpineOptions> =
  (_options = {}) =>
  ({ component }) => {
    const options = initializeOptions({ target: 'alpine', component, defaults: _options });

    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 });
    }

    const componentName = camelCase(json.name) || 'MyComponent';

    const stateObjectString = getStateObjectString(json);
    // Set x-data on root element
    json.children[0].properties['x-data'] = options.inlineState
      ? stateObjectString
      : `${componentName}()`;

    if (hasRootUpdateHook(json)) {
      json.children[0].properties['x-effect'] = 'onUpdate';
    }

    let str = css.trim().length ? `<style>${css}</style>` : '';
    str += json.children.map((item) => blockToAlpine(item, options)).join('\n');

    if (!options.inlineState) {
      str += `<script>
          ${babelTransformCode(`document.addEventListener('alpine:init', () => {
              Alpine.data('${componentName}', () => (${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 });