New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add webpack output to allow delayed initialization of grapesjs-mjml plugin #24

Closed
wants to merge 2 commits into
base: master
from

Conversation

Projects
None yet
2 participants
@mathieuk

mathieuk commented Nov 10, 2017

In our React project, we load GrapesJS on-demand using Webpack's code splitting functionality. The current implementation of index.js makes this difficult as it immediately tries to register with grapesjs through a global variable.

This change introduces an extra way of loading the plugin, by also providing a wrapped initialization function. This allows us to load GrapesJS like so:

  componentDidMount() {
    require.ensure([], function() { 
      var grapesjs   = require('vendor/grapes.min.js');
      var mjmlPlugin = require('vendor/grapesjs-mjml-callable.min.js');   
      mjmlPlugin.default(grapesjs);
    
      var editor = grapesjs.init({
        height: '100%',
        noticeOnUnload: 0,
        storageManager:{autoload: 0},
        fromElement: true,
        container: '#gjs',
        height: '100%',
        plugins: ['gjs-mjml'],
        pluginsOpts: {
          'gjs-mjml': {}
        }
      });
      
      return grapesjs;
    }, 'grapesjs')
  }

As I didn't find a way to have multiple output definitions this may break existing installations as the default output for webpack no longer is grapesjs-mjml.min.js but grapesjs-mjml-default.min.js.

Mathieu Kooiman added some commits Nov 10, 2017

Mathieu Kooiman
Add an extra output that loads the grapesjs plugin on demand from a p…
…rovided grapesjs instance instead of relying on a globally provided grapesjs instance.
@artf

This comment has been minimized.

Show comment
Hide comment
@artf

artf Nov 10, 2017

Owner

I don't know @mathieuk, honestly, I'd prefer to avoid breaking and overwhelming stuff just to support some third-party feature
This is how usually one would use the plugin and it works fine
https://codesandbox.io/s/p90rkzx4m7

Owner

artf commented Nov 10, 2017

I don't know @mathieuk, honestly, I'd prefer to avoid breaking and overwhelming stuff just to support some third-party feature
This is how usually one would use the plugin and it works fine
https://codesandbox.io/s/p90rkzx4m7

@mathieuk

This comment has been minimized.

Show comment
Hide comment
@mathieuk

mathieuk Nov 13, 2017

And rightly so. I just ( :) ) realized that I can probably just code-split the entire module using GrapesJS to achieve the same goal and if not (for future reference) I can use the Webpack scriptloader to achieve the same goal. So I'm closing this PR.

mathieuk commented Nov 13, 2017

And rightly so. I just ( :) ) realized that I can probably just code-split the entire module using GrapesJS to achieve the same goal and if not (for future reference) I can use the Webpack scriptloader to achieve the same goal. So I'm closing this PR.

@mathieuk mathieuk closed this Nov 13, 2017

@artf

This comment has been minimized.

Show comment
Hide comment
@artf

artf Nov 13, 2017

Owner

@mathieuk Great, actually I've also realized that you could do this 😬 (if I correctly got which was your problem)

// The `require` of the plugin returns its plugin function
// `function(editor, config) { ...`, so
var mjmlPlugin = require('grapesjs-mjml'); 
grapesjs.plugins.add('gjs-mjml', mjmlPlugin);
...
Owner

artf commented Nov 13, 2017

@mathieuk Great, actually I've also realized that you could do this 😬 (if I correctly got which was your problem)

// The `require` of the plugin returns its plugin function
// `function(editor, config) { ...`, so
var mjmlPlugin = require('grapesjs-mjml'); 
grapesjs.plugins.add('gjs-mjml', mjmlPlugin);
...
@mathieuk

This comment has been minimized.

Show comment
Hide comment
@mathieuk

mathieuk Nov 17, 2017

This worked fine, btw.

mathieuk commented Nov 17, 2017

This worked fine, btw.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment