feat: code blocks beta
This commit is contained in:
parent
1ecb6d8682
commit
73c8048c9d
5 changed files with 980 additions and 0 deletions
179
lib/StandardElementGenerator.js
Normal file
179
lib/StandardElementGenerator.js
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
/**
|
||||
* Generates HTML for standard HTML elements.
|
||||
*/
|
||||
class StandardElementGenerator {
|
||||
/**
|
||||
* Creates a new StandardElementGenerator instance.
|
||||
* @param {Object} options - Generator options
|
||||
* @param {CSSGenerator} cssGenerator - CSS generator instance
|
||||
* @param {HTMLGenerator} htmlGenerator - HTML generator instance
|
||||
*/
|
||||
constructor(options = {}, cssGenerator, htmlGenerator) {
|
||||
this.options = options;
|
||||
this.cssGenerator = cssGenerator;
|
||||
this.htmlGenerator = htmlGenerator;
|
||||
this.parentGenerator = htmlGenerator;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines whether this generator can handle a given node.
|
||||
* @param {Object} node - Node to check
|
||||
* @returns {boolean} - True if this generator can handle the node
|
||||
*/
|
||||
canHandle(node) {
|
||||
return node.type === "element";
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates HTML for a standard element.
|
||||
* @param {Object} node - Node to generate HTML for
|
||||
* @returns {string} - Generated HTML
|
||||
*/
|
||||
generate(node) {
|
||||
if (this.options.debug) {
|
||||
console.log(`[StandardElementGenerator] Processing element node: ${node.tag || node.name}`);
|
||||
}
|
||||
|
||||
const mapping = ELEMENT_MAPPINGS ? ELEMENT_MAPPINGS[node.tag] : null;
|
||||
|
||||
const tagName = mapping ? mapping.tag : (node.name || node.tag || "div");
|
||||
|
||||
let className = "";
|
||||
if (this.cssGenerator) {
|
||||
className = this.cssGenerator.generateClassName(node.tag);
|
||||
const { cssProps, nestedRules } = this.cssGenerator.nodeToCSSProperties(node);
|
||||
this.cssGenerator.cssRules.set(`.${className}`, {
|
||||
cssProps,
|
||||
nestedRules,
|
||||
});
|
||||
}
|
||||
|
||||
const fullClassName = this.generateClassName(node);
|
||||
if (className && fullClassName) {
|
||||
className = `${className} ${fullClassName}`;
|
||||
} else if (fullClassName) {
|
||||
className = fullClassName;
|
||||
}
|
||||
|
||||
const attributes = this.generateAttributes(node, node.elementId, className);
|
||||
|
||||
let content = "";
|
||||
const children = node.children || [];
|
||||
|
||||
for (const child of children) {
|
||||
if (
|
||||
child.type === "client" ||
|
||||
child.type === "server" ||
|
||||
(child.type === "element" && (child.name === "script" || child.tag === "script"))
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
child.parent = node;
|
||||
content += this.htmlGenerator.generateHTML(child);
|
||||
if (!this.options.minified) {
|
||||
content += "\n";
|
||||
}
|
||||
}
|
||||
|
||||
return `<${tagName}${attributes}>${this.options.minified ? "" : "\n"}${content}${this.options.minified ? "" : ""}</${tagName}>${this.options.minified ? "" : "\n"}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a className string for the element.
|
||||
* @param {Object} node - The node to generate class for
|
||||
* @returns {string} - The generated class name
|
||||
*/
|
||||
generateClassName(node) {
|
||||
let classNames = [];
|
||||
|
||||
if (node.attributes && Array.isArray(node.attributes)) {
|
||||
const classAttr = node.attributes.find(attr => attr.name === "class");
|
||||
if (classAttr && classAttr.value) {
|
||||
classNames.push(classAttr.value);
|
||||
}
|
||||
}
|
||||
|
||||
if (node.props && Array.isArray(node.props)) {
|
||||
for (const prop of node.props) {
|
||||
if (typeof prop === "string") {
|
||||
if (prop.startsWith("class:")) {
|
||||
classNames.push(prop.substring(prop.indexOf(":") + 1).trim().replace(/^"|"$/g, ""));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return classNames.join(" ");
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates an attributes string for the element.
|
||||
* @param {Object} node - The node to generate attributes for
|
||||
* @param {string} id - The element ID
|
||||
* @param {string} className - The element class name
|
||||
* @returns {string} - The generated attributes string
|
||||
*/
|
||||
generateAttributes(node, id, className) {
|
||||
let attributes = "";
|
||||
|
||||
if (id) {
|
||||
attributes += ` id="${id}"`;
|
||||
} else if (node.props && Array.isArray(node.props)) {
|
||||
const idProp = node.props.find(p => typeof p === "string" && p.startsWith("id:"));
|
||||
if (idProp) {
|
||||
const idValue = idProp.substring(idProp.indexOf(":") + 1).trim().replace(/^"|"$/g, "");
|
||||
attributes += ` id="${idValue}"`;
|
||||
node.elementId = idValue;
|
||||
}
|
||||
}
|
||||
|
||||
if (className) {
|
||||
attributes += ` class="${className}"`;
|
||||
}
|
||||
|
||||
if (node.props && Array.isArray(node.props)) {
|
||||
const dataProps = node.props.filter(p => typeof p === "string" && p.startsWith("data-"));
|
||||
if (dataProps.length) {
|
||||
attributes += " " + dataProps.join(" ");
|
||||
}
|
||||
}
|
||||
|
||||
if (node.attributes && Array.isArray(node.attributes)) {
|
||||
for (const attr of node.attributes) {
|
||||
if (attr.name === "id" || attr.name === "class") continue;
|
||||
|
||||
if (attr.value === true) {
|
||||
attributes += ` ${attr.name}`;
|
||||
} else if (attr.value !== false && attr.value !== undefined && attr.value !== null) {
|
||||
attributes += ` ${attr.name}="${attr.value}"`;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (node.props && Array.isArray(node.props)) {
|
||||
for (const prop of node.props) {
|
||||
if (typeof prop === "string") {
|
||||
if (prop.startsWith("id:") || prop.startsWith("class:") || prop.startsWith("data-")) continue;
|
||||
|
||||
const colonIndex = prop.indexOf(":");
|
||||
if (colonIndex !== -1) {
|
||||
const name = prop.substring(0, colonIndex).trim();
|
||||
const value = prop.substring(colonIndex + 1).trim().replace(/^"|"$/g, "");
|
||||
|
||||
if (!attributes.includes(` ${name}="`)) {
|
||||
attributes += ` ${name}="${value}"`;
|
||||
}
|
||||
} else {
|
||||
if (!attributes.includes(` ${prop}`)) {
|
||||
attributes += ` ${prop}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return attributes;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = StandardElementGenerator;
|
||||
239
lib/generators/JavaScriptGenerator.js
Normal file
239
lib/generators/JavaScriptGenerator.js
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
const StringUtils = require("../utils/StringUtils");
|
||||
|
||||
/**
|
||||
* Generates JavaScript code for client and server blocks with reactive data handling.
|
||||
*/
|
||||
class JavaScriptGenerator {
|
||||
/**
|
||||
* Creates a new JavaScript generator.
|
||||
* @param {Object} options - Options for the generator
|
||||
* @param {ServerCodeGenerator} [serverGenerator] - Server code generator instance
|
||||
*/
|
||||
constructor(options = {}, serverGenerator = null) {
|
||||
this.options = options;
|
||||
this.clientScripts = new Map();
|
||||
this.serverScripts = [];
|
||||
this.reactiveElements = new Set();
|
||||
this.serverGenerator = serverGenerator;
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the server code generator instance
|
||||
* @param {ServerCodeGenerator} serverGenerator - Server code generator instance
|
||||
*/
|
||||
setServerGenerator(serverGenerator) {
|
||||
this.serverGenerator = serverGenerator;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a client-side script to be executed when an element is clicked.
|
||||
* @param {string} elementId - The ID of the element to attach the event to
|
||||
* @param {string} code - The JavaScript code to execute
|
||||
*/
|
||||
addClientScript(elementId, code) {
|
||||
if (this.options.debug) {
|
||||
console.log(`[JavaScriptGenerator] Adding client script for element ${elementId}`);
|
||||
}
|
||||
this.clientScripts.set(elementId, code);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a server-side script to be executed on the server.
|
||||
* @param {string} elementId - The ID of the element that triggers the server action
|
||||
* @param {string} code - The JavaScript code to execute
|
||||
* @param {Array<string>} params - The input parameters to retrieve from the client
|
||||
*/
|
||||
addServerScript(elementId, code, params = []) {
|
||||
if (this.options.debug) {
|
||||
console.log(`[JavaScriptGenerator] Adding server script for element ${elementId}`);
|
||||
if (params.length > 0) {
|
||||
console.log(`[JavaScriptGenerator] Script parameters: ${params.join(", ")}`);
|
||||
}
|
||||
}
|
||||
|
||||
this.serverScripts.push({
|
||||
elementId,
|
||||
code,
|
||||
params
|
||||
});
|
||||
|
||||
if (this.serverGenerator) {
|
||||
this.serverGenerator.addServerRoute(elementId, code, params);
|
||||
}
|
||||
|
||||
this.clientScripts.set(elementId, `_bp_serverAction_${elementId}(e);`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers an element as reactive, meaning it will have state management functions
|
||||
* @param {string} elementId - The ID of the element to make reactive
|
||||
*/
|
||||
registerReactiveElement(elementId) {
|
||||
if (this.options.debug) {
|
||||
console.log(`[JavaScriptGenerator] Registering reactive element: ${elementId}`);
|
||||
}
|
||||
this.reactiveElements.add(elementId);
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a unique element ID.
|
||||
* @returns {string} - A unique element ID with bp_ prefix
|
||||
*/
|
||||
generateElementId() {
|
||||
return StringUtils.generateRandomId();
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates the reactive store and helper functions for state management
|
||||
* @returns {string} - JavaScript code for reactive functionality
|
||||
*/
|
||||
generateReactiveStore() {
|
||||
if (this.reactiveElements.size === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
return `
|
||||
const _bp_store = {
|
||||
listeners: new Map(),
|
||||
subscribe: function(id, callback) {
|
||||
if (!this.listeners.has(id)) {
|
||||
this.listeners.set(id, []);
|
||||
}
|
||||
this.listeners.get(id).push(callback);
|
||||
},
|
||||
notify: function(id, newValue) {
|
||||
if (this.listeners.has(id)) {
|
||||
this.listeners.get(id).forEach(callback => callback(newValue));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function _bp_makeElementReactive(id) {
|
||||
const element = document.getElementById(id);
|
||||
if (!element) {
|
||||
console.log(\`[Blueprint] Element with ID \${id} not found\`);
|
||||
return null;
|
||||
}
|
||||
|
||||
return {
|
||||
element: element,
|
||||
get value() {
|
||||
return element.textContent;
|
||||
},
|
||||
set: function(newValue) {
|
||||
const valueString = String(newValue);
|
||||
element.textContent = valueString;
|
||||
_bp_store.notify(id, valueString);
|
||||
return this;
|
||||
},
|
||||
setNumber: function(num) {
|
||||
const valueString = String(Number(num));
|
||||
element.textContent = valueString;
|
||||
_bp_store.notify(id, valueString);
|
||||
return this;
|
||||
},
|
||||
setHtml: function(html) {
|
||||
element.innerHTML = html;
|
||||
_bp_store.notify(id, html);
|
||||
return this;
|
||||
},
|
||||
setStyle: function(property, value) {
|
||||
element.style[property] = value;
|
||||
return this;
|
||||
},
|
||||
setClass: function(className, add = true) {
|
||||
if (add) {
|
||||
element.classList.add(className);
|
||||
} else {
|
||||
element.classList.remove(className);
|
||||
}
|
||||
return this;
|
||||
},
|
||||
on: function(event, callback) {
|
||||
element.addEventListener(event, callback);
|
||||
return this;
|
||||
},
|
||||
subscribe: function(callback) {
|
||||
_bp_store.subscribe(id, callback);
|
||||
return this;
|
||||
},
|
||||
get textValue() {
|
||||
return element.textContent;
|
||||
},
|
||||
get numberValue() {
|
||||
return Number(element.textContent);
|
||||
},
|
||||
get booleanValue() {
|
||||
const text = element.textContent.toLowerCase();
|
||||
return text === 'true' || text === '1' || text === 'yes';
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// Initialize reactive elements`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates initialization code for reactive elements
|
||||
* @returns {string} - JavaScript initialization code for reactive elements
|
||||
*/
|
||||
generateReactiveElementInit() {
|
||||
if (this.reactiveElements.size === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
const initCode = Array.from(this.reactiveElements)
|
||||
.map(id => `const ${id} = _bp_makeElementReactive('${id}');`)
|
||||
.join('\n ');
|
||||
|
||||
return `
|
||||
${initCode}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates all client-side JavaScript code.
|
||||
* @returns {string} - The generated JavaScript code
|
||||
*/
|
||||
generateClientScripts() {
|
||||
if (this.clientScripts.size === 0 && this.reactiveElements.size === 0 && !this.serverGenerator) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let initCode = '';
|
||||
if (this.reactiveElements.size > 0) {
|
||||
initCode = this.generateReactiveElementInit();
|
||||
}
|
||||
|
||||
let scripts = '';
|
||||
this.clientScripts.forEach((code, elementId) => {
|
||||
scripts += ` document.getElementById('${elementId}').addEventListener('click', function(e) {
|
||||
${code}
|
||||
});\n`;
|
||||
});
|
||||
|
||||
let serverClientCode = '';
|
||||
if (this.serverGenerator) {
|
||||
serverClientCode = this.serverGenerator.generateClientAPICalls();
|
||||
}
|
||||
|
||||
return `<script>
|
||||
${this.generateReactiveStore()}
|
||||
${serverClientCode}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
${initCode}
|
||||
|
||||
${scripts}});
|
||||
</script>`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets all server-side scripts.
|
||||
* @returns {Array<Object>} - Array of server-side script objects
|
||||
*/
|
||||
getServerScripts() {
|
||||
return this.serverScripts;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = JavaScriptGenerator;
|
||||
209
lib/generators/ServerCodeGenerator.js
Normal file
209
lib/generators/ServerCodeGenerator.js
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
const crypto = require('crypto');
|
||||
const StringUtils = require("../utils/StringUtils");
|
||||
|
||||
/**
|
||||
* Generates server-side Express.js routes for server blocks.
|
||||
*/
|
||||
class ServerCodeGenerator {
|
||||
/**
|
||||
* Creates a new server code generator.
|
||||
* @param {Object} options - Options for the generator
|
||||
*/
|
||||
constructor(options = {}) {
|
||||
this.options = options;
|
||||
this.serverRoutes = new Map();
|
||||
this.hasServerCode = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Registers a server-side route to be executed when requested.
|
||||
* @param {string} elementId - The ID of the element that triggers the route
|
||||
* @param {string} code - The JavaScript code to execute
|
||||
* @param {Array<string>} params - The input parameters to retrieve from the client
|
||||
*/
|
||||
addServerRoute(elementId, code, params = []) {
|
||||
if (this.options.debug) {
|
||||
console.log(`[ServerCodeGenerator] Adding server route for element ${elementId}`);
|
||||
if (params.length > 0) {
|
||||
console.log(`[ServerCodeGenerator] Route parameters: ${params.join(", ")}`);
|
||||
}
|
||||
}
|
||||
|
||||
const endpoint = this.generateEndpointPath(elementId);
|
||||
|
||||
this.serverRoutes.set(elementId, {
|
||||
endpoint,
|
||||
code,
|
||||
params
|
||||
});
|
||||
|
||||
this.hasServerCode = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a unique endpoint path for a server route.
|
||||
* @param {string} elementId - The element ID for the route
|
||||
* @returns {string} - A unique endpoint path
|
||||
*/
|
||||
generateEndpointPath(elementId) {
|
||||
const hash = crypto.createHash('sha256')
|
||||
.update(elementId + Math.random().toString())
|
||||
.digest('hex')
|
||||
.substring(0, 12);
|
||||
|
||||
return `/api/${StringUtils.toKebabCase(elementId)}-${hash}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates client-side JavaScript for making API calls to server routes.
|
||||
* @returns {string} - JavaScript code for making API calls
|
||||
*/
|
||||
generateClientAPICalls() {
|
||||
if (this.serverRoutes.size === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let apiCode = `
|
||||
const _bp_api = {
|
||||
post: async function(url, data) {
|
||||
try {
|
||||
const serverPort = window.blueprintServerPort || 3001;
|
||||
|
||||
const fullUrl = \`http://\${window.location.hostname}:\${serverPort}\${url}\`;
|
||||
|
||||
const response = await fetch(fullUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(\`API request failed: \${response.status}\`);
|
||||
}
|
||||
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error('[Blueprint API]', error);
|
||||
return { error: error.message };
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
`;
|
||||
|
||||
|
||||
this.serverRoutes.forEach((route, elementId) => {
|
||||
const { endpoint, params } = route;
|
||||
|
||||
apiCode += `async function _bp_serverAction_${elementId}(e) {
|
||||
const data = {};
|
||||
${params.map(param => ` data.${param} = ${param} ? ${param}.value : null;`).join('\n')}
|
||||
|
||||
try {
|
||||
const result = await _bp_api.post('${endpoint}', data);
|
||||
console.log('[Blueprint API] Server response:', result);
|
||||
|
||||
if (result && typeof result === 'object') {
|
||||
Object.keys(result).forEach(key => {
|
||||
if (window[key] && typeof window[key].set === 'function') {
|
||||
window[key].set(result[key]);
|
||||
}
|
||||
else {
|
||||
const element = document.getElementById(key);
|
||||
if (element) {
|
||||
element.textContent = result[key];
|
||||
console.log(\`[Blueprint API] Updated element #\${key} with value: \${result[key]}\`);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('[Blueprint API] Error in server action:', error);
|
||||
}
|
||||
}\n`;
|
||||
});
|
||||
|
||||
return apiCode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates Express.js server code for all registered server routes.
|
||||
* @returns {string} - Express.js server code
|
||||
*/
|
||||
generateServerCode() {
|
||||
if (this.serverRoutes.size === 0) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let serverCode = `
|
||||
const express = require('express');
|
||||
const bodyParser = require('body-parser');
|
||||
const cors = require('cors');
|
||||
|
||||
function createBlueprintApiServer(port = 3001) {
|
||||
const app = express();
|
||||
|
||||
app.use(cors());
|
||||
app.use(bodyParser.json());
|
||||
|
||||
app.use((req, res, next) => {
|
||||
console.log(\`[\${new Date().toISOString()}] \${req.method} \${req.url}\`);
|
||||
next();
|
||||
});
|
||||
|
||||
`;
|
||||
|
||||
this.serverRoutes.forEach((route, elementId) => {
|
||||
const { endpoint, code, params } = route;
|
||||
|
||||
serverCode += `
|
||||
app.post('${endpoint}', async (req, res) => {
|
||||
try {
|
||||
${params.map(param => `const ${param} = req.body.${param};`).join('\n ')}
|
||||
|
||||
let result;
|
||||
try {
|
||||
${code}
|
||||
} catch (error) {
|
||||
console.error(\`Error in server block \${error.message}\`);
|
||||
return res.status(500).json({ error: error.message });
|
||||
}
|
||||
|
||||
return res.json(result || {});
|
||||
} catch (error) {
|
||||
console.error(\`Error processing request: \${error.message}\`);
|
||||
return res.status(500).json({ error: error.message });
|
||||
}
|
||||
});`;
|
||||
});
|
||||
|
||||
serverCode += `
|
||||
|
||||
app.listen(port, () => {
|
||||
console.log(\`Blueprint API server running at http://localhost:\${port}\`);
|
||||
});
|
||||
|
||||
return app;
|
||||
}
|
||||
|
||||
module.exports = createBlueprintApiServer;
|
||||
`;
|
||||
|
||||
return serverCode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Checks if there is any server code to generate.
|
||||
* @returns {boolean} - Whether there is server code
|
||||
*/
|
||||
hasServerCodeToGenerate() {
|
||||
return this.hasServerCode;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = ServerCodeGenerator;
|
||||
Loading…
Add table
Add a link
Reference in a new issue