xiangjsoncraft 1.2.0 → 2.0.0

package/bin/create.js

@@ -0,0 +1,376 @@
+#!/usr/bin/env node
+
+import { program } from 'commander';
+import inquirer from 'inquirer';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import chalk from 'chalk';
+import ora from 'ora';
+import { execSync } from 'child_process';
+
+// 解决ES模块__dirname问题
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// 框架版本
+const FRAMEWORK_VERSION = '2.0.0';
+// 模板目录（强制使用绝对路径，避免路径查找错误）
+const TEMPLATE_DIR = path.resolve(__dirname, '../template');
+
+// 美化控制台输出
+const log = {
+    success: (msg) => console.log(chalk.green(`✅ ${msg}`)),
+    info: (msg) => console.log(chalk.blue(`ℹ️ ${msg}`)),
+    warn: (msg) => console.log(chalk.yellow(`⚠️ ${msg}`)),
+    error: (msg) => console.log(chalk.red(`❌ ${msg}`)),
+    title: (msg) => console.log(chalk.bgCyan.black(` ${msg} `))
+};
+
+// 初始化命令行程序
+program
+    .name('create-xiangjsoncraft')
+    .description(`XiangJsonCraft ${FRAMEWORK_VERSION} - 纯JSON驱动的前端框架，一键创建零代码项目`)
+    .version(FRAMEWORK_VERSION, '-v, --version', '查看框架版本')
+    .argument('[project-name]', '项目名称', 'xiangjsoncraft-app')
+    .action(async (projectName) => {
+        console.log(chalk.cyan(`
+      ┌─────────────────────────────────┐
+      │  XiangJsonCraft ${FRAMEWORK_VERSION}  │
+      │  Write JSON, Get a Website      │
+      └─────────────────────────────────┘
+    `));
+
+        try {
+            // 1. 用户确认创建项目
+            const { confirm } = await inquirer.prompt([
+                {
+                    type: 'confirm',
+                    name: 'confirm',
+                    message: `是否要创建项目「${chalk.cyan(projectName)}」？`,
+                    default: true
+                }
+            ]);
+
+            if (!confirm) {
+                log.info('项目创建已取消');
+                process.exit(0);
+            }
+
+            // 2. 选择项目模板
+            const { templateType } = await inquirer.prompt([
+                {
+                    type: 'list',
+                    name: 'templateType',
+                    message: '请选择项目模板：',
+                    choices: [
+                        { name: '基础模板（快速上手）', value: 'basic' },
+                        { name: '完整模板（响应式+交互）', value: 'complete' },
+                        { name: '空模板（仅核心骨架）', value: 'empty' }
+                    ],
+                    default: 'basic'
+                }
+            ]);
+
+            // 3. 检查目录是否存在
+            const projectPath = path.resolve(process.cwd(), projectName);
+            if (fs.existsSync(projectPath)) {
+                log.error(`目录「${projectName}」已存在，请更换名称或删除后重试`);
+                process.exit(1);
+            }
+
+            // 4. 创建项目核心逻辑
+            const spinner = ora(chalk.blue('正在创建项目...')).start();
+
+            // 4.1 强制创建项目目录（确保目录存在）
+            fs.ensureDirSync(projectPath);
+
+            // 4.2 复制模板文件（处理不同模板的config.json）
+            if (fs.existsSync(TEMPLATE_DIR)) {
+                const templateFiles = fs.readdirSync(TEMPLATE_DIR);
+                templateFiles.forEach(file => {
+                    const srcPath = path.resolve(TEMPLATE_DIR, file);
+                    const destPath = path.resolve(projectPath, file);
+
+                    // 根据模板类型生成对应的config.json
+                    if (file === 'config.json') {
+                        let configContent = {};
+
+                        // 基础模板配置
+                        if (templateType === 'basic') {
+                            configContent = {
+                                "framework": "XiangJsonCraft 2.0",
+                                "styles": {
+                                    "*": {
+                                        "margin": 0,
+                                        "padding": 0,
+                                        "boxSizing": "border-box",
+                                        "fontFamily": "Segoe UI, Roboto, 微软雅黑, sans-serif"
+                                    },
+                                    "body": {
+                                        "backgroundColor": "#f0f4f8",
+                                        "color": "#334e68",
+                                        "lineHeight": "1.6",
+                                        "minHeight": "100vh",
+                                        "padding": "2rem 1rem"
+                                    },
+                                    ".app-container": {
+                                        "maxWidth": "800px",
+                                        "margin": "0 auto",
+                                        "backgroundColor": "#ffffff",
+                                        "padding": "2rem",
+                                        "borderRadius": "12px",
+                                        "boxShadow": "0 4px 20px rgba(0,0,0,0.05)"
+                                    },
+                                    ".app-title": {
+                                        "fontSize": "2rem",
+                                        "color": "#2d3748",
+                                        "textAlign": "center",
+                                        "marginBottom": "1.5rem"
+                                    },
+                                    ".app-desc": {
+                                        "fontSize": "1.1rem",
+                                        "marginBottom": "2rem",
+                                        "textAlign": "center"
+                                    },
+                                    ".app-btn": {
+                                        "display": "block",
+                                        "width": "200px",
+                                        "height": "48px",
+                                        "lineHeight": "48px",
+                                        "textAlign": "center",
+                                        "backgroundColor": "#4299e1",
+                                        "color": "#ffffff",
+                                        "borderRadius": "8px",
+                                        "margin": "0 auto",
+                                        "textDecoration": "none",
+                                        "cursor": "pointer"
+                                    }
+                                },
+                                "content": {
+                                    ".app-title": {
+                                        "value": "XiangJsonCraft 2.0 基础模板",
+                                        "isHtml": false
+                                    },
+                                    ".app-desc": {
+                                        "value": "修改 config.json 即可自定义所有样式和内容，无需写任何CSS/JS！",
+                                        "isHtml": false
+                                    },
+                                    ".app-btn": {
+                                        "value": "开始使用",
+                                        "isHtml": false
+                                    }
+                                }
+                            };
+                        }
+                        // 完整模板配置
+                        else if (templateType === 'complete') {
+                            configContent = {
+                                "framework": "XiangJsonCraft 2.0",
+                                "styles": {
+                                    "*": {
+                                        "margin": 0,
+                                        "padding": 0,
+                                        "boxSizing": "border-box",
+                                        "fontFamily": "Segoe UI, Roboto, 微软雅黑, sans-serif"
+                                    },
+                                    "body": {
+                                        "backgroundColor": "#f0f4f8",
+                                        "color": "#334e68",
+                                        "lineHeight": "1.6",
+                                        "minHeight": "100vh",
+                                        "padding": "2rem 1rem"
+                                    },
+                                    ".app-container": {
+                                        "maxWidth": "1200px",
+                                        "margin": "0 auto",
+                                        "backgroundColor": "#ffffff",
+                                        "padding": "2rem",
+                                        "borderRadius": "12px",
+                                        "boxShadow": "0 4px 20px rgba(0,0,0,0.05)",
+                                        "transition": "all 0.3s ease"
+                                    },
+                                    ".app-container:hover": {
+                                        "boxShadow": "0 8px 30px rgba(0,0,0,0.1)"
+                                    },
+                                    ".app-title": {
+                                        "fontSize": "2.2rem",
+                                        "color": "#2d3748",
+                                        "textAlign": "center",
+                                        "marginBottom": "1.5rem",
+                                        "transition": "color 0.3s ease"
+                                    },
+                                    ".app-title:hover": {
+                                        "color": "#4299e1"
+                                    },
+                                    ".app-desc": {
+                                        "fontSize": "1.1rem",
+                                        "marginBottom": "2rem",
+                                        "textAlign": "center",
+                                        "maxWidth": "600px",
+                                        "marginLeft": "auto",
+                                        "marginRight": "auto"
+                                    },
+                                    ".app-btn-group": {
+                                        "display": "flex",
+                                        "justifyContent": "center",
+                                        "gap": "1rem",
+                                        "flexWrap": "wrap"
+                                    },
+                                    ".app-btn": {
+                                        "display": "inline-block",
+                                        "padding": "12px 24px",
+                                        "backgroundColor": "#4299e1",
+                                        "color": "#ffffff",
+                                        "borderRadius": "8px",
+                                        "textDecoration": "none",
+                                        "cursor": "pointer",
+                                        "transition": "all 0.3s ease",
+                                        "border": "none"
+                                    },
+                                    ".app-btn:hover": {
+                                        "backgroundColor": "#3182ce",
+                                        "transform": "translateY(-2px)"
+                                    },
+                                    ".app-btn:active": {
+                                        "transform": "translateY(0)"
+                                    },
+                                    ".app-btn-secondary": {
+                                        "backgroundColor": "#718096",
+                                        "color": "#ffffff"
+                                    },
+                                    ".app-btn-secondary:hover": {
+                                        "backgroundColor": "#4a5568"
+                                    },
+                                    // 响应式配置
+                                    "@media (max-width: 768px)": {
+                                        ".app-container": {
+                                            "padding": "1rem",
+                                            "margin": "0 0.5rem"
+                                        },
+                                        ".app-title": {
+                                            "fontSize": "1.8rem"
+                                        },
+                                        ".app-btn-group": {
+                                            "flexDirection": "column",
+                                            "alignItems": "center"
+                                        },
+                                        ".app-btn": {
+                                            "width": "100%",
+                                            "maxWidth": "200px"
+                                        }
+                                    }
+                                },
+                                "content": {
+                                    ".app-title": {
+                                        "value": "XiangJsonCraft 2.0 完整模板",
+                                        "isHtml": false
+                                    },
+                                    ".app-desc": {
+                                        "value": "纯JSON驱动的前端框架，支持响应式布局、交互效果、动态内容，无需写任何CSS/JS代码！",
+                                        "isHtml": false
+                                    },
+                                    ".app-btn-primary": {
+                                        "value": "<span onclick=\"alert('你点击了主按钮！')\">主按钮</span>",
+                                        "isHtml": true
+                                    },
+                                    ".app-btn-secondary": {
+                                        "value": "<span onclick=\"alert('你点击了次按钮！')\">次按钮</span>",
+                                        "isHtml": true
+                                    }
+                                }
+                            };
+                        }
+                        // 空模板配置
+                        else {
+                            configContent = {
+                                "framework": "XiangJsonCraft 2.0",
+                                "styles": {},
+                                "content": {}
+                            };
+                        }
+
+                        // 强制写入config.json（格式化输出）
+                        fs.writeJsonSync(destPath, configContent, { spaces: 2, flag: 'w' });
+                    }
+                    // 其他模板文件直接复制
+                    else {
+                        fs.copySync(srcPath, destPath, { overwrite: true });
+                    }
+                });
+            } else {
+                throw new Error(`模板目录不存在：${TEMPLATE_DIR}`);
+            }
+
+            // 5. 强制生成package.json（核心修复：不再判断文件是否存在，直接生成）
+            const pkgPath = path.resolve(projectPath, 'package.json');
+            const pkgJson = {
+                "name": projectName,
+                "version": "1.0.0",
+                "description": "XiangJsonCraft 2.0 Project - Write JSON, Get a Website",
+                "scripts": {
+                    "start": "npx serve .",
+                    "dev": "npx serve .",
+                    "build": "echo 'XiangJsonCraft 无需打包，直接部署即可！'"
+                },
+                "dependencies": {
+                    "xiangjsoncraft": "^2.0.0"
+                },
+                "keywords": ["xiangjsoncraft", "json", "framework", "no-code"],
+                "license": "MIT"
+            };
+            // 强制写入，覆盖任何已存在的文件（确保scripts字段必存在）
+            fs.writeJsonSync(pkgPath, pkgJson, { spaces: 2, flag: 'w' });
+
+            spinner.succeed();
+            log.success(`项目「${projectName}」创建成功！`);
+
+            // 6. 安装项目依赖
+            const { installDeps } = await inquirer.prompt([
+                {
+                    type: 'confirm',
+                    name: 'installDeps',
+                    message: '是否立即安装项目依赖？',
+                    default: true
+                }
+            ]);
+
+            if (installDeps) {
+                const installSpinner = ora(chalk.blue('正在安装依赖...')).start();
+                try {
+                    // 兼容Windows系统，添加shell: true
+                    execSync('npm install', {
+                        cwd: projectPath,
+                        stdio: 'ignore',
+                        shell: true
+                    });
+                    installSpinner.succeed();
+                    log.success('依赖安装完成！');
+                } catch (err) {
+                    installSpinner.fail();
+                    log.warn('依赖安装失败，请手动进入项目目录执行 npm install --legacy-peer-deps');
+                }
+            }
+
+            // 7. 显示使用指南
+            log.title('使用指南');
+            console.log(chalk.cyan('1. 进入项目目录：'));
+            console.log(`   cd ${chalk.green(projectName)}`);
+            console.log(chalk.cyan('2. 启动开发服务器：'));
+            console.log(`   ${chalk.green('npm run start')}`);
+            console.log(chalk.cyan('3. 自定义项目：'));
+            console.log(`   修改 ${chalk.green('config.json')} 文件（所有样式/内容/交互都在这里配置）`);
+            console.log(chalk.cyan('4. 部署上线：'));
+            console.log(`   直接将项目文件上传到服务器即可，无需打包`);
+
+            console.log('\n' + chalk.gray(`📚 官方文档：https://github.com/dxiangwiki/xiangjsoncraft`));
+            console.log(chalk.gray(`💡 提示：必须使用本地服务器运行，不能直接打开HTML文件！`));
+
+        } catch (error) {
+            log.error(`项目创建失败：${error.message}`);
+            process.exit(1);
+        }
+    });
+
+// 解析命令行参数（兼容Windows系统）
+program.parse(process.argv);

