Docs: Get the ETemplate2 webComponent widets working on doc site

Sort of.  This breaks shoelace images due to them not being imported / copied, and not using the CDN

api/js/etemplate/Et2Widget/Et2Widget.ts

@@ -1706,7 +1706,7 @@ function transformAttributes(widget, mgr : et2_arrayMgr, attributes)
  */
 export function cssImage(image_name : string, app_name? : string)
 {
-	let url = egw?.image(image_name, app_name);
+	let url = egw?.image && egw?.image(image_name, app_name);
 	if(url)
 	{
 		return css`url(${unsafeCSS(url)})`;

api/js/etemplate/Styles/shoelace.ts

@@ -15,7 +15,7 @@ import {egw} from "../../jsapi/egw_global";
 registerIconLibrary('default', {
 	resolver: name =>
 	{
-		return typeof egw !== "undefined" ? `${egw.webserverUrl}/node_modules/@shoelace-style/shoelace/dist/assets/icons/${name}.svg` : ''
+		return typeof egw !== "undefined" ? `${egw.webserverUrl || ""}/node_modules/@shoelace-style/shoelace/dist/assets/icons/${name}.svg` : ''
 	},
 });
 
@@ -24,12 +24,15 @@ registerIconLibrary('default', {
  * @example <sl-icon library="egw" name="infolog/navbar"/>
  * @example <sl-icon library="egw" name="5_day_view"/>
  */
-registerIconLibrary('egw', {
+if(typeof egw !== "undefined" && typeof egw.image == "function")
-	resolver: name =>
+{
-	{
+	registerIconLibrary('egw', {
-		return typeof egw !== "undefined" ? (egw.image(name) || '') : ''
+		resolver: name =>
-	},
+		{
-});
+			return (egw.image(name) || '');
+		},
+	});
+}
 
 /**
  * Customise shoelace styles to match our stuff
@@ -39,10 +42,10 @@ export default [sl_css, css`
   :root,
   :host,
   .sl-theme-light {
-	--sl-font-size-medium: ${typeof egw != "undefined" && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
+	--sl-font-size-medium: ${typeof egw != "undefined" && egw.preference && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
 	--sl-input-height-small: 24px;
 	--sl-input-height-medium: 32px;
-	--sl-button-font-size-medium: ${typeof egw != "undefined" && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
+	--sl-button-font-size-medium: ${typeof egw != "undefined" && egw.preference && egw.preference('textsize', 'common') != '12' ? parseInt(egw.preference('textsize', 'common')) : 12}px;
 	--sl-input-help-text-font-size-medium: var(--sl-font-size-medium);
 	--sl-spacing-small: 0.1rem;
 	--sl-spacing-medium: 0.5rem;

api/js/jquery/jquery.noconflict.js

@@ -7,5 +7,6 @@
  * @subpackage ajax
  * @author Ralf Becker <rb@egroupware.org>
  */
+import "../../../vendor/bower-asset/jquery/dist/jquery.min.js";
 
 jQuery.noConflict();

doc/etemplate2/_includes/default.njk

@@ -35,10 +35,11 @@
 
     {# Shoelace #}
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/themes/light.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/themes/dark.css" />
     <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.shoelaceVersion }}/cdn/shoelace-autoloader.js"></script>
 
     {# EGroupware #}
-    <!--<script src="{{ assetUrl('scripts/etemplate/etemplate2.js') }}" type="module"></script>-->
+    <script src="{{ assetUrl('scripts/sub/dir/etemplate/etemplate2.js') }}" type="module" id="egw_script_id"></script>
 
     {# Set the initial theme and menu states here to prevent flashing #}
     <script>

doc/etemplate2/eleventy.config.cjs

@@ -57,10 +57,24 @@ module.exports = function (eleventyConfig)
 	//
 	// Copy EGw stuff in
 	//
+	// General assets
 	eleventyConfig.addPassthroughCopy({"../../api/templates/default/images/logo.svg": "assets/images/logo.svg"});
 	eleventyConfig.addPassthroughCopy({"../../pixelegg/css/monochrome.css": "assets/styles/monochrome.css"});
-	//eleventyConfig.addPassthroughCopy({"../../api/js": "assets/scripts/chunks"});
+
-	eleventyConfig.addPassthroughCopy({"../../api/js/etemplate/etemplate2.js": "assets/scripts/etemplate/etemplate2.js"});
+	// vendor requirements
+	eleventyConfig.addPassthroughCopy({
+		"../../vendor/bower-asset/jquery/dist/jquery.min.js": "assets/scripts/vendor/bower-asset/jquery/dist/jquery.min.js",
+		"../../vendor/bower-asset/cropper/dist/cropper.min.js": "assets/scripts/vendor/bower-asset/cropper/dist/cropper.min.js",
+		"../../vendor/bower-asset/diff2html/dist/diff2html.min.js": "assets/scripts/vendor/bower-asset/diff2html/dist/diff2html.min.js",
+		"../../vendor/tinymce/tinymce/tinymce.min.js": "assets/scripts/vendor/tinymce/tinymce/tinymce.min.js",
+	})
+
+	// Etemplate2
+	eleventyConfig.addPassthroughCopy({"../../chunks": "assets/scripts/chunks"});
+	eleventyConfig.addPassthroughCopy({"../../api/js/etemplate/etemplate2.js": "assets/scripts/sub/dir/etemplate/etemplate2.js"});
+
+	//eleventyConfig.addPassthroughCopy({"../../vendor/**/*min.js": "assets/scripts/vendor/"});
+	//eleventyConfig.addPassthroughCopy("../dist/etemplate2.js", "assets/scripts/etemplate2.js");
 
 	// Shoelace is done via CDN in default.njk
 

doc/scripts/build.mjs

@@ -94,7 +94,7 @@ async function buildTheDocs(watch = false)
 //
 async function buildTheSource()
 {
-	const alwaysExternal = ['@lit'];
+	const alwaysExternal = [/*'@lit',*/ 'jquery'];
 
 	const cdnConfig = {
 		format: 'esm',
@@ -104,21 +104,21 @@ async function buildTheSource()
 			// NOTE: Entry points must be mapped in package.json > exports, otherwise users won't be able to import them!
 			//
 			// The whole shebang
-			'./src/shoelace.ts',
+			'./api/js/etemplate/etemplate2.ts',
 			// The auto-loader
-			'./src/shoelace-autoloader.ts',
+			//'./src/shoelace-autoloader.ts',
 			// Components
-			...(await globby('./src/components/**/!(*.(style|test)).ts')),
+			//...(await globby('./src/components/**/!(*.(style|test)).ts')),
 			// Translations
-			...(await globby('./src/translations/**/*.ts')),
+			//...(await globby('./src/translations/**/*.ts')),
 			// Public utilities
-			...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
+			//...(await globby('./src/utilities/**/!(*.(style|test)).ts')),
 			// Theme stylesheets
-			...(await globby('./src/themes/**/!(*.test).ts')),
+			//...(await globby('./src/themes/**/!(*.test).ts')),
 			// React wrappers
-			...(await globby('./src/react/**/*.ts'))
+			//...(await globby('./src/react/**/*.ts'))
 		],
-		outdir: cdndir,
+		outdir: sitedir + '/assets/scripts',
 		chunkNames: 'chunks/[name].[hash]',
 		define: {
 			// Floating UI requires this to be set