docs: use assets in samples (#12585)

Author: nnaydenow

package.json

@@ -13,7 +13,7 @@
     "generate": "yarn workspaces foreach --all --parallel run generate",
     "generateAPI": "yarn workspaces foreach --all --parallel run generateAPI",
     "generateProd": "yarn workspaces foreach --all --parallel run generateProd",
-    "ts": "tsc -b packages/compat/tsconfig.json packages/fiori/tsconfig.json packages/ai/tsconfig.json",
+    "ts": "tsc -b",
     "bundle": "yarn workspaces foreach --all --parallel run bundle",
     "clean": "yarn workspaces foreach --all --parallel run clean",
     "scopePrepare:main": "yarn workspace @ui5/webcomponents ui5nps scope.prepare",

packages/ai/src/Assets-fetch.ts

@@ -1,6 +1,6 @@
 // main package assets (transitively base, theming and icons)
 import "@ui5/webcomponents/dist/Assets-fetch.js";
 
-// own fiori package assets
+// own ai package assets
 import "./generated/json-imports/Themes-fetch.js";
 import "./generated/json-imports/i18n-fetch.js";

packages/ai/src/Assets-node.ts

@@ -13,6 +13,6 @@
 // main package assets (transitively base, theming and icons)
 import "@ui5/webcomponents/dist/Assets-node.js";
 
-// own fiori package assets
+// own ai package assets
 import "./generated/json-imports/Themes-node.js";
 import "./generated/json-imports/i18n-node.js";

packages/compat/src/Assets-fetch.ts

@@ -0,0 +1,6 @@
+// main package assets (transitively base, theming and icons)
+import "@ui5/webcomponents/dist/Assets-fetch.js";
+
+// own compat package assets
+import "./generated/json-imports/Themes-fetch.js";
+import "./generated/json-imports/i18n-fetch.js";

packages/compat/src/Assets-node.ts

@@ -0,0 +1,18 @@
+/**
+ * The `Assets-node` entry point is used to import all CLDR, theming, and i18n assets.
+ *
+ * It serves as an alternative to the `Assets` and `Assets-fetch` modules and supports the
+ * `with: { type: 'json' }` import attribute for loading JSON files.
+ *
+ * This import attribute is required in some environments, such as Node.js with server-side rendering (SSR).
+ *
+ * Example usage:
+ * await import("../assets/i18n/messagebundle_bg.json", { with: { type: 'json' } })
+ */
+
+// main package assets (transitively base, theming and icons)
+import "@ui5/webcomponents/dist/Assets-node.js";
+
+// own compat package assets
+import "./generated/json-imports/Themes-node.js";
+import "./generated/json-imports/i18n-node.js";

packages/compat/tsconfig.json

@@ -7,20 +7,35 @@
 	"compilerOptions": {
 		"outDir": "dist",
 		"experimentalDecorators": true,
-		"verbatimModuleSyntax": true,
+		"composite": true,
+		"rootDir": "src",
+		"tsBuildInfoFile": "dist/.tsbuildinfo",
 		"module": "NodeNext",
 		"moduleResolution": "NodeNext",
+		"verbatimModuleSyntax": true,
 		"paths": {
 			"@ui5/webcomponents-base/dist/*": [
 				"../base/src/*"
 			],
 			"@ui5/webcomponents/dist/*": [
 				"../main/src/*"
 			],
+			"@ui5/webcomponents-localization/dist/*": [
+				"../localization/src/*"
+			],
 			"@ui5/webcomponents-theming/dist/*": [
 				"../theming/src/*"
 			],
-		},
+			"@ui5/webcomponents-icons/dist/*": [
+				"../icons/src/*"
+			],
+			"@ui5/webcomponents-icons-business-suite/dist/*": [
+				"../icons-business-suite/src/*"
+			],
+			"@ui5/webcomponents-icons-tnt/dist/*": [
+				"../icons-tnt/src/*"
+			]
+		}
 	},
 	"references": [
 		{
@@ -29,8 +44,20 @@
 		{
 			"path": "../main"
 		},
+		{
+			"path": "../localization"
+		},
 		{
 			"path": "../theming"
 		},
+		{
+			"path": "../icons"
+		},
+		{
+			"path": "../icons-business-suite"
+		},
+		{
+			"path": "../icons-tnt"
+		}
 	]
 }

packages/main/src/DynamicDateRange.ts

@@ -132,6 +132,7 @@ interface IDynamicDateRangeOption {
 @customElement({
 	tag: "ui5-dynamic-date-range",
 	languageAware: true,
+	cldr: true,
 	template: DynamicDateRangeTemplate,
 	renderer: jsxRenderer,
 	styles: [

packages/website/build-scripts/local-cdn.mjs

@@ -28,7 +28,10 @@ await Promise.all([
 ]);
 
 const files = await readdir("local-cdn", {recursive: true, withFileTypes: true});
+// console.log(files.filter(f => f.path.includes("localization/dist/generated/assets/cldr")))
 const filesToDelete = files.filter(f => {
-    return f.isFile() && !f.name.endsWith(".js") && !f.name.endsWith(".svg") && !f.name.endsWith(".d.ts") && !f.name.endsWith("package.json")
+    return f.isFile() && !f.name.endsWith(".js")&& !f.name.endsWith(".json") && !f.name.endsWith(".svg") && !f.name.endsWith(".d.ts") && !f.name.endsWith("package.json")
 });
+
+console.log(filesToDelete.filter(f => f.path.includes("localization/dist/generated/assets/cldr")))
 filesToDelete.map(f => rm(path.join(f.path ?? f.parentPath, f.name)));

packages/website/docs/_samples/fiori/SideNavigation/OverlayMode/main.js

@@ -1,6 +1,3 @@
-/* playground-hide */
-import "./playground-support.js";
-/* playground-hide-end */
 import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js";
 import "@ui5/webcomponents-fiori/dist/SideNavigationSubItem.js";
 import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js";
@@ -21,7 +18,7 @@ import "@ui5/webcomponents-icons/dist/group.js";
 import "@ui5/webcomponents-icons/dist/locate-me.js";
 import "@ui5/webcomponents-icons/dist/calendar.js";
 import "@ui5/webcomponents-icons/dist/history.js";
-import "@ui5/webcomponents-icons/dist/customer.js"; 
+import "@ui5/webcomponents-icons/dist/customer.js";
 import "@ui5/webcomponents-icons/dist/menu2.js";
 import "@ui5/webcomponents-icons/dist/write-new.js";
 import "@ui5/webcomponents-icons/dist/widgets.js";

packages/website/docs/_samples/main/Calendar/Basic/main.js

@@ -1 +1,2 @@
+import "@ui5/webcomponents/dist/Assets-fetch.js";
 import "@ui5/webcomponents/dist/Calendar.js";