From b9a92a4df2488a9ca0df6dc23d555f00652588bd Mon Sep 17 00:00:00 2001 From: chris Date: Wed, 30 Apr 2025 14:12:28 +0200 Subject: [PATCH] MAJOR,REFA,IMPL: updated files for current bundling process --- .gitignore | 2 +- generate_single_file.js | 171 +++++---- jpclw-bundle.json | 748 +++++++++++++++++++++++++++++++++------- 3 files changed, 710 insertions(+), 211 deletions(-) diff --git a/.gitignore b/.gitignore index f990aae..8beb3fa 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,5 @@ node_modules/ samples/*/ jpc-like-websites.js -jpc-like-websites.mod.js +jpc-like-websites.mjs extensions/ diff --git a/generate_single_file.js b/generate_single_file.js index 0f796b1..e95741e 100644 --- a/generate_single_file.js +++ b/generate_single_file.js @@ -1,42 +1,6 @@ const fs = require('fs/promises'); const path = require('path'); -/** - * purely convienience - */ -class FileDependecy { - name; - folder; - path() { - return this.folder + '/' + this.name; - } -} - -/** - * Object Access Object - * purely convienience - */ -class OAO { - constructor() { - /** - * @type {boolean|Map} - */ - this.orderedGroups - /** - * @type {Array} - */ - this.keys = []; - /** - * @type {map} - */ - this.objects = {}; - /** - * @type {boolean} - */ - this.isOrdered = false; - } -} - const copyright_disclaimer = ` /** * This file is part of the jps-like-websites lib @@ -46,14 +10,6 @@ const copyright_disclaimer = ` `; -let fileOrder = Object.assign(new OAO(), require('./fileOrder.json')); - -fileOrder.objects = fileOrder.keys - .reduce((a, fileName) => Object.assign( - a, - { [fileName]: Object.assign(new FileDependecy(), fileOrder.objects[fileName]) } - ), {}); - /** * Kept for future reference, might be that we will return to the dependency resolvement approach. * @param {OAO} oao @@ -125,7 +81,7 @@ function resolveDependencyOrder(oao) { * @param {string} srcFile path to src file * @param {string} targetFile path of target file that will contain all scripts */ -async function appendContent(srcFile, targetFile) { +async function appendContent(srcFile, targetFile, contentModifications = [], lineModifications = []) { try { let content = await fs.readFile(srcFile, 'utf8'); console.log(`Processing '${srcFile}'`); @@ -133,27 +89,13 @@ async function appendContent(srcFile, targetFile) { console.log(` Adding Copyright disclaimer!`); console.log(` Attepting to append to default script variant`); - content = [ - ...copyright_disclaimer.split('\r\n'), - ...content.split('\r\n') - ]; - await fs.appendFile(targetFile, content.join('\r\n')); - - console.log(` Adding export to "modulize"!`); - /** - * Checks weither the given line starts with any of the exportable values. - * @param {string} line - * @returns {boolean} - */ - const isExpStarter = line => ["function", "const", "let", "class"].some(starter => line.startsWith(starter)); - console.log(` Attepting to append to module variant`); - - await fs.appendFile( - targetFileModule, - content - .map(l => (isExpStarter(l) ? "export " : "") + l) - .join('\r\n') - ); + /* Apply modifications */ + content = contentModifications + .reduce((a, c) => c(a), content.split('\r\n')) + .map(line => lineModifications.reduce((a, c) => c(a), line)) + .join('\r\n'); + + await fs.appendFile(targetFile, content); console.log(` Append/Write: successfully!`); } catch (error) { @@ -162,31 +104,88 @@ async function appendContent(srcFile, targetFile) { } -let orderedJoinList = Object.keys(fileOrder.orderedGroups) - .flatMap(groupName => fileOrder.orderedGroups[groupName]) - .map(fileName => fileOrder.objects[fileName].path()); -/* -// Kept for future reference, might be that we will return to the dependency resolvement approach. -fileOrder = resolveDependencyOrder(fileOrder); +/** + * + * @param {string} srcFile path to src file + * @param {string} targetFile path of target file that will contain all scripts + */ +async function bundleWithSpecifiedMode(targetFile, fileList, modulize = true) { + let contentModifications = [ + function (content) { + return [ + ...copyright_disclaimer.split('\r\n'), + ...content + ]; + } + ]; -let orderedJoinList = fileOrder.keys - .map(fileName => fileOrder.objects[k].path()); -*/ + let lineModifications = [ + function (line) { + let starters = ["function", "const", "let", "class"]; + return (starters.some(s => line.startsWith(s)) ? "export " : "") + line; + } + ]; + + + fileList + .reduce((prevPromise, filePath) => prevPromise + .then( + () => appendContent(filePath, targetFile, contentModifications) + ), Promise.resolve() + ) + + if (modulize) { + let targetModule = path.basename(targetFile).split('.', 1)[0] + '.mjs'; + fileList + .reduce((prevPromise, filePath) => prevPromise + .then( + () => appendContent(filePath, targetModule, contentModifications, lineModifications) + ), Promise.resolve() + ) + } + +} -const targetFile = "./jpc-like-websites.js"; -const targetFileModule = "./jpc-like-websites.module.js"; -console.log("(Re-) Creating target file: '" + targetFile + "'"); +/** + * @deprecated Currently this function takles the task of successfully bundling the jpc-framework. + * A custom bundler will replace this function/file. + * Some logic might be copied/used from here. + * + * Takes the given order from the jpclw-bundle.json and bundles the scripts accordingly. + * + * @param {string|path} targetFile path to the targetfile (without file extension) + * @param {boolean} modulize flag to decide to generate a mjs module as well + * @param {string|path} bundleFile path to the bundleFile if there is some + * - preparation for jpclw-bundler + */ +function bundle(targetFile = "./jpc-like-websites.js", modulize = true, bundleFile = './jpclw-bundle.json') { + let fileOrder = require(bundleFile); + console.log("(Re-) Creating target file: '" + targetFile + "'"); + /* EMPTY (create?) TARGET FILE */ + fs.writeFile(targetFile, "", err => { }); + + if (modulize) { + let targetModule = path.basename(targetFile).split('.', 1)[0] + 'mjs'; + fs.writeFile(targetModule, "", err => { }); + } + + let fileList = Object.keys(fileOrder.orderedGroups) + .flatMap(groupName => fileOrder.orderedGroups[groupName]) + .map(fileName => { + let f = fileOrder.objects[fileName]; + /* The Path build by name and folder */ + return `${f.folder}/${f.name}`; + }); + + + bundleWithSpecifiedMode(targetFile, fileList, modulize); + +} -/* EMPTY (create?) TARGET FILE */ -fs.writeFile(targetFile, "", err => { }); -fs.writeFile(targetFileModule, "", err => { }); +let args = process.argv.slice(2); +bundle(args[0], args[1], args[2]); -orderedJoinList - .reduce((prevPromise, filePath) => prevPromise - .then( - () => appendContent(filePath, targetFile) - ), Promise.resolve()) diff --git a/jpclw-bundle.json b/jpclw-bundle.json index 33891e6..903e5ee 100644 --- a/jpclw-bundle.json +++ b/jpclw-bundle.json @@ -1,194 +1,694 @@ { "orderedGroups": { - "pure_stylings": [ + "base": [ + "webTrinity.js", + "extStore.js" + ], + "helper": [ + "ObjectAccessObject.js", + "TwoDimPoint.js", + "general.js", + "indices.js" + ], + "chain_mixins": [ + "mixinModSubChain.js", + "ModificationSubChain.js" + ], + "decorators": [ "color.js", "alignment.js", - "arrangement.js" - ], - "modifications": [ - "modificationSubChainMixins.js", + "arrangement.js", "siding.js", "padding.js", "margin.js", "shapes.js", "border.js", - "twoDimPoint.js", "dimensions.js" ], - "behaviour_modifications": [ + "handlers": [ "commonEvents.js", "contextMenu.js", "dragAndDrop.js" ], - "pre_context": [ - "webTrinity.js", - "extStore.js", - "generalHelpers.js" - ], "modifier": [ - "modifier.js" + "Modifier.js" ], - "component": [ - "wrapperComponent.js", - "modifiableComponent.js", - "addStyleAndFunctions.js", - "component.js" + "generators":[ + "generator.js", + "defaultGenerators.js" ], - "builder": [ - "baseComponents.js", - "builder.js" + "component": [ + "ChildbearerComponent.js", + "ModifiableComponent.js", + "StyleAndScriptStoringComponent.js", + "Component.js", + "FlexContainerComponent.js", + "Column.js", + "Row.js", + "InputComponent.js" ], "extensions": [ "extension.js" ], - "app_context": [ + "context": [ "scriptAndStyleContext.js", "framework-controls.js", "context.js" + ], + "builder": [ + "builder.js" ] }, "keys": [ - "color.js", + "extStore.js", + "webTrinity.js", + "builder.js", + "ChildbearerComponent.js", + "Column.js", + "Component.js", + "FlexContainerComponent.js", + "InputComponent.js", + "ModifiableComponent.js", + "Row.js", + "StyleAndScriptStoringComponent.js", + "context.js", + "framework-controls.js", + "scriptAndStyleContext.js", "alignment.js", "arrangement.js", - "siding.js", - "shapes.js", "border.js", + "color.js", "dimensions.js", + "margin.js", + "padding.js", + "shapes.js", + "siding.js", + "extension.js", + "simplePagingAndNavigation.js", + "defaultGenerators.js", + "generator.js", "commonEvents.js", "contextMenu.js", "dragAndDrop.js", - "webTrinity.js", - "extStore.js", - "generalHelpers.js", - "modifier.js", - "wrapperComponent.js", - "modifiableComponent.js", - "addStyleAndFunctions.js", - "component.js", - "baseComponents.js", - "builder.js", - "extension.js", - "scriptAndStyleContext.js", - "framework-controls.js", - "context.js", - "modificationSubChainMixins.js", - "padding.js", - "margin.js", - "twoDimPoint.js" + "general.js", + "indices.js", + "ObjectAccessObject.js", + "TwoDimPoint.js", + "ChainableModifier.js", + "mixinModSubChain.js", + "ModificationSubChain.js", + "Modifier.js" ], "objects": { - "color.js": { - "name": "color.js", - "folder": "src" + "extStore.js": { + "folder": "src/base", + "name": "extStore.js", + "exports": [ + "ESAggregation", + "ExtStorePosition", + "OverwriteBehaviour", + "clearFunctionDeclarationText", + "getScriptTagInjectionText", + "FunctionStoreBuffer", + "ExtStorage", + "ExtStoreType", + "SStoreDefinition", + "resolveOverwrite", + "identifyAndResolveOverwrite", + "generateAndFillScriptTag", + "getStylingInjectionText", + "generateAndFillStyleTag", + "executeOnExtStoreTypeCollectedTriple" + ], + "imports": { + "../Component": [ + "Component" + ], + "../context": [ + "Page" + ] + } + }, + "webTrinity.js": { + "folder": "src/base", + "name": "webTrinity.js", + "exports": [ + "WebTrinity" + ] + }, + "builder.js": { + "folder": "src", + "name": "builder.js", + "exports": [ + "builder" + ], + "imports": { + "./Component": [ + "Component", + "FlexContainerComponent", + "Row", + "Column", + "InputComponent" + ], + "./modifier": [ + "Modifier" + ], + "./context": [ + "Page" + ] + } + }, + "ChildbearerComponent.js": { + "folder": "src/component", + "name": "ChildbearerComponent.js", + "exports": [ + "ChildbearerComponent" + ], + "imports": { + "../decorators": [ + "Alignment", + "Arrangement" + ], + "../helper": [ + "helperFun" + ], + "./Component": [ + "Component" + ], + "../builder": [ + "builder" + ] + } + }, + "Column.js": { + "folder": "src/component", + "name": "Column.js", + "exports": [ + "Column" + ], + "imports": { + "./FlexContainerComponent": [ + "FlexContainerComponent" + ] + } + }, + "Component.js": { + "folder": "src/component", + "name": "Component.js", + "exports": [ + "Component" + ], + "imports": { + "../base": [ + "ExtStorage" + ], + "../modifier": [ + "Modifier" + ], + "../context": [ + "Page", + "CommonCompelGroups" + ], + "../handlers": [ + "DefaultContextMenu", + "DragAndDropImplementation" + ], + "../generators": [ + "CompelGenerator" + ] + } + }, + "FlexContainerComponent.js": { + "folder": "src/component", + "name": "FlexContainerComponent.js", + "exports": [ + "FlexContainerComponent" + ], + "imports": { + "./Component": [ + "Component" + ], + "../modifier": [ + "Modifier" + ] + } + }, + "InputComponent.js": { + "folder": "src/component", + "name": "InputComponent.js", + "exports": [ + "InputComponent" + ], + "imports": { + "./Component": [ + "Component" + ] + } + }, + "ModifiableComponent.js": { + "folder": "src/component", + "name": "ModifiableComponent.js", + "exports": [ + "ModifiableComponent" + ], + "imports": { + "./ChildbearerComponent": [ + "ChildbearerComponent" + ], + "../base": [ + "SStoreDefinition" + ], + "../modifier": [ + "ChainableModifier" + ] + } + }, + "Row.js": { + "folder": "src/component", + "name": "Row.js", + "exports": [ + "Row" + ], + "imports": { + "./FlexContainerComponent": [ + "FlexContainerComponent" + ], + "../helper": [ + "onSingleOrArray" + ] + } + }, + "StyleAndScriptStoringComponent.js": { + "folder": "src/component", + "name": "StyleAndScriptStoringComponent.js", + "exports": [ + "StyleAndScriptStoringComponent" + ], + "imports": { + "./ModifiableComponent": [ + "ModifiableComponent" + ], + "../decorators": [ + "Alignment", + "Arrangement" + ], + "../base": [ + "ExtStorage", + "ExtStoreType", + "SStoreDefinition" + ] + } + }, + "context.js": { + "folder": "src/context", + "name": "context.js", + "exports": [ + "PageBuilder", + "CommonCompelGroups", + "Page" + ], + "imports": { + "./scriptAndStyleContext": [ + "ScriptAndStyleContext" + ], + "../extensions": [ + "CompelExtension" + ] + } + }, + "framework-controls.js": { + "folder": "src/context", + "name": "framework-controls.js", + "exports": [ + "frameworkControlPanel" + ], + "imports": { + "../builder": [ + "builder" + ], + "../modifier": [ + "Modifier" + ], + "../decorators": [ + "Alignment", + "Arrangement", + "Colors", + "Border", + "MaterialFiveHundredlColors" + ], + "../base": [ + "ExtStoreType" + ], + "../Component": [ + "Component" + ] + } + }, + "scriptAndStyleContext.js": { + "folder": "src/context", + "name": "scriptAndStyleContext.js", + "exports": [ + "ScriptAndStyleContext" + ], + "imports": { + "../base": [ + "OverwriteBehaviour", + "FunctionStoreBuffer" + ] + } }, "alignment.js": { + "folder": "src/decorators", "name": "alignment.js", - "folder": "src" + "exports": [ + "Alignment" + ] }, "arrangement.js": { + "folder": "src/decorators", "name": "arrangement.js", - "folder": "src" - }, - "siding.js": { - "name": "siding.js", - "folder": "src/sizeSide" - }, - "shapes.js": { - "name": "shapes.js", - "folder": "src/sizeSide" + "exports": [ + "Arrangement" + ] }, "border.js": { + "folder": "src/decorators", "name": "border.js", - "folder": "src/sizeSide" + "exports": [ + "LineStyles", + "BorderDefinition", + "Define", + "Border", + "BorderChain", + "BorderChainedModifier" + ], + "imports": { + "./siding": [ + "SizeUnits", + "Sides" + ], + "./color": [ + "Color", + "Colors" + ], + "./shapes": [ + "Shapes" + ], + "../modifier": [ + "mixinModSubChainEndings", + "mixinModSubChainComponentMethods" + ] + } + }, + "color.js": { + "folder": "src/decorators", + "name": "color.js", + "exports": [ + "Color", + "Colors", + "MaterialFiveHundredlColors" + ] }, "dimensions.js": { + "folder": "src/decorators", "name": "dimensions.js", - "folder": "src/sizeSide" - }, - "commonEvents.js": { - "name": "commonEvents.js", - "folder": "src" - }, - "contextMenu.js": { - "name": "contextMenu.js", - "folder": "src/modifications" + "exports": [ + "Dimensions", + "DimensionsChain", + "DimensionsChainedModifier" + ], + "imports": { + "./siding": [ + "DirectionUnitDependentAttribute", + "SizeUnits" + ], + "../helper": [ + "TwoDimPoint" + ], + "../modifier": [ + "mixinModSubChainEndings", + "mixinModSubChainComponentMethods" + ] + } }, - "dragAndDrop.js": { - "name": "dragAndDrop.js", - "folder": "src/modifications" + "margin.js": { + "folder": "src/decorators", + "name": "margin.js", + "exports": [ + "Margin", + "MarginChain", + "MarginChainedModifier" + ], + "imports": { + "./siding": [ + "Sides", + "SizeUnits" + ], + "../modifier": [ + "mixinModSubChainEndings", + "mixinModSubChainComponentMethods" + ] + } }, - "webTrinity.js": { - "name": "webTrinity.js", - "folder": "src/context" + "padding.js": { + "folder": "src/decorators", + "name": "padding.js", + "exports": [ + "Padding", + "PaddingChain", + "PaddingChainedModifier" + ], + "imports": { + "./siding": [ + "Sides", + "SizeUnits" + ], + "../modifier": [ + "mixinModSubChainEndings", + "mixinModSubChainComponentMethods" + ] + } }, - "extStore.js": { - "name": "extStore.js", - "folder": "src/context" + "shapes.js": { + "folder": "src/decorators", + "name": "shapes.js", + "exports": [ + "Shape", + "ShapeChain", + "ShapeChainedModifier", + "Shapes" + ], + "imports": { + "./siding": [ + "DirectionUnitDependentAttribute", + "SizeUnits", + "SidingRefCorners" + ], + "../modifier": [ + "mixinModSubChainEndings", + "mixinModSubChainComponentMethods" + ] + } }, - "generalHelpers.js": { - "name": "generalHelpers.js", - "folder": "src/context" + "siding.js": { + "folder": "src/decorators", + "name": "siding.js", + "exports": [ + "SizeUnits", + "DirectionUnitDependentAttribute", + "SideDirections", + "SideTransitionDirection", + "Corners", + "CornerTransitionDirection", + "Sides" + ] }, - "modifier.js": { - "name": "modifier.js", - "folder": "src" + "extension.js": { + "folder": "src/extensions", + "name": "extension.js" }, - "wrapperComponent.js": { - "name": "wrapperComponent.js", - "folder": "src/componentAncestry" + "simplePagingAndNavigation.js": { + "folder": "src/extensions", + "name": "simplePagingAndNavigation.js" }, - "modifiableComponent.js": { - "name": "modifiableComponent.js", - "folder": "src/componentAncestry" + "defaultGenerators.js": { + "folder": "src/generators", + "name": "defaultGenerators.js", + "exports": [ + "singlepage" + ], + "imports": { + "./generator": [ + "CompelGenerator" + ] + } }, - "addStyleAndFunctions.js": { - "name": "addStyleAndFunctions.js", - "folder": "src/componentAncestry" + "generator.js": { + "folder": "src/generators", + "name": "generator.js", + "exports": [ + "CompelGenerator" + ], + "imports": { + "../base": [ + "WebTrinity", + "ExtStoreType" + ], + "../Component": [ + "Component" + ], + "../modifier": [ + "Modifier" + ] + } }, - "component.js": { - "name": "component.js", - "folder": "src" + "commonEvents.js": { + "folder": "src/handlers", + "name": "commonEvents.js", + "exports": [ + "CommonEvents" + ] }, - "baseComponents.js": { - "name": "baseComponents.js", - "folder": "src" + "contextMenu.js": { + "folder": "src/handlers", + "name": "contextMenu.js", + "exports": [ + "DefaultContextMenu" + ], + "imports": { + "../decorators": [ + "Sides" + ], + "../helper": [ + "helperFun", + "getEnclosingBounds" + ] + } }, - "builder.js": { - "name": "builder.js", - "folder": "src" + "dragAndDrop.js": { + "folder": "src/handlers", + "name": "dragAndDrop.js", + "exports": [ + "EventDrag", + "DragAndDropImplementation", + "DADInPlace" + ], + "imports": { + "../helper": [ + "TwoDimPoint" + ], + "../decorators": [ + "Dimensions" + ] + } }, - "extension.js": { - "name": "extension.js", - "folder": "src/extensions" + "general.js": { + "folder": "src/helper", + "name": "general.js", + "exports": [ + "onSingleOrArray", + "helperFun" + ] }, - "scriptAndStyleContext.js": { - "name": "scriptAndStyleContext.js", - "folder": "src/context" + "indices.js": { + "folder": "src/helper", + "name": "indices.js", + "exports": [ + "isValueInBounds", + "areXYInArea", + "isPointInArea", + "getEnclosingBounds" + ], + "imports": { + "../decorators": [ + "SideDirections" + ], + "./TwoDimPoint": [ + "TwoDimPoint" + ] + } }, - "framework-controls.js": { - "name": "framework-controls.js", - "folder": "src/context" + "ObjectAccessObject.js": { + "folder": "src/helper", + "name": "ObjectAccessObject.js", + "exports": [ + "ObjectAccessObject" + ] }, - "context.js": { - "name": "context.js", - "folder": "src" + "TwoDimPoint.js": { + "folder": "src/helper", + "name": "TwoDimPoint.js", + "exports": [ + "TwoDimPoint" + ] }, - "modificationSubChainMixins.js":{ - "name": "modificationSubChainMixins.js", - "folder": "src/modifiers" + "ChainableModifier.js": { + "folder": "src/modifier", + "name": "ChainableModifier.js", + "exports": [ + "ChainableModifier" + ], + "imports": { + "./modifier": [ + "Modifier" + ], + "../Component": [ + "Component" + ], + "../decorators": [ + "PaddingChainedModifier", + "MarginChainedModifier", + "ShapeChainedModifier", + "BorderChainedModifier" + ] + } }, - "padding.js":{ - "name": "padding.js", - "folder": "src/modifiers" + "mixinModSubChain.js": { + "folder": "src/modifier", + "name": "mixinModSubChain.js", + "exports": [ + "mixinModSubChainEndings", + "mixinModSubChainComponentMethods" + ], + "imports": { + "./modifier": [ + "Modifier" + ], + "./ChainableModifier": [ + "ChainableModifier" + ] + } }, - "margin.js":{ - "name": "margin.js", - "folder": "src/modifiers" + "ModificationSubChain.js": { + "folder": "src/modifier", + "name": "ModificationSubChain.js", + "exports": [ + "ModificationSubChain", + "ModificationSubChainReComp" + ] }, - "twoDimPoint.js":{ - "name": "twoDimPoint.js", - "folder": "src/modifiers" + "Modifier.js": { + "folder": "src/modifier", + "name": "Modifier.js", + "exports": [ + "Modifier" + ], + "imports": { + "../decorators": [ + "Sides", + "Border", + "BorderChain", + "Color", + "Dimensions", + "DimensionsChain", + "Margin", + "MarginChain", + "Padding", + "PaddingChain", + "Shape", + "ShapeChain" + ] + } } } -} +} \ No newline at end of file