import { h } из preact - когда это необходимо

Question

В настоящее время я создаю Preact PWA с CLI.

Насколько я понимаю, там, где у меня есть компонент, определенный с помощью JSX, мне нужно иметь import { h } from 'preact' в верхней части файла.

Я удалил все экземпляры этого оператора импорта, но приложение все еще работает и прекрасно работает.

Может кто-то прямо здесь меня выставить, так как я сейчас немного растерялся - может быть, где-то за кулисами происходит какое-то волшебство?

Answer 1

Когда вы пишете синтаксис JSX, как

render() {
  return <div id="abc">Hello World</div>
}

За экраном он будет преобразован в

render() {
  return h('div', { id: 'abc' }, 'Hello World')
}

Итак, когда необходимо импортировать h?

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

Как вы упоминаете, мы можем сделать import автоматический с использованием дополнительных babel-plugin-jsx-pragmatic плагин.

https://github.com/jmm/babel-plugin-jsx-pragmatic

module.exports = {
  presets: [],
  'plugins': [
    ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
    ['babel-plugin-jsx-pragmatic', {
      module: 'preact',
      import: 'h',
      export: 'h',
    }],
  ],
}

Answer 2

Хорошо, после некоторого осмотра я вижу, что в модуле узла preact-cli есть babel-config, который добавляет следующий код:

plugins: [ [require.resolve('babel-plugin-transform-react-jsx'), { pragma: 'h' }], [require.resolve('babel-plugin-jsx-pragmatic'), { module: 'preact', export: 'h', import: 'h' }] ]

Похоже, это означает импорт h являются автоматическими и явно не требуются. Было бы хорошо, если бы это было упомянуто в их документации!