@node-projects/web-component-designer 0.0.268 → 0.0.269

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

@@ -6,12 +6,13 @@ 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<void>;
     loadDependency(dependency: string, version?: string, reportState?: (state: string) => void): Promise<void>;
     addToImportmap(baseUrl: string, packageJsonObj: {
         name?: string;
         module?: string;
         main?: string;
+        unpkg?: string;
         exports?: Record<string, string>;
     }): Promise<void>;
 }

package/dist/elements/helper/NpmPackageLoader.js

@@ -83,37 +83,44 @@ export class NpmPackageLoader {
                 console.warn("github custom elments json fallback", err);
             }
         }
-        fetch(webComponentDesignerUrl).then(async (x) => {
-            if (x.ok) {
-                const webComponentDesignerJson = await x.json();
-                if (webComponentDesignerJson.services) {
-                    for (let o in webComponentDesignerJson.services) {
-                        for (let s of webComponentDesignerJson.services[o]) {
-                            if (s.startsWith('./'))
-                                s = s.substring(2);
-                            //@ts-ignore
-                            const classDefinition = (await importShim(baseUrl + s)).default;
-                            //@ts-ignore
-                            serviceContainer.register(o, new classDefinition());
+        if (serviceContainer) {
+            fetch(webComponentDesignerUrl).then(async (x) => {
+                if (x.ok) {
+                    const webComponentDesignerJson = await x.json();
+                    if (webComponentDesignerJson.services) {
+                        for (let o in webComponentDesignerJson.services) {
+                            for (let s of webComponentDesignerJson.services[o]) {
+                                if (s.startsWith('./'))
+                                    s = s.substring(2);
+                                //@ts-ignore
+                                const classDefinition = (await importShim(baseUrl + s)).default;
+                                //@ts-ignore
+                                serviceContainer.register(o, new classDefinition());
+                            }
                         }
                     }
                 }
-            }
-        });
+            });
+        }
         if (customElementsJson.ok) {
             const customElementsJsonObj = await customElementsJson.json();
             let elements = new WebcomponentManifestElementsService(packageJsonObj.name, elementsRootPath, customElementsJsonObj);
-            serviceContainer.register('elementsService', elements);
-            let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj);
-            serviceContainer.register('propertyService', properties);
+            if (serviceContainer)
+                serviceContainer.register('elementsService', elements);
+            if (serviceContainer) {
+                let properties = new WebcomponentManifestPropertiesService(packageJsonObj.name, customElementsJsonObj);
+                serviceContainer.register('propertyService', properties);
+            }
             if (loadAllImports) {
                 for (let e of await elements.getElements()) {
                     //@ts-ignore
                     importShim(e.import);
                 }
             }
-            //todo: should be retriggered by service container, or changeing list in container
-            paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
+            if (serviceContainer && paletteTree) {
+                //todo: should be retriggered by service container, or changeing list in container
+                paletteTree.loadControls(serviceContainer, serviceContainer.elementsServices);
+            }
         }
         else {
             console.warn('npm package: ' + pkg + ' - no custom-elements.json found, only loading javascript module');
@@ -153,7 +160,7 @@ export class NpmPackageLoader {
             else {
                 console.warn('npm package: ' + pkg + ' - no entry point in package found.');
             }
-            if (newElements.length > 0) {
+            if (newElements.length > 0 && serviceContainer && paletteTree) {
                 const elementsCfg = {
                     elements: newElements
                 };
@@ -196,13 +203,73 @@ export class NpmPackageLoader {
     async addToImportmap(baseUrl, packageJsonObj) {
         //@ts-ignore
         const map = importShim.getImportMap().imports;
+        const importMap = { imports: {}, scopes: {} };
         if (!map.hasOwnProperty(packageJsonObj.name)) {
             //todo - use exports of package.json for importMap
-            const importMap = { imports: {}, scopes: {} };
+            if (packageJsonObj.exports) {
+                /* "exports": {
+                ".": {
+                    "browser": "./index.browser.js",
+                    "default": "./index.js"
+                },
+                "./async": {
+                    "browser": "./async/index.browser.js",
+                    "default": "./async/index.js"
+                },
+                "./non-secure": "./non-secure/index.js",
+                "./package.json": "./package.json"
+            }
+           
+            "exports": {
+                "node": {
+                  "import": "./feature-node.mjs",
+                  "require": "./feature-node.cjs"
+                },
+                "default": "./feature.mjs"
+              }
+            
+            
+               "exports": {
+                ".": "./index.js",
+                "./feature.js": {
+                  "node": "./feature-node.js",
+                  "default": "./feature.js"
+                }
+              }
+            
+            */
+                /*
+                "exports": {
+                    "import": "./index-module.js",
+                    "require": "./index-require.cjs"
+                },
+                */
+                let getImport = (obj) => {
+                    if (obj?.browser)
+                        return obj.browser;
+                    if (obj?.import)
+                        return obj.import;
+                    if (obj?.default)
+                        return obj.default;
+                    return obj?.node;
+                };
+                //Names to use: browser, import, default, node
+                let imp = getImport(packageJsonObj.exports);
+                if (imp) {
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(imp, '/');
+                }
+                else if (imp = getImport(packageJsonObj?.['.'])) {
+                    importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(imp, '/');
+                }
+            }
             let mainImport = packageJsonObj.main;
             if (packageJsonObj.module)
                 mainImport = packageJsonObj.module;
-            importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(mainImport, '/');
+            if (packageJsonObj.unpkg && !mainImport)
+                mainImport = packageJsonObj.unpkg;
+            if (!importMap.imports[packageJsonObj.name]) {
+                importMap.imports[packageJsonObj.name] = baseUrl + removeTrailing(mainImport, '/');
+            }
             importMap.imports[packageJsonObj.name + '/'] = baseUrl;
             //@ts-ignore
             importShim.addImportMap(importMap);

package/dist/elements/services/DefaultServiceBootstrap.js

@@ -45,7 +45,6 @@ import { CopyPasteService } from './copyPasteService/CopyPasteService.js';
 import { DefaultModelCommandService } from './modelCommandService/DefaultModelCommandService.js';
 import { ButtonSeperatorProvider } from '../widgets/designerView/extensions/buttons/ButtonSeperatorProvider.js';
 import { GridExtensionDesignViewConfigButtons } from '../widgets/designerView/extensions/buttons/GridExtensionDesignViewConfigButtons.js';
-import { DemoProviderService } from './demoProviderService/DemoProviderService.js';
 import { DrawRectTool } from '../widgets/designerView/tools/DrawRectTool.js';
 import { DrawEllipsisTool } from '../widgets/designerView/tools/DrawEllipsisTool.js';
 import { DrawLineTool } from '../widgets/designerView/tools/DrawLineTool.js';
@@ -84,6 +83,7 @@ import { TransformToolButtonProvider } from '../widgets/designerView/tools/toolB
 import { MultipleSelectionRectExtensionProvider } from '../widgets/designerView/extensions/MultipleSelectionRectExtensionProvider.js';
 import { DragDropService } from './dragDropService/DragDropService.js';
 import { EventsService } from './eventsService/EventsService.js';
+import { SimpleDemoProviderService } from './demoProviderService/SimpleDemoProviderService.js';
 export function createDefaultServiceContainer() {
     let serviceContainer = new ServiceContainer();
     let defaultPlacementService = new DefaultPlacementService();
@@ -107,7 +107,7 @@ export function createDefaultServiceContainer() {
     serviceContainer.register("dragDropService", new DragDropService());
     serviceContainer.register("copyPasteService", new CopyPasteService());
     serviceContainer.register("modelCommandService", new DefaultModelCommandService());
-    serviceContainer.register("demoProviderService", new DemoProviderService());
+    serviceContainer.register("demoProviderService", new SimpleDemoProviderService());
     serviceContainer.register("eventsService", new EventsService());
     serviceContainer.register("undoService", (designerCanvas) => new UndoService(designerCanvas));
     serviceContainer.register("selectionService", (designerCanvas) => new SelectionService(designerCanvas, false));

package/dist/elements/services/demoProviderService/DemoProviderService.js

@@ -16,8 +16,17 @@ export class DemoProviderService {
             const doc = iframe.contentWindow.document;
             doc.open();
             doc.write('<script type="module">');
-            for (let i of instanceServiceContainer.designContext.imports) {
-                doc.write("import '" + i + "';");
+            if (instanceServiceContainer.designContext.npmPackages?.length) {
+                doc.write("import { NpmPackageLoader } from '../../helper/NpmPackageLoader.js'");
+                doc.write("let loader =  new NpmPackageLoader();");
+                for (let p of instanceServiceContainer.designContext.npmPackages) {
+                    doc.write("loader.loadNpmPackage('" + p + "', null, null, true);");
+                }
+            }
+            if (instanceServiceContainer.designContext.imports?.length) {
+                for (let i of instanceServiceContainer.designContext.imports) {
+                    doc.write("import '" + i + "';");
+                }
             }
             doc.write("document.body.style.display='';");
             doc.write('</script>');

package/dist/elements/services/demoProviderService/IframeDemoProviderService copy.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class IframeDemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/IframeDemoProviderService copy.js

@@ -0,0 +1,38 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
+export class IframeDemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code, style) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            if (instanceServiceContainer.designContext.npmPackages?.length) {
+                doc.write("import { NpmPackageLoader } from '../../helper/NpmPackageLoader.js'");
+                doc.write("let loader =  new NpmPackageLoader();");
+                for (let p of instanceServiceContainer.designContext.npmPackages) {
+                    doc.write("loader.loadNpmPackage('" + p + "', null, null, true);");
+                }
+            }
+            if (instanceServiceContainer.designContext.imports?.length) {
+                for (let i of instanceServiceContainer.designContext.imports) {
+                    doc.write("import '" + i + "';");
+                }
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<style>' + (style ?? '') + '</style>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/IframeDemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { IDemoProviderService } from "./IDemoProviderService.js";
+export declare class IframeDemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string, style: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/IframeDemoProviderService.js

@@ -0,0 +1,38 @@
+import { DomHelper } from '@node-projects/base-custom-webcomponent/dist/DomHelper.js';
+export class IframeDemoProviderService {
+    provideDemo(container, serviceContainer, instanceServiceContainer, code, style) {
+        return new Promise(resolve => {
+            const iframe = document.createElement('iframe');
+            iframe.style.width = '100%';
+            iframe.style.height = '100%';
+            iframe.style.border = 'none';
+            iframe.style.display = 'none';
+            DomHelper.removeAllChildnodes(container);
+            container.appendChild(iframe);
+            iframe.onload = () => {
+                iframe.style.display = 'block';
+                resolve();
+            };
+            const doc = iframe.contentWindow.document;
+            doc.open();
+            doc.write('<script type="module">');
+            if (instanceServiceContainer.designContext.npmPackages?.length) {
+                doc.write("import { NpmPackageLoader } from '../../helper/NpmPackageLoader.js'");
+                doc.write("let loader =  new NpmPackageLoader();");
+                for (let p of instanceServiceContainer.designContext.npmPackages) {
+                    doc.write("loader.loadNpmPackage('" + p + "', null, null, true);");
+                }
+            }
+            if (instanceServiceContainer.designContext.imports?.length) {
+                for (let i of instanceServiceContainer.designContext.imports) {
+                    doc.write("import '" + i + "';");
+                }
+            }
+            doc.write("document.body.style.display='';");
+            doc.write('</script>');
+            doc.write('<style>' + (style ?? '') + '</style>');
+            doc.write('<body style="display:none; width: 100%; height: 100%; margin: 0; padding: 0; position: absolute;">' + code + '</body>');
+            doc.close();
+        });
+    }
+}

package/dist/elements/services/demoProviderService/SimpleDemoProviderService.d.ts

@@ -0,0 +1,6 @@
+import { IDemoProviderService } from "./IDemoProviderService.js";
+import { ServiceContainer } from "../ServiceContainer.js";
+import { InstanceServiceContainer } from "../InstanceServiceContainer.js";
+export declare class SimpleDemoProviderService implements IDemoProviderService {
+    provideDemo(container: HTMLElement, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer, code: string): Promise<void>;
+}

package/dist/elements/services/demoProviderService/SimpleDemoProviderService.js

@@ -0,0 +1,27 @@
+import { DomHelper, cssFromString } from "@node-projects/base-custom-webcomponent";
+export class SimpleDemoProviderService {
+    async provideDemo(container, serviceContainer, instanceServiceContainer, code) {
+        const contentDiv = document.createElement('div');
+        let shadowRoot = contentDiv.attachShadow({ mode: 'open' });
+        contentDiv.style.width = '100%';
+        contentDiv.style.height = '100%';
+        contentDiv.style.border = 'none';
+        contentDiv.style.display = 'none';
+        contentDiv.style.overflow = 'auto';
+        contentDiv.style.position = 'absolute';
+        container.style.position = 'relative';
+        DomHelper.removeAllChildnodes(container);
+        container.appendChild(contentDiv);
+        let styles = [];
+        if (instanceServiceContainer.designerCanvas.additionalStyles)
+            styles.push(...instanceServiceContainer.designerCanvas.additionalStyles);
+        if (instanceServiceContainer.stylesheetService) {
+            styles.push(...instanceServiceContainer.stylesheetService
+                .getStylesheets()
+                .map(x => cssFromString(x.content)));
+        }
+        shadowRoot.adoptedStyleSheets = styles;
+        shadowRoot.innerHTML = code;
+        contentDiv.style.display = '';
+    }
+}

package/dist/elements/services/designerAddons/IDesignerAddonJson copy.d.ts

@@ -0,0 +1,3 @@
+export interface IDesignerAddonJson {
+    services: Record<string, string>;
+}

package/dist/elements/services/designerAddons/IDesignerAddonJson copy.js

@@ -0,0 +1 @@
+export {};

package/dist/elements/services/designerAddons/IDesignerAddonJson.d.ts

@@ -1,6 +1,3 @@
 export interface IDesignerAddonJson {
     services: Record<string, string>;
-    components: Record<string, {
-        stylesheets: string[];
-    }>;
 }

package/dist/elements/services/designerAddons/IDesignerInfoJson.d.ts

@@ -0,0 +1,7 @@
+type ElementInfo = {
+    attributes: Record<string, string>;
+    styles: Record<string, string>;
+    content: Record<string, string>;
+};
+export type IDesignerInfoJson = Record<string, ElementInfo>;
+export {};

package/dist/elements/services/designerAddons/IDesignerInfoJson.js

@@ -0,0 +1,19 @@
+export {};
+/*
+sample:
+
+{
+    "my-tag" : {
+        "attributes" : {
+            "value": "abcd",
+            "max": "200",
+            ...
+        },
+        "styles" : {
+            "width": "100px",
+            ""
+        }
+    }
+}
+
+*/ 

package/dist/elements/services/elementsService/WebcomponentManifestElementsService.js

@@ -20,6 +20,12 @@ export class WebcomponentManifestElementsService {
                     this._elementList.push(elDef);
                 }
             }
+            for (let d of m.declarations) {
+                if (d.tagName) {
+                    let elDef = { tag: d.tagName, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(m.path, '/'), defaultWidth: "200px", defaultHeight: "200px", className: d.name };
+                    this._elementList.push(elDef);
+                }
+            }
             if (this._resolveStored) {
                 this._resolveStored.forEach(x => x(this._elementList));
                 this._resolveStored = null;

package/dist/elements/widgets/debugView/debug-view.js

@@ -125,7 +125,12 @@ export class DebugView extends BaseCustomWebComponentConstructorAppend {
         </div> 
     `;
     static style = css `
-    table {
+      :host {
+        overflow: auto;
+        height: 100%;
+        display: block;
+      }
+      table {
         font-family: Arial, Helvetica, sans-serif;
         border-collapse: collapse;
         width: 100%;

package/dist/elements/widgets/designerView/DesignContext.d.ts

@@ -1,6 +1,7 @@
 import { IDesignContext } from './IDesignContext.js';
 export declare class DesignContext implements IDesignContext {
     imports: string[];
+    npmPackages: string[];
     extensionOptions: {
         [key: string]: any;
     };

package/dist/elements/widgets/designerView/DesignContext.js

@@ -1,4 +1,5 @@
 export class DesignContext {
     imports = [];
+    npmPackages = [];
     extensionOptions = {};
 }

package/dist/elements/widgets/designerView/IDesignContext.d.ts

@@ -1,5 +1,6 @@
 export interface IDesignContext {
     imports: string[];
+    npmPackages: string[];
     extensionOptions: {
         [key: string]: any;
     };

package/dist/elements/widgets/designerView/IDesignerCanvas.d.ts

@@ -31,6 +31,7 @@ export interface IDesignerCanvas extends IPlacementView, IUiCommandHandler {
     readonly scaleFactor: number;
     canvasOffset: IPoint;
     canvas: HTMLElement;
+    additionalStyles: CSSStyleSheet[];
     eatEvents: Element;
     initialize(serviceContainer: ServiceContainer): any;
     getNormalizedEventCoordinates(event: MouseEvent): IPoint;

package/dist/index.d.ts

@@ -41,7 +41,8 @@ export type { IContentService } from "./elements/services/contentService/IConten
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
 export type { ICopyPasteService } from "./elements/services/copyPasteService/ICopyPasteService.js";
-export * from "./elements/services/demoProviderService/DemoProviderService.js";
+export * from "./elements/services/demoProviderService/IframeDemoProviderService.js";
+export * from "./elements/services/demoProviderService/SimpleDemoProviderService.js";
 export type { IDemoProviderService } from "./elements/services/demoProviderService/IDemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export type { IDesignItemDocumentPositionService } from "./elements/services/designItemDocumentPositionService/IDesignItemDocumentPositionService.js";

package/dist/index.js

@@ -27,7 +27,8 @@ export * from "./elements/services/elementAtPointService/ElementAtPointService.j
 export * from "./elements/services/contentService/ContentService.js";
 export * from "./elements/services/copyPasteService/CopyPasteService.js";
 export * from "./elements/services/copyPasteService/CopyPasteAsJsonService.js";
-export * from "./elements/services/demoProviderService/DemoProviderService.js";
+export * from "./elements/services/demoProviderService/IframeDemoProviderService.js";
+export * from "./elements/services/demoProviderService/SimpleDemoProviderService.js";
 export * from "./elements/services/designItemDocumentPositionService/DesignItemDocumentPositionService.js";
 export * from "./elements/services/designItemService/DesignItemService.js";
 export * from "./elements/services/dragDropService/ExternalDragDropService.js";

package/package.json

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