web-documentation 1.0.28 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-documentation",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "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/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']
@@ -438,19 +439,53 @@ export class WebDocumentation<
                                 domNode.setAttribute('type', 'text/css')
                                 domNode.innerText = code
                             } else if (match[2].toLowerCase() === 'hidden')
-                                domNode = code
-                            else
+                                domNode = createDomNodes(code)
+                            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 =
+                                    document.createElement('script')
+                                for (const name of
+                                    scriptDomNode.getAttributeNames()
+                                )
+                                    newScriptDomNode.setAttribute(
+                                        name,
+                                        scriptDomNode.getAttribute(name) as
+                                            string
+                                    )
+                                newScriptDomNode.textContent =
+                                    scriptDomNode.textContent
+                                const promise = new Promise((resolve) => {
+                                    newScriptDomNode.addEventListener(
+                                        'load', resolve
+                                    )
+                                })
+                                if (scriptDomNode.parentNode)
+                                    scriptDomNode.parentNode.replaceChild(
+                                        newScriptDomNode, scriptDomNode
+                                    )
+                                await promise
+                            }
                     } catch (error) {
                         log.critical(
                             `Error while integrating code "${code}":`,
@@ -460,7 +495,6 @@ export class WebDocumentation<
                 }
             }
 
-
         this.onExamplesLoaded()
     }
     // endregion