BUG: Uncaught SyntaxError: Unexpected token '{' at CanvasView.ts:590:12

[rozek]

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64)

Reproducible demo link

none

Describe the bug

I have a component type with a script

      Editor.DomComponents.addType('HTMLView',{
        model: {
          defaults: {
             script () { console.log('Hi!'); runScript.call(this) },
            ...

When previewing a project using a component of this type, GrapesJS creates the following HTML

<div class="gjs-js-cont"><div data-id="ij6k"><script>
      setTimeout(function() {
        var item = document.getElementById('ij6k');
        if (!item) return;
        (function(){
script () {
              console.log('Hi!'); runScript.call(this)
;}.bind(item))({})
      }, 1);</script></div></div>

If you inspect this output carefully, you will see that the inner script () { is not properly closed.

I've already tried to find some workarounds but did not succeed yet. But I will try further as this problem turns out to be a blocker...

Code of Conduct

• I agree to follow this project's Code of Conduct

[rozek]

that's interesting: defining a separate function

function script () { console.log('Hi!'); runScript.call(this) }

and defining the component type as described in the docs

      Editor.DomComponents.addType('HTMLView',{
        model: {
          defaults: {
             script,
            ...

works as designed.

But it still sounds strange, that an inline function produces a syntax error in the exported HTML...

[artf]

@rozek good catch, will fix for the next release