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 6 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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .gitignore
  2. 169
      generate_single_file.js
  3. 746
      jpclw-bundle.json

2
.gitignore
View File

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

169
generate_single_file.js
View File

@ -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<string,FileDependecy>}
*/
this.orderedGroups
/**
* @type {Array<string>}
*/
this.keys = [];
/**
* @type {map<string, FileDependecy>}
*/
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'));
/* 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');
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')
);
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 lineModifications = [
function (line) {
let starters = ["function", "const", "let", "class"];
return (starters.some(s => line.startsWith(s)) ? "export " : "") + line;
}
];
let orderedJoinList = fileOrder.keys
.map(fileName => fileOrder.objects[k].path());
*/
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 + "'");
}
/* EMPTY (create?) TARGET FILE */
fs.writeFile(targetFile, "", err => { });
fs.writeFile(targetFileModule, "", err => { });
orderedJoinList
.reduce((prevPromise, filePath) => prevPromise
.then(
() => appendContent(filePath, targetFile)
), Promise.resolve())
/**
* @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);
}
let args = process.argv.slice(2);
bundle(args[0], args[1], args[2]);

746
jpclw-bundle.json
View File

@ -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"
]
}
}
}
}
Write Preview
Loading…
Cancel
Save