chris
/
jpc-like-websites
1
0
Fork 0
Code Issues Pull Requests Projects Releases 10 Wiki Activity
Browse Source

MAJOR,REFA,IMPL: updated files for current bundling process

dev-feat-component_preview
chris 2 months ago
parent
74974f6c80
commit
b9a92a4df2
3 changed files with 710 additions and 211 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .gitignore
  2. 171
      generate_single_file.js
  3. 748
      jpclw-bundle.json

2
.gitignore
View File

@ -1,5 +1,5 @@
node_modules/ node_modules/
samples/*/ samples/*/
jpc-like-websites.js jpc-like-websites.js
jpc-like-websites.mod.js jpc-like-websites.mjs
extensions/ extensions/

171
generate_single_file.js
View File

@ -1,42 +1,6 @@
const fs = require('fs/promises'); const fs = require('fs/promises');
const path = require('path'); 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<string,FileDependecy>}
*/
this.orderedGroups
/**
* @type {Array<string>}
*/
this.keys = [];
/**
* @type {map<string, FileDependecy>}
*/
this.objects = {};
/**
* @type {boolean}
*/
this.isOrdered = false;
}
}
const copyright_disclaimer = ` const copyright_disclaimer = `
/** /**
* This file is part of the jps-like-websites lib * 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. * Kept for future reference, might be that we will return to the dependency resolvement approach.
* @param {OAO} oao * @param {OAO} oao
@ -125,7 +81,7 @@ function resolveDependencyOrder(oao) {
* @param {string} srcFile path to src file * @param {string} srcFile path to src file
* @param {string} targetFile path of target file that will contain all scripts * @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 { try {
let content = await fs.readFile(srcFile, 'utf8'); let content = await fs.readFile(srcFile, 'utf8');
console.log(`Processing '${srcFile}'`); console.log(`Processing '${srcFile}'`);
@ -133,27 +89,13 @@ async function appendContent(srcFile, targetFile) {
console.log(` Adding Copyright disclaimer!`); console.log(` Adding Copyright disclaimer!`);
console.log(` Attepting to append to default script variant`); console.log(` Attepting to append to default script variant`);
content = [ /* Apply modifications */
...copyright_disclaimer.split('\r\n'), content = contentModifications
...content.split('\r\n') .reduce((a, c) => c(a), content.split('\r\n'))
]; .map(line => lineModifications.reduce((a, c) => c(a), line))
await fs.appendFile(targetFile, content.join('\r\n')); .join('\r\n');
console.log(` Adding export to "modulize"!`); await fs.appendFile(targetFile, content);
/**
* 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')
);
console.log(` Append/Write: successfully!`); console.log(` Append/Write: successfully!`);
} catch (error) { } 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 let lineModifications = [
.map(fileName => fileOrder.objects[k].path()); 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"; * @deprecated Currently this function takles the task of successfully bundling the jpc-framework.
console.log("(Re-) Creating target file: '" + targetFile + "'"); * 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 */ let args = process.argv.slice(2);
fs.writeFile(targetFile, "", err => { }); bundle(args[0], args[1], args[2]);
fs.writeFile(targetFileModule, "", err => { });
orderedJoinList
.reduce((prevPromise, filePath) => prevPromise
.then(
() => appendContent(filePath, targetFile)
), Promise.resolve())

748
jpclw-bundle.json
View File