package/dist/xiangjsoncraft.umd.js

@@ -1,82 +1 @@
-(function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports):typeof define==='function'&&define.amd?define(['exports'],f):(g=typeof globalThis!=='undefined'?globalThis:g||self,f(g.XiangJsonCraft={}));})(this,(function(exports){'use strict';// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
-function renderJsonStyles() {
-    // 核心原则：本地config.json永远最高优先级，加载失败再用CDN官方配置
-    const localConfigUrl = './config.json'; // 本地用户自定义配置
-    const cdnConfigUrl = 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'; // CDN兜底配置
-
-    // 先尝试加载本地config.json
-    fetch(localConfigUrl)
-        .then(response => {
-            // 本地配置存在（状态码200），则使用本地配置
-            if (response.ok) {
-                console.log('🔧 检测到本地config.json，优先加载用户自定义配置');
-                return response.json();
-            }
-            // 本地配置不存在/加载失败，切换到CDN兜底配置
-            console.log('ℹ️  本地未检测到config.json，加载CDN官方示例配置');
-            return fetch(cdnConfigUrl).then(res => {
-                if (!res.ok) throw new Error('CDN官方配置加载失败');
-                return res.json();
-            });
-        })
-        .then(config => {
-            // 获取或创建样式块，避免重复创建
-            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
-            if (!styleBlock) return console.error('❌ 样式块创建失败，无法渲染样式');
-
-            // 生成CSS规则
-            let cssRules = '';
-
-            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
-            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
-                // 遍历所有选择器（类、ID、伪类、媒体查询等）
-                Object.entries(config.styles).forEach(([selector, styles]) => {
-                    // 过滤空样式，避免无效CSS
-                    if (!styles || typeof styles !== 'object') return;
-                    // 生成该选择器的所有样式属性
-                    const styleProperties = Object.entries(styles)
-                        .map(([prop, value]) => {
-                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
-                            if (!prop || value === undefined || value === null) return '';
-                            const cssProp = prop.replaceCamelCase();
-                            return `${cssProp}: ${value};`;
-                        })
-                        .filter(Boolean) // 移除空属性
-                        .join('\n    ');
-
-                    // 仅当有样式属性时，添加到CSS规则
-                    if (styleProperties) {
-                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
-                    }
-                });
-            }
-
-            // 应用生成的CSS规则到样式块
-            if (cssRules) {
-                styleBlock.innerHTML = cssRules;
-            }
-
-            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
-            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
-                Object.entries(config.content).forEach(([selector, content]) => {
-                    // 过滤无效选择器和内容
-                    if (!selector || !content || !content.hasOwnProperty('value')) return;
-                    const elements = document.querySelectorAll(selector);
-                    elements.forEach(el => {
-                        if (!el) return;
-                        // 支持HTML内容或纯文本，默认纯文本
-                        if (content.isHtml) {
-                            el.innerHTML = content.value;
-                        } else {
-                            el.textContent = content.value;
-                        }
-                    });
-                });
-            }
-
-            console.log('✅ XiangJsonCraft v1.1.1 渲染成功！');
-        })
-        .catch(error => {
-            console.error('❌ XiangJsonCraft 处理配置时出错:', error.message);
-        });
-}exports.renderJsonStyles=renderJsonStyles;}));
+!function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((n="undefined"!=typeof globalThis?globalThis:n||self).XiangJsonCraft={})}(this,function(n){"use strict";function e(){const n=n=>{console.error(chalk?.red(`❌ XiangJsonCraft 2.0 错误: ${n}`)||`❌ XiangJsonCraft 2.0 错误: ${n}`)};fetch("./config.json").then(async n=>{if(!n.ok)throw new Error("配置文件加载失败，请检查config.json是否存在");return n.json()}).then(e=>{if("object"!=typeof e||null===e||Array.isArray(e))return n("config.json 格式错误，必须是标准JSON对象");const t=document.getElementById("xiangjsoncraft-styles")||function(){const n=document.createElement("style");return n.id="xiangjsoncraft-styles",document.head.insertBefore(n,document.head.firstChild),n}(),{styles:r={}}=e;let o="";Object.entries(r).forEach(([n,e])=>{const t=String(n).trim();if(!t||"object"!=typeof e||null===e||Array.isArray(e))return;const r=Object.entries(e).map(([n,e])=>{const t=String(n).trim();if(!t||null==e||""===String(e).trim())return"";return`${t.replaceCamelCase()}: ${String(e).trim()};`}).filter(Boolean).join("\n    ");r&&(o+=`${t} {\n    ${r}\n}\n\n`)}),o&&(t.innerHTML=o);const{content:i={}}=e;Object.entries(i).forEach(([n,e])=>{const t=String(n).trim();if(!t||"object"!=typeof e||null===e||Array.isArray(e))return;if(!e.hasOwnProperty("value"))return;const r=document.querySelectorAll(t);if(0===r.length)return;const{value:o,isHtml:i=!1}=e,s=String(o).trim();r.forEach(n=>{i?n.innerHTML=s:n.textContent=s})}),console.log(chalk?.green("✅ XiangJsonCraft 2.0 渲染成功！")||"✅ XiangJsonCraft 2.0 渲染成功！"),console.log(chalk?.blue("ℹ️  修改config.json后刷新页面即可生效")||"ℹ️  修改config.json后刷新页面即可生效")}).catch(e=>{n(e.message)})}String.prototype.replaceCamelCase=function(n="-"){return this.replace(/[A-Z]/g,e=>`${n}${e.toLowerCase()}`)},"undefined"!=typeof window&&(window.XiangJsonCraft={renderJsonStyles:e,version:"2.0.0"}),n.renderJsonStyles=e});

