@blocklet/pages-kit-block-studio 0.1.3 → 0.1.5

package/lib/cjs/constants/index.js

@@ -1,9 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MEDIA_KIT_RESOURCE_TYPE = exports.MEDIA_KIT_DID = exports.PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = exports.PAGES_KIT_BLOCK_STUDIO_DID = exports.PAGES_KIT_RESOURCE_TYPE = exports.PAGES_KIT_DID = void 0;
+exports.DEFAULT_BLOCK_ENTRY_FILES_PATTERN = exports.NANOID_LENGTH = exports.PREVIEW_IMAGE_DIR = exports.METADATA_FILE_NAME = exports.libDir = exports.NEW_BLOCK_TEMPLATE_METADATA_PATH = exports.NEW_BLOCK_TEMPLATE_PATH = exports.MEDIA_KIT_RESOURCE_TYPE = exports.MEDIA_KIT_DID = exports.PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = exports.PAGES_KIT_BLOCK_STUDIO_DID = exports.PAGES_KIT_RESOURCE_TYPE = exports.PAGES_KIT_DID = void 0;
+const path_1 = __importDefault(require("path"));
 exports.PAGES_KIT_DID = 'z8iZiDFg3vkkrPwsiba1TLXy3H9XHzFERsP8o';
 exports.PAGES_KIT_RESOURCE_TYPE = 'page';
 exports.PAGES_KIT_BLOCK_STUDIO_DID = 'z2qa7rr3eUyVnWp2PCxEVARuUfLFh6cE5V2xV';
 exports.PAGES_KIT_BLOCK_STUDIO_RESOURCE_TYPE = 'page';
 exports.MEDIA_KIT_DID = 'z8ia1mAXo8ZE7ytGF36L5uBf9kD2kenhqFGp9';
 exports.MEDIA_KIT_RESOURCE_TYPE = 'imgpack';
+exports.NEW_BLOCK_TEMPLATE_PATH = path_1.default.join(__dirname, 'new-block-template', 'index.tsx');
+exports.NEW_BLOCK_TEMPLATE_METADATA_PATH = path_1.default.join(__dirname, 'new-block-template', '@metadata.json');
+exports.libDir = 'lib';
+exports.METADATA_FILE_NAME = '@metadata.json';
+exports.PREVIEW_IMAGE_DIR = '@preview-images';
+exports.NANOID_LENGTH = 16;
+exports.DEFAULT_BLOCK_ENTRY_FILES_PATTERN = 'src/**/index.{ts,tsx,html}';

package/lib/cjs/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/cjs/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/cjs/middlewares/init-block-studio-router.js

@@ -17,6 +17,7 @@ const express_1 = require("express");
 const fs_1 = __importDefault(require("fs"));
 const lodash_1 = require("lodash");
 const path_1 = __importDefault(require("path"));
+const constants_1 = require("../constants");
 const helper_1 = require("../utils/helper");
 exports.initBlockStudioRouter = (0, express_1.Router)();
 const BINARY_EXTENSIONS = ['.png', '.jpg', '.jpeg', '.gif', '.webp', '.ico', '.svg'];
@@ -89,6 +90,47 @@ exports.initBlockStudioRouter.post('/', (req, res) => __awaiter(void 0, void 0,
         return res.status(500).json({ error: 'Failed to write file' });
     }
 }));
