@node-projects/web-component-designer 0.1.0 → 0.1.2

package/dist/elements/services/htmlWriterService/LitTsElementWriterService.js

@@ -0,0 +1,52 @@
+//needs InternalBindinsgStorrageService -> keeps bindings
+export class LitTsElementWriterService {
+    options;
+    constructor(options) {
+        this.options = options ?? {};
+        this.options.beautifyOutput ??= true;
+        this.options.compressCssToShorthandProperties ??= true;
+        this.options.writeDesignerProperties ??= true;
+        this.options.parseJsonInAttributes ??= true;
+        this.options.jsonWriteMode ??= 'min';
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline) {
+        throw new Error('Method not implemented.');
+    }
+    static head = `import { html, css, LitElement, CSSResultArray } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+
+@customElement('$$elementName')
+class $$className extends LitElement {
+  static get styles(): CSSResultArray {
+    return [
+      css\`
+$$css
+      \`,
+    ];
+  }
+
+  //@property({ type: String }) btnStyle: QingButtonStyle = '';
+  //@property({ type: Boolean, reflect: true }) selected = false;
+
+  //private buttonElement: HTMLButtonElement | null = null;
+
+  /*firstUpdated() {
+    if (!this.shadowRoot) {
+      throw new Error('Unexpected undefined shadowRoot');
+    }
+    this.buttonElement = this.shadowRoot.querySelector('button');
+  }*/
+
+  render() {
+    return html\`$$html\`;
+  }
+}
+
+export default $$className;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    '$$elementName': $$className;
+  }
+}`;
+}

package/dist/elements/services/htmlWriterService/SimpleHtmlWriterService.d.ts

@@ -0,0 +1,27 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { IHtmlWriterService } from './IHtmlWriterService.js';
+import { IndentedTextWriter } from '../../helper/IndentedTextWriter.js';
+import { ElementDisplayType } from '../../helper/ElementHelper.js';
+import { IHtmlWriterOptions } from './IHtmlWriterOptions.js';
+export declare enum ElementContainerType {
+    block = 0,
+    complex = 1
+}
+export interface IWriteContext {
+    options: IHtmlWriterOptions;
+    indentedTextWriter: IndentedTextWriter;
+    lastElementDisplayType: ElementDisplayType | null;
+    containerDisplayType: ElementContainerType;
+}
+export declare class SimpleHtmlWriterService implements IHtmlWriterService {
+    options: IHtmlWriterOptions;
+    constructor(options?: IHtmlWriterOptions);
+    protected writeAttributes(writeContext: IWriteContext, designItem: IDesignItem): void;
+    protected writeStyles(writeContext: IWriteContext, designItem: IDesignItem): void;
+    private _writeTextNode;
+    private _writeCommentNode;
+    private _writeElementNode;
+    private _writeDesignItemList;
+    private _writeInternal;
+    write(indentedTextWriter: IndentedTextWriter, designItems: IDesignItem[], rootContainerKeepInline: boolean): void;
+}

package/dist/elements/services/htmlWriterService/SimpleHtmlWriterService.js

