Function componentToSolid

packages/core/src/generators/solid/index.ts:101–273

(passedOptions)

export const componentToSolid: TranspilerGenerator<Partial<ToSolidOptions>> =
  (passedOptions) =>
  ({ component }) => {
    let json = fastClone(component);

    const options = initializeOptions({
      target: 'solid',
      component,
      defaults: DEFAULT_OPTIONS,
      userOptions: passedOptions,
    });
    options.plugins = [
      ...(options.plugins || []),
      processOnEventHooksPlugin(),
      CODE_PROCESSOR_PLUGIN((codeType) => {
        switch (codeType) {
          case 'state':
          case 'context-set':
          case 'dynamic-jsx-elements':
          case 'types':
            return (c) => c;
          case 'bindings':
          case 'hooks':
          case 'hooks-deps':
          case 'hooks-deps-array':
          case 'properties':
            return updateStateCode({
              component: json,
              options,
              updateSetters: codeType === 'properties' ? false : true,
            });
        }
      }),
    ];

    if (options.plugins) {
      json = runPreJsonPlugins({ json, plugins: options.plugins });
    }
    addProviderComponents(json, options);
    const componentHasStyles = hasCss(json);
    const hasCustomStyles = !!json.style?.length;
    const shouldInjectCustomStyles = hasCustomStyles && options.stylesType === 'styled-components';
    const addWrapper =
      json.children.filter(filterEmptyTextNodes).length !== 1 ||
      options.stylesType === 'style-tag' ||
      shouldInjectCustomStyles ||
      isRootTextNode(json);

    // we need to run this before we run the code processor plugin, so the dynamic component variables are transformed
    const foundDynamicComponents = processDynamicComponents(json, options);

    if (options.plugins) {
      json = runPostJsonPlugins({ json, plugins: options.plugins });
    }
    stripMetaProperties(json);
    const css = options.stylesType === 'style-tag' && collectCss(json, { prefix: hash(json) });

    const state = getState({ json, options });
    const componentsUsed = getComponentsUsed(json);