web-documentation 1.0.28 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-documentation",
-  "version": "1.0.28",
+  "version": "1.0.29",
   "description": "Declarative multilanguage documentation website generator",
   "keywords": [
     "documentation",
@@ -68,7 +68,7 @@
     "@webcomponents/webcomponentsjs": "^2.8.0",
     "archiver": "^8.0.0",
     "bootstrap-icons": "^1.13.1",
-    "clientnode": "^4.0.1414",
+    "clientnode": "^4.0.1419",
     "css-loader": "^7.1.4",
     "cssnano": "^8.0.1",
     "default-gateway": "^7.2.2",

package/source/deploy.ts

@@ -451,7 +451,8 @@ const isFileIgnored = async (filePath: string): Promise<boolean> => (
  */
 const copyRepositoryFile = async (
     sourcePath: string, targetPath: string, file: File
-): Promise<false | undefined> => {
+): Promise<false | undefined> =>
+{
     if (await isFileIgnored(file.path) || basename(file.name) === 'readme.md')
         return false
 

package/source/dummyReadme.md

@@ -82,14 +82,28 @@ zip file here and inject or request via cdn in HTML:
 npm install clientnode
 ```
 
+<!--showExample-->
+
 ```HTML
-<!--Inject downloaded file:
-<script src="index.js"></script>
--->
-<!--Or integrate via cdn:-->
-<script
-    src="https://torben.website/clientnode/data/distributionBundle/index.js"
-></script>
+<script src="https://unpkg.com/clientnode@latest/dist/bundle/index.js">
+</script>
+
+<div id="first-example-playground"></div>
+```
+
+<!--showExample:JavaScript-->
+
+```JavaScript
+const domNode = clientnode.createDomNodes('<p>some content to animate</p>');
+
+const endless = () => {
+    clientnode.fadeIn(domNode)
+        .then(() => clientnode.fadeOut(domNode))
+        .then(endless)
+};
+endless();
+
+document.querySelector('#first-example-playground').appendChild(domNode);
 ```
 
 The compiled bundle supports AMD, commonjs, commonjs2 and variable injection
@@ -105,13 +119,25 @@ want.
 Usage
 -----
 
-Function call from previous generated instance via dom node or instance
-reference:
-<!--deDE:
-    Aufruf einer Plugin-Methode anhand der zuvor generierten Instanz bzw. über
-    den zurückgegebene DOM-Knoten:
--->
+Execute a JSON based expression:
+<!--deDE:Ausführung eines JSON basierten Ausdrucks:-->
+
+<!--showExample-->
+
+```HTML
+<div id="second-example-playground"></div>
+```
+
+<!--showExample:JavaScript-->
 
 ```JavaScript
-console.log('TEST')
+document.querySelector('#second-example-playground').innerText =
+    clientnode.evaluateExpression(
+        {
+            $operator: '+',
+            operand1: 2,
+            operand2: {$select: 'some.data.in.scope'}
+        },
+        {some: {data: {in: {scope: 3}}}}
+    );
 ```

package/source/index.ts

@@ -191,7 +191,7 @@ export class WebDocumentation<
             NOTE: We have to render examples first to avoid having dots in
             example code.
         */
-        this._showExamples()
+        await this._showExamples()
 
         this._makeCodeEllipsis()
 
@@ -398,7 +398,7 @@ export class WebDocumentation<
     /**
      * Shows marked example codes directly in browser.
      */
-    _showExamples(): void {
+    async _showExamples(): Promise<void> {
         for (const domNode of getAll(this.hostDomNode))
             if (domNode.nodeName === this.options.showExample.domNodeName) {
                 const match: null | RegExpMatchArray =
@@ -418,6 +418,7 @@ export class WebDocumentation<
 
                     try {
                         let domNode: HTMLElement | string = ''
+                        let reInjectScripts = false
                         if (match.length > 2 && match[2])
                             if (
                                 ['javascript', 'javascripts', 'js']
@@ -439,18 +440,39 @@ export class WebDocumentation<
                                 domNode.innerText = code
                             } else if (match[2].toLowerCase() === 'hidden')
                                 domNode = code
-                            else
+                            else {
                                 domNode = createDomNodes(format(
-                                    this.options.showExample.htmlWrapper,
-                                    code
+                                    this.options.showExample.htmlWrapper, code
                                 ))
-                        else
+                                reInjectScripts = true
+                            }
+                        else {
                             domNode = createDomNodes(format(
-                                this.options.showExample.htmlWrapper,
-                                code
+                                this.options.showExample.htmlWrapper, code
                             ))
+                            reInjectScripts = true
+                        }
 
                         codeDomNode.after(domNode)
+
+                        if (reInjectScripts) {
+                            /*
+                                Injected script tags are not executed by
+                                default. So we need to reinject those.
+                            */
+                            for (const scriptDomNode of domNode.querySelectorAll('script')) {
+                                // const newScriptDomNode = scriptDomNode.cloneNode(true)
+                                const newScriptDomNode = document.createElement('script')
+                                for (const name of scriptDomNode.getAttributeNames())
+                                    newScriptDomNode.setAttribute(name, scriptDomNode.getAttribute(name))
+                                newScriptDomNode.textContent = scriptDomNode.textContent
+                                const promise = new Promise((resolve) => {
+                                    newScriptDomNode.addEventListener('load', resolve)
+                                })
+                                scriptDomNode.parentNode.replaceChild(newScriptDomNode, scriptDomNode)
+                                await promise
+                            }
+                        }
                     } catch (error) {
                         log.critical(
                             `Error while integrating code "${code}":`,
@@ -460,7 +482,6 @@ export class WebDocumentation<
                 }
             }
 
-
         this.onExamplesLoaded()
     }
     // endregion