Put a sample that illustrates helloworld usage with webpack project about j2cl HOT 11 OPEN

HI @swuecho , I'm trying to do the same thing.
I have questions, did you install google-closure-library as a node dependency?
Did you have any repo with an example?
Thank you:)

no node dependecy is required, but you have to install bazel and bazel will fetch... the whole internet. (a lot of depenency :) )

check:

https://github.com/swuecho/j2cl_export_symbol_demo

this will output the optimized js, without any dependency.

https://github.com/swuecho/j2cl_webpack_demo

demonstrate how to use it in a webpack project. the example use vue-cli, but not vue specific

from j2cl.

@Mr-struct unfortunately, I did not use j2cl any more. Follow the instruction in this issues and copy the helloworld.js to your src folder and do the import, should works. I could make a demo in near future if you still have problem to set it up.

from j2cl.

I use grpc-web in production. I believe grpc-web generated goog.module. but I can import grpc-web directly.

https://github.com/grpc/grpc-web/tree/master/javascript/net/grpc/web

Not sure how grpc-web achieve this. perhaps simiar technology can be adapted?

If so, we can use the generated js module transparently.

Hope someone from grpc-web can give some guidance?

from j2cl.

That's what the HelloWorld sample shows (helloworldlib used with js):
https://github.com/google/j2cl/tree/master/samples/helloworld/src/main/java/com/google/j2cl/samples/helloworld

Are you asking about using it in a way where the helloworldlib loaded separately in the page with a script tag?

from j2cl.

Thanks! The helloworld example is great and amazing when use ibazel to see the 'realtime' change.

You are right. if I can load helloworldlib loaded separately, I can mix the lib in other js project seamlessly.

in my case, I want to use the helloworldlib in vue js project with webpack. (I checked the helloworldlib.js.zip. seems the the generated code is goog.module format. I believe closure compiler could compile it to normal js. so the gap is another build step or a parameter to tell j2cl_library the target js module format?)

from j2cl.

Yes, in that particular case you would want to change app.js in the sample to expose the things that you want to be available for the host page. So it would look like:

goog.module('j2cl.samples.app');

var {sayHello} = goog.require('j2cl.samples.hello');

goog.exportSymbol("helloworld.sayHello", sayHello);

Then in the other script you can call helloworld.sayHello() if you include the output .js from j2cl_application target.

It would be great if somebody contributes a webpack example for this use case...

from j2cl.

goog.exportSymbol("helloworld.sayHello", sayHello); will make all this work. thanks!

from j2cl.

direct import in webpack does not work, because the generated app is not in supported module syntax(?)

obviously, with the exportSymbol, include the 'helloworld.js' in script tag will work. but in order to make it work with webpack directly. use import is the solution I can find so far. not the best solution, but works.

// copy helloworld.js from bazel-bin
import('./helloworld.js').then(module => {
    let helloworld = module.helloworld
    console.log(helloworld.sayHello())
});

from j2cl.

HI @swuecho , I'm trying to do the same thing.
I have questions, did you install google-closure-library as a node dependency?
Did you have any repo with an example?
Thank you:)

from j2cl.

Thanks a lot for your answers 😄

from j2cl.

I'm just getting started here, but the hello world example doesn't look like it would actually be runnable in a browser or in node. Wouldn't it need require("google-closure-library") somewhere?

A complete source-to-browser example, maybe also with a little jsinterop and element2 would be super helpful for newcomers.

from j2cl.