+exports.initBlockStudioRouter.post('/create', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
+    if (!helper_1.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 = (0, helper_1.getBlockEntryFilesPattern)();
+        const baseDir = path_1.default.dirname(pattern.replace(/\*\*?/g, ''));
+        const blockDir = path_1.default.join(baseDir, name);
+        const metadataPath = path_1.default.join(blockDir, constants_1.METADATA_FILE_NAME);
+        const indexPath = path_1.default.join(blockDir, 'index.tsx');
+        // Check if block already exists
+        if (fs_1.default.existsSync(blockDir)) {
+            return res.status(409).json({ error: 'Block already exists' });
+        }
+        // Create block directory
+        fs_1.default.mkdirSync(blockDir, { recursive: true });
+        // Initialize metadata
+        let metadata = (0, helper_1.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_1.default.readFileSync(constants_1.NEW_BLOCK_TEMPLATE_METADATA_PATH, 'utf-8');
+        metadata = Object.assign(Object.assign({}, metadata), (0, helper_1.safeParse)(metadataContent));
+        // Write metadata file
+        fs_1.default.writeFileSync(metadataPath, JSON.stringify(metadata, null, 2));
+        // Copy template file to index.tsx
+        const templateContent = fs_1.default.readFileSync(constants_1.NEW_BLOCK_TEMPLATE_PATH, 'utf-8');
+        fs_1.default.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' });
+    }
+}));
 exports.initBlockStudioRouter.get('/all', (req, res) => __awaiter(void 0, void 0, void 0, function* () {
     const { withBlockletData = true } = req.query;
     const allBlocks = yield (0, helper_1.findComponentFiles)();

package/lib/cjs/plugins/vite-plugin-block-studio.js

@@ -47,6 +47,7 @@ exports.initBlockStudioPlugins = initBlockStudioPlugins;
 // import typescript from '@rollup/plugin-typescript';
 const fs_1 = require("fs");
 const path = __importStar(require("path"));
+const ufo_1 = require("ufo");
 const vite_plugin_react_pages_1 = __importStar(require("vite-plugin-react-pages"));
 const helper_1 = require("../utils/helper");
 const vite_plugin_html_transform_1 = require("./vite-plugin-html-transform");
@@ -162,21 +163,23 @@ function initBlockStudioPlugins(options) {
                             const pageId = `/${blockName}`;
                             const dirPath = path.dirname(filePath);
                             const metadataPath = path.join(dirPath, '@metadata.json');
+                            const dataPath = isHtml ? `${vite_plugin_html_transform_1.VIRTUAL_MODULE_ID}?dir=${dirPath}` : filePath;
                             api.addPageData({
                                 pageId,
-                                dataPath: isHtml ? `${vite_plugin_html_transform_1.VIRTUAL_MODULE_ID}?dir=${dirPath}` : filePath,
+                                dataPath,
                                 staticData: isHtml
                                     ? {
-                                        isHtmlPreview: true,
-                                        dataPath: filePath,
+                                        isHtml: true,
+                                        dataPath,
                                         code: (0, vite_plugin_html_transform_1.generateComponent)((0, vite_plugin_html_transform_1.readHtmlFiles)(dirPath)),
                                         blockName,
                                         dirPath,
+                                        importPath: (0, ufo_1.joinURL)('@id', dataPath),
                                         metadataPath,
                                     }
-                                    : Object.assign(Object.assign({}, (yield helpers.extractStaticData(file))), { code: (0, fs_1.readFileSync)(file.path, 'utf-8'), dataPath: filePath, blockName,
-                                        dirPath,
-                                        metadataPath }),
+                                    : Object.assign(Object.assign({}, (yield helpers.extractStaticData(file))), { code: (0, fs_1.readFileSync)(file.path, 'utf-8'), dataPath,
+                                        blockName,
+                                        dirPath, importPath: (0, ufo_1.joinURL)('@fs', dataPath), metadataPath }),
                             });
                         });
                     });

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

@@ -196,11 +196,33 @@ function generateComponent(content, _isDev = true) {
     if (_isDev) {
         // do something
     }
-    return `import { createElement } from 'react';
+    return `import { createElement, useEffect, useRef } from 'react';
 
 export default function HtmlPreview() {
+  const iframeRef = useRef(null);
+
+  useEffect(() => {
+    const iframe = iframeRef.current;
+    if (!iframe) return;
+
+    const resizeObserver = new ResizeObserver(() => {
+      const doc = iframe.contentDocument;
+      if (!doc) return;
+      
+      const height = doc.documentElement.scrollHeight;
+      iframe.style.height = height + 'px';
+    });
+
+    iframe.addEventListener('load', () => {
+      resizeObserver.observe(iframe.contentDocument.documentElement);
+    });
+
+    return () => resizeObserver.disconnect();
+  }, []);
+
   return createElement('iframe', {
-    style: { border: 'none', width: '100%', height: '100%' },
+    ref: iframeRef,
+    style: { border: 'none', width: '100%', minHeight: '50px' },
     sandbox: 'allow-scripts',
     title: 'Preview ${name}',
     srcDoc: ${htmlContent}