Refactor rapidoc (use external script and webpack 5)

sctg-development · Oct 21, 2024 · 21243b2 · 21243b2
1 parent 745866d
commit 21243b2
Show file tree

Hide file tree

Showing 15 changed files with 10,329 additions and 113 deletions.
diff --git a/.github/workflows/build.yaml b/.github/workflows/build.yaml
@@ -85,8 +85,8 @@ jobs:
         target/${{ matrix.target }}/release/sctgdesk-api-server &
         sleep 5
         curl http://127.0.0.1:21114/openapi.json > docs/openapi3.json
-        curl http://127.0.0.1:21114/js/openapisnippet.min.js > docs/openapisnippet.min.js
-        curl http://127.0.0.1:21114/js/openapisnippet.min.js.map > docs/openapisnippet.min.js.map
+        curl http://127.0.0.1:21114/js/sctgdesk-server.min.js > docs/sctgdesk-server.min.js
+        curl http://127.0.0.1:21114/js/sctgdesk-server.min.js.map > docs/sctgdesk-server.min.js.map
         kill $!
     
     - name: Create Rapidoc index.html
@@ -99,44 +99,8 @@ jobs:
         <head>
             <meta charset="utf-8" />
             <!-- Important: rapi-doc uses utf8 charecters -->
-            <script
-            type="module"
-            src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"
-            ></script>
-            <script src="openapisnippet.min.js"></script>
-            <script>
-                window.addEventListener('DOMContentLoaded', (event) => {
-                    const rapidocEl = document.getElementById('rapidoc');
-                    const spec_url = "data:application/json;base64,$(base64 -w 0 docs/openapi3.json)";
-                    const targets = ['c','javascript_fetch','go','php','rust','python','shell_curl'];
-                    fetch(spec_url)
-                        .then((res) => res.json())
-                        .then((data) => {
-                            if (data['host'] === undefined) {
-                                data['host'] = window.location.host;
-                            }
-                            if (data['basePath'] === undefined) {
-                                data['basePath'] = '/';
-                            }
-                            for (let path in data.paths) {
-                                for (let method in data.paths[path]) {
-                                    const snippets = OpenAPISnippets.getEndpointSnippets(data,path,method,targets);
-                                    const pathItem = data.paths[path][method];
-                                    const code_samples = [];
-                                    for (let snippet of snippets.snippets) {
-                                        code_samples.push({
-                                            lang: snippet.id,
-                                            label: snippet.title,
-                                            source: snippet.content
-                                        });
-                                    }
-                                    pathItem['x-code-samples'] = code_samples;
-                                }
-                            }
-                            rapidocEl.loadSpec(data);
-                        });
-                });
-            </script>
+            <script>window.SPEC_URL = "data:application/json;base64,$(base64 -w 0 docs/openapi3.json)";</script>
+            <script src="sctgdesk-server.min.js"></script>
         </head>
         <body>
             <rapi-doc
@@ -177,16 +141,16 @@ jobs:
           gh release create $TAG_NAME -t "$TAG_NAME" -n "$TAG_NAME" || true
           gh release upload $TAG_NAME ${{ matrix.os }}_${{ matrix.target }}_${TAG_NAME}.zip --clobber
           gh release upload $TAG_NAME docs/openapi3.json --clobber
-          gh release upload $TAG_NAME docs/openapisnippet.min.js --clobber
-          gh release upload $TAG_NAME docs/openapisnippet.min.js.map --clobber
+          gh release upload $TAG_NAME docs/sctgdesk-server.min.js --clobber
+          gh release upload $TAG_NAME docs/sctgdesk-server.min.js.map --clobber
           gh release upload $TAG_NAME docs/index.html --clobber
           
     - name: Commit and push to GitHub
       continue-on-error: true
       run: |
         git config --global user.name 'github-actions'
         git config --global user.email '[email protected]'
