Ошибка плагина Babel неизвестного узла типа undefined с конструктором "String"

Question

Я создаю библиотеку общих компонентов, которая будет использоваться как React, так и Vue.

Я использую Styletron, для которого требуется специальный адаптер, но в остальном он работает примерно так же.

Поэтому из моего исходного кода (связки функций) мне нужно сгенерировать папку с кодом, переданным как обычно, а затем другую папку, в которой функции слегка изменены.

Это мой код:

const MyComponent = styled('div', ({ isActive, hasBorder}) => ({
  color: 'red'
}))

// should not change
const OtherComponent = styled('div', {
  background: 'blue'
})

И это должно стать:

const MyComponent = styled('div', ({ isActive, hasBorder}) => ({
  color: 'red'
}), ['isActive', 'hasBorder'])

const OtherComponent = styled('div', {
  background: 'blue'
})

На самом деле у меня есть рабочий пример этого в ASTExplorer, но когда я пытаюсь сделать из него плагин, я сталкиваюсь с ошибкой Babel plugin error unknown node of type undefined with constructor "String"

Это мой первый плагин, и я ЗНАЮ, что делаю что-то неправильно, но сейчас мне просто нужно выяснить, что мне нужно сделать, чтобы эта работа работала вне ASTExplorer.

Это плагин, который я написал в ASTExplorer:

export default function(babel) {
  const { types: t } = babel;
  return {
    name: "ast-transform",
    visitor: {
      CallExpression: (path) => {
        if (
          path.node.callee.name === 'styled' && 
          path.node.arguments.length === 2 && 
          t.isArrowFunctionExpression(path.node.arguments[1])
        ) {
          if (t.isObjectPattern(path.node.arguments[1].params[0])) {
            const props = []
            path.node.arguments[1].params[0].properties.map(prop => props.push(prop.value.name))
            path.node.arguments.push(JSON.stringify(props)) // I suspect that the error is from here
          }
        } 

      }
    }
  };
}

Answer 1

Babel преобразует работу с узлами AST, поэтому расстановка реквизитов и помещение их в список аргументов таким образом не будет работать правильно. Вы действительно захотите создать структуру AST из вашего объекта.

В этом случае Babel предлагает помощника для этого, так что вы можете изменить

path.node.arguments.push(JSON.stringify(props))

в

path.node.arguments.push(t.valueToNode(props))