@blocklet/pages-kit-block-studio 0.1.4 → 0.1.7

package/lib/cjs/utils/generate-wrapper-code.js

@@ -275,12 +275,10 @@ function getCustomComponentPropertyType(type) {
 }
 const ALLOWED_PROPERTY_TYPES = ['string', 'multiline', 'url', 'json', 'yaml'];
 function generatePageDataTypes(state) {
-    const pageTypes = Object.values(state.pages)
+    const pageTypeDefinitions = Object.values(state.pages)
         .map((page) => {
-        // check if the page is a template page
         if (!page.isTemplate)
             return null;
-        // 将 slug 转换为有效的 TypeScript 类型名
         const typeName = `Page${page.slug
             .replace(/^\//, '')
             .split('/')
@@ -331,8 +329,7 @@ ${properties}
         })
             .filter(Boolean)
             .join('\n');
-        return `
-export interface ${typeName} {
+        const typeDefinition = `interface ${typeName} {
   title?: string;
   image?: string;
   description?: string;
@@ -340,29 +337,28 @@ export interface ${typeName} {
 ${sectionTypes}
   };
 }`;
+        return {
+            typeName,
+            typeDefinition,
+        };
     })
-        .filter(Boolean)
-        .join('\n');
-    // 生成 PageData 类型的联合类型
-    const pageUnionTypes = Object.values(state.pages)
-        .map((page) => {
-        if (!page.isTemplate)
-            return null;
-        const typeName = `Page${page.slug
-            .replace(/^\//, '')
-            .split('/')
-            .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
-            .join('')
-            .replace(/[^a-zA-Z0-9]/g, '')}Data`;
-        return typeName;
-    })
-        .filter(Boolean)
-        .join(' | ');
+        .filter(Boolean);
+    // Generate type definitions string
+    const typeDefinitions = pageTypeDefinitions.map((def) => `export ${def === null || def === void 0 ? void 0 : def.typeDefinition}`).join('\n\n');
+    // Generate string literals for each type
+    const typeStrings = pageTypeDefinitions
+        .map((def) => `export const ${def === null || def === void 0 ? void 0 : def.typeName}String = \`${def === null || def === void 0 ? void 0 : def.typeDefinition}\`;`)
+        .join('\n\n');
+    // Generate union type
+    const pageUnionTypes = pageTypeDefinitions.map((def) => def === null || def === void 0 ? void 0 : def.typeName).join(' | ');
     return `
-// 页面数据类型定义
-${pageTypes}
+// Page data type definitions
+${typeDefinitions}
+
+// String versions of type definitions
+${typeStrings}
 
-// 所有页面数据类型的联合类型
+// Union type of all page data types
 export type PageDataUnion = ${pageUnionTypes || 'never'};`;
 }
 exports.default = generateWrapperCode;

package/lib/cjs/utils/helper.js

@@ -32,6 +32,9 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -45,7 +48,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBlockCode = exports.isPagesKitBlockStudio = exports.getPreviewImageRelativePath = exports.downloadAsset = exports.isMetadataFile = exports.isDev = exports.isPathSafe = exports.NANOID_LENGTH = exports.PREVIEW_IMAGE_DIR = exports.METADATA_FILE_NAME = exports.libDir = exports.logger = void 0;
+exports.safeParse = exports.getBlockCode = exports.isPagesKitBlockStudio = exports.getPreviewImageRelativePath = exports.downloadAsset = exports.isMetadataFile = exports.isDev = exports.isPathSafe = exports.logger = void 0;
 exports.setBlockEntryFilesPattern = setBlockEntryFilesPattern;
 exports.getBlockEntryFilesPattern = getBlockEntryFilesPattern;
 exports.findComponentFiles = findComponentFiles;
@@ -64,14 +67,10 @@ const promises_2 = require("stream/promises");
 const ufo_1 = require("ufo");
 const yaml = __importStar(require("yaml"));
 const constants_1 = require("../constants");
+__exportStar(require("../constants"), exports);
 exports.logger = console;
-exports.libDir = 'lib';
-exports.METADATA_FILE_NAME = '@metadata.json';
-exports.PREVIEW_IMAGE_DIR = '@preview-images';
-exports.NANOID_LENGTH = 16;
-const DEFAULT_BLOCK_ENTRY_FILES_PATTERN = 'src/**/index.{ts,tsx,html}';
 if (!process.env.BLOCK_ENTRY_FILES_PATTERN) {
-    process.env.BLOCK_ENTRY_FILES_PATTERN = DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
+    process.env.BLOCK_ENTRY_FILES_PATTERN = constants_1.DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
 }
 function normalizePattern(pattern) {
     return pattern.replace(/^[/\\]+/, ''); // Remove leading slashes
@@ -80,7 +79,7 @@ function setBlockEntryFilesPattern(pattern) {
     process.env.BLOCK_ENTRY_FILES_PATTERN = normalizePattern(pattern);
 }
 function getBlockEntryFilesPattern() {
-    return process.env.BLOCK_ENTRY_FILES_PATTERN || DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
+    return process.env.BLOCK_ENTRY_FILES_PATTERN || constants_1.DEFAULT_BLOCK_ENTRY_FILES_PATTERN;
 }
 function findComponentFiles(options = {}) {
     const { cwd = process.cwd(), filter } = options;
@@ -124,7 +123,7 @@ const isPathSafe = (filePath) => {
 exports.isPathSafe = isPathSafe;
 exports.isDev = process.env.BLOCKLET_MODE === 'development';
 const isMetadataFile = (filePath) => {
-    return filePath.endsWith(exports.METADATA_FILE_NAME);
+    return filePath.endsWith(constants_1.METADATA_FILE_NAME);
 };
 exports.isMetadataFile = isMetadataFile;
 const downloadAsset = (_a) => __awaiter(void 0, [_a], void 0, function* ({ asset, savePath, componentDid, }) {
@@ -155,7 +154,7 @@ const downloadAsset = (_a) => __awaiter(void 0, [_a], void 0, function* ({ asset
 });
 exports.downloadAsset = downloadAsset;
 const getPreviewImageRelativePath = (name) => {
-    return path_1.default.join(exports.PREVIEW_IMAGE_DIR, name);
+    return path_1.default.join(constants_1.PREVIEW_IMAGE_DIR, name);
 };
 exports.getPreviewImageRelativePath = getPreviewImageRelativePath;
 function initializeMetadata(tempFilePath) {
@@ -164,7 +163,7 @@ function initializeMetadata(tempFilePath) {
         throw new Error('File path is required');
     }
     // file path is metadata file
-    const filePath = (0, exports.isMetadataFile)(tempFilePath) ? tempFilePath : path_1.default.join((0, path_1.dirname)(tempFilePath), exports.METADATA_FILE_NAME);
+    const filePath = (0, exports.isMetadataFile)(tempFilePath) ? tempFilePath : path_1.default.join((0, path_1.dirname)(tempFilePath), constants_1.METADATA_FILE_NAME);
     if (!filePath) {
         throw new Error('File path is required');
     }
@@ -182,7 +181,7 @@ function initializeMetadata(tempFilePath) {
     }
     // Add id if not exists
     if (!metadata.id) {
-        metadata.id = (0, nanoid_1.nanoid)(exports.NANOID_LENGTH);
+        metadata.id = (0, nanoid_1.nanoid)(constants_1.NANOID_LENGTH);
     }
     // Add createdAt if not exists
     if (!metadata.createdAt) {
@@ -227,3 +226,12 @@ const getBlockCode = (filePath) => {
     return fs_1.default.readFileSync(codeFile, 'utf8');
 };
 exports.getBlockCode = getBlockCode;
+const safeParse = (text) => {
+    try {
+        return JSON.parse(text);
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.safeParse = safeParse;

package/lib/esm/constants/index.js

@@ -1,6 +1,14 @@
+import path from 'path';
 export const PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
 export const PAGES_KIT_RESOURCE_TYPE = 'page';
 export const PAGES_KIT_BLOCK_STUDIO_DID = 'z2qa7rr3eUyVnWp2PCxEVARuUfLFh6cE5V2xV';
 export const PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = 'page';
 export const MEDIA_KIT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9';
 export const MEDIA_KIT_RESOURCE_TYPE = 'imgpack';
+export const NEW_BLOCK_TEMPLATE_PATH = path.join(__dirname, 'new-block-template', 'index.tsx');
+export const NEW_BLOCK_TEMPLATE_METADATA_PATH = path.join(__dirname, 'new-block-template', '@metadata.json');
+export const libDir = 'lib';
+export const METADATA_FILE_NAME = '@metadata.json';
+export const PREVIEW_IMAGE_DIR = '@preview-images';
+export const NANOID_LENGTH = 16;
+export const DEFAULT_BLOCK_ENTRY_FILES_PATTERN = 'src/**/index.{ts,tsx,html}';

package/lib/esm/constants/new-block-template/@metadata.json

@@ -0,0 +1,59 @@
+{
+  "properties": {
+    "gs1rn5jmxfvpxptx": {
+      "index": 0,
+      "data": {
+        "id": "gs1rn5jmxfvpxptx",
+        "key": "title",
+        "locales": {
+          "zh": {
+            "name": "Title"
+          }
+        }
+      }
+    },
+    "9ajrz12ik7esfk1z": {
+      "index": 1,
+      "data": {
+        "id": "9ajrz12ik7esfk1z",
+        "key": "description",
+        "locales": {
+          "zh": {
+            "name": "Description",
+            "defaultValue": "Welcome to Pages Kit Block Studio"
+          }
+        }
+      }
+    },
+    "3ckcfvf6b7zyskk8": {
+      "index": 2,
+      "data": {
+        "id": "3ckcfvf6b7zyskk8",
+        "key": "logo",
+        "type": "url",
+        "locales": {
+          "zh": {
+            "defaultValue": {
+              "url": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80",
+              "mediaKitUrl": "/.well-known/service/blocklet/logo?imageFilter=convert&f=png&h=80"
+            },
+            "name": "Logo"
+          }
+        }
+      }
+    },
+    "x3lqht8ikble1itx": {
+      "index": 3,
+      "data": {
+        "id": "x3lqht8ikble1itx",
+        "key": "copyright",
+        "locales": {
+          "zh": {
+            "defaultValue": "Powered by Pages Kit Block Studio"
+          }
+        },
+        "visible": false
+      }
+    }
+  }
+}

package/lib/esm/constants/new-block-template/index.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+
+export interface HelloWorldProps {
+  title?: string;
+  logo?: string | { url: string };
+  description?: string;
+  copyright?: string;
+}
+
+// default export
+export default function HelloWorld({ title = 'Hello World', logo, description, copyright }: HelloWorldProps) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '16px 0',
+      }}>
+      {title && <h1>{title}</h1>}
+      {logo && (
+        <img
+          src={typeof logo === 'object' ? logo.url : logo}
+          alt="logo"
+          style={{
+            margin: '16px 0',
+            maxWidth: '200px',
+          }}
+        />
+      )}
+      {description && (
+        <div
+          style={{
+            color: '#666',
+            marginTop: '8px',
+          }}>
+          {description}
+        </div>
+      )}
+      {copyright && (
+        <div
+          style={{
+            color: '#999',
+            fontSize: '12px',
+            marginTop: '16px',
+          }}>
+          {copyright}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// export edit component
+export const EditComponent: React.FC<HelloWorldProps & { onChange?: (value: HelloWorldProps) => void }> = ({
+  onChange,
+  ...props
+}) => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <div
+        style={{
+          fontSize: '14px',
+          fontWeight: 500,
+          color: '#333',
+          padding: '8px 0',
+          borderBottom: '1px solid #eee',
+        }}>
+        Footer Parameters
+      </div>
+      <input
+        id="copyright-input"
+        type="text"
+        style={{
+          width: '100%',
+          padding: '8px 12px',
+          border: '1px solid #ddd',
+          borderRadius: '4px',
+          fontSize: '14px',
+          transition: 'border-color 0.3s',
+          outline: 'none',
+        }}
+        value={props.copyright || ''}
+        onChange={(e) => onChange?.({ copyright: e.target.value })}
+        placeholder="Please Input Copyright"
+      />
+    </div>
+  );
+};

package/lib/esm/middlewares/init-block-studio-router.js

@@ -11,7 +11,8 @@ import { Router } from 'express';
 import fs from 'fs';
 import { isEqual, keyBy, set } from 'lodash';
 import path from 'path';
-import { isPathSafe, isDev, downloadAsset, isMetadataFile, getPreviewImageRelativePath, initializeMetadata, findComponentFiles, getBlockStudioInfo, getBlockCode, } from '../utils/helper';
+import { METADATA_FILE_NAME, NEW_BLOCK_TEMPLATE_PATH, NEW_BLOCK_TEMPLATE_METADATA_PATH } from '../constants';
+import { isPathSafe, isDev, downloadAsset, isMetadataFile, getPreviewImageRelativePath, initializeMetadata, findComponentFiles, getBlockStudioInfo, getBlockCode, getBlockEntryFilesPattern, safeParse, } from '../utils/helper';
 export const initBlockStudioRouter = Router();
 const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.svg'];
 initBlockStudioRouter.get('/', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
@@ -83,6 +84,47 @@ initBlockStudioRouter.post('/', (req, res) => __awaiter(void 0, void 0, void 0,
         return res.status(500).json({ error: 'Failed to write file' });
     }
 }));
+initBlockStudioRouter.post('/create', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!isDev) {
+        return res.status(403).json({ error: 'Only available in development mode' });
+    }
+    const { name, description } = req.body;
+    if (!name) {
+        return res.status(400).json({ error: 'Name is required' });
+    }
+    try {
+        const pattern = getBlockEntryFilesPattern();
+        const baseDir = path.dirname(pattern.replace(/\*\*?/g, ''));
+        const blockDir = path.join(baseDir, name);
+        const metadataPath = path.join(blockDir, METADATA_FILE_NAME);
+        const indexPath = path.join(blockDir, 'index.tsx');
+        // Check if block already exists
+        if (fs.existsSync(blockDir)) {
+            return res.status(409).json({ error: 'Block already exists' });
+        }
+        // Create block directory
+        fs.mkdirSync(blockDir, { recursive: true });
+        // Initialize metadata
+        let metadata = initializeMetadata(metadataPath);
+        metadata.name = name;
+        metadata.description = description || '';
+        metadata.createdAt = new Date().toISOString();
+        metadata.updatedAt = new Date().toISOString();
+        // get template metadata from @metadata.json
+        const metadataContent = fs.readFileSync(NEW_BLOCK_TEMPLATE_METADATA_PATH, 'utf-8');
+        metadata = Object.assign(Object.assign({}, metadata), safeParse(metadataContent));
+        // Write metadata file
+        fs.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
+        // Copy template file to index.tsx
+        const templateContent = fs.readFileSync(NEW_BLOCK_TEMPLATE_PATH, 'utf-8');
+        fs.writeFileSync(indexPath, templateContent);
+        return res.json({ success: true, metadata });
+    }
+    catch (error) {
+        console.error('Failed to create block:', error);
+        return res.status(500).json({ error: 'Failed to create block' });
+    }
+}));
 initBlockStudioRouter.get('/all', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
     const { withBlockletData = true } = req.query;
     const allBlocks = yield findComponentFiles();

package/lib/esm/plugins/vite-plugin-html-transform.js

@@ -164,10 +164,24 @@ ${content.trim()}`;
     <meta http-equiv="X-Content-Type-Options" content="nosniff">
     <meta http-equiv="Referrer-Policy" content="no-referrer">
     <meta http-equiv="Permissions-Policy" content="accelerometer=(), camera=(), geolocation=(), gyroscope=(), magnetometer=(), microphone=(), payment=(), usb=()">`;
+    const autoHeightScript = `<script>
+    (function() {
+      if ('ResizeObserver' in window) {
+        const resizeObserver = new ResizeObserver(() => {
+          const height = document.documentElement.scrollHeight;
+          window.parent.postMessage({ height }, '*');
+        });
+        
+        resizeObserver.observe(document.documentElement);
+      }
+    })();
+  </script>`;
     // 将处理后的相对路径引入的 CSS 和 JS 注入到 HTML 中
     const htmlContent = htmlWithoutRelativeImport
         .replace('<head>', `<head>${securityHeaders}`)
         .replace('</head>', `${cssContents.map((css) => `<style>${css.trim()}</style>`).join('\n')}
+      
+      ${autoHeightScript}
     </head>`)
         .replace('</body>', `
     ${jsContents.map((js) => `<script>${js}</script>`).join('\n')}
@@ -186,19 +200,40 @@ ${content.trim()}`;
 }
 export function generateComponent(content, _isDev = true) {
     const htmlContent = content.html;
-    const { name } = content;
-    if (_isDev) {
-        // do something
-    }
-    return `import { createElement } from 'react';
+    // const { name } = content;
+    return `import React, { useEffect, useRef } from 'react';
+
+const htmlContent = ${htmlContent};
 
 export default function HtmlPreview() {
-  return createElement('iframe', {
-    style: { border: 'none', width: '100%', height: '100%' },
-    sandbox: 'allow-scripts',
-    title: 'Preview ${name}',
-    srcDoc: ${htmlContent}
-  });
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const handleMessage = (event) => {
+      if (event.source === iframe.contentWindow) {
+        const height = event.data.height;
+        if (height) {
+          iframe.style.height = height + 'px';
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, []);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      style={{ border: 'none', width: '100%', height: '0px', maxHeight: '100vh' }}
+      sandbox="allow-scripts"
+      title="HtmlPreview"
+      srcDoc={htmlContent}
+    />
+  );
 }`;
 }
 export function initHtmlPreviewTransformPlugin() {