-        git add -v -f docs/openapi3.json docs/index.html docs/openapisnippet.min.js docs/openapisnippet.min.js.map
+        git add -v -f docs/openapi3.json docs/index.html docs/sctgdesk-server.min.js docs/sctgdesk-server.min.js.map
         git commit -m "Update GitHub Pages" docs/*
         git push origin HEAD
 

diff --git a/build.rs b/build.rs
@@ -84,6 +84,7 @@ async fn main() {
         ("npm", &["install", "--force"], &["run", "build"])
     };
 
+    // Install npm dependencies for webconsole
     let output = Command::new(command)
         .current_dir("webconsole")
         .args(install_args)
@@ -96,6 +97,7 @@ async fn main() {
         str::from_utf8(&output.stderr).unwrap_or("")
     );
 
+    // Build webconsole
     let output = Command::new(command)
         .current_dir("webconsole")
         .args(build_args)
@@ -108,6 +110,32 @@ async fn main() {
         str::from_utf8(&output.stderr).unwrap_or("")
     );
 
+    // Install npm dependencies for rapidoc
+        let output = Command::new(command)
+        .current_dir("rapidoc")
+        .args(install_args)
+        .output()
+        .expect("Failed to execute command");
+    assert!(
+        output.status.success(),
+        "Failed to install npm dependencies: {}{}",
+        str::from_utf8(&output.stdout).unwrap_or(""),
+        str::from_utf8(&output.stderr).unwrap_or("")
+    );
+
+    // Build rapidoc
+    let output = Command::new(command)
+        .current_dir("rapidoc")
+        .args(build_args)
+        .output()
+        .expect("Failed to execute command");
+    assert!(
+        output.status.success(),
+        "Failed to build rapidoc: {}{}",
+        str::from_utf8(&output.stdout).unwrap_or(""),
+        str::from_utf8(&output.stderr).unwrap_or("")
+    );
+
     // Delete test data if it exists
     let mut conn = SqliteConnection::connect(&format!("{}", db_path))
     .await

diff --git a/rapidoc/.gitignore b/rapidoc/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+dist
diff --git a/rapidoc/index.html b/rapidoc/index.html
@@ -5,43 +5,9 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <!-- OpenAPI Snippet is coming from https://github.com/TEA-ching/openapi-snippet -->
-    <script src="/js/openapisnippet.min.js"></script>
-    <script type="module" src="rapidoc-min.js"></script>
+    <script>window.SPEC_URL = "{{SPEC_URL}}";</script>
+    <script src="/js/sctgdesk-server.min.js"></script>
     <title>{{TITLE}}</title>
-    <script>
-        window.addEventListener('DOMContentLoaded', (event) => {
-            const rapidocEl = document.getElementById('rapidoc');
-            const spec_url = "{{SPEC_URL}}";
-            const targets = ['c','javascript_fetch','go','php','rust','python','shell_curl'];
-            fetch(spec_url)
-                .then((res) => res.json())
-                .then((data) => {
-                    if (data['host'] === undefined) {
-                        data['host'] = window.location.host;
-                    }
-                    if (data['basePath'] === undefined) {
-                        data['basePath'] = '/';
-                    }
-                    for (let path in data.paths) {
-                        for (let method in data.paths[path]) {
-                            const snippets = OpenAPISnippets.getEndpointSnippets(data,path,method,targets);
-                            const pathItem = data.paths[path][method];
-                            const code_samples = [];
-                            for (let snippet of snippets.snippets) {
-                                code_samples.push({
-                                    lang: snippet.id,
-                                    label: snippet.title,
-                                    source: snippet.content
-                                });
-                            }
-                            pathItem['x-code-samples'] = code_samples;
-                        }
-                    }
-                    rapidocEl.loadSpec(data);
-                });
-        });
-    </script>
 </head>
 
 <body>
@@ -80,7 +46,9 @@
         {{OPERATIONS_TOP}}
         {{TAGS}}
         {{ENDPOINTS}}
-        <p slot="footer" style="margin:0; padding:16px 36px; background-color:orangered; color:#fff; text-align:center; height: 1em;">{{FOOTER}}</p>
+        <p slot="footer"
+            style="margin:0; padding:16px 36px; background-color:orangered; color:#fff; text-align:center; height: 1em;">
+            {{FOOTER}}</p>
     </rapi-doc>
 </body>
 

diff --git a/rapidoc/index.ts b/rapidoc/index.ts
@@ -0,0 +1,55 @@
+/**
+ * sctgdesk-server
+ * Copyright (c) 2024 - Ronan LE MEILLAT
+ * Licensed under Affero GPL v3
+ */
+import { OpenAPISnippets } from '@sctg/openapi-snippet';
+import type { paths, components } from 'openapi3';
+
+import 'rapidoc';
+type OpenAPI3 = {
+    openapi: string;
+    info: {
+        title: string;
+        version: string;
+    };
+    paths: paths;
+    components: components;
+    host?: string;
+    basePath?: string;
+}
+
+window.addEventListener('DOMContentLoaded', (event) => {
+    const rapidocEl = document.getElementById('rapidoc') as any;
+    const spec_url = (window as any).SPEC_URL;
+    const targets = ['c', 'javascript_fetch', 'go', 'php', 'rust', 'python', 'shell_curl'];
+    fetch(spec_url)
+        .then((res) => res.json() as Promise<OpenAPI3>)
+        .then((data) => {
+            if (data['host'] === undefined) {
+                data['host'] = window.location.host;
+            }
+            if (data['basePath'] === undefined) {
+                data['basePath'] = '/';
+            }
+            for (let path in data.paths) {
+                for (let method in data.paths[path as keyof paths]) {
+                    const snippets = OpenAPISnippets.getEndpointSnippets(data, path, method, targets);
+                    const currentPath = data.paths[path as keyof paths];
+                    const pathItem = currentPath[method as keyof typeof currentPath];
+                    const code_samples = [];
+                    for (let snippet of snippets.snippets) {
+                        code_samples.push({
+                            lang: snippet.id,
+                            label: snippet.title,
+                            source: snippet.content
+                        });
+                    }
+                    if (pathItem !== undefined && pathItem['x-code-samples' as keyof typeof pathItem] === undefined) {
+                        (pathItem as any)['x-code-samples'] = code_samples;
+                    }
+                }
+            }
+            rapidocEl?.loadSpec(data);
+        });
+});
diff --git a/rapidoc/openapi-snippet.d.ts b/rapidoc/openapi-snippet.d.ts
@@ -0,0 +1 @@
+declare module '@sctg/openapi-snippet';