package/package.json

@@ -1,33 +1,57 @@
 {
   "name": "xiangjsoncraft",
-  "version": "1.2.0",
-  "description": "简单而强大的JSON配置与HTML页面渲染工具，支持任意CSS选择器、响应式设计、HTML内容动态注入，轻量无依赖",
-  "main": "dist/xiangjsoncraft.cjs.js",
-  "module": "dist/xiangjsoncraft.esm.js",
-  "browser": "dist/xiangjsoncraft.umd.js",
+  "version": "2.0.0",
+  "description": "零CSS零JS、纯JSON驱动的轻量前端框架 | Write JSON, Get a Website",
+  "type": "module",
+  "bin": {
+    "create-xiangjsoncraft": "./bin/create.js",
+    "xiangjsoncraft": "./bin/create.js"
+  },
+  "main": "./dist/xiangjsoncraft.umd.js",
+  "module": "./src/renderJson.js",
   "files": [
+    "bin",
     "dist",
-    "renderJson.js",
-    "config.json",
-    "README.md",
-    "LICENSE"
+    "src",
+    "template",
+    "rollup.config.js",
+    "README.md"
   ],
-  "scripts": {
-    "build": "rollup -c",
-    "dev": "npx serve ."
-  },
-  "devDependencies": {
-    "rollup": "^4.12.0"
-  },
   "keywords": [
-    "json-render",
-    "dynamic-css",
-    "html-render",
-    "json-config",
-    "frontend-tool",
-    "xiangjsoncraft"
+    "json",
+    "framework",
+    "no-css",
+    "no-js",
+    "low-code",
+    "轻量框架",
+    "json驱动",
+    "可视化配置",
+    "前端零代码"
   ],
-  "author": "董翔 <3631247406@qq.com>",
+  "author": "",
   "license": "MIT",
-  "homepage": "https://www.npmjs.com/package/xiangjsoncraft"
-}
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.0.0",
+    "fs-extra": "^11.2.0",
+    "inquirer": "^9.2.16",
+    "ora": "^8.0.1"
+  },
+  "devDependencies": {
+    "@rollup/plugin-terser": "^0.4.4",
+    "rollup": "^4.9.6",
+    "undefined": "^undefined"
+  },
+  "scripts": {
+    "build": "npx rollup -c rollup.config.js",
+    "prepublishOnly": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxiangwiki/xiangjsoncraft.git"
+  },
+  "homepage": "https://github.com/dxiangwiki/xiangjsoncraft",
+  "bugs": {
+    "url": "https://github.com/dxiangwiki/xiangjsoncraft/issues"
+  }
+}

package/rollup.config.js

@@ -0,0 +1,21 @@
+import terser from '@rollup/plugin-terser'; // 替换原来的 rollup-plugin-terser
+export default {
+    input: 'src/renderJson.js',
+    output: {
+        file: 'dist/xiangjsoncraft.umd.js',
+        format: 'umd',
+        name: 'XiangJsonCraft',
+        compact: true
+    },
+    plugins: [
+        terser({
+            compress: {
+                drop_console: false,
+                pure_funcs: []
+            },
+            format: {
+                comments: false
+            }
+        })
+    ]
+};