GrapesJS / cli

GrapesJS CLI helper for the development
MIT License
100 stars 29 forks source link

Plugin not found #38

Closed yumyo closed 4 years ago

yumyo commented 4 years ago

Hi, First, thank you for this amazing piece of work. We are now in the process of developing a simple chart plugin. Our proof of concept works in development, but we are actually struggling to build and make it "seen" as a plugin.

The output of npx grapesjs-cli build -v is:

Start building the library...

Build config:
 { _: [ 'build' ],
  v: true,
  verbose: true,
  stats: '{}',
  patch: true,
  config: '{}',
  babel: '{}',
  targets: '> 0.25%, not dead',
  entry: 'src/index',
  output: 'dist',
  '$0': 'node_modules/.bin/grapesjs-cli' }

Patch the version

Webpack config:
 { entry: '/Users/xxx/Sites/grapesjs-zing-donut/src/index',
  mode: 'production',
  devtool: 'source-map',
  optimization:
   { minimizer:
      [ TerserPlugin {
          options:
           { test: /\.m?js(\?.*)?$/i,
             chunkFilter: [Function: chunkFilter],
             warningsFilter: [Function: warningsFilter],
             extractComments: false,
             sourceMap: true,
             cache: false,
             cacheKeys: [Function: cacheKeys],
             parallel: false,
             include: undefined,
             exclude: undefined,
             minify: undefined,
             terserOptions:
              { output:
                 { quote_style: 3,
                   preamble: '/*! grapesjs-zing-donut - 1.0.2 */' } } } } ] },
  output:
   { path: '/Users/xxx/Sites/grapesjs-zing-donut/dist',
     filename: 'grapesjs-zing-donut.min.js',
     library: 'grapesjs-zing-donut',
     libraryTarget: 'umd' },
  module:
   { rules:
      [ { test: /\.js$/,
          loader: 'babel-loader',
          include: /src/,
          options:
           { presets:
              [ [ '@babel/preset-env', { targets: '> 0.25%, not dead' } ] ],
             plugins: [ '@babel/plugin-transform-runtime' ],
             cacheDirectory: true } } ] },
  plugins: [] }

Stats config:
 { hash: false,
  colors: true,
  builtAt: false,
  entrypoints: false,
  modules: false }

Version: webpack 4.41.5
Time: 1000ms
                         Asset      Size  Chunks                   Chunk Names
    grapesjs-zing-donut.min.js  5.18 KiB       0  [emitted]        main
grapesjs-zing-donut.min.js.map  13.4 KiB       0  [emitted] [dev]  main

Start building locale files...

Locale files building completed successfully!

Building completed successfully!

Then in a CodePen https://codepen.io/yumyo/pen/wvByzpP we have:

<link rel="stylesheet" href="https://unpkg.com/grapesjs/dist/css/grapes.min.css">
<script src="https://unpkg.com/grapesjs"></script>
<script src"https://s3-us-west-2.amazonaws.com/s.cdpn.io/67133/grapesjs-zing-donut.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      plugins: ["grapesjs-zing-donut"],
  });
</script>

As visible in console we get `"Plugin grapesjs-zing-donut not found". The complete plugin code can be seen here https://github.com/yumyo/grapesjs-zing-donut Any help would be highly appreciated!

yumyo commented 4 years ago

So using the navbar component as a boilerplate, I was able to get it working but it would really be great to know how to properly use the CLI or what was wrong in my setup.

artf commented 4 years ago

Maybe because of this src"https://s3-us-west-2(there is no =)

yumyo commented 4 years ago

Oh my goodness 😅thank you @artf and sorry for the false flag