create-blocklet 0.9.24 → 0.9.26

package/templates/component-studio/.cursor/rules/component-studio.mdc

@@ -0,0 +1,138 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# Component Studio 说明
+
+## 概述
+Component Studio 是一个强大的组件开发环境，让开发者能够创建、配置和管理可复用的组件。它通过声明式配置和实现分离的方式，实现了组件的高度可定制性和易用性。
+
+## 工作原理
+Component Studio 基于两个核心文件协同工作：
+- `@metadata.json`：声明组件的元数据和可配置属性
+- `index.tsx`：实现组件的渲染逻辑和交互行为
+
+这种分离架构使得组件能够同时满足开发便捷性和使用灵活性的需求。
+
+## 项目结构
+
+项目需要遵循工程化思想，减少代码堆积
+**重要提醒** 尤其是对于 EditComponent 可以抽离公用的配置逻辑，最后通过 JSON Schema 进行渲染
+
+```
+your-component-studio/
+├── api/              # 后端API代码
+│   ├── dev.ts        # 开发服务器入口
+│   ├── src/          # API源代码目录
+│   └── third.d.ts    # 三方库类型声明
+├── scripts/          # 构建和版本管理脚本
+│   ├── build-clean.mjs  # 清理构建脚本
+│   └── bump-version.mjs # 版本升级脚本
+├── src/              # 前端源代码
+│   ├── HelloWorld/   # 示例HelloWorld区块
+│   │   └── index.tsx   # 区块入口
+│   │   └── @metadata.json # 区块元数据
+│   │   └── @preview-images/ # 区块预览图目录
+│   └── <your-component-name>/ # 你的区块目录
+│   |   └── index.tsx   # 区块入口
+│   |   └── @metadata.json # 区块元数据
+│   |   └── @preview-images/ # 区块预览图目录
+│   └── components/ # 组件目录
+│   └── utils/ # 工具函数目录
+│   └── types/ # 类型声明目录
+├── package.json      # 项目配置和依赖
+├── vite.config.mts   # Vite客户端配置
+└── vite-server.config.ts # Vite服务端配置
+```
+
+
+## 核心功能
+
+### 组件定义与配置
+- 通过 `@metadata.json` 定义组件的基本信息和属性
+- 支持丰富的属性类型（文本、数值、颜色、对象等）
+- 提供多语言支持和国际化能力
+- 控制属性在编辑器中的显示方式
+
+### 组件实现与渲染
+- 在 `index.tsx` 中实现组件的具体行为
+- 使用 React 函数组件和 TypeScript 类型系统
+- 支持自定义编辑界面（EditComponent）
+- 提供响应式和交互体验
+
+## 开发注意事项
+
+### 上下文与依赖管理
+- **避免使用 React Context** - 组件可能在无特定上下文的环境中运行，依赖上下文会导致组件失效
+- **谨慎选择第三方库** - 避免使用依赖于全局上下文或特定环境的第三方库
+- **依赖最小化** - 组件应尽可能减少外部依赖，确保高度独立性
+- **明确依赖声明** - 必要的依赖应在文档中明确说明，并在项目配置中正确引用
+
+### 容错与健壮性
+- **防御性编程** - 实现空值检查和类型验证，防止运行时错误
+- **优雅降级** - 当属性缺失或格式错误时，组件应能优雅降级而非崩溃
+- **边界情况处理** - 考虑并测试极端情况（空数据、超长文本、网络错误等）
+- **错误边界** - 使用 React 错误边界捕获渲染错误，避免整个应用崩溃
+
+### 工程化与复用
+- **组件封装** - 确保组件功能内聚，接口清晰，方便在不同项目中复用
+- **版本控制** - 使用语义化版本管理组件更新
+- **文档完善** - 提供详细的使用文档和示例，降低使用门槛
+- **测试覆盖** - 编写单元测试和集成测试，确保组件质量
+- **构建优化** - 配置合适的构建流程，减小打包体积
+
+## 设计与用户体验要求
+
+### 视觉设计原则
+- **美观性** - 组件应具有现代、专业的外观，符合当代设计趋势
+- **一致性** - 组件样式应与整体设计系统保持一致
+- **层次感** - 使用适当的阴影、间距和颜色创造视觉层次
+- **动效适度** - 添加适当的过渡动画，提升用户体验，但避免过度装饰
+
+### 用户体验标准
+- **响应灵敏** - 组件应对用户操作提供即时反馈
+- **容错设计** - 妥善处理各种边缘情况和错误状态
+- **直观操作** - 用户无需额外说明即可理解如何使用组件
+- **可访问性** - 符合WCAG 2.1标准，支持键盘导航和屏幕阅读器
+
+### 性能要求
+- 组件初始渲染时间应控制在300ms以内
+- 交互响应延迟不应超过100ms
+- 优化重渲染逻辑，避免不必要的DOM更新
+- 大型组件应考虑代码分割和懒加载策略
+
+## 文件关系详解
+
+### @metadata.json 与 index.tsx 的映射关系
+- `@metadata.json` 中的 `properties.[id].data.key` 对应 `index.tsx` 中 BlockProps 的属性名
+- `@metadata.json` 中的属性类型转换为 TypeScript 类型定义
+- `@metadata.json` 中的默认值在 `index.tsx` 中作为组件默认参数
+- `@metadata.json` 中的嵌套属性（subProperties）在 `index.tsx` 中体现为嵌套接口
+
+### 文件依赖与更新
+1. 修改 `@metadata.json` 后需同步更新 `index.tsx` 中的类型定义
+2. 在 `index.tsx` 中添加新功能时，可能需要在 `@metadata.json` 中添加相应配置
+3. 两个文件的同步性对组件的正常运行至关重要
+
+## 组件开发流程
+1. 在 `@metadata.json` 中定义组件属性和元数据
+2. 在 `index.tsx` 中实现组件的 BlockProps 接口
+3. 编写组件的渲染逻辑和行为
+4. 进行视觉设计和用户体验优化
+5. 可选：实现 EditComponent 提供自定义编辑体验
+6. 测试组件在不同配置和设备下的表现
+
+## 最佳实践
+- 保持 `@metadata.json` 和 `index.tsx` 的同步更新
+- 遵循 TypeScript 和 React 的最佳实践
+- 使用语义化的属性命名
+- 为组件提供合理的默认值
+- 优先考虑移动端体验，实现响应式设计
+- 通过用户测试验证组件的可用性
+- 使用CSS变量实现主题定制能力
+
+## 补充资源
+组件开发中可参考同目录下 2 个规则
+- `@metadat-json.mdc`
+- `index-tsx.mdc`

