Приложения на SolidJs

Подготовка HTML-разметки index.tsx:

import { jsx } from '@app/html-jsx'
import { SolidComponent } from './SolidComponent'

app.html('/', async ctx => {
  return (
    <html>
      <head></head>
      <body>
        <SolidComponent title="Привет мир!" />
      </body>
    </html>
  )
})

Реализация самого компонента SolidComponent.tsx:

// @shared

import { jsx, createSolidComponent } from '@app/solid-js'

export const SolidComponent = createSolidComponent((props: SolidComponentProps) => {
  return (
    <div>
      <div>Компонент на SolidJS</div>
      <div>Переданный заголовок: {props.title}</div>
    </div>
  )
})

interface SolidComponentProps {
  title: string
}

На что обратить внимание:

Компонент может использовать другие компоненты. Но первый компонент, который вставляется на страницу HTML должен быть обернут вспомогательным методом createSolidComponent который подключит все необходимые зависимости для работы с SolidJS.
В разметке HTML должен быть тег head. В нем отрендерятся все необходимые зависимости для работы с SolidJS. Если тег head отсутствует, компонент SolidJS работать не будет.
Все компоненты SolidJS должны быть доступны на клиенте. Для этого первой строкой надо указать комментарий // @shared.

Теперь создадим наш первый реактивный компонент

Подробная документация по библиотеке SolidJS

Предложить изменения