web-documentation 1.0.27 → 1.0.29

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-documentation",
-  "version": "1.0.27",
+  "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",
@@ -204,9 +204,8 @@
         "ejs": {
           "options": {
             "locals": {
-              "API_DOCUMENTATION_PATH": {
-                "__evaluate__": "path.resolve(currentPath, 'api/')"
-              },
+              "API_DOCUMENTATION_PATH": "api/",
+              "HAS_API_DOCUMENTATION": true,
               "CONTENT": "source/dummyReadme.md",
               "DISTRIBUTION_BUNDLE_FILE_PATH": "dummyDistributionBundle.zip",
               "LANGUAGES": {

package/source/deploy.ts

@@ -88,7 +88,7 @@ const BUILD_DOCUMENTATION_PAGE_CONFIGURATION = {
         }
     },
     /*
-        NOTE: We habe to disable offline features since the domains cache is
+        NOTE: We have to disable offline features since the domains cache is
         already in use for the main home page.
     */
     offline: null
@@ -179,7 +179,7 @@ const stream2buffer = async (stream: Stream): Promise<Buffer> => {
  * @param temporaryDocumentationFolderPath - Location where to build
  * documentation build.
  * @param distributionBundleFilePath - Location where to save the exported
- * build artefacts.
+ * build artifacts.
  * @returns A promise resolving when build process has finished.
  */
 const generateAndPushNewDocumentationPage = async (
@@ -259,6 +259,7 @@ const generateAndPushNewDocumentationPage = async (
         ...parameters,
         CONTENT,
         API_DOCUMENTATION_PATH: apiDocumentationPath,
+        HAS_API_DOCUMENTATION,
         DISTRIBUTION_BUNDLE_FILE_PATH:
             await isFile(DISTRIBUTION_BUNDLE_FILE_PATH) ?
                 relative('./', DISTRIBUTION_BUNDLE_FILE_PATH) :
@@ -450,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
 
@@ -721,7 +723,7 @@ const main = async (): Promise<void> => {
             Boolean(SCOPE.scripts) &&
             Object.prototype.hasOwnProperty.call(SCOPE.scripts, 'build')
         )
-            // Prepare build artefacts for further local usage.
+            // Prepare build artifacts for further local usage.
             log.debug(run('yarn build'))
     }
 }

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.html.ejs

@@ -115,10 +115,7 @@ _%>
                                 numberOfLanguageLinks = _.LANGUAGES.length
                                 START_UP_ANIMATION_NUMBER += numberOfLanguageLinks
                             }
-                            if (
-                                _.API_DOCUMENTATION_PATH &&
-                                _.IS_DIRECTORY(_.API_DOCUMENTATION_PATH)
-                            )
+                            if (_.HAS_API_DOCUMENTATION)
                                 START_UP_ANIMATION_NUMBER += 3
                             else
                                 START_UP_ANIMATION_NUMBER += 2
@@ -158,12 +155,8 @@ _%>
                                         class="header__inner__links__lang tools-hidden-on-javascript-disabled wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"
                                         href="#lang-<%- language %>"
                                     ><%- language.slice(0, 2) %></a>
-                        <%_      }
-                            if (
-                                _.API_DOCUMENTATION_PATH &&
-                                _.IS_DIRECTORY(_.API_DOCUMENTATION_PATH)
-                            ) {
-                        _%>
+                                <%_ } _%>
+                            <%_ if (_.HAS_API_DOCUMENTATION) { _%>
                                 <%_ START_UP_ANIMATION_NUMBER -= 1 _%>
                                 <a
                                     class="header__inner__links__api-link wu-start-up-animation-number-<%- START_UP_ANIMATION_NUMBER %>"

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