diff --git a/.gitignore b/.gitignore
index e0e756e95e0ee01ba592f40a1d966d3e1ba22618..ad50389f77056d0d48f6f027956a77619baff56e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -488,4 +488,5 @@ devenv.local.nix
result
# pupeeter screenshot of the test page
-screenshot.png
\ No newline at end of file
+screenshot.png
+/copy-to-documentation/
diff --git a/development/scripts/createNewComponentClass.mjs b/development/scripts/createNewClass.mjs
similarity index 80%
rename from development/scripts/createNewComponentClass.mjs
rename to development/scripts/createNewClass.mjs
index da587ea8655afe50f4167bc24debc74ec019fecd..f831199cbe18871ba86983a8fdc67ac6b2cf70e1 100644
--- a/development/scripts/createNewComponentClass.mjs
+++ b/development/scripts/createNewClass.mjs
@@ -3,7 +3,6 @@ import {writeFileSync, readFileSync, mkdirSync, existsSync} from "fs";
import {dirname, join} from "path";
import {buildCSS, createScriptFilenameFromStyleFilename} from "./buildStylePostCSS.mjs";
-
let version = "1.0.0";
try {
const data = readFileSync(projectRoot + "/package.json", "utf8");
@@ -295,84 +294,113 @@ const args = process.argv.slice(2);
const argsObj = args.reduce((acc, arg) => {
let [key, value] = arg.split('=');
+ // if flag and no =, set value to true
+ if (!value && key.startsWith('--')&& arg.match(/^--[^=]+$/)) {
+ value = true;
+ }
+
key = key.replace(/^--/, '');
acc[key] = value;
return acc;
}, {});
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");
printUsage();
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");
process.exit(1);
}
-if (argsObj.classname.match(/^[0-9]/)) {
- console.error("Classname can not start with a number");
+if (className.match(/^[0-9]/)) {
+ console.error("Classname cannot start with a number");
process.exit(1);
}
-if (argsObj.classname.match(/^[a-z]/)) {
+if (className.match(/^[a-z]/)) {
console.error("Classname should start with an uppercase letter");
process.exit(1);
}
-if (!argsObj.namespace) {
- console.error("No namespace provided, you can use --namespace=Your.Namespace");
+if (!argsObj.path) {
+ console.error("No path provided, you can use --path=Your.Namespace");
printUsage();
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 = argsObj.namespace.match(/components\.form/);
+const isFormControl = namespaceWithDots.match(/components\.form/);
const formInternalsCode = isFormControl ? internalTemplate : '';
const parentClass = isFormControl ? 'CustomControl' : 'CustomElement';
const valueDefaults = isFormControl ? ",\n value: null" : "";
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}}/g, argsObj.classname.toLowerCase())
+ .replace(/{{CLASSNAME_LOWER}}/g, className.toLowerCase())
.replace(/{{HTML_TAG_SUFFIX}}/g, htmlTagSuffix)
.replace(/{{NAMESPACE_AS_PATH}}/g, namespaceAsPath)
.replace(/{{BACK_TO_ROOT_PATH}}/g, backToRootPath)
@@ -382,20 +410,30 @@ const code = template.replace(/{{HTML_ELEMENT_FORM_INTERNALS}}/g, formInternalsC
.replace(/{{VERSION}}/g, nextVersion)
.replace(/{{NAMESPACE_WITH_DOTS}}/g, namespaceWithDots);
-try {
+if (!onlyDocumentation) {
+
+ try {
+
+ const d = dirname(classPath);
+ console.log(`Creating ${d}`);
+ if (!existsSync(d)) {
+ mkdirSync(d, {recursive: true});
+ }
- const d = dirname(filename);
- console.log(`Creating ${d}`);
- if (!existsSync(d)) {
- mkdirSync(d, {recursive: true});
mkdirSync(join(d, "style"), {recursive: true});
mkdirSync(join(d, "stylesheet"), {recursive: true});
- }
- writeFileSync(filename, code);
-} catch (e) {
- console.error(e);
- process.exit(1);
+ if (!existsSync(classPath)) {
+ writeFileSync(classPath, code);
+ } else {
+ console.error(`File ${classPath} already exists`);
+ }
+
+
+ } catch (e) {
+ console.error(e);
+ process.exit(1);
+ }
}
const exampleCode = `import "@schukai/monster/source/${namespaceAsPath}/${htmlTagSuffix}.mjs";
@@ -416,20 +454,22 @@ try {
process.exit(1);
}
-try {
- writeFileSync(pcssFilename, '');
-} catch (e) {
- console.error(e);
- process.exit(1);
-}
+if (!onlyDocumentation) {
+ try {
+ writeFileSync(pcssPath, '');
+ } catch (e) {
+ console.error(e);
+ process.exit(1);
+ }
-buildCSS(pcssFilename, createScriptFilenameFromStyleFilename(pcssFilename)).then(() => {
- console.log(`Created ${filename} and ${pcssFilename}`);
- process.exit(0);
-}).catch((e) => {
- console.error(e);
- process.exit(1);
-});
+ buildCSS(pcssPath, createScriptFilenameFromStyleFilename(pcssPath)).then(() => {
+ console.log(`Created ${classPath} and ${pcssPath}`);
+ process.exit(0);
+ }).catch((e) => {
+ console.error(e);
+ process.exit(1);
+ });
+}
const overviewHTML = `
<h2>Introduction</h2>
@@ -475,7 +515,7 @@ const overviewHTML = `
application, Monster {{CLASSNAME}}'s modular design guarantees easy integration that streamlines
your development process and increases your productivity.
</p>
-`.replace(/{{CLASSNAME}}/g, argsObj.classname);
+`.replace(/{{CLASSNAME}}/g, className);
const designHTML = `
@@ -500,7 +540,7 @@ const designHTML = `
<img src="assets/{{NAMESPACE_WITH_DOTS}}.{{CLASSNAME_LOWER}}.svg" alt="Parts and slots of the {{CLASSNAME}}"-->
`.replace(/{{NAMESPACE_WITH_DOTS}}/g, namespaceWithDots)
- .replace(/{{CLASSNAME}}/g, argsObj.classname);
+ .replace(/{{CLASSNAME}}/g, className);
const showItHTML = `
<monster-{{HTML_TAG_SUFFIX}}></monster-{{HTML_TAG_SUFFIX}}>
@@ -508,13 +548,16 @@ const showItHTML = `
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(`${fragmentsDirectory}/design.html`,designHTML);
- writeFileSync(`${fragmentsDirectory}/show-it.html`, showItHTML);
+
+ writeFileSync(`${d}/overview.html`, overviewHTML);
+ writeFileSync(`${d}/design.html`, designHTML);
+ writeFileSync(`${d}/show-it.html`, showItHTML);
} catch (e) {
console.error(e);
diff --git a/nix/scripts/create-documentation-files.nix b/nix/scripts/create-documentation-files.nix
new file mode 100644
index 0000000000000000000000000000000000000000..d508f9047e4c0a7be86199c9031c12458be74228
--- /dev/null
+++ b/nix/scripts/create-documentation-files.nix
@@ -0,0 +1,36 @@
+{ 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"
+
+
+''
diff --git a/nix/scripts/create-issue.nix b/nix/scripts/create-issue.nix
index 900da6296afb73dc8f180f36ca85d3e469a48635..4407a42115f71a6691b1f2d266eeb09a2c0bb1b1 100644
--- a/nix/scripts/create-issue.nix
+++ b/nix/scripts/create-issue.nix
@@ -4,7 +4,6 @@ in
source ${pkgs'.common}/bin/common
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."
cd_working_dir
@@ -41,43 +40,43 @@ in
${pkgs'.coreutils}/bin/mkdir -p "$issue_dir"
${pkgs'.coreutils}/bin/cat <<EOF > $issue_dir/''${issue_id}.mjs
- /**
- * @file development/issues/open/''${issue_id}.mjs
- * @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/''${issue_id}
- * @description ''${escaped_issue_text}
- * @issue ''${issue_id}
- */
+/**
+* @file development/issues/open/''${issue_id}.mjs
+* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/''${issue_id}
+* @description ''${escaped_issue_text}
+* @issue ''${issue_id}
+*/
- import "../../../source/components/style/property.pcss";
- import "../../../source/components/style/normalize.pcss";
- import "../../../source/components/style/typography.pcss";
+import "../../../source/components/style/property.pcss";
+import "../../../source/components/style/normalize.pcss";
+import "../../../source/components/style/typography.pcss";
- EOF
+EOF
cat <<EOF > $issue_dir/''${issue_id}.html
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>''${escaped_issue_text} #''${issue_id}</title>
- <script src="./''${issue_id}.mjs" type="module"></script>
- </head>
- <body>
- <h1>''${escaped_issue_text} #''${issue_id}</h1>
- <p>''${escaped_issue_description}</p>
- <ul>
- <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/''${issue_id}">Issue #''${issue_id}</a></li>
- <li><a href="/">Back to overview</a></li>
- </ul>
- <main>
-
- <!-- Write your code here -->
-
- </main>
- </body>
- </html>
- EOF
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>''${escaped_issue_text} #''${issue_id}</title>
+ <script src="./''${issue_id}.mjs" type="module"></script>
+</head>
+<body>
+ <h1>''${escaped_issue_text} #''${issue_id}</h1>
+ <p>''${escaped_issue_description}</p>
+ <ul>
+ <li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/''${issue_id}">Issue #''${issue_id}</a></li>
+ <li><a href="/">Back to overview</a></li>
+ </ul>
+ <main>
+
+ <!-- Write your code here -->
+
+ </main>
+</body>
+</html>
+EOF
echo_ok "Issue file created"
echo_hint "You can find the issue file in ''${issue_dir}/''${issue_id}.mjs"
diff --git a/nix/scripts/create-new-class.nix b/nix/scripts/create-new-class.nix
new file mode 100644
index 0000000000000000000000000000000000000000..1059505b22e93b76b2ca939c860c2bd0762488c9
--- /dev/null
+++ b/nix/scripts/create-new-class.nix
@@ -0,0 +1,46 @@
+{ 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"
+
+
+''
diff --git a/nix/scripts/create-new-component-class.nix b/nix/scripts/create-new-component-class.nix
deleted file mode 100644
index a318753991d4541eac7e1e93fad9d3a815e09b65..0000000000000000000000000000000000000000
--- a/nix/scripts/create-new-component-class.nix
+++ /dev/null
@@ -1,18 +0,0 @@
-{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"
-
-
-''
diff --git a/nix/scripts/go-task.nix b/nix/scripts/go-task.nix
index 8d1d9d9ffba24aa981a1fef3baf7171648b9a97d..aff37a699d33ed63b3ebd7d5c6adf77035e888e6 100644
--- a/nix/scripts/go-task.nix
+++ b/nix/scripts/go-task.nix
@@ -12,7 +12,8 @@
scriptUpdateWebTest = pkgs'.callPackage ./update-web-test.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;};
- 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;};
scriptStartServer = pkgs'.callPackage ./start-server.nix {inherit pkgs' self system;};
@@ -99,16 +100,26 @@
aliases:
- b
- create-new-component-class:
+ create-new-class:
silent: true
env:
USER_WORKING_DIR: "{{.USER_WORKING_DIR}}"
desc: Create a new component class
cmds:
- - ${scriptCreateNewComponentclass}/bin/create-new-component-class
+ - ${scriptCreateNewComponentclass}/bin/create-new-class
aliases:
- 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:
silent: true
env:
diff --git a/nix/scripts/update-web-test.nix b/nix/scripts/update-web-test.nix
index 9f14f1d3fb1d7f3bd4d98faa1ecf0dd0734319b2..3643053e640ca29f45f9d7338bd487ace7573769 100644
--- a/nix/scripts/update-web-test.nix
+++ b/nix/scripts/update-web-test.nix
@@ -7,7 +7,6 @@ in
source ${pkgs'.common}/bin/common
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."
cd_working_dir
diff --git a/source/components/form/context-error.mjs b/source/components/form/context-error.mjs
index bd213577b5b1134d3dbe8c2557da07d0115285ff..99bef491dac57f09477bd2eb02d8d478973010ea 100644
--- a/source/components/form/context-error.mjs
+++ b/source/components/form/context-error.mjs
@@ -201,7 +201,6 @@ class ContextError extends Popper {
}
if (c === "<slot></slot>") {
- console.log(this.shadowRoot.querySelector("slot"));
const sr = this.shadowRoot;
if (!sr) {
diff --git a/source/components/form/form.mjs b/source/components/form/form.mjs
index 0b6e21fc7081bfae093a835ae75d2077fa05d00a..2cf205071bcff30bc363135df5206bbfa6230397 100644
--- a/source/components/form/form.mjs
+++ b/source/components/form/form.mjs
@@ -342,10 +342,7 @@ function retrieveAndSetValue(element) {
if (diffResult.length > 0) {
setTimeout(() => {
this.setOption(path, value);
- }, 100);
- setTimeout(() => {
- console.log(this[internalSymbol].getRealSubject().options.data);
- }, 1000);
+ }, 50);
}
}
diff --git a/source/components/tree-menu/tree-menu.mjs b/source/components/tree-menu/tree-menu.mjs
index 4a921d244f5dc7478cabedf09f5b1a9d772ea4ca..914c32f7dc3921eeaccaba8b9d9de95d009c1aa3 100644
--- a/source/components/tree-menu/tree-menu.mjs
+++ b/source/components/tree-menu/tree-menu.mjs
@@ -236,8 +236,6 @@ class TreeMenu extends CustomElement {
"[data-monster-insert-reference=entries-" + index + "]",
);
- console.log(currentNode);
-
currentNode.click();
let intend = parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));