package/templates/component-studio/.cursor/rules/index-tsx.mdc

@@ -0,0 +1,192 @@
+---
+description: 
+globs: 
+alwaysApply: true
+---
+# index.tsx 文件说明
+
+## 概述
+`index.tsx` 是 Component Studio 中组件的实现文件，负责组件的渲染逻辑和交互行为。它与 `@metadata.json` 紧密配合，共同定义了一个完整的可配置组件。
+
+## 工作原理
+`index.tsx` 与 `@metadata.json` 通过属性映射相互关联：
+- `@metadata.json` 定义组件的可配置属性及其元数据
+- `index.tsx` 使用这些属性进行组件渲染和行为控制
+
+
+## 关键部分
+
+### BlockProps 接口
+```typescript
+export interface BlockProps {
+  /** @description id: gs1rn5jmxfvpxptx | type: string | visible: true */
+  title?: string;
+  /** @description id: 9ajrz12ik7esfk1z | type: string | visible: true */
+  description?: string;
+  // ...其他属性
+}
+```
+
+这个接口定义了组件的属性类型，每个属性的注释包含：
+- id 对应的 `@metadata.json` 中的 id
+- key 属性类型
+- visible 可见性
+- 需要保持 `@description` 符号，这是 jsdom 在 ts 类型处理的时候，会被解析到 zod 上 `z.xxx().describe()`
+
+#### BlockProps 最佳实践
+- 所有属性默认应设为可选（使用 `?` 标记），以避免类型错误
+- 保持注释格式的统一性，不要删除或修改 `@description` 内容
+- 为复杂类型（如嵌套对象）定义独立的接口或类型，增强代码可读性
+- 当添加新属性时，确保同步添加对应的注释，包含完整的 metadata 信息
+- 使用语义化的属性名称，与 `@metadata.json` 中的 `key` 保持一致
+
+### 组件实现
+```typescript
+export default function BlockComponent({
+  title = 'Hello World',
+  logo,
+  description,
+  // ...其他属性和默认值
+}: BlockProps) {
+  // 组件实现逻辑
+}
+```
+
+组件函数接收 `BlockProps` 定义的属性，并设置与 `@metadata.json` 中匹配的默认值。
+
+#### 组件实现最佳实践
+- 为常用属性设置默认值，确保组件在无参数时也能正常渲染
+- 默认值应与 `@metadata.json` 中的 `defaultValue` 保持一致
+- 使用解构赋值接收属性，简化代码结构
+- 对于复杂的逻辑处理，考虑使用 React hooks 拆分功能
+- 实现响应式设计，确保组件在不同尺寸下都能正常显示
+- 添加适当的类型守卫检查复杂属性，防止运行时错误
+- 考虑性能优化，避免不必要的重渲染（如使用 useMemo, useCallback）
+
+
+### EditComponent
+```typescript
+export const EditComponent: React.FC<BlockProps & { onChange?: (value: BlockProps) => void }> = ({
+  onChange,
+  ...props
+}) => {
+  // 自定义编辑界面实现
+}
+```
+
+这是组件的特殊编辑接口，提供了编辑器中的自定义控件，增强属性编辑体验。
+
+#### EditComponent 最佳实践
+- 当在 EditComponent 中为某个属性提供自定义控件时，应在 `@metadata.json` 中将该属性的 `visible` 设置为 `false`
+- 使用 onChange 回调时确保传递完整的 props 对象，避免丢失其他属性值
+- 为复杂编辑界面提供直观的 UI 分组和标签
+- 考虑添加表单验证，确保用户输入的值有效
+- 提供即时反馈，让用户知道其操作已被接收
+- 保持编辑控件的样式与 Component Studio 整体风格一致
+- 并不是所有的 Component 都需要这个自定义空间，尤其是 `type: 'url' ｜ ‘yml’` 情况下，不建议替换
+
+### 样式
+组件样式在 Component Studio 中通常通过内联样式对象实现，便于与属性值动态绑定。
+
+```typescript
+// 样式对象分离示例
+const cardStyle = {
+  padding: '1.5rem',
+  borderRadius: '12px',
+  background: 'rgba(255, 255, 255, 0.7)',
+  boxShadow: '0 10px 30px rgba(0, 0, 0, 0.08)'
+};
+
+return <div style={cardStyle}>...</div>;
+```
+
+#### 样式最佳实践
+- **内联样式优先** - 使用内联样式（style对象）便于属性动态控制
+- **样式对象分离** - 对于复杂组件，将样式对象提取到组件函数外，提高可读性
+- **动态样式函数** - 创建函数生成依赖于属性的样式
+  ```typescript
+  const getTitleStyle = (color) => ({
+    color,
+    fontSize: '1.5rem',
+    fontWeight: 600
+  });
+  ```
+- **响应式设计** - 使用条件样式或媒体查询实现适配不同设备
+- **过渡动画** - 添加 transition 属性提升用户体验
+- **交互增强** - 为互动元素添加悬停状态
+- **性能优化** - 使用 useMemo 缓存样式对象，避免不必要的重新计算
+  ```typescript
+  const buttonStyle = useMemo(() => ({
+    background: isActive ? activeColor : inactiveColor
+  }), [isActive, activeColor, inactiveColor]);
+  ```
+- **避免硬编码** - 使用属性传入的样式值，避免硬编码颜色等固定值
+- **主题变量** - 考虑使用 CSS 变量实现主题定制
+- **使用语义化命名** - 如 containerStyle, headerStyle 等增强可读性
+
+## 与 @metadata.json 的关系
+
+### 属性映射
+每个在 `@metadata.json` 中定义的属性，在 `index.tsx` 中都有对应映射：
+
+| @metadata.json | index.tsx |
+|----------------|------------|
+| `properties.[id].data.key` | BlockProps 中的属性名 |
+| `properties.[id].data.type` | TypeScript 类型定义 |
+| `properties.[id].data.locales.[lang].defaultValue` | 组件中的默认值 |
+
+### 类型对应关系
+- `string` → `string`
+- `number` → `number`
+- `boolean` → `boolean`
+- `url` → 自定义对象类型
+- `json` → 自定义对象类型
+- `array` → 数组类型
+- `component` → `any` 或特定组件类型
+
+### 嵌套属性处理
+`@metadata.json` 中的 `subProperties` 在 `index.tsx` 中通过嵌套接口定义映射：
+
+```typescript
+json?: {
+  /** @description id: gpy89bsxc6ovvlsp | type: string | visible: true */
+  foo?: string;
+  /** @description id: 1j34jdhdptp2xm5e | type: string | visible: true */
+  bar?: string;
+};
+```
+
+## 通用最佳实践
+以下是适用于整个组件开发过程的通用最佳实践：
+
+1. **文件同步** - 修改 `@metadata.json` 或 `index.tsx` 时，确保两者保持同步
+2. **版本控制** - 为重要更改添加清晰的注释和版本标记
+3. **组件设计** - 遵循单一职责原则，每个组件只做一件事
+4. **性能考虑** - 针对大型组件或频繁更新的场景进行性能优化
+5. **可维护性** - 使用清晰的命名和注释，便于团队成员理解
+
+## 编辑组件示例
+对于需要特殊编辑体验的属性，可以通过 `EditComponent` 提供自定义编辑界面：
+
+```typescript
+export const EditComponent: React.FC<BlockProps & { onChange?: (value: BlockProps) => void }> = ({
+  onChange,
+  ...props
+}) => {
+  return (
+    <div>
+      <label>自定义编辑器</label>
+      <input 
+        value={props.someProperty || ''} 
+        onChange={(e) => onChange?.({...props, someProperty: e.target.value})}
+      />
+    </div>
+  );
+}
+```
+
+## 组件属性如何生效
+1. 用户在编辑器中配置属性值
+2. 值存储到 `@metadata.json` 对应属性的 `defaultValue`
+3. 运行时，这些值作为 props 传递给 `index.tsx` 中的组件
+4. 组件根据接收到的 props 和默认值渲染界面

package/templates/component-studio/README.md

@@ -0,0 +1,44 @@
+## PROJECT_DESCRIPTION
+
+Component Studio is a development tool for creating Pages Kit visual blocks. With this tool, developers can:
+
+- Create and manage reusable frontend block components
+- Provide a visual editing interface for easy block configuration and preview
+- Support development of various visualization component types (charts, forms, animations, etc.)
+- Seamlessly integrate into the ArcBlock Blocklet ecosystem
+
+## FILE_STRUCTURE
+
+```
+your-component-studio/
+├── api/              # Backend API code
+│   ├── dev.ts        # Development server entry
+│   ├── src/          # API source code directory
+│   └── third.d.ts    # Third-party library type declarations
+├── scripts/          # Build and version management scripts
+│   ├── build-clean.mjs  # Build cleanup script
+│   └── bump-version.mjs # Version upgrade script
+├── src/              # Frontend source code
+│   ├── HelloWorld/   # Example HelloWorld block
+│   │   └── index.tsx   # Block entry
+│   │   └── @metadata.json # Block metadata
+│   │   └── @preview-images/ # Block preview images directory
+│   └── <your-component-name>/ # Your block directory
+│   |   └── index.tsx   # Block entry
+│   |   └── @metadata.json # Block metadata
+│   |   └── @preview-images/ # Block preview images directory
+│   └── components/ # Components directory
+│   └── utils/ # Utility functions directory
+│   └── types/ # Type declarations directory
+├── package.json      # Project configuration and dependencies
+├── vite.config.mts   # Vite client configuration
+└── vite-server.config.ts # Vite server configuration
+```
+
+## DEVELOPMENT
+
+1. Use `pnpm run dev` to start the development environment, click the URL in the `Terminal` to access the Component Studio interface
+2. Create new blocks by clicking the `+` button (alternatively, you can create new block components directly in the `src/` directory)
+3. Develop block components and use `pnpm run build-lib` to build publishable blocks
+4. Create a Resource Blocklet by clicking the `Create Resource` button, and publish it to the Blocklet Store
+5. Install the Resource Blocklet in Pages Kit and use it in your pages

