Put a sample that illustrates helloworld usage with webpack project

[swuecho]

I wonder if it is a possible to use j2cl to produce js lib and use it in js project.

say, If I want to use the helloworldlib in js project, how can i do that? Thanks.

[gkdn]

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?

[swuecho]

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?)

[gkdn]

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...

[swuecho]

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

[swuecho]

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())
});

[Mr-struct]

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:)

[swuecho]

@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.

[swuecho]

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?

[swuecho]

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

[Mr-struct]

Thanks a lot for your answers :smile:

[rendaw]

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.