npm - xiangjsoncraft - Versions diffs - 1.2.0 → 2.0.1 - Mend

xiangjsoncraft 1.2.0 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (10) hide show

package/README.md +388 -238
package/bin/create.js +222 -0
package/dist/xiangjsoncraft.umd.js +1 -82
package/package.json +48 -25
package/rollup.config.js +21 -0
package/src/renderJson.js +111 -0
package/template/config.json +234 -0
package/template/index.html +53 -0
package/config.json +0 -113
package/renderJson.js +0 -133

package/bin/create.js ADDED Viewed

@@ -0,0 +1,222 @@
+#!/usr/bin/env node
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import inquirer from 'inquirer';
+import chalk from 'chalk';
+import ora from 'ora';
+// 解决 ESModule __dirname 问题
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+// 框架根目录
+const frameworkRoot = path.resolve(__dirname, '..');
+// 模板目录
+const templateDir = path.join(frameworkRoot, 'template');
+// 欢迎信息
+console.log(chalk.blue(`
+      ┌─────────────────────────────────┐
+      │  XiangJsonCraft 2.0.1           │
+      │  Write JSON, Get a Website      │
+      └─────────────────────────────────┘
+`));
+// 第一步：获取项目名称（从命令行参数）
+const args = process.argv.slice(2);
+let projectName = args[0] || 'xiangjsoncraft-app';
+// 第二步：确认创建项目
+const confirmAnswers = await inquirer.prompt([
+    {
+        type: 'confirm',
+        name: 'confirmCreate',
+        message: `是否要创建项目「${projectName}」？`,
+        default: true
+    }
+]);
+if (!confirmAnswers.confirmCreate) {
+    console.log(chalk.yellow('✅ 项目创建已取消'));
+    process.exit(0);
+}
+// 第三步：选择模板（仅保留基础模板，确保核心功能）
+const templateAnswers = await inquirer.prompt([
+    {
+        type: 'list',
+        name: 'template',
+        message: '请选择项目模板：',
+        choices: [
+            { name: '基础模板（快速上手）', value: 'basic' }
+        ],
+        default: 'basic'
+    }
+]);
+// 第四步：创建项目
+const spinner = ora('正在创建项目...').start();
+try {
+    // 项目目标目录
+    const projectDir = path.resolve(process.cwd(), projectName);
+    // 检查目录是否已存在
+    if (fs.existsSync(projectDir)) {
+        spinner.fail(chalk.red('❌ 项目目录已存在，请删除后重试'));
+        process.exit(1);
+    }
+    // 1. 创建项目目录
+    fs.ensureDirSync(projectDir);
+    // 2. 生成 package.json（修复本地路径依赖问题）
+    const packageJson = {
+        "name": projectName,
+        "version": "1.0.0",
+        "description": "XiangJsonCraft 项目",
+        "type": "module",
+        "scripts": {
+            "start": "npx serve .",
+            "test": "echo \"Error: no test specified\" && exit 1"
+        },
+        "dependencies": {
+            // 指向 npm 仓库版本，而非本地路径
+            "xiangjsoncraft": "^2.0.1"
+        },
+        "license": "MIT"
+    };
+    fs.writeJsonSync(path.join(projectDir, 'package.json'), packageJson, { spaces: 2 });
+    // 3. 生成核心文件（解决空壳问题）
+    // 3.1 生成 index.html（核心入口）
+    const indexHtml = `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${projectName} - XiangJsonCraft 2.0</title>
+  <!-- 引入框架核心 -->
+  <script src="./node_modules/xiangjsoncraft/dist/xiangjsoncraft.umd.js"></script>
+</head>
+<body>
+  <div id="app"></div>
+  <!-- 引入配置文件 -->
+  <script type="module">
+    import config from './config.json' assert { type: 'json' };
+    // 渲染 JSON 配置
+    window.XiangJsonCraft.render(config, document.getElementById('app'));
+  </script>
+</body>
+</html>`;
+    fs.writeFileSync(path.join(projectDir, 'index.html'), indexHtml);
+    // 3.2 生成 config.json（核心配置文件）
+    const configJson = {
+        "framework": "XiangJsonCraft 2.0.1",
+        "styles": {
+            "body": {
+                "backgroundColor": "#f0f4f8",
+                "minHeight": "100vh",
+                "margin": "0",
+                "padding": "20px",
+                "fontFamily": "Arial, sans-serif"
+            },
+            "#app": {
+                "maxWidth": "1200px",
+                "margin": "0 auto"
+            },
+            ".app-title": {
+                "fontSize": "2rem",
+                "color": "#2d3748",
+                "textAlign": "center",
+                "marginBottom": "40px"
+            },
+            ".app-desc": {
+                "fontSize": "1.2rem",
+                "color": "#4a5568",
+                "textAlign": "center"
+            }
+        },
+        "content": {
+            ".app-title": {
+                "value": "欢迎使用 XiangJsonCraft 2.0.1",
+                "isHtml": false
+            },
+            ".app-desc": {
+                "value": "零CSS零JS、纯JSON驱动的轻量前端框架",
+                "isHtml": false
+            }
+        }
+    };
+    fs.writeJsonSync(path.join(projectDir, 'config.json'), configJson, { spaces: 2 });
+    // 3.3 生成 README.md（使用说明）
+    const readmeMd = `# ${projectName}
+基于 XiangJsonCraft 2.0.1 的项目
+## 快速开始
+1. 安装依赖：
+   npm install
+2. 启动开发服务器：
+   npm run start
+3. 自定义项目：
+   修改 config.json 文件（所有样式/内容/交互都在这里配置）
+## 核心特性
+- 纯 JSON 驱动，无需编写 CSS/JS
+- 响应式布局，适配所有设备
+- 实时热更新，修改配置立即生效
+- 零配置部署，直接上传文件即可发布
+`;
+    fs.writeFileSync(path.join(projectDir, 'README.md'), readmeMd);
+    spinner.succeed(chalk.green(`✅ 项目「${projectName}」创建成功！`));
+    // 第五步：安装依赖提示
+    const installAnswers = await inquirer.prompt([
+        {
+            type: 'confirm',
+            name: 'confirmInstall',
+            message: '是否立即安装项目依赖？',
+            default: true
+        }
+    ]);
+    if (installAnswers.confirmInstall) {
+        const installSpinner = ora('正在安装依赖...').start();
+        try {
+            // 切换到项目目录执行安装
+            const { execSync } = await import('child_process');
+            execSync('npm install --legacy-peer-deps', {
+                cwd: projectDir,
+                stdio: 'ignore'
+            });
+            installSpinner.succeed(chalk.green('✅ 依赖安装成功！'));
+        } catch (err) {
+            installSpinner.fail(chalk.yellow('⚠️ 依赖安装失败，请手动进入项目目录执行 npm install --legacy-peer-deps'));
+        }
+    }
+    // 输出使用指南
+    console.log(chalk.cyan(`
+ 使用指南
+1. 进入项目目录：
+   cd ${projectName}
+2. 启动开发服务器：
+   npm run start
+3. 自定义项目：
+   修改 config.json 文件（所有样式/内容/交互都在这里配置）
+4. 部署上线：
+   直接将项目文件上传到服务器即可，无需打包
+📚 官方文档：https://github.com/dxiangwiki/xiangjsoncraft
+💡 提示：必须使用本地服务器运行，不能直接打开HTML文件！
+  `));
+} catch (err) {
+    spinner.fail(chalk.red(`❌ 项目创建失败：${err.message}`));
+    process.exit(1);
+}