package/templates/component-studio/_theme.tsx

@@ -0,0 +1,4 @@
+// NOTICE: This file is very important, please do not change it!
+import BlockStudio from '@blocklet/pages-kit-block-studio/frontend';
+
+export default BlockStudio;

package/templates/component-studio/api/dev.ts

@@ -0,0 +1,21 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+import { setupClient } from 'vite-plugin-blocklet';
+
+import { app, server } from './src';
+
+(async () => {
+  const viteDevServer = await setupClient(app, {
+    appType: 'custom',
+    server,
+    importMetaHot: import.meta.hot,
+  });
+
+  const html = readFileSync(path.join(__dirname, '../index.html'), 'utf-8');
+  const transformedHtml = await viteDevServer.transformIndexHtml('/', html);
+
+  // Add route to serve the transformed HTML
+  app.get('*', (req, res) => {
+    res.send(transformedHtml);
+  });
+})();

package/templates/component-studio/api/src/index.ts

@@ -0,0 +1,50 @@
+import 'express-async-errors';
+
+import path from 'path';
+
+import cookieParser from 'cookie-parser';
+import cors from 'cors';
+import dotenv from 'dotenv-flow';
+import express, { ErrorRequestHandler } from 'express';
+import fallback from '@blocklet/sdk/lib/middlewares/fallback';
+
+import logger from './libs/logger';
+import routes from './routes';
+
+dotenv.config();
+
+const { name, version } = require('../../package.json');
+
+export const app = express();
+
+app.set('trust proxy', true);
+app.use(cookieParser());
+app.use(express.json({ limit: '1 mb' }));
+app.use(express.urlencoded({ extended: true, limit: '1 mb' }));
+app.use(cors());
+
+const router = express.Router();
+router.use(routes);
+
+app.use(router);
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isProduction) {
+  const staticDir = path.resolve(process.env.BLOCKLET_APP_DIR!, 'dist');
+  app.use(express.static(staticDir, { maxAge: '30d', index: false }));
+  app.use(fallback('index.html', { root: staticDir }));
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  app.use(<ErrorRequestHandler>((err, _req, res, _next) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  }));
+}
+
+const port = parseInt(process.env.BLOCKLET_PORT!, 10);
+
+export const server = app.listen(port, (err?: any) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});

