docs: serve samples for released version from jsdelivr (#9691)

SAP · Aug 15, 2024 · ec09018 · ec09018
1 parent 89640be
commit ec09018
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 37 deletions.
diff --git a/packages/website/build-scripts/icons-generation/index.mjs b/packages/website/build-scripts/icons-generation/index.mjs
@@ -64,9 +64,9 @@ import Link from '@docusaurus/Link';
 `
 
 const additionalImports = `
-import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
-import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
-import PictureSvg from "../local-cdn/local-cdn/icons/dist/v5/picture.svg";
+import CopySvg from "@ui5/webcomponents-icons/dist/v5/copy.svg";
+import AcceptSvg from "@ui5/webcomponents-icons/dist/v5/accept.svg";
+import PictureSvg from "@ui5/webcomponents-icons/dist/v5/picture.svg";
 `;
 
 
@@ -81,10 +81,10 @@ const _generateIconsPage = (sourceDir, config) => {
 
             const iconNameImport = `${fileNameImportName}SvgName`;
             const svgImport = `${capitalize(fileNameImportName)}Svg`;
-    
+
             imports += `
-            import ${iconNameImport} from "../local-cdn/local-cdn/${config.dir}/dist/${fileName}.js";
-            import ${svgImport} from "../local-cdn/local-cdn/${config.dir}/dist/${config.version}/${fileName}.svg";
+            import ${iconNameImport} from "${config.npmPackage}/dist/${fileName}.js";
+            import ${svgImport} from "${config.npmPackage}/dist/${config.version}/${fileName}.svg";
             `;
 
         icons += `
@@ -186,7 +186,10 @@ ${classDef}`;
     writeFile(config.dir, content);
 };
 
+function findRoot(pkgName) {
+    return path.dirname(import.meta.resolve(`${pkgName}/package.json`)).replace("file://", "");
+}
 
-generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons/dist/v5"), SAPIconsConfig);
-generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-tnt/dist/v3"), SAPTNTIconsConfig);
-generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-business-suite/dist/v2"), SAPBSIconsConfig);
+generateIconsPage(path.join(findRoot("@ui5/webcomponents-icons"), "dist/v5"), SAPIconsConfig);
+generateIconsPage(path.join(findRoot("@ui5/webcomponents-icons-tnt"), "dist/v3"), SAPTNTIconsConfig);
+generateIconsPage(path.join(findRoot("@ui5/webcomponents-icons-business-suite"), "dist/v2"), SAPBSIconsConfig);
diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts
@@ -30,6 +30,10 @@ const getFullURL = () => {
 
 
 const config: Config = {
+  customFields: {
+    ui5Version: packageJson.version,
+    ui5DeploymentType: process.env.DEPLOYMENT_TYPE,
+  },
   title: 'UI5 Web Components',
   tagline: 'An open-source UI components library for building enterprise-ready applications!',
   favicon: 'img/favicon.ico',

diff --git a/packages/website/package.json b/packages/website/package.json
@@ -7,9 +7,9 @@
     "generate-api-reference": "rimraf ./docs/components/fiori && rimraf ./docs/components/main && node ./build-scripts/api-reference-generation/index.mjs",
     "generate-documentation": "rimraf ./docs/docs && node ./build-scripts/documentation-generation/index.mjs",
     "generate-icons": "rimraf ./icons && rimraf ./icons-tnt && rimraf ./icons-business-suite && node ./build-scripts/icons-generation/index.mjs",
-    "generate-all": "yarn generate-api-reference && yarn generate-documentation && yarn generate-local-cdn && yarn generate-icons",
+    "generate-all": "yarn generate-api-reference && yarn generate-documentation && yarn generate-icons",
     "docusaurus": "docusaurus",
-    "start": "yarn generate-all && docusaurus start",
+    "start": "yarn generate-all && yarn generate-local-cdn && docusaurus start",
     "build": "yarn generate-all && docusaurus build",
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",

diff --git a/packages/website/src/components/Editor/index.js b/packages/website/src/components/Editor/index.js
@@ -8,12 +8,12 @@ import styles from "./index.module.css";
 import { ThemeContext, ContentDensityContext, TextDirectionContext } from "@site/src/theme/Root";
 import { encodeToBase64, decodeFromBase64 } from "./share.js";
 import clsx from "clsx";
-import ShareIcon from "../../../local-cdn/local-cdn/icons/dist/v5/share-2.svg";
+import ShareIcon from "@ui5/webcomponents-icons/dist/v5/share-2.svg";
 import { Splitter } from 'react-splitter-light';
-import DownloadIcon from "../../../local-cdn/local-cdn/icons/dist/v5/download-from-cloud.svg";
-import EditIcon from "../../../local-cdn/local-cdn/icons/dist/v5/edit.svg";
-import ActionIcon from "../../../local-cdn/local-cdn/icons/dist/v5/action.svg";
-import HideIcon from "../../../local-cdn/local-cdn/icons/dist/v5/hide.svg";
+import DownloadIcon from "@ui5/webcomponents-icons/dist/v5/download-from-cloud.svg";
+import EditIcon from "@ui5/webcomponents-icons/dist/v5/edit.svg";
+import ActionIcon from "@ui5/webcomponents-icons/dist/v5/action.svg";
+import HideIcon from "@ui5/webcomponents-icons/dist/v5/hide.svg";
 import downloadSample from './download.js';
 import ExamplesMenu from '../ExamplesMenu/index.tsx';
 
@@ -61,22 +61,44 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare =
   const [copied, setCopied] = useState(false);
   const [ activeExample, setActiveExample ] = useState("");
 
+  function calcImports() {
+    if (process.env.NODE_ENV === 'development' || siteConfig.customFields.ui5DeploymentType === "nightly") {
+      return {
+        "@ui5/webcomponents/": `${getHostBaseUrl()}local-cdn/main/`,
+        "@ui5/webcomponents-ai/": `${getHostBaseUrl()}local-cdn/ai/`,
+        "@ui5/webcomponents-fiori/": `${getHostBaseUrl()}local-cdn/fiori/`,
+        "@ui5/webcomponents-compat/": `${getHostBaseUrl()}local-cdn/compat/`,
+        "@ui5/webcomponents-base/": `${getHostBaseUrl()}local-cdn/base/`,
+        "@ui5/webcomponents-icons/": `${getHostBaseUrl()}local-cdn/icons/`,
+        "@ui5/webcomponents-localization/": `${getHostBaseUrl()}local-cdn/localization/`,
+        "@ui5/webcomponents-theming/": `${getHostBaseUrl()}local-cdn/theming/`,
+        "lit-html": `${getHostBaseUrl()}local-cdn/lit-html/lit-html.js`,
+        "lit-html/": `${getHostBaseUrl()}local-cdn/lit-html/`,
+        "@zxing/library/": `${getHostBaseUrl()}local-cdn/zxing/`,
+      };
+    } else {
+      return {
+        "@ui5/webcomponents/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents@${siteConfig.customFields.ui5Version}/`,
+        "@ui5/webcomponents-ai/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-ai@${siteConfig.customFields.ui5Version}/`,
+        "@ui5/webcomponents-fiori/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-fiori@${siteConfig.customFields.ui5Version}/`,
+        "@ui5/webcomponents-compat/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-compat@${siteConfig.customFields.ui5Version}/`,
+        "@ui5/webcomponents-base/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-base@${siteConfig.customFields.ui5Version}/`,
+        "@ui5/webcomponents-icons/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-icons@${siteConfig.customFields.ui5Version}/`,
+        "@ui5/webcomponents-localization/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-localization@${siteConfig.customFields.ui5Version}/`,
+        "@ui5/webcomponents-theming/": `https://cdn.jsdelivr.net/npm/@ui5/webcomponents-theming@${siteConfig.customFields.ui5Version}/`,
+        "lit-html": `https://cdn.jsdelivr.net/npm/lit-html@2`,
+        "lit-html/": `https://cdn.jsdelivr.net/npm/lit-html@2/`,
+        "@zxing/library/": `https://cdn.jsdelivr.net/npm/@zxing/library@0/`,
+      };
+    }
+  }
+
   function addImportMap(html) {
     return html.replace("<head>", `
 <head>
     <script type="importmap">
       {
-        "imports": {
-          "@ui5/webcomponents/": "${getHostBaseUrl()}local-cdn/main/",
-          "@ui5/webcomponents-base/": "${getHostBaseUrl()}local-cdn/base/",
-          "@ui5/webcomponents-icons/": "${getHostBaseUrl()}local-cdn/icons/",
-          "@ui5/webcomponents-localization/": "${getHostBaseUrl()}local-cdn/localization/",
-          "@ui5/webcomponents-theming/": "${getHostBaseUrl()}local-cdn/theming/",
-          "lit-html": "${getHostBaseUrl()}local-cdn/lit-html/lit-html.js",
-          "lit-html/": "${getHostBaseUrl()}local-cdn/lit-html/",
-          "@zxing/library/umd/": "${getHostBaseUrl()}local-cdn/zxing/umd/",
-          "@zxing/library/esm5/": "${getHostBaseUrl()}local-cdn/zxing/esm5/"
-        }
+        "imports": ${JSON.stringify(calcImports())}
       }
     </script>
     <style>
@@ -99,7 +121,7 @@ export default function Editor({html, js, css, mainFile = "main.js", canShare =
     if (activeExample === "hello-world") {
       return { html: hellowWorldHTML, js: hellowWorldTS }
     }
-    
+
     if (activeExample === "counter") {
       return { html: counterHTML, js: counterTS }
     }
@@ -228,14 +250,7 @@ ${fixAssetPaths(_js)}`,
         },
       },
       importMap: {
-        "imports": {
-          "@ui5/webcomponents/": `${getHostBaseUrl()}local-cdn/main/`,
-          "@ui5/webcomponents-fiori/": `${getHostBaseUrl()}local-cdn/fiori/`,
-          "@ui5/webcomponents-base/": `${getHostBaseUrl()}local-cdn/base/`,
-          "@ui5/webcomponents-icons/": `${getHostBaseUrl()}local-cdn/icons/`,
-          "@ui5/webcomponents-localization/": `${getHostBaseUrl()}local-cdn/localization/`,
-          "@ui5/webcomponents-theming/": `${getHostBaseUrl()}local-cdn/theming/`
-        }
+        "imports": calcImports(),
       }
     }
     if (newConfig.files["main.css"].hidden) {
@@ -424,7 +439,7 @@ ${fixAssetPaths(_js)}`,
                 <ShareIcon className={`${styles.btn__icon}`}/>
                   Share
                 </button>
-               
+
               </div>
             </div>
           </>