package/dist/xiangjsoncraft.umd.js CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -1,33 +1,56 @@
 {
   "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.1",
+  "description": "零CSS零JS、纯JSON驱动的轻量前端框架 | Write JSON, Get a Website",
+  "type": "module",
+  "bin": {
+    "xiangjsoncraft": "./bin/create.js",
+    "create-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"
+  },
+  "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 ADDED Viewed

@@ -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
+            }
+        })
+    ]
+};

package/src/renderJson.js ADDED Viewed

@@ -0,0 +1,111 @@
+/**
+ * XiangJsonCraft 2.0 核心渲染逻辑
+ * 纯JSON驱动的前端框架核心 - Write JSON, Get a Website
+ * @version 2.0.0
+ */
+// 驼峰转短横线（CSS属性名转换）
+String.prototype.replaceCamelCase = function (separator = '-') {
+    return this.replace(/[A-Z]/g, (match) => `${separator}${match.toLowerCase()}`);
+};
+// 创建唯一样式块
+function createStyleBlock() {
+    const style = document.createElement('style');
+    style.id = 'xiangjsoncraft-styles';
+    document.head.insertBefore(style, document.head.firstChild);
+    return style;
+}
+// 核心渲染函数
+export function renderJsonStyles() {
+    // 配置文件路径（固定与HTML同目录）
+    const CONFIG_PATH = './config.json';
+    // 错误处理
+    const handleError = (msg) => {
+        console.error(chalk?.red(`❌ XiangJsonCraft 2.0 错误: ${msg}`) || `❌ XiangJsonCraft 2.0 错误: ${msg}`);
+    };
+    // 加载配置并渲染
+    fetch(CONFIG_PATH)
+        .then(async (res) => {
+            if (!res.ok) throw new Error('配置文件加载失败，请检查config.json是否存在');
+            return res.json();
+        })
+        .then((config) => {
+            // 配置校验
+            if (typeof config !== 'object' || config === null || Array.isArray(config)) {
+                return handleError('config.json 格式错误，必须是标准JSON对象');
+            }
+            // 1. 渲染样式
+            const styleBlock = document.getElementById('xiangjsoncraft-styles') || createStyleBlock();
+            const { styles = {} } = config;
+            let cssRules = '';
+            // 生成CSS规则
+            Object.entries(styles).forEach(([selector, styleObj]) => {
+                const selectorStr = String(selector).trim();
+                if (!selectorStr || typeof styleObj !== 'object' || styleObj === null || Array.isArray(styleObj)) return;
+                const styleProps = Object.entries(styleObj)
+                    .map(([prop, value]) => {
+                        const propStr = String(prop).trim();
+                        if (!propStr || value === undefined || value === null || String(value).trim() === '') return '';
+                        const cssProp = propStr.replaceCamelCase();
+                        const cssValue = String(value).trim();
+                        return `${cssProp}: ${cssValue};`;
+                    })
+                    .filter(Boolean)
+                    .join('\n    ');
+                if (styleProps) {
+                    cssRules += `${selectorStr} {\n    ${styleProps}\n}\n\n`;
+                }
+            });
+            // 注入样式
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+            // 2. 渲染内容
+            const { content = {} } = config;
+            Object.entries(content).forEach(([selector, contentObj]) => {
+                const selectorStr = String(selector).trim();
+                if (!selectorStr || typeof contentObj !== 'object' || contentObj === null || Array.isArray(contentObj)) return;
+                if (!contentObj.hasOwnProperty('value')) return;
+                const targetNodes = document.querySelectorAll(selectorStr);
+                if (targetNodes.length === 0) return;
+                const { value, isHtml = false } = contentObj;
+                const contentValue = String(value).trim();
+                targetNodes.forEach((node) => {
+                    if (isHtml) {
+                        node.innerHTML = contentValue;
+                    } else {
+                        node.textContent = contentValue;
+                    }
+                });
+            });
+            // 渲染成功提示
+            console.log(chalk?.green('✅ XiangJsonCraft 2.0 渲染成功！') || '✅ XiangJsonCraft 2.0 渲染成功！');
+            console.log(chalk?.blue('ℹ️  修改config.json后刷新页面即可生效') || 'ℹ️  修改config.json后刷新页面即可生效');
+        })
+        .catch((err) => {
+            handleError(err.message);
+        });
+}
+// 暴露全局变量（兼容非模块化环境）
+if (typeof window !== 'undefined') {
+    window.XiangJsonCraft = {
+        renderJsonStyles,
+        version: '2.0.0'
+    };
+}