@@ -0,0 +1,98 @@
+import { DomConverter } from '../../widgets/designerView/DomConverter.js';
+import { CssCombiner } from '../../helper/CssCombiner.js';
+import { NodeType } from '../../item/NodeType.js';
+import { PropertiesHelper } from '../propertiesService/services/PropertiesHelper.js';
+import { ElementDisplayType, getElementDisplaytype } from '../../helper/ElementHelper.js';
+export var ElementContainerType;
+(function (ElementContainerType) {
+    ElementContainerType[ElementContainerType["block"] = 0] = "block";
+    ElementContainerType[ElementContainerType["complex"] = 1] = "complex";
+})(ElementContainerType || (ElementContainerType = {}));
+export class SimpleHtmlWriterService {
+    options;
+    constructor(options) {
+        this.options = options ?? {};
+        this.options.beautifyOutput ??= true;
+        this.options.compressCssToShorthandProperties ??= true;
+        this.options.writeDesignerProperties ??= true;
+        this.options.parseJsonInAttributes ??= true;
+        this.options.jsonWriteMode ??= 'min';
+    }
+    writeAttributes(writeContext, designItem) {
+        if (designItem.hasAttributes) {
+            for (const a of designItem.attributes()) {
+                writeContext.indentedTextWriter.write(' ');
+                if (typeof a[1] === 'string') {
+                    if (a[1] === "")
+                        writeContext.indentedTextWriter.write(a[0]);
+                    else
+                        writeContext.indentedTextWriter.write(a[0] + '="' + DomConverter.normalizeAttributeValue(a[1]) + '"');
+                }
+                else if (!a[1])
+                    writeContext.indentedTextWriter.write(a[0]);
+                else {
+                }
+            }
+        }
+    }
+    writeStyles(writeContext, designItem) {
+        if (designItem.hasStyles) {
+            writeContext.indentedTextWriter.write(' style="');
+            let styles = designItem.styles();
+            if (writeContext.options.compressCssToShorthandProperties)
+                styles = CssCombiner.combine(new Map(styles));
+            for (const s of styles) {
+                if (s[0]) {
+                    writeContext.indentedTextWriter.write(PropertiesHelper.camelToDashCase(s[0]) + ':' + DomConverter.normalizeAttributeValue(s[1]) + ';');
+                }
+            }
+            writeContext.indentedTextWriter.write('"');
+        }
+    }
+    _writeTextNode(writeContext, designItem) {
+        writeContext.lastElementDisplayType = ElementDisplayType.inline;
+        let content = DomConverter.normalizeContentValue(designItem.content);
+        writeContext.indentedTextWriter.write(content);
+    }
+    _writeCommentNode(writeContext, designItem) {
+        writeContext.indentedTextWriter.write('<!--' + designItem.content + '-->');
+    }
+    _writeElementNode(writeContext, designItem) {
+        const currentElementDisplayType = getElementDisplaytype(designItem.element);
+        writeContext.lastElementDisplayType = currentElementDisplayType;
+        writeContext.indentedTextWriter.write('<' + designItem.name);
+        this.writeAttributes(writeContext, designItem);
+        this.writeStyles(writeContext, designItem);
+        writeContext.indentedTextWriter.write('>');
+        if (designItem.hasChildren) {
+            const children = designItem.children();
+            this._writeDesignItemList(currentElementDisplayType, writeContext, children);
+        }
+        else if (designItem.hasContent) {
+            writeContext.indentedTextWriter.write(DomConverter.normalizeContentValue(designItem.content));
+        }
+        if (!DomConverter.IsSelfClosingElement(designItem.name)) {
+            writeContext.indentedTextWriter.write('</' + designItem.name + '>');
+            if (currentElementDisplayType !== ElementDisplayType.none) {
+                writeContext.lastElementDisplayType = currentElementDisplayType;
+            }
+        }
+    }
+    _writeDesignItemList(currentElementDisplayType, writeContext, children) {
+        for (const c of children) {
+            this._writeInternal(writeContext, c);
+        }
+    }
+    _writeInternal(writeContext, designItem) {
+        if (designItem.nodeType === NodeType.TextNode)
+            this._writeTextNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Comment)
+            this._writeCommentNode(writeContext, designItem);
+        else if (designItem.nodeType === NodeType.Element)
+            this._writeElementNode(writeContext, designItem);
+    }
+    write(indentedTextWriter, designItems, rootContainerKeepInline) {
+        const context = { indentedTextWriter, options: this.options, lastElementDisplayType: null, containerDisplayType: ElementContainerType.block };
+        this._writeDesignItemList(ElementDisplayType.inline, context, designItems);
+    }
+}

package/dist/elements/services/initializationService/IIntializationService.d.ts

@@ -0,0 +1,4 @@
+import { IDesignItem } from '../../item/IDesignItem.js';
+export interface IIntializationService {
+    init(designItem: IDesignItem): void;
+}

package/dist/elements/services/initializationService/IIntializationService.js

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

package/dist/elements/services/instanceService/DefaultInstanceService.d.ts

@@ -0,0 +1,8 @@
+import { IInstanceService } from './IInstanceService.js';
+import { IElementDefinition } from '../elementsService/IElementDefinition.js';
+import type { ServiceContainer } from '../ServiceContainer.js';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+export declare class DefaultInstanceService implements IInstanceService {
+    getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
+}

package/dist/elements/services/instanceService/DefaultInstanceService.js

@@ -0,0 +1,71 @@
+import { DesignItem } from '../../item/DesignItem.js';
+import { encodeXMLChars } from '../../helper/XmlHelper.js';
+import { newElementFromString } from '../../helper/ElementHelper.js';
+export class DefaultInstanceService {
+    async getElement(definition, serviceContainer, instanceServiceContainer) {
+        if (definition.import) {
+            let importUri = definition.import;
+            if (importUri[0] === '.')
+                importUri = (window.location.origin + window.location.pathname).split('/').slice(0, -1).join('/') + '/' + importUri;
+            //@ts-ignore
+            if (window.importShim) {
+                //@ts-ignore
+                importShim(importUri).then((x) => {
+                    let ctor = customElements.get(definition.tag);
+                    if (!ctor && definition.className && x[definition.className])
+                        customElements.define(definition.tag, x[definition.className]);
+                    //TODO: refresh all extensions
+                });
+            }
+            else {
+                import(importUri).then((x) => {
+                    let ctor = customElements.get(definition.tag);
+                    if (!ctor && definition.className && x[definition.className])
+                        customElements.define(definition.tag, x[definition.className]);
+                    //TODO: refresh all extensions
+                });
+            }
+            //removed await here, feels better to not wait for the elemnt is loaded, maybe this needs to be configurable
+            if (instanceServiceContainer.designContext.imports.indexOf(importUri) <= 0)
+                instanceServiceContainer.designContext.imports.push(importUri);
+        }
+        let attr = '';
+        if (definition.defaultAttributes) {
+            for (let a in definition.defaultAttributes) {
+                let value = definition.defaultAttributes[a];
+                try {
+                    if (typeof value === 'object')
+                        attr += ' ' + a + '="' + encodeXMLChars(JSON.stringify(definition.defaultAttributes[a])) + '"';
+                    else
+                        attr += ' ' + a + '="' + encodeXMLChars(definition.defaultAttributes[a]) + '"';
+                }
+                catch (e) {
+                    console.warn(e);
+                }
+            }
+        }
+        const elementString = '<' + definition.tag + attr + '></' + definition.tag + '>';
+        const element = newElementFromString(elementString);
+        if (!definition.doNotSetInNodeProjectsDesignerViewOnInstance)
+            element._inNodeProjectsDesignerView = true;
+        if (definition.defaultWidth)
+            element.style.width = definition.defaultWidth;
+        if (definition.defaultHeight)
+            element.style.height = definition.defaultHeight;
+        element.style.position = 'absolute';
+        if (definition.defaultStyles) {
+            for (let s in definition.defaultStyles)
+                element.style[s] = definition.defaultStyles[s];
+        }
+        if (definition.defaultContent) {
+            if (typeof definition.defaultContent === "string") {
+                element.innerHTML = definition.defaultContent;
+            }
+            else {
+                element.appendChild(definition.defaultContent);
+            }
+        }
+        let designItem = DesignItem.createDesignItemFromInstance(element, serviceContainer, instanceServiceContainer);
+        return designItem;
+    }
+}

package/dist/elements/services/instanceService/IDesignerInstance.d.ts

@@ -0,0 +1,3 @@
+export interface IDesignerInstance {
+    _inNodeProjectsDesignerView: boolean;
+}

package/dist/elements/services/instanceService/IDesignerInstance.js

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

package/dist/elements/services/instanceService/IInstanceService.d.ts

@@ -0,0 +1,8 @@
+import { IService } from '../IService.js';
+import { IElementDefinition } from '../elementsService/IElementDefinition.js';
+import type { ServiceContainer } from '../ServiceContainer.js';
+import type { InstanceServiceContainer } from '../InstanceServiceContainer.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+export interface IInstanceService extends IService {
+    getElement(definition: IElementDefinition, serviceContainer: ServiceContainer, instanceServiceContainer: InstanceServiceContainer): Promise<IDesignItem>;
+}

package/dist/elements/services/instanceService/IInstanceService.js

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

package/dist/elements/services/manifestParsers/IOldCustomElementsManifest.d.ts

@@ -0,0 +1,24 @@
+export interface IOldCustomElementsManifest {
+    version: string;
+    tags: IOldCustomElementsManifestTag[];
+}
+export interface IOldCustomElementsManifestTag {
+    name: string;
+    path: string;
+    description?: string;
+    attributes?: IOldCustomElementsManifestAttribute[];
+    properties?: IOldCustomElementsManifestProperty[];
+}
+export interface IOldCustomElementsManifestAttribute {
+    name: string;
+    description?: string;
+    type: string;
+    default?: string;
+}
+export interface IOldCustomElementsManifestProperty {
+    name: string;
+    attribute?: string;
+    description?: string;
+    type: string;
+    default?: string;
+}

package/dist/elements/services/manifestParsers/IOldCustomElementsManifest.js

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

package/dist/elements/services/manifestParsers/OldCustomElementsManifestLoader.d.ts