package/templates/component-studio/api/src/libs/auth.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+import AuthStorage from '@arcblock/did-auth-storage-nedb';
+import getWallet from '@blocklet/sdk/lib/wallet';
+import WalletAuthenticator from '@blocklet/sdk/lib/wallet-authenticator';
+import WalletHandler from '@blocklet/sdk/lib/wallet-handler';
+
+import env from './env';
+
+export const wallet = getWallet();
+export const authenticator = new WalletAuthenticator();
+export const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});

package/templates/component-studio/api/src/libs/env.ts

@@ -0,0 +1,6 @@
+import env from '@blocklet/sdk/lib/env';
+
+export default {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/templates/component-studio/api/src/libs/logger.ts

@@ -0,0 +1,3 @@
+const logger = console;
+
+export default logger;

package/templates/component-studio/api/src/routes/index.ts

@@ -0,0 +1,12 @@
+import { initBlockStudioRouter } from '@blocklet/pages-kit-block-studio/init-block-studio-router';
+import { initResourceRouter } from '@blocklet/pages-kit-block-studio/init-resource-router';
+import { initUploaderRouter } from '@blocklet/pages-kit-block-studio/init-uploader-router';
+import { Router } from 'express';
+
+const router = Router();
+
+router.use('/api/resources', initResourceRouter);
+router.use('/api/blocks', initBlockStudioRouter);
+router.use(initUploaderRouter);
+
+export default router;

package/templates/component-studio/api/third.d.ts

@@ -0,0 +1,17 @@
+declare module 'vite-plugin-blocklet';
+
+declare module 'express-history-api-fallback';
+
+declare module 'express-async-errors';
+
+declare namespace Express {
+  interface Request {
+    user?: {
+      did: string;
+      role: string;
+      fullName: string;
+      provider: string;
+      walletOS: string;
+    };
+  }
+}

package/templates/component-studio/biome.json

@@ -0,0 +1,53 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedVariables": "error"
+      },
+      "suspicious": {
+        "noExplicitAny": "warn"
+      },
+      "style": {
+        "noNonNullAssertion": "off",
+        "useShorthandArrayType": "error"
+      },
+      "a11y": {
+        "noNoninteractiveElementToInteractiveRole": "off",
+        "useKeyWithClickEvents": "off",
+        "useValidAnchor": "off",
+        "noSvgWithoutTitle": "off",
+        "useMouseEvents": "off"
+      }
+    },
+    "ignore": ["**/node_modules/**", "*.md"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100,
+    "include": ["**/*.{js,jsx,ts,tsx,json,css,less,scss,graphql}"]
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "trailingComma": "es5",
+      "semicolons": "always"
+    }
+  },
+  "json": {
+    "parser": {
+      "allowComments": true,
+      "allowTrailingCommas": true
+    },
+    "formatter": {
+      "enabled": true
+    }
+  }
+}

