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

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-html-transform.js

@@ -170,10 +170,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')}
@@ -192,19 +206,40 @@ ${content.trim()}`;
 }
 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}
+    />
+  );
 }`;
 }
 function initHtmlPreviewTransformPlugin() {