solidjs-community / solid-codemod Goto Github PK

import React, { useRef } from "react";
import { render } from "react-dom";

const Component = () => {
  const ref = useRef();
  useEffect(() => {
    ref.current.style.color = "purple";
  }, []);
  return <div ref={ref}>Hello!</div>;
};

render(() => <Component />, document.getElementById("app"));

import { render } from "solid-js/web";

const Component = () => {
  let ref;
  useEffect(() => {
    ref.style.color = "purple";
  }, []);
  return <div ref={ref}>Hello!</div>;
};

render(() => <Component />, document.getElementById("app"));

import React from "react";

function Component1({name, count}) {
  return <div>Hello {name}! Count is {count}</div>;
}

function Component2({name, count, ...rest}) {
  return <div {...rest}>Hello {name}! Count is {count}</div>;
}

render(() => <Component />, document.getElementById("app"));

import { splitProps } from "solid-js";

function Component1(props) {
  return <div>Hello {props.name}! Count is {props.count}</div>;
}

function Component2(props) {
  const [local, rest] = splitProps(props, ["name", "count"]);
  return <div {...rest}>Hello {local.name}! Count is {local.count}</div>;
}

import {
  ASTPath,
  CallExpression,
  FunctionExpression,
  ImportDeclaration,
  MemberExpression,
  Transform,
} from 'jscodeshift';

const transform: Transform = (file, api, options) => {
  const j = api.jscodeshift;
  const root = j(file.source);
  const importsRequired = new Set<string>();

  // Replace JSX expression {<expression>.map(fn)} with <For each={expression}>{fn}</For>
  root
    .find(j.JSXExpressionContainer)
    .filter(path => {
      // We only care about JSX expression containers whose parents are JSX elements.
      // (in other words, exclude attribute expressions.)
      if (
        path.parent.node.type === 'JSXElement' &&
        path.node.expression.type === 'CallExpression'
      ) {
        const call = path.node.expression;
        if (
          call.callee.type === 'MemberExpression' &&
          call.callee.property.type === 'Identifier' &&
          call.callee.property.name === 'map'
        ) {
          return true;
        }
      }
      return false;
    })
    .replaceWith(path => {
      const call = path.node.expression as CallExpression;
      const callee = call.callee as MemberExpression;
      importsRequired.add('For');
      return j.jsxElement.from({
        openingElement: j.jsxOpeningElement(j.jsxIdentifier('For'), [
          j.jsxAttribute.from({
            name: j.jsxIdentifier('each'),
            value: j.jsxExpressionContainer.from({
              expression: callee.object,
            }),
          }),
        ]),
        closingElement: j.jsxClosingElement(j.jsxIdentifier('For')),
        selfClosing: false,
        children: [
          j.jsxExpressionContainer.from({
            expression: call.arguments.at(0) as FunctionExpression,
          }),
        ],
      });
    });

  // See whether we need to add any imports
  if (importsRequired.size > 0) {
    // Look for solid-js import
    let lastImport: ASTPath<ImportDeclaration> | null = null;
    let solidImport = root
      .find(j.ImportDeclaration)
      .forEach(path => {
        lastImport = path;
      })
      .filter(path => path.node.source.value === 'solid-js')
      .forEach(path => {
        if (!path.node.specifiers) {
          path.node.specifiers = [];
        }
        path.node.specifiers?.forEach(spec => {
          if (spec.type === 'ImportSpecifier') {
            importsRequired.delete(spec.imported.name);
          }
        });

        for (const symbol of importsRequired) {
          path.node.specifiers.push(
            j.importSpecifier.from({
              imported: j.jsxIdentifier(symbol),
            })
          );
        }
      });

    if (solidImport.length == 0) {
      // Insert new solid import statement.
      const solidImport = j.importDeclaration.from({
        source: j.stringLiteral('solid-js'),
        specifiers: Array.from(importsRequired).map(symbol =>
          j.importSpecifier.from({
            imported: j.jsxIdentifier(symbol),
          })
        ),
      });
      lastImport!.insertAfter(solidImport);
    }
  }

  return root.toSource({ quote: 'single' });
};

export default transform;

import React, { useState, useEffect } from "react";
import { render } from "react-dom";

const CountingComponent = () => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    const interval = setInterval(() => setCount(count + 1), 1000);
    return () => {
      clearInterval(interval);
    };
  }, []);
  return <div>Count value is {count}</div>;
};

render(() => <CountingComponent />, document.getElementById("app"));

import { createSignal, onCleanup, onMount } from "solid-js";
import { render } from "solid-js/web";

const CountingComponent = () => {
  const [count, setCount] = createSignal(0);
  onMount(() => {
    const interval = setInterval(() => setCount(count + 1), 1000);
    onCleanup(() => clearInterval(interval));
  });
  return <div>Count value is {count()}</div>;
};

render(() => <CountingComponent />, document.getElementById("app"));