@node-projects/web-component-designer 0.0.288 → 0.0.290

package/dist/elements/helper/NpmPackageHacks.json

@@ -0,0 +1,11 @@
+{
+    "@shoelace-style/shoelace": {
+        "html": "<link rel=\"stylesheet\" media=\"(prefers-color-scheme:light)\" href=\"${baseUrl}dist/themes/light.css\">\n<link rel=\"stylesheet\" media=\"(prefers-color-scheme:dark)\" href=\"${baseUrl}dist/themes/dark.css\" onload=\"document.documentElement.classList.add('sl-theme-dark');\">"
+    },
+    "@microsoft/fast-components": {
+        "script": "let res = await import('@microsoft/fast-components');\nres.provideFASTDesignSystem().register(res.allComponents);"
+    },
+    "@material/web": {
+        "import": "@material/web/all.js"
+    }
+}

package/dist/elements/helper/NpmPackageLoader.d.ts

@@ -6,7 +6,9 @@ export declare class NpmPackageLoader {
     private _dependecies;
     constructor(packageSource?: string);
     static patchCustomElementsRegistryToHandleErrors(): void;
-    loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: PaletteTreeView, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<void>;
+    loadNpmPackage(pkg: string, serviceContainer?: ServiceContainer, paletteTree?: PaletteTreeView, loadAllImports?: boolean, reportState?: (state: string) => void): Promise<{
+        html: string;
+    }>;
     loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
     addToImportmap(baseUrl: string, packageJsonObj: {
         name?: string;

package/dist/elements/helper/NpmPackageLoader.js

@@ -2,6 +2,19 @@ import { PreDefinedElementsService } from "../services/elementsService/PreDefine
 import { WebcomponentManifestElementsService } from "../services/elementsService/WebcomponentManifestElementsService.js";
 import { WebcomponentManifestPropertiesService } from "../services/propertiesService/services/WebcomponentManifestPropertiesService.js";
 import { removeLeading, removeTrailing } from "./Helper.js";
+//TODO: remove this code when import asserts are supported
+let packageHacks;
+//@ts-ignore
+if (window.importShim) {
+    const packageHacksUrl = import.meta.resolve('./NpmPackageHacks.json');
+    //@ts-ignore
+    packageHacks = await importShim(packageHacksUrl, { assert: { type: 'json' } });
+}
+else
+    //@ts-ignore
+    packageHacks = await import("./NpmPackageHacks.json", { assert: { type: 'json' } });
+if (packageHacks.default)
+    packageHacks = packageHacks.default;
 export class NpmPackageLoader {
     static registryPatchedTohandleErrors;
     //packageSource = '//unpkg.com/';
@@ -121,24 +134,32 @@ export class NpmPackageLoader {
                 //todo: should be retriggered by service container, or changeing list in container
                 paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
             }
+            /* Package Hacks */
+            if (packageHacks[pkg]?.import) {
+                import(packageHacks[pkg]?.import);
+            }
+            if (packageHacks[pkg]?.script) {
+                const scriptUrl = URL.createObjectURL(new Blob([packageHacks[pkg]?.script], { type: 'application/javascript' }));
+                import(scriptUrl);
+            }
         }
         else {
             console.warn('npm package: ' + pkg + ' - no custom-elements.json found, only loading javascript module');
-            let customElementsRegistry = window.customElements;
+            let originalCustomElementsRegistry = window.customElements;
             const registry = {};
             const newElements = [];
             registry.define = function (name, constructor, options) {
                 newElements.push(name);
-                customElementsRegistry.define(name, constructor, options);
+                originalCustomElementsRegistry.define(name, constructor, options);
             };
             registry.get = function (name) {
-                return customElementsRegistry.get(name);
+                return originalCustomElementsRegistry.get(name);
             };
             registry.upgrade = function (node) {
-                return customElementsRegistry.upgrade(node);
+                return originalCustomElementsRegistry.upgrade(node);
             };
             registry.whenDefined = function (name) {
-                return customElementsRegistry.whenDefined(name);
+                return originalCustomElementsRegistry.whenDefined(name);
             };
             Object.defineProperty(window, "customElements", {
                 get() {
@@ -160,6 +181,14 @@ export class NpmPackageLoader {
             else {
                 console.warn('npm package: ' + pkg + ' - no entry point in package found.');
             }
+            /* Package Hacks */
+            if (packageHacks[pkg]?.import) {
+                await import(packageHacks[pkg]?.import);
+            }
+            if (packageHacks[pkg]?.script) {
+                const scriptUrl = URL.createObjectURL(new Blob([packageHacks[pkg]?.script], { type: 'application/javascript' }));
+                await import(scriptUrl);
+            }
             if (newElements.length > 0 && serviceContainer && paletteTree) {
                 const elementsCfg = {
                     elements: newElements
@@ -170,12 +199,17 @@ export class NpmPackageLoader {
             }
             Object.defineProperty(window, "customElements", {
                 get() {
-                    return customElementsRegistry;
+                    return originalCustomElementsRegistry;
                 }
             });
         }
         if (reportState)
             reportState(pkg + ": done");
+        let retVal = {};
+        if (packageHacks[pkg]?.html) {
+            retVal.html = (packageHacks[pkg]?.html).replaceAll("${baseUrl}", baseUrl);
+        }
+        return retVal;
     }
     async loadDependency(dependency, version, reportState) {
         if (this._dependecies.has(dependency))
@@ -295,10 +329,10 @@ export class NpmPackageLoader {
                 //Names to use: browser, import, default, node
                 let imp = getImportFlat(packageJsonObj.exports);
                 if (imp) {
-                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeTrailing(imp, '/'), '.');
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/');
                 }
                 else if (imp = getImportFlat(packageJsonObj.exports?.['.'])) {
-                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeTrailing(imp, '/'), '.');
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(imp, '.'), '/');
                 }
             }
             let mainImport = packageJsonObj.main;
@@ -308,7 +342,7 @@ export class NpmPackageLoader {
                 mainImport = packageJsonObj.unpkg;
             if (!importMap.imports[packageJsonObj.name]) {
                 if (mainImport)
-                    importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(mainImport, '/');
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeLeading(removeLeading(mainImport, '.'), '/');
                 else
                     console.warn('package: ' + baseUrl + 'no main import found');
             }

package/dist/elements/widgets/demoView/demoView.js

@@ -9,15 +9,39 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
     background: white;
     height: 100%;
     width: 100%;
+    position: relative;
   }
   #placeholder {
+    position: absolute;
+    left: 24px;
     height: 100%;
-    width: 100%;
+    width: calc(100% - 24px);
   }
   #loading {
     position: absolute;
     top: 60px;
     left: 20px;
+  }
+  #left {
+    position:absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    width: 24px;
+    border-right: solid white 1px;
+    box-sizing: border-box;
+    background: black;
+  }
+  span {
+    color: white;
+    rotate: 270deg;
+    display: block;
+    position: absolute;
+    top: 35px;
+    left: -38px;
+    font-weight: 600;
+    font-family: monospace;
+    font-size: 24px;
   }`;
     constructor() {
         super();
@@ -28,6 +52,12 @@ export class DemoView extends BaseCustomWebComponentLazyAppend {
         this._loading.id = 'loading';
         this._loading.textContent = '🛀 Hold on, loading...';
         this.shadowRoot.appendChild(this._loading);
+        const div = document.createElement("div");
+        div.id = "left";
+        const span = document.createElement("span");
+        span.innerText = "PREVIEW";
+        div.appendChild(span);
+        this.shadowRoot.appendChild(div);
     }
     dispose() {
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "description": "A UI designer for Polymer apps",
   "name": "@node-projects/web-component-designer",
-  "version": "0.0.288",
+  "version": "0.0.290",
   "type": "module",
   "main": "./dist/index.js",
   "author": "",