盖克
Gecko是TypeScript的JSX代码生成框架.
先决条件
Gecko 以 TypeScript 写成, 需要 tx。 。 。 .
阿宝 计划提供支助.
示例:反应 + Vite 前端
要测试 Gecko, 请从此寄存器的根文件夹中运行以下 :
npm install
cd examples/calculator
npm --prefix project install
npm run gecko
npm --prefix project run dev
Gecko 应当运行和生成文件 ./examples/calculator/project/src/gecko_generated 文件夹.
如果在Gecko或Vite建设期间没有出错,那么计算器示例将会在 http://localhost:5173 上找到,看起来是这样的:
示例: Express REST API
要启动 API,首先运行 Gecko ,然后启动生成的 API:
npm install
cd examples/rest-api
npm install
npm --prefix project install
npm run gecko
npm --prefix project start
如果没有遇到出错,您应该能够访问http://localhost:30/users并查看用户列表:
[
{
"id": "1",
"name": "Test user",
"email": "[email protected]"
}
]
项目结构
使用Gecko的项目应具有以下结构:
├── gecko.tsx
├── package.json
├── project
│ ├── (your project files)
│ ├── package.json
└── templates
└── example.tsx
您的全部项目源代码, 包括其 package.json, (中文(简体) ), tsconfig.json,等等应位于 ./project 子文件夹。 这很重要,因为 gecko.tsx 模板文件必须从项目本身的 TypeScript 配置中分离出。 它会运行在Gecko的内部 tsconfig.json您可以使用任何您喜欢的结构,只要 gecko.tsx 文件不是嵌入到您的工程的源树上, 您可能在那里有另一个 tsconfig.json 文档,这可能造成冲突.
参考文献
Gecko 使用名为 gecko.tsx 以生成文件的工程根。 文件内容可能看起来像:
import {
File,
Folder,
geckoJSX,
Root,
Text,
} from '@flatfile/gecko'
import { Button } from './templates/Button'
export default function () {
return (
<Root path="project/src/gecko_generated" erase>
<File name="readme.md">
<Text>Hello world</Text>
</File>
<Folder name="components">
{[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((digit) => (
<File name={`Digit${digit}.tsx`}>
<Button label={digit} />
</File>
))}
</Folder>
</Root>
)
}
Gecko支持许多JSX标记来构建生成的代码. 完整名单见 标签引用。 。 。 .