Civet compatibility

[miloslavnosek]

Did anybody manage to get this working with Civet? I am at a loss. If this were web frontend and pure react, it should technically be as easy as using Vite, but this runs in terminal.

Running it with way recommended in docs results in jsx not being handled correctly

npx @danielx/civet app.civet
SyntaxError: Unexpected token '<'
    at compileSourceTextModule (node:internal/modules/esm/utils:344:16)
    at ModuleLoader.moduleStrategy (node:internal/modules/esm/translators:105:18)
    at ModuleLoader.#translate (node:internal/modules/esm/loader:534:12)
    at ModuleLoader.loadAndTranslate (node:internal/modules/esm/loader:581:27)
    at async ModuleJob._link (node:internal/modules/esm/module_job:116:19)

[miloslavnosek]

Compiling it to js with babel and then running it with node afterwards seems to work

babel.config.json

{
  "plugins": [
    [
      "@danielx/civet/babel-plugin"
    ]
  ],
  "presets": [
    "@babel/preset-react"
  ],
  "sourceMaps": "inline"
}

npm script:

"dev": "babel -x \".civet\" --out-dir=dist --watch App.civet"

example App.civet component

import React from 'react'
import { Text, render } from 'ink'

Greeting := () => 
  return (
    <Text>Hello</Text>
  );


render (<Greeting />)