Build project web-component-designer-demo with Webpack or host it with iis Server

[MatariAbdulwahid]

Have you tried to build the project demo with webpack or tried to host it in iis Server ? I have many problems and can’t build it with wepback and to host it in iss .

[jogibear9988]

never tried... what are your problems?

[MatariAbdulwahid]

They are many proplems in monaca-editor . and like :

• paletteTreeView.jss:102 Uncaught (in promise) TypeError: Failed to set the 'adoptedStyleSheets' property on 'ShadowRoot': Failed to convert value to 'CSSStyleSheet' in import("jquery.fancytree/dist/skin-win8/ui.fancytree.css", { assert: { type: 'css' } }).then(x => this.shadowRoot.adoptedStyleSheets = [x.default, this.constructor.style]);
• DockManager.jss:171 Not allowed to load local resource: with the AssetsPath and many .

[jogibear9988]

problem is,I use import assertions with type css, wich are only a stage 3 proposal at the moment. I thougt this would ne standardised faster. I look what i can do in two weeks

[MatariAbdulwahid]

I have fixed all the problems and there is still a problem with the monaco-editor and there I can not fix the error with the webpack and the error is in this place:

    //@ts-ignore
    require.config({ paths: { 'vs': 'node_modules/monaco-editor/min/vs' } });

    //@ts-ignore
    require(['vs/editor/editor.main'], () => {

[jogibear9988]

Do you need monaco editor? As you see I also support ACE and Codemirror (https://github.com/node-projects/web-component-designer/tree/master/src/elements/widgets/codeView) They are also only small wrappers around the components, and also lazy load them. So if you use monaco in a webpack bundle process, maybe we need another wrapper component wich includes Monaco in another way. The basic web-component-designer does not depend on monaco, cause of this it is lazy loaded. Maybe you could change it to directly load monoaco, and register you own codeView widget?

[MatariAbdulwahid]

I have used codemirror instead of monaco editor and it works, only the style I need to adjust it . but I have another problem with lazy loader in html-parser and when I drag element from treeview into designer the import of url script is not loaded and webpack does not find it. furthermore script is not loaded in preview tab and not found. I will try to change config of webpack.

[jogibear9988]

preview needs mostly implemented for your use case. But I think the current preview in the sample is also broken if you use npm packages. I've not yet had time to fix this