Moon packaged, using Webpack.

[hypercub3d]

I'm attempting to use Moon in an application, where the code is bundled via Webpack, and I am running into an issue.

The problem seems to be that Moon is attempting to make a reference to a global window.Moon instance, which does not exist when it is included via an import call.

The code looks something like this.

import Moon from 'moonjs/dist/moon.js';

// window.Moon = Moon;

Moon.component( 'cart', {
  data() {
    return {
      mylist: [ '1', '2', '3' ]
    }
  },
  template: '<div><ul><li m-for="item in mylist">{{item}}</li></ul></div>',
  computed: {
  }
} );


const moonapp = new Moon( {
  data: {
  },
  computed: {
  },
  hooks: {
    mounted() {
    }
  },
  template: '<div id="moonapp"><cart></cart></div>'
} );

try {
  moonapp.mount( document.querySelector( '#moonapp' ) );
} catch ( error ) {
  console.log( error );
}

export default moonapp;

If I run this code as is, the code builds, and then I get an error in the dev console that states:

======= Moon =======
moonapp.js:43 ReferenceError: Moon is not defined
    at MoonComponent.eval [as $render] (eval at generate (moon.js:2399), <anonymous>:3:179)
    at MoonComponent.Moon.render (moon.js:1919)
    at MoonComponent.Moon.build (moon.js:1962)
    at createComponentFromVNode (moon.js:626)
    at appendChild (moon.js:412)
    at hydrate (moon.js:760)
    at hydrate (moon.js:824)
    at Moon.patch (moon.js:1947)
    at Moon.build (moon.js:1977)
    at Moon.mount (moon.js:1907)

If I simply uncomment the line that defines window.Moon = Moon, then everything works as expected.

This problem also seems to be related to components. If I replace the template code for moonapp to read template: '<div id="moonapp"><span>hello</span></div>', without registering window.Moon, then the app mounts and works properly. But if the <cart> component is invoked in the template, then the error is thrown.

[kbrsh]

Ahh, the problem here is that m-for uses a runtime helper, Moon.renderLoop, which is undefined in the compiled component render function.

I'm looking into ways to fix this, but for now I would use window.Moon.

[kbrsh]

@hypercub3d Can you please copy-paste the moon.js file from the dist folder in this repo? It is currently a dev version of the latest build, where this issue should be fixed.

Let me know if the issue persists or is resolved, and I will release it in v0.11.1.

[hypercub3d]

@kingpixil Yes, I can confirm that its working. :)

Thank you very much for the quick reply and patch.

[kbrsh]

Awesome! Glad I could help. This will be released in the next version.

[Capital-EX]

Any estimate as to when 0.11.1 will be released?

[kbrsh]

@Capital-EX The next release will be a stable v1.0.0. The alpha will be released within the next to weeks, then the beta, and then either a release candidate or a final release 🚀