@@ -0,0 +1,8 @@
+import { ServiceContainer } from '../ServiceContainer.js';
+export declare class OldCustomElementsManifestLoader {
+    static loadManifest(serviceContainer: ServiceContainer, nodeModule: string, options?: {
+        name?: string;
+        dontLoadWidgets?: boolean;
+        dontLoadProperties?: boolean;
+    }): Promise<void>;
+}

package/dist/elements/services/manifestParsers/OldCustomElementsManifestLoader.js

@@ -0,0 +1,45 @@
+import { LazyLoader } from '@node-projects/base-custom-webcomponent';
+import { PreDefinedElementsService } from '../elementsService/PreDefinedElementsService.js';
+import { ListPropertiesService } from '../propertiesService/services/ListPropertiesService.js';
+export class OldCustomElementsManifestLoader {
+    static async loadManifest(serviceContainer, nodeModule, options) {
+        const nodePath = './node_modules/';
+        const packageJson = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/package.json'));
+        let jsModule = nodePath + nodeModule + '/' + packageJson.main;
+        if (packageJson.module)
+            jsModule = nodePath + nodeModule + '/' + packageJson.module;
+        const manifest = JSON.parse(await LazyLoader.LoadText(nodePath + nodeModule + '/' + packageJson.customElementsManifest));
+        let name = nodeModule;
+        if (options && options.name)
+            name = options.name;
+        if (!options || !options.dontLoadWidgets) {
+            const elementDefinitions = [];
+            for (const tag of manifest.tags) {
+                const elementDefinition = { tag: tag.name, import: jsModule, description: tag.description };
+                elementDefinitions.push(elementDefinition);
+            }
+            const service = new PreDefinedElementsService(name, { elements: elementDefinitions });
+            serviceContainer.register('elementsService', service);
+        }
+        if (!options || !options.dontLoadProperties) {
+            const propertyDefinitions = {};
+            for (const tag of manifest.tags) {
+                const attributes = [];
+                for (const attr of tag.attributes) {
+                    let propertyDefinition = { name: attr.name, default: attr.default, description: attr.description };
+                    if (attr.type && attr.type.startsWith('"')) {
+                        propertyDefinition.type = 'list';
+                        propertyDefinition.values = attr.type.split('|');
+                    }
+                    else {
+                        propertyDefinition.type = attr.type;
+                    }
+                    attributes.push(propertyDefinition);
+                }
+                propertyDefinitions[tag.name] = attributes;
+            }
+            const service = new ListPropertiesService(propertyDefinitions);
+            serviceContainer.register('propertyService', service);
+        }
+    }
+}

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.d.ts

@@ -0,0 +1,26 @@
+import { BindingTarget } from '../../item/BindingTarget.js';
+import { IElementDefinition } from '../elementsService/IElementDefinition.js';
+import { IElementsService } from '../elementsService/IElementsService.js';
+import { IPropertiesService, RefreshMode } from '../propertiesService/IPropertiesService.js';
+import { IProperty } from '../propertiesService/IProperty.js';
+import { IDesignItem } from '../../item/IDesignItem.js';
+import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js';
+export declare class WebcomponentManifestParserService extends AbstractPropertiesService implements IElementsService, IPropertiesService {
+    getRefreshMode(designItem: IDesignItem): RefreshMode;
+    private _name;
+    get name(): string;
+    private _packageData;
+    private _elementList;
+    private _propertiesList;
+    private _resolveStored;
+    private _rejectStored;
+    private _importPrefix;
+    constructor(name: string, fileOrObject: string | object, importPrefix?: string);
+    private _parseManifest;
+    private manifestClassPropertyTypeToEditorPropertyType;
+    getElements(): Promise<IElementDefinition[]>;
+    isHandledElement(designItem: IDesignItem): boolean;
+    getProperties(designItem: IDesignItem): IProperty[];
+    getProperty(designItem: IDesignItem, name: string): IProperty;
+    getPropertyTarget(designItem: IDesignItem, property: IProperty): BindingTarget;
+}

package/dist/elements/services/manifestParsers/WebcomponentManifestParserService.js