@ -1,194 +1,694 @@
{ {
"orderedGroups": { "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", "color.js",
"alignment.js", "alignment.js",
"arrangement.js" "arrangement.js",
],
"modifications": [
"modificationSubChainMixins.js",
"siding.js", "siding.js",
"padding.js", "padding.js",
"margin.js", "margin.js",
"shapes.js", "shapes.js",
"border.js", "border.js",
"twoDimPoint.js",
"dimensions.js" "dimensions.js"
], ],
"behaviour_modifications": [ "handlers": [
"commonEvents.js", "commonEvents.js",
"contextMenu.js", "contextMenu.js",
"dragAndDrop.js" "dragAndDrop.js"
], ],
"pre_context": [
"webTrinity.js",
"extStore.js",
"generalHelpers.js"
],
"modifier": [ "modifier": [
"modifier.js" "Modifier.js"
], ],
"component": [ "generators":[
"wrapperComponent.js", "generator.js",
"modifiableComponent.js", "defaultGenerators.js"
"addStyleAndFunctions.js",
"component.js"
], ],
"builder": [ "component": [
"baseComponents.js", "ChildbearerComponent.js",
"builder.js" "ModifiableComponent.js",
"StyleAndScriptStoringComponent.js",
"Component.js",
"FlexContainerComponent.js",
"Column.js",
"Row.js",
"InputComponent.js"
], ],
"extensions": [ "extensions": [
"extension.js" "extension.js"
], ],
"app_context": [ "context": [
"scriptAndStyleContext.js", "scriptAndStyleContext.js",
"framework-controls.js", "framework-controls.js",
"context.js" "context.js"
],
"builder": [
"builder.js"
] ]
}, },
"keys": [ "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", "alignment.js",
"arrangement.js", "arrangement.js",
"siding.js",
"shapes.js",
"border.js", "border.js",
"color.js",
"dimensions.js", "dimensions.js",
"margin.js",
"padding.js",
"shapes.js",
"siding.js",
"extension.js",
"simplePagingAndNavigation.js",
"defaultGenerators.js",
"generator.js",
"commonEvents.js", "commonEvents.js",
"contextMenu.js", "contextMenu.js",
"dragAndDrop.js", "dragAndDrop.js",
"webTrinity.js", "general.js",
"extStore.js", "indices.js",
"generalHelpers.js", "ObjectAccessObject.js",
"modifier.js", "TwoDimPoint.js",
"wrapperComponent.js", "ChainableModifier.js",
"modifiableComponent.js", "mixinModSubChain.js",
"addStyleAndFunctions.js", "ModificationSubChain.js",
"component.js", "Modifier.js"
"baseComponents.js",
"builder.js",
"extension.js",
"scriptAndStyleContext.js",
"framework-controls.js",
"context.js",
"modificationSubChainMixins.js",
"padding.js",
"margin.js",
"twoDimPoint.js"
], ],
"objects": { "objects": {
"color.js": { "extStore.js": {
"name": "color.js", "folder": "src/base",
"folder": "src" "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": { "alignment.js": {
"folder": "src/decorators",
"name": "alignment.js", "name": "alignment.js",
"folder": "src" "exports": [
"Alignment"
]
}, },
"arrangement.js": { "arrangement.js": {
"folder": "src/decorators",
"name": "arrangement.js", "name": "arrangement.js",
"folder": "src" "exports": [
}, "Arrangement"
"siding.js": { ]
"name": "siding.js",
"folder": "src/sizeSide"
},
"shapes.js": {
"name": "shapes.js",
"folder": "src/sizeSide"
}, },
"border.js": { "border.js": {
"folder": "src/decorators",
"name": "border.js", "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": { "dimensions.js": {
"folder": "src/decorators",
"name": "dimensions.js", "name": "dimensions.js",
"folder": "src/sizeSide" "exports": [
}, "Dimensions",
"commonEvents.js": { "DimensionsChain",
"name": "commonEvents.js", "DimensionsChainedModifier"
"folder": "src" ],
}, "imports": {
"contextMenu.js": { "./siding": [
"name": "contextMenu.js", "DirectionUnitDependentAttribute",
"folder": "src/modifications" "SizeUnits"
],
"../helper": [
"TwoDimPoint"
],
"../modifier": [
"mixinModSubChainEndings",
"mixinModSubChainComponentMethods"
]
}
}, },
"dragAndDrop.js": { "margin.js": {
"name": "dragAndDrop.js", "folder": "src/decorators",
"folder": "src/modifications" "name": "margin.js",
"exports": [
"Margin",
"MarginChain",
"MarginChainedModifier"
],
"imports": {
"./siding": [
"Sides",
"SizeUnits"
],
"../modifier": [
"mixinModSubChainEndings",
"mixinModSubChainComponentMethods"
]
}
}, },
"webTrinity.js": { "padding.js": {
"name": "webTrinity.js", "folder": "src/decorators",
"folder": "src/context" "name": "padding.js",
"exports": [
"Padding",
"PaddingChain",
"PaddingChainedModifier"
],
"imports": {
"./siding": [
"Sides",
"SizeUnits"
],
"../modifier": [
"mixinModSubChainEndings",
"mixinModSubChainComponentMethods"
]
}
}, },
"extStore.js": { "shapes.js": {
"name": "extStore.js", "folder": "src/decorators",
"folder": "src/context" "name": "shapes.js",
"exports": [
"Shape",
"ShapeChain",
"ShapeChainedModifier",
"Shapes"
],
"imports": {
"./siding": [
"DirectionUnitDependentAttribute",
"SizeUnits",
"SidingRefCorners"
],
"../modifier": [
"mixinModSubChainEndings",
"mixinModSubChainComponentMethods"
]
}
}, },
"generalHelpers.js": { "siding.js": {
"name": "generalHelpers.js", "folder": "src/decorators",
"folder": "src/context" "name": "siding.js",
"exports": [
"SizeUnits",
"DirectionUnitDependentAttribute",
"SideDirections",
"SideTransitionDirection",
"Corners",
"CornerTransitionDirection",
"Sides"
]
}, },
"modifier.js": { "extension.js": {
"name": "modifier.js", "folder": "src/extensions",
"folder": "src" "name": "extension.js"
}, },
"wrapperComponent.js": { "simplePagingAndNavigation.js": {
"name": "wrapperComponent.js", "folder": "src/extensions",
"folder": "src/componentAncestry" "name": "simplePagingAndNavigation.js"
}, },
"modifiableComponent.js": { "defaultGenerators.js": {
"name": "modifiableComponent.js", "folder": "src/generators",
"folder": "src/componentAncestry" "name": "defaultGenerators.js",
"exports": [
"singlepage"
],
"imports": {
"./generator": [
"CompelGenerator"
]
}
}, },
"addStyleAndFunctions.js": { "generator.js": {
"name": "addStyleAndFunctions.js", "folder": "src/generators",
"folder": "src/componentAncestry" "name": "generator.js",
"exports": [
"CompelGenerator"
],
"imports": {
"../base": [
"WebTrinity",
"ExtStoreType"
],
"../Component": [
"Component"
],
"../modifier": [
"Modifier"
]
}
}, },
"component.js": { "commonEvents.js": {
"name": "component.js", "folder": "src/handlers",
"folder": "src" "name": "commonEvents.js",
"exports": [
"CommonEvents"
]
}, },
"baseComponents.js": { "contextMenu.js": {
"name": "baseComponents.js", "folder": "src/handlers",
"folder": "src" "name": "contextMenu.js",
"exports": [
"DefaultContextMenu"
],
"imports": {
"../decorators": [
"Sides"
],
"../helper": [
"helperFun",
"getEnclosingBounds"
]
}
}, },
"builder.js": { "dragAndDrop.js": {
"name": "builder.js", "folder": "src/handlers",
"folder": "src" "name": "dragAndDrop.js",
"exports": [
"EventDrag",
"DragAndDropImplementation",
"DADInPlace"
],
"imports": {
"../helper": [
"TwoDimPoint"
],
"../decorators": [
"Dimensions"
]
}
}, },
"extension.js": { "general.js": {
"name": "extension.js", "folder": "src/helper",
"folder": "src/extensions" "name": "general.js",
"exports": [
"onSingleOrArray",
"helperFun"
]
}, },
"scriptAndStyleContext.js": { "indices.js": {
"name": "scriptAndStyleContext.js", "folder": "src/helper",
"folder": "src/context" "name": "indices.js",
"exports": [
"isValueInBounds",
"areXYInArea",
"isPointInArea",
"getEnclosingBounds"
],
"imports": {
"../decorators": [
"SideDirections"
],
"./TwoDimPoint": [
"TwoDimPoint"
]
}
}, },
"framework-controls.js": { "ObjectAccessObject.js": {
"name": "framework-controls.js", "folder": "src/helper",
"folder": "src/context" "name": "ObjectAccessObject.js",
"exports": [
"ObjectAccessObject"
]
}, },
"context.js": { "TwoDimPoint.js": {
"name": "context.js", "folder": "src/helper",
"folder": "src" "name": "TwoDimPoint.js",
"exports": [
"TwoDimPoint"
]
}, },
"modificationSubChainMixins.js":{ "ChainableModifier.js": {
"name": "modificationSubChainMixins.js", "folder": "src/modifier",
"folder": "src/modifiers" "name": "ChainableModifier.js",
"exports": [
"ChainableModifier"
],
"imports": {
"./modifier": [
"Modifier"
],
"../Component": [
"Component"
],
"../decorators": [
"PaddingChainedModifier",
"MarginChainedModifier",
"ShapeChainedModifier",
"BorderChainedModifier"
]
}
}, },
"padding.js":{ "mixinModSubChain.js": {
"name": "padding.js", "folder": "src/modifier",
"folder": "src/modifiers" "name": "mixinModSubChain.js",
"exports": [
"mixinModSubChainEndings",
"mixinModSubChainComponentMethods"
],
"imports": {
"./modifier": [
"Modifier"
],
"./ChainableModifier": [
"ChainableModifier"
]
}
}, },
"margin.js":{ "ModificationSubChain.js": {
"name": "margin.js", "folder": "src/modifier",
"folder": "src/modifiers" "name": "ModificationSubChain.js",
"exports": [
"ModificationSubChain",
"ModificationSubChainReComp"
]
}, },
"twoDimPoint.js":{ "Modifier.js": {
"name": "twoDimPoint.js", "folder": "src/modifier",
"folder": "src/modifiers" "name": "Modifier.js",
"exports": [
"Modifier"
],
"imports": {
"../decorators": [
"Sides",
"Border",
"BorderChain",
"Color",
"Dimensions",
"DimensionsChain",
"Margin",
"MarginChain",
"Padding",
"PaddingChain",
"Shape",
"ShapeChain"
]
}
} }
} }
} }
Write Preview
Loading…
Cancel
Save