package/templates/component-studio/blocklet.md

@@ -0,0 +1,8 @@
+# Component Studio
+
+Component Studio is a development tool for creating Pages Kit visual blocks. With this tool, developers can:
+
+- Create and manage reusable frontend block components
+- Provide a visual editing interface for easy block configuration and preview
+- Support development of various visualization component types (charts, forms, animations, etc.)
+- Seamlessly integrate into the ArcBlock Blocklet ecosystem

package/templates/component-studio/blocklet.yml

@@ -0,0 +1,58 @@
+title: Blocklet Template React
+description: A Blocklet DAPP blocklet
+keywords:
+  - blocklet
+  - react
+group: dapp
+did: ''
+main: api/dist/index.js
+author:
+  name: Blocklet
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: 'git+https://github.com/blocklet/create-blocklet.git'
+specVersion: 1.2.8
+version: 0.1.0
+logo: logo.png
+files:
+  - dist
+  - logo.png
+  - screenshots
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+payment:
+  price: []
+  share: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.16.28'
+  os: '*'
+  cpu: '*'
+scripts:
+  dev: npm run start
+environments: []
+capabilities: {}
+screenshots: []
+components:
+  - name: image-bin
+    required: true
+    mountPoint: /image-bin
+    source:
+      name: image-bin
+      version: latest
+resource:
+  exportApi: /api/resources
+  types:
+    - type: page
+      description: Used by Pages Kit to import one or multiple components

package/templates/component-studio/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#4F6AF5" />
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <script type="module" src="/@pages-infra/main.js"></script>
+  </body>
+</html>