@@ -0,0 +1,114 @@
+import { BindingTarget } from '../../item/BindingTarget.js';
+import { RefreshMode } from '../propertiesService/IPropertiesService.js';
+import { PropertyType } from '../propertiesService/PropertyType.js';
+import { AbstractPropertiesService } from '../propertiesService/services/AbstractPropertiesService.js';
+import { removeLeading, removeTrailing } from '../../helper/Helper.js';
+export class WebcomponentManifestParserService extends AbstractPropertiesService {
+    getRefreshMode(designItem) {
+        return RefreshMode.none;
+    }
+    _name;
+    get name() { return this._name; }
+    _packageData;
+    _elementList;
+    _propertiesList;
+    _resolveStored;
+    _rejectStored;
+    _importPrefix = '';
+    constructor(name, fileOrObject, importPrefix = '') {
+        super();
+        this._name = name;
+        this._importPrefix = importPrefix;
+        if (typeof fileOrObject === 'string') {
+            this._importPrefix = this._importPrefix ?? fileOrObject.split('/').slice(0, -1).join('/');
+            let importOfFile;
+            //@ts-ignore
+            if (window.importShim)
+                //@ts-ignore
+                importOfFile = importShim(fileOrObject, { assert: { type: 'json' } });
+            else
+                //@ts-ignore
+                importOfFile = import(fileOrObject, { assert: { type: 'json' } });
+            importOfFile.then(module => {
+                this._packageData = module.default;
+                this._parseManifest();
+            }).catch(err => {
+                if (this._rejectStored) {
+                    this._rejectStored.forEach(x => x(err));
+                    this._resolveStored = null;
+                    this._rejectStored = null;
+                }
+            });
+        }
+        else {
+            this._packageData = fileOrObject;
+            this._parseManifest();
+        }
+    }
+    _parseManifest() {
+        this._elementList = [];
+        this._propertiesList = {};
+        for (let m of this._packageData.modules) {
+            for (let e of m.exports) {
+                if (e.kind == 'custom-element-definition') {
+                    this._elementList.push({ tag: e.name, import: removeTrailing(this._importPrefix, '/') + '/' + removeLeading(e.declaration.module, '/') });
+                    let properties = [];
+                    let declaration = m.declarations.find(x => x.name == e.declaration.name);
+                    for (let d of declaration.members) {
+                        if (d.kind == 'field') {
+                            let pType = PropertyType.property;
+                            if (declaration.attributes)
+                                pType = declaration.attributes.find(x => x.fieldName == d.name) != null ? PropertyType.propertyAndAttribute : PropertyType.property;
+                            const p = this.manifestClassPropertyTypeToEditorPropertyType(d.type?.text);
+                            properties.push({ name: d.name, service: this, propertyType: pType, type: p[0], values: p[1], description: d.description });
+                        }
+                    }
+                    this._propertiesList[e.name] = properties;
+                }
+            }
+            if (this._resolveStored) {
+                this._resolveStored.forEach(x => x(this._elementList));
+                this._resolveStored = null;
+                this._rejectStored = null;
+            }
+        }
+    }
+    manifestClassPropertyTypeToEditorPropertyType(type) {
+        if (type) {
+            if (type.toLowerCase() === 'boolean')
+                return ['boolean'];
+            if (type.toLowerCase() === 'number')
+                return ['number'];
+            if (type.toLowerCase() === 'string')
+                return ['string'];
+            if (type.startsWith("'") && type.includes("|")) {
+                const values = type.split("|").map(x => x.trim()).map(x => x.substring(1, x.length - 1));
+                return ['list', values];
+            }
+        }
+        return [type];
+    }
+    async getElements() {
+        if (this._packageData)
+            return Promise.resolve(this._elementList);
+        if (!this._resolveStored) {
+            this._resolveStored = [];
+            this._rejectStored = [];
+        }
+        return new Promise((resolve, reject) => { this._resolveStored.push(resolve); this._rejectStored.push(reject); });
+    }
+    isHandledElement(designItem) {
+        if (this._elementList)
+            return this._elementList.find(x => x.tag == designItem.name) != null;
+        return false;
+    }
+    getProperties(designItem) {
+        return this._propertiesList[designItem.name];
+    }
+    getProperty(designItem, name) {
+        return this._propertiesList[designItem.name].find(x => x.name == name);
+    }
+    getPropertyTarget(designItem, property) {
+        return this._propertiesList[designItem.name].find(x => x.name == property.name).propertyType == PropertyType.attribute ? BindingTarget.attribute : BindingTarget.property;
+    }
+}

package/dist/elements/services/modelCommandService/DefaultModelCommandService.d.ts

@@ -0,0 +1,7 @@
+import { IUiCommand } from "../../../commandHandling/IUiCommand.js";
+import { IDesignerCanvas } from "../../widgets/designerView/IDesignerCanvas.js";
+import { IModelCommandService } from "./IModelCommandService.js";
+export declare class DefaultModelCommandService implements IModelCommandService {
+    canExecuteCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): boolean;
+    executeCommand(designerCanvas: IDesignerCanvas, command: IUiCommand): Promise<boolean>;
+}