Skip to content
Snippets Groups Projects
Verified Commit 78cbad19 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

chore: new task create documentation fragments and optimize create class task

parent ad01ff07
No related branches found
No related tags found
No related merge requests found
...@@ -489,3 +489,4 @@ result ...@@ -489,3 +489,4 @@ result
# pupeeter screenshot of the test page # pupeeter screenshot of the test page
screenshot.png screenshot.png
/copy-to-documentation/
...@@ -3,7 +3,6 @@ import {writeFileSync, readFileSync, mkdirSync, existsSync} from "fs"; ...@@ -3,7 +3,6 @@ import {writeFileSync, readFileSync, mkdirSync, existsSync} from "fs";
import {dirname, join} from "path"; import {dirname, join} from "path";
import {buildCSS, createScriptFilenameFromStyleFilename} from "./buildStylePostCSS.mjs"; import {buildCSS, createScriptFilenameFromStyleFilename} from "./buildStylePostCSS.mjs";
let version = "1.0.0"; let version = "1.0.0";
try { try {
const data = readFileSync(projectRoot + "/package.json", "utf8"); const data = readFileSync(projectRoot + "/package.json", "utf8");
...@@ -295,84 +294,113 @@ const args = process.argv.slice(2); ...@@ -295,84 +294,113 @@ const args = process.argv.slice(2);
const argsObj = args.reduce((acc, arg) => { const argsObj = args.reduce((acc, arg) => {
let [key, value] = arg.split('='); let [key, value] = arg.split('=');
// if flag and no =, set value to true
if (!value && key.startsWith('--')&& arg.match(/^--[^=]+$/)) {
value = true;
}
key = key.replace(/^--/, ''); key = key.replace(/^--/, '');
acc[key] = value; acc[key] = value;
return acc; return acc;
}, {}); }, {});
function printUsage() { function printUsage() {
console.log("Usage: task create-new-component-class --classname=YourClassName --namespace=Components.Your.Namespace"); console.log("Usage: task create-new-component-class");
}
// check argsObj has key onlydoc
if (!argsObj?.onlydoc) {
}
const onlyDocumentation = (argsObj?.onlydoc === 'true'|| argsObj?.onlydoc === true);
let className = argsObj.classname;
let namespaceAsPath = argsObj.path;
if (onlyDocumentation) {
namespaceAsPath = namespaceAsPath.split('/').slice(0, -1).join('/');
} }
const namespace = namespaceAsPath.split('/').map((part) => part[0].toUpperCase() + part.slice(1));
const namespaceWithDots = namespace.join('.');
const directory = `${sourcePath}/${namespaceAsPath}`;
let classPath;
if(onlyDocumentation) {
// get class name from filename
classPath = argsObj.path;
className = classPath.split('/').pop().replace('.mjs', '');
className = className.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
} else {
classPath = `${directory}/${htmlTagSuffix}.mjs`;
}
const lowerFirst = className[0].toLowerCase() + className.slice(1);
className = className[0].toUpperCase() + className.slice(1);
const htmlTagSuffix = className.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const styleDirectory = `${directory}/style`;
const pcssPath = `${styleDirectory}/${htmlTagSuffix}.pcss`;
const exampleDirectory = `${projectRoot}/copy-to-documentation/source/examples/${namespaceAsPath}`;
const exampleFilename = `${exampleDirectory}/${htmlTagSuffix}.mjs`;
const basename = classPath.split('/').pop().replace('.mjs', '');
const fragmentsDirectory = `${projectRoot}/copy-to-documentation/source/fragments/${namespaceAsPath}`;
const backToRootPath = '../'.repeat(namespace.length).slice(0, -1);
if (!argsObj.classname) {
if (!className) {
console.error("No classname provided, you can use --classname=YourClassName"); console.error("No classname provided, you can use --classname=YourClassName");
printUsage(); printUsage();
process.exit(1); process.exit(1);
} }
if (argsObj.classname.match(/[^A-Za-z0-9]/)) { if (className.match(/[^A-Za-z0-9]/)) {
console.error("Classname can only contain letters and numbers"); console.error("Classname can only contain letters and numbers");
process.exit(1); process.exit(1);
} }
if (argsObj.classname.match(/^[0-9]/)) { if (className.match(/^[0-9]/)) {
console.error("Classname cannot start with a number"); console.error("Classname cannot start with a number");
process.exit(1); process.exit(1);
} }
if (argsObj.classname.match(/^[a-z]/)) { if (className.match(/^[a-z]/)) {
console.error("Classname should start with an uppercase letter"); console.error("Classname should start with an uppercase letter");
process.exit(1); process.exit(1);
} }
if (!argsObj.namespace) { if (!argsObj.path) {
console.error("No namespace provided, you can use --namespace=Your.Namespace"); console.error("No path provided, you can use --path=Your.Namespace");
printUsage(); printUsage();
process.exit(1); process.exit(1);
} }
if (argsObj.namespace.match(/[^A-Za-z0-9.]/)) {
console.error("Namespace can only contain letters, numbers and dots");
process.exit(1);
}
if (!argsObj.namespace.match(/^components/)) {
console.error("Namespace must start with components");
process.exit(1);
}
const lowerFirst = argsObj.classname[0].toLowerCase() + argsObj.classname.slice(1);
const htmlTagSuffix = argsObj.classname.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
const namespace = argsObj.namespace.split('.').map((part) => part[0].toUpperCase() + part.slice(1))
const namespaceAsPath = namespace.join('/').toLowerCase();
const namespaceWithDots = namespace.join('.');
const directory = `${sourcePath}/${namespaceAsPath}`;
const styleDirectory = `${directory}/style`;
const filename = `${directory}/${htmlTagSuffix}.mjs`;
const pcssFilename = `${styleDirectory}/${htmlTagSuffix}.pcss`;
const exampleDirectory = `${projectRoot}/showroom/source/examples/${namespaceAsPath}`;
const exampleFilename = `${exampleDirectory}/${htmlTagSuffix}.mjs`;
const fragmentsDirectory = `${projectRoot}/showroom/source/fragments/${namespaceAsPath}`;
const backToRootPath = '../'.repeat(namespace.length).slice(0, -1); const isFormControl = namespaceWithDots.match(/components\.form/);
const isFormControl = argsObj.namespace.match(/components\.form/);
const formInternalsCode = isFormControl ? internalTemplate : ''; const formInternalsCode = isFormControl ? internalTemplate : '';
const parentClass = isFormControl ? 'CustomControl' : 'CustomElement'; const parentClass = isFormControl ? 'CustomControl' : 'CustomElement';
const valueDefaults = isFormControl ? ",\n value: null" : ""; const valueDefaults = isFormControl ? ",\n value: null" : "";
const code = template.replace(/{{HTML_ELEMENT_FORM_INTERNALS}}/g, formInternalsCode) const code = template.replace(/{{HTML_ELEMENT_FORM_INTERNALS}}/g, formInternalsCode)
.replace(/{{CLASSNAME}}/g, argsObj.classname) .replace(/{{CLASSNAME}}/g, className)
.replace(/{{CLASSNAME_LOWER_FIRST}}/g, lowerFirst) .replace(/{{CLASSNAME_LOWER_FIRST}}/g, lowerFirst)
.replace(/{{CLASSNAME_LOWER}}/g, argsObj.classname.toLowerCase()) .replace(/{{CLASSNAME_LOWER}}/g, className.toLowerCase())
.replace(/{{HTML_TAG_SUFFIX}}/g, htmlTagSuffix) .replace(/{{HTML_TAG_SUFFIX}}/g, htmlTagSuffix)
.replace(/{{NAMESPACE_AS_PATH}}/g, namespaceAsPath) .replace(/{{NAMESPACE_AS_PATH}}/g, namespaceAsPath)
.replace(/{{BACK_TO_ROOT_PATH}}/g, backToRootPath) .replace(/{{BACK_TO_ROOT_PATH}}/g, backToRootPath)
...@@ -382,21 +410,31 @@ const code = template.replace(/{{HTML_ELEMENT_FORM_INTERNALS}}/g, formInternalsC ...@@ -382,21 +410,31 @@ const code = template.replace(/{{HTML_ELEMENT_FORM_INTERNALS}}/g, formInternalsC
.replace(/{{VERSION}}/g, nextVersion) .replace(/{{VERSION}}/g, nextVersion)
.replace(/{{NAMESPACE_WITH_DOTS}}/g, namespaceWithDots); .replace(/{{NAMESPACE_WITH_DOTS}}/g, namespaceWithDots);
if (!onlyDocumentation) {
try { try {
const d = dirname(filename); const d = dirname(classPath);
console.log(`Creating ${d}`); console.log(`Creating ${d}`);
if (!existsSync(d)) { if (!existsSync(d)) {
mkdirSync(d, {recursive: true}); mkdirSync(d, {recursive: true});
}
mkdirSync(join(d, "style"), {recursive: true}); mkdirSync(join(d, "style"), {recursive: true});
mkdirSync(join(d, "stylesheet"), {recursive: true}); mkdirSync(join(d, "stylesheet"), {recursive: true});
if (!existsSync(classPath)) {
writeFileSync(classPath, code);
} else {
console.error(`File ${classPath} already exists`);
} }
writeFileSync(filename, code);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
process.exit(1); process.exit(1);
} }
}
const exampleCode = `import "@schukai/monster/source/${namespaceAsPath}/${htmlTagSuffix}.mjs"; const exampleCode = `import "@schukai/monster/source/${namespaceAsPath}/${htmlTagSuffix}.mjs";
const element = document.createElement('monster-${htmlTagSuffix}'); const element = document.createElement('monster-${htmlTagSuffix}');
...@@ -416,20 +454,22 @@ try { ...@@ -416,20 +454,22 @@ try {
process.exit(1); process.exit(1);
} }
if (!onlyDocumentation) {
try { try {
writeFileSync(pcssFilename, ''); writeFileSync(pcssPath, '');
} catch (e) { } catch (e) {
console.error(e); console.error(e);
process.exit(1); process.exit(1);
} }
buildCSS(pcssFilename, createScriptFilenameFromStyleFilename(pcssFilename)).then(() => { buildCSS(pcssPath, createScriptFilenameFromStyleFilename(pcssPath)).then(() => {
console.log(`Created ${filename} and ${pcssFilename}`); console.log(`Created ${classPath} and ${pcssPath}`);
process.exit(0); process.exit(0);
}).catch((e) => { }).catch((e) => {
console.error(e); console.error(e);
process.exit(1); process.exit(1);
}); });
}
const overviewHTML = ` const overviewHTML = `
<h2>Introduction</h2> <h2>Introduction</h2>
...@@ -475,7 +515,7 @@ const overviewHTML = ` ...@@ -475,7 +515,7 @@ const overviewHTML = `
application, Monster {{CLASSNAME}}'s modular design guarantees easy integration that streamlines application, Monster {{CLASSNAME}}'s modular design guarantees easy integration that streamlines
your development process and increases your productivity. your development process and increases your productivity.
</p> </p>
`.replace(/{{CLASSNAME}}/g, argsObj.classname); `.replace(/{{CLASSNAME}}/g, className);
const designHTML = ` const designHTML = `
...@@ -500,7 +540,7 @@ const designHTML = ` ...@@ -500,7 +540,7 @@ const designHTML = `
<img src="assets/{{NAMESPACE_WITH_DOTS}}.{{CLASSNAME_LOWER}}.svg" alt="Parts and slots of the {{CLASSNAME}}"--> <img src="assets/{{NAMESPACE_WITH_DOTS}}.{{CLASSNAME_LOWER}}.svg" alt="Parts and slots of the {{CLASSNAME}}"-->
`.replace(/{{NAMESPACE_WITH_DOTS}}/g, namespaceWithDots) `.replace(/{{NAMESPACE_WITH_DOTS}}/g, namespaceWithDots)
.replace(/{{CLASSNAME}}/g, argsObj.classname); .replace(/{{CLASSNAME}}/g, className);
const showItHTML = ` const showItHTML = `
<monster-{{HTML_TAG_SUFFIX}}></monster-{{HTML_TAG_SUFFIX}}> <monster-{{HTML_TAG_SUFFIX}}></monster-{{HTML_TAG_SUFFIX}}>
...@@ -508,13 +548,16 @@ const showItHTML = ` ...@@ -508,13 +548,16 @@ const showItHTML = `
try { try {
if (!existsSync(fragmentsDirectory)) {
mkdirSync(fragmentsDirectory, {recursive: true}); const d = dirname(`${fragmentsDirectory}/${basename}`);
if (!existsSync(d)) {
mkdirSync(d, {recursive: true});
} }
writeFileSync(`${fragmentsDirectory}/overview.html`, overviewHTML); writeFileSync(`${d}/overview.html`, overviewHTML);
writeFileSync(`${fragmentsDirectory}/design.html`,designHTML); writeFileSync(`${d}/design.html`, designHTML);
writeFileSync(`${fragmentsDirectory}/show-it.html`, showItHTML); writeFileSync(`${d}/show-it.html`, showItHTML);
} catch (e) { } catch (e) {
console.error(e); console.error(e);
......
{ pkgs', ... }:
pkgs'.writeShellScriptBin "create-documentation-files" ''
source ${pkgs'.common}/bin/common
echo_section "create documentation files for a component class"
echo_hint "The command is executed in the current working directory and not in a nix derivation."
cd_working_dir
echo_step "select component class"
cd source
targetPath=$(${pkgs'.gum}/bin/gum file --directory=false --file)
cd ..
if [[ -z "$targetPath" ]]; then
echo_fail "Target file is empty. Exiting."
exit 1
fi
if [[ ! -f "$targetPath" ]]; then
echo_fail "Target file does not exist. Exiting."
exit 1
fi
echo_step "create documentation files for $targetPath"
targetPath=$(realpath --relative-to=source "$targetPath")
if ! ${pkgs'.nodejs_20}/bin/node --inspect-brk development/scripts/createNewClass.mjs --path="$targetPath" --onlydoc; then
echo_fail "script createNewClass.mjs failed, check your JS!"
exit 1
fi
echo_ok "New component class created"
''
...@@ -4,7 +4,6 @@ in ...@@ -4,7 +4,6 @@ in
source ${pkgs'.common}/bin/common source ${pkgs'.common}/bin/common
echo_section "create-issue" echo_section "create-issue"
echo_hint "This script will check the code for formatting and linting issues"
echo_hint "The command is executed in the current working directory and not in a nix derivation." echo_hint "The command is executed in the current working directory and not in a nix derivation."
cd_working_dir cd_working_dir
......
{ pkgs', ... }:
pkgs'.writeShellScriptBin "create-new-class" ''
source ${pkgs'.common}/bin/common
echo_section "create new component class"
echo_hint "The command is executed in the current working directory and not in a nix derivation."
cd_working_dir
echo_section "create a new component class"
echo_step "enter new component class name"
name=$(${pkgs'.gum}/bin/gum input --placeholder "Enter new component class name")
if [[ -z "$name" ]]; then
echo_fail "Component class name is empty. Exiting."
exit 1
fi
echo_step "select target directory"
cd source
targetPath=$(${pkgs'.gum}/bin/gum file --directory --file=false)
cd ..
if [[ -z "$targetPath" ]]; then
echo_fail "Target directory is empty. Exiting."
exit 1
fi
if [[ ! -d "$targetPath" ]]; then
echo_fail "Target directory does not exist. Exiting."
exit 1
fi
echo_step "create new component class $name in $targetPath"
targetPath=$(realpath --relative-to=source "$targetPath")
if ! ${pkgs'.nodejs_20}/bin/node development/scripts/createNewClass.mjs --classname="$name" --path="$targetPath"; then
echo_fail "script createNewClass.mjs failed, check your JS!"
exit 1
fi
echo_ok "New component class created"
''
{pkgs', ...}:
pkgs'.writeShellScriptBin "create-new-component-class" ''
source ${pkgs'.common}/bin/common
echo_section "create new component class"
echo_hint "This script will check the code for formatting and linting issues"
echo_hint "The command is executed in the current working directory and not in a nix derivation."
cd_working_dir
if ! ${pkgs'.nodejs_20}/bin/node development/scripts/createNewComponentClass.mjs "$@"
then
echo_fail "script createNewClass.mjs failed, check your JS!"
exit 1
fi
echo_ok "New component class created"
''
...@@ -12,7 +12,8 @@ ...@@ -12,7 +12,8 @@
scriptUpdateWebTest = pkgs'.callPackage ./update-web-test.nix {inherit pkgs' self system;}; scriptUpdateWebTest = pkgs'.callPackage ./update-web-test.nix {inherit pkgs' self system;};
scriptRunTests = pkgs'.callPackage ./run-tests.nix {inherit pkgs' self system;}; scriptRunTests = pkgs'.callPackage ./run-tests.nix {inherit pkgs' self system;};
scriptRunWebTests = pkgs'.callPackage ./run-web-tests.nix {inherit pkgs' self system;}; scriptRunWebTests = pkgs'.callPackage ./run-web-tests.nix {inherit pkgs' self system;};
scriptCreateNewComponentclass = pkgs'.callPackage ./create-new-component-class.nix {inherit pkgs' self system;}; scriptCreateNewComponentclass = pkgs'.callPackage ./create-new-class.nix {inherit pkgs' self system;};
scriptCreateDocumentationFiles = pkgs'.callPackage ./create-documentation-files.nix {inherit pkgs' self system;};
scriptCreateIssue = pkgs'.callPackage ./create-issue.nix {inherit pkgs' self system;}; scriptCreateIssue = pkgs'.callPackage ./create-issue.nix {inherit pkgs' self system;};
scriptStartServer = pkgs'.callPackage ./start-server.nix {inherit pkgs' self system;}; scriptStartServer = pkgs'.callPackage ./start-server.nix {inherit pkgs' self system;};
...@@ -99,16 +100,26 @@ ...@@ -99,16 +100,26 @@
aliases: aliases:
- b - b
create-new-component-class: create-new-class:
silent: true silent: true
env: env:
USER_WORKING_DIR: "{{.USER_WORKING_DIR}}" USER_WORKING_DIR: "{{.USER_WORKING_DIR}}"
desc: Create a new component class desc: Create a new component class
cmds: cmds:
- ${scriptCreateNewComponentclass}/bin/create-new-component-class - ${scriptCreateNewComponentclass}/bin/create-new-class
aliases: aliases:
- c - c
create-documentation-files:
silent: true
env:
USER_WORKING_DIR: "{{.USER_WORKING_DIR}}"
desc: Create the documentation files
cmds:
- ${scriptCreateDocumentationFiles}/bin/create-documentation-files
aliases:
- d
create-issue: create-issue:
silent: true silent: true
env: env:
......
...@@ -7,7 +7,6 @@ in ...@@ -7,7 +7,6 @@ in
source ${pkgs'.common}/bin/common source ${pkgs'.common}/bin/common
echo_section "Checking code" echo_section "Checking code"
echo_hint "This script will check the code for formatting and linting issues"
echo_hint "The command is executed in the current working directory and not in a nix derivation." echo_hint "The command is executed in the current working directory and not in a nix derivation."
cd_working_dir cd_working_dir
......
...@@ -201,7 +201,6 @@ class ContextError extends Popper { ...@@ -201,7 +201,6 @@ class ContextError extends Popper {
} }
if (c === "<slot></slot>") { if (c === "<slot></slot>") {
console.log(this.shadowRoot.querySelector("slot"));
const sr = this.shadowRoot; const sr = this.shadowRoot;
if (!sr) { if (!sr) {
......
...@@ -342,10 +342,7 @@ function retrieveAndSetValue(element) { ...@@ -342,10 +342,7 @@ function retrieveAndSetValue(element) {
if (diffResult.length > 0) { if (diffResult.length > 0) {
setTimeout(() => { setTimeout(() => {
this.setOption(path, value); this.setOption(path, value);
}, 100); }, 50);
setTimeout(() => {
console.log(this[internalSymbol].getRealSubject().options.data);
}, 1000);
} }
} }
......
...@@ -236,8 +236,6 @@ class TreeMenu extends CustomElement { ...@@ -236,8 +236,6 @@ class TreeMenu extends CustomElement {
"[data-monster-insert-reference=entries-" + index + "]", "[data-monster-insert-reference=entries-" + index + "]",
); );
console.log(currentNode);
currentNode.click(); currentNode.click();
let intend = parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND)); let intend = parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment