Closed sykesd closed 8 years ago
I have made some tests and I found out that the Eclipse plugin is quite unstable and sometimes has erratic behavior when using the bundle option (well the Eclipse plugin is still at version 0.9.3).... So I would advise the following:
Sorry for the bug. I will look into it ASAP and will make an Eclipse plugin update. I'll post you when ready.
My answer may be irrelevant but isn't there a verbose option in the Eclipse plugin in order to look into more detailed output?
You can check out the error log: Window > show view > error log. But I don't think that anything will appear there, since only plugin-specific actions will be logged. I believe that if an error or a warning was reported by the transpiler it would appear in the Problems view... It could be worth looking at it, but since I met other instabilities in the plugin while testing with the bundle option, I suggest to use Maven (or to not bundle) and to wait for a fix...
I am trying to follow the Getting Started guidelines, but not really making any progress.
Some caveats: I am a complete maven newbie. We work on Windows (7) machines.
I cloned the quickstart project and copied the files into a new folder called learn-jsweet. I renamed the project in the pom.xml and .project files. Imported the project into Eclipse. Right clicked on pom.xml and chose "Run as...", "Maven generate-sources". The Maven build ran without error and I was able to start index.html and see the "It works!" alert. So far so good.
I copied in the
I add in the model class as in my original report, and change the QuickStart.main()
method to be:
public static void main(String[] args) {
alert("It works!");
Part part = new Part("707123", "Fry basket, wire", 2);
alert("Part: "+part.getPartno());
}
Examining the output I see that it generates the Part.js file and the QuickStart.js file references com.acme.model.Part but it does not actually create a bundle anywhere that I can see.
Which steps am I missing?
I haven't even gotten to including a candie yet, which is where it broke with the Eclipse plugin :-(.
Thanks for your help so far.
Be careful with the Use modules and bundle your programs for the WEB section of the Getting Started because it launches the JSweet transpiler with the command-line launcher. So you have to be careful because the configuration may be different (in terms of output dirs) from the quickstart. This could explain why you don't see any change in the output.
Actually, to bundle your program from the quickstart project, I think that you should just add to the JSweet maven plugin configuration:
<module>commonjs</module>
<bundle>true</bundle>
Please post your new pom.xml
. I should be able to tell if something is wrong quite easily.
Update: I have fixed the http://www.jsweet.org/getting-started/
You can rely on the given pom.xml
excerpt to update the quickstart project's pom.xml
to generate a bundle (start over from the original pom.xml
).
Note that the old version of the getting started section was generating all files in the src
directory (not like the quickstart that generates in target/js
). This difference probably explains why you got confused (you were probably looking in the wrong place to check the generated code). Generally speaking, you have to carefully check the output directories of TS and JS to avoid surprises, because they may differ when using the Maven plugin or when using the Eclipse plugin depending on the configuration. Of course, the idea on a given project is to have consistent configurations.
Thanks a lot for your quick support. Following the updated Getting Started guide my basic bundling example now works.
However, adding the jquery candie results in exactly the same behaviour I was seeing with the Eclipse plugin.
Here is my pom.xml
now:
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>learn-jsweet</groupId>
<artifactId>learn-jsweet</artifactId>
<version>1.0.0-SNAPSHOT</version>
<name>JSweet Learning App</name>
<description>A simple project structure to get started with JSweet</description>
<developers>
<developer>
<id>Acme</id>
<name>Acme Development Team</name>
<email>dev@acme.com</email>
</developer>
</developers>
<licenses>
<license>
<name>The Apache Software License, Version 2.0</name>
<url>http://www.apache.org/licenses/LICENSE-2.0.txt</url>
<distribution>repo</distribution>
</license>
</licenses>
<pluginRepositories>
<pluginRepository>
<id>jsweet-plugins-release</id>
<name>plugins-release</name>
<url>http://repository.jsweet.org/artifactory/plugins-release-local</url>
</pluginRepository>
<pluginRepository>
<snapshots />
<id>jsweet-plugins-snapshots</id>
<name>plugins-snapshot</name>
<url>http://repository.jsweet.org/artifactory/plugins-snapshot-local</url>
</pluginRepository>
</pluginRepositories>
<repositories>
<repository>
<id>jsweet-central</id>
<name>libs-release</name>
<url>http://repository.jsweet.org/artifactory/libs-release-local</url>
</repository>
<repository>
<snapshots />
<id>jsweet-snapshots</id>
<name>libs-snapshot</name>
<url>http://repository.jsweet.org/artifactory/libs-snapshot-local</url>
</repository>
</repositories>
<build>
<plugins>
<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<version>3.1</version>
<configuration>
<source>1.8</source>
<target>1.8</target>
<fork>true</fork>
</configuration>
</plugin>
<plugin>
<groupId>org.jsweet</groupId>
<artifactId>jsweet-maven-plugin</artifactId>
<version>1.0.0</version>
<configuration>
<sourceMap>true</sourceMap>
<outDir>target/js</outDir>
<targetVersion>ES3</targetVersion>
<!-- add these options to bundle your JS automatically -->
<module>commonjs</module>
<bundle>true</bundle>
<!-- optionally, you can ask JSweet to put your bundle in a specific
directory -->
<bundlesDirectory>target/js/dist</bundlesDirectory>
<!-- end of bundle configuration -->
</configuration>
<executions>
<execution>
<id>generate-js</id>
<phase>generate-sources</phase>
<goals>
<goal>jsweet</goal>
</goals>
</execution>
</executions>
</plugin>
</plugins>
<pluginManagement>
<plugins>
<!--This plugin's configuration is used to store Eclipse m2e settings
only. It has no influence on the Maven build itself. -->
<plugin>
<groupId>org.eclipse.m2e</groupId>
<artifactId>lifecycle-mapping</artifactId>
<version>1.0.0</version>
<configuration>
<lifecycleMappingMetadata>
<pluginExecutions>
<pluginExecution>
<pluginExecutionFilter>
<groupId>
org.jsweet
</groupId>
<artifactId>
jsweet-maven-plugin
</artifactId>
<versionRange>
[1.0.0-RC1,)
</versionRange>
<goals>
<goal>jsweet</goal>
</goals>
</pluginExecutionFilter>
<action>
<ignore></ignore>
</action>
</pluginExecution>
</pluginExecutions>
</lifecycleMappingMetadata>
</configuration>
</plugin>
</plugins>
</pluginManagement>
</build>
<dependencies>
<dependency>
<groupId>org.jsweet.candies</groupId>
<artifactId>jsweet-core</artifactId>
<version>1.0.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>org.jsweet</groupId>
<artifactId>jsweet-transpiler</artifactId>
<version>1.0.0</version>
</dependency>
<dependency>
<groupId>org.jsweet.candies</groupId>
<artifactId>jquery</artifactId>
<version>1.10.2</version>
</dependency>
</dependencies>
</project>
My QuickStart.main()
now looks like:
public static void main(String[] args) {
alert("It works!");
Part part = new Part("707123", "Fry basket, wire", 2);
alert("Part: "+part.getPartno());
$(document).ready(() -> {
$("#target").text("No, really, it works!");
return null;
});
}
My index.html
now looks like:
<html>
<head>
<link rel="icon" type="image/png" href="logo.png">
<link rel="shortcut icon" href="logo.png">
</head>
<body>
<script type="text/javascript" src="../target/js/dist/bundle-quickstart.js"></script>
<div id="target"></div>
</body>
</html>
The output from mvn generate-sources
is:
[INFO] Scanning for projects...
[INFO]
[INFO] ------------------------------------------------------------------------
[INFO] Building JSweet Learning App 1.0.0-SNAPSHOT
[INFO] ------------------------------------------------------------------------
[INFO]
[INFO] --- jsweet-maven-plugin:1.0.0:jsweet (generate-js) @ learn-jsweet ---
[INFO] JSweet transpiler version 1.0.0 (build date: 2016-02-02 12:45:11)
[INFO] transpilation successfully completed with no errors and no warnings
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
[INFO] Total time: 3.576s
[INFO] Finished at: Sun Feb 14 21:09:25 AEDT 2016
[INFO] Final Memory: 14M/300M
[INFO] ------------------------------------------------------------------------
The target/js/dist/bundle-quickstart.js
file is completely empty (0 bytes long).
I have not put a jquery.js
file anywhere yet because I don't know where it would go. Is that the problem? If it is, where should it go?
If that is not the problem, what is?
There seems to be a deeper problem here. Bundling is done with browserify and it is probably failing silently...
I have tried on a project using exactly what you provided and it works for me. I have a target/js/dist/bundle-helloworld.js
generated which look fine. I am working under Mac OsX.
So, I am not sure of what can happen. It could be a browserify issue on your system.
In order to try to understand what is wrong with your installation, could you please try/provide the following:
<verbose>true</verbose>
option to the JSweet transpiler in your pom.xml
(for instance, after the line <targetVersion>ES3</targetVersion>
.... could you then send me the resulting Maven trace when running generate-source
?Thank you in advance and sorry for the inconvenience (it really does work for me... it is really the worst sort of problems)... :(
Thanks for your help. I have now got it working. Looking at the output of the maven trace with the verbose option enabled showed that browserify could not find the jquery module.
So I used npm
to install the jquery
module and and re-ran mvn generate-sources
and it worked! Thanks very much.
Can I suggest you update the Getting Started Candies section to make a note about this? The current wording suggests that all I really have to do is add the maven dependency and everything else happens auto-magically :-)
I am closing this now since it is fixed.
Cool. I am glad it worked for you. This is helping a lot. There is an actual issue here because JSweet is supposed to install all the required libs to work (magically) using npm (node package manager). That's how JSweet installs browserify. However, apparently, on contrary to Maven, npm does not install dependencies automatically :(
Most people, including me, did not see the issue because most people have tried the examples before (examples use jQuery, which triggers its installation).
So the good news is that it is fixable. That's why I am reopening the issue. I will fix it and close it when done.
Thanks again!
Follow-up: it seems that I was wrong... npm should install also all dependencies when installing a package. So I am not sure of what happened but I have read on the Internet that in some contexts, the installation of dependencies fails. I am still investigating...
Just a couple of questions for my understanding:
1) If I add in the jquery
candie (candy?) how does JSweet know that it needs to install the npm package jquery
? Is that a convention or is the information included somewhere?
2) When exactly in the build/transpile process would JSweet attempt to npm install
the bundle?
Yes, the jquery candy. That's an excellent question :)
If you look at the def.jquery.Globals
class source code, you will see that the $
method is annotated with @Module("jquery")
, which comes from the jquery d.ts
file:
declare module "jquery" {
export = $;
}
In practice, this external module corresponds to the npm package, so that at the end of the transpilation, when the module option is on (and only then), all the used modules are installed with npm
so that browserify
can bundle the program with all the used modules.
Note that this process is still incomplete because the version number should be added in the @Module
annotation (right now it always takes the default one, which may lead to problems in case you are using non-standard versions). Please note that the bundle
option is here as a quick starter to make things easier for Java programmers, so that they don't have to take care of the bundling aspect of JS programming. However, when programming complex applications, it is certainly better to start using external bundlers (like browserify) with extra configuration, so that you can fully control the way your application is bundled up.
Do I need to have done an npm init
in the project directory before the automatic install via npm
during the build process will work?
Nope. As said in the docs, you only need npm installed. JSweet takes care of all the rest. Your question tells me that you still have issues?
I have not yet tried adding another candy as a dependency. I just suggested that to see if that would help you replicate the problem.
At the moment, it is hard for me to guess what happened.
Normally, JSweet installs all used modules in USER_HOME/node_modules
. So if you look at the content of this directory, it should contain the jquery
directory.
Now maybe that for some reason, this directory could have the wrong permissions so that JSweet cannot write in it? (just a theory).
What you could try is the following if you have some time:
USER_HOME/node_modules
... check the permissions (if something looks wrong tell me)jquery
directoryjquery
gets installed correctly (check again in that directory)USER_HOME/node_modules
directory.Let me know the outcome of this... it could help.
So, I did as you asked:
USER_HOME/node_modules
directory - definitely no permissions problemsjquery
folder from that directoryjquery
module fine, but the bundling fails Here is the section from the Maven trace showing the problems:
2016-02-17 07:56:46.046 INFO JSweetTranspiler:627 - checking for used modules: [jquery, ../com/module]
2016-02-17 07:56:46.046 DEBUG JSweetTranspiler:634 - installing jquery in C:\Users\SD026\node_modules\jquery...
2016-02-17 07:56:46.046 DEBUG ProcessUtil:234 - installing jquery with npm
2016-02-17 07:56:46.046 DEBUG ProcessUtil:161 - run command: cmd /c npm install jquery
2016-02-17 07:56:50.050 INFO ProcessUtil:186 - npm - jquery@2.2.0 node_modules\jquery
2016-02-17 07:56:50.050 INFO JSweetTranspiler:660 - creating bundle file with browserify, args: C:\Data\projects\learn-
jsweet\target\js\quickstart\module.js -o C:\data\projects\learn-jsweet\target\js\dist\bundle-quickstart.js
2016-02-17 07:56:50.050 DEBUG ProcessUtil:161 - run command: C:\Users\SD026\.jsweet-node_modules\browserify.cmd C:\Data\
projects\learn-jsweet\target\js\quickstart\module.js -o C:\data\projects\learn-jsweet\target\js\dist\bundle-quickstart.j
s
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - Error: Cannot find module 'jquery' from 'C:\Data\projects\l
earn-jsweet\target\js\quickstart'
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - at C:\Users\SD026\.jsweet-node_modules\node_modules\bro
wserify\node_modules\resolve\lib\async.js:46:17
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - at process (C:\Users\SD026\.jsweet-node_modules\node_mo
dules\browserify\node_modules\resolve\lib\async.js:173:43)
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - at ondir (C:\Users\SD026\.jsweet-node_modules\node_modu
les\browserify\node_modules\resolve\lib\async.js:188:17)
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - at load (C:\Users\SD026\.jsweet-node_modules\node_modul
es\browserify\node_modules\resolve\lib\async.js:69:43)
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - at onex (C:\Users\SD026\.jsweet-node_modules\node_modul
es\browserify\node_modules\resolve\lib\async.js:92:31)
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - at C:\Users\SD026\.jsweet-node_modules\node_modules\bro
wserify\node_modules\resolve\lib\async.js:22:47
2016-02-17 07:56:51.051 INFO ProcessUtil:186 - browserify - at FSReqWrap.oncomplete (fs.js:82:15)
2016-02-17 07:56:51.051 INFO JSweetTranspiler:608 - transpilation process finished in 6959 ms
[INFO] transpilation successfully completed with no errors and no warnings
[INFO] ------------------------------------------------------------------------
[INFO] BUILD SUCCESS
[INFO] ------------------------------------------------------------------------
I see two problems there:
I hope this helps.
So, when you build the project once again, it does not install jquery anymore, but it still fails right? Now, the key question: the first time, you said you managed to make it work by installing jquery manually, right? Can you do it again and what is the command you use?
Another idea... maybe it is browserify
that is not well installed. The browserify
command is supposed to be installed installed in USER_HOME/.jsweet-node_modules/
. What happens if you remove the USER_HOME/.jsweet-node_modules/
and USER_HOME/node_modules/
directories and that you try to build the project again?
Just in case, what are you versions of node
and npm
? (node --version
and npm --version
)
Thanks a lot for your help.
node --version
v4.2.3
npm --version
v2.14.7
I removed the two directories you mentioned an re-ran the build. The Maven trace shows that it installs typescript
and browserify
, and it then also installs jquery
and I can see them all in the appropriate directories. But browserify
still complains that it can't find jquery
during the mvn generate-sources
.
When I said I installed jquery
manually I did it from my learn-jsweet
directory, i.e. my project directory:
npm init
- chose mostly defaultsnpm install jquery --save
This, obviously, created a node_modules
directory under my project directory. When I then ran mvn generate-sources
the bundling worked correctly.
This is really mysterious... I tried to do npm init
in my project to see if it makes a difference, but on my machine it is still working fine. I can see that you have an older version of node/npm than me... this lead me to think that you already had npm
installed on your machine and that it may be tuned differently by previous configuration (just a guess of course)...
Anyway, the only difference I see is that you are installing your modules with npm install jquery --save
, while JSweet does not use the --save
option. I am not sure why it would work with me and not with you... I am not sure of the side effects either... but I decided to add the --save
option in JSweet, so that it uses exactly the command you use (on my machine, this option does not seem to have any visible impacts). I have just committed and deployed a fix.
So, and that will be our very last try, I suggest that you upgrade to the snapshot version of JSweet to get my fix. You need to use the 1.1.0-SNAPSHOT
version, which requires you to update your `pom.xml
for the maven plugin (and maybe the transpiler dependency, but this dependency is not required if you use the maven plugin).
Make sure that when you build the given version of the transpiler is 1.1.0-SNAPSHOT
and that the build date is today (this info is printed at the beginning of the trace).
Then remove all the npm modules (USER_HOME/.jsweet-node_modules/
and USER_HOME/node_modules/
) and build again.
BTW, FYI, you can check out the installed modules by running npm ls
.
I changed the plugin in the pom.xml
to version 1.1.0-SNAPSHOT, removed the directories and tried again. From the trace:
2016-02-18 11:24:56.056 INFO JSweetTranspiler:206 - creating transpiler version 1.1.0-SNAPSHOT (build date: 2016-02-17
And I see that it uses --save
when installing jquery
:
2016-02-18 11:25:27.027 DEBUG ProcessUtil:234 - installing jquery with npm
2016-02-18 11:25:27.027 DEBUG ProcessUtil:161 - run command: cmd /c npm install jquery --save
2016-02-18 11:25:31.031 INFO ProcessUtil:186 - npm - jquery@2.2.0 node_modules\jquery
But the end result is still the same:
2016-02-18 11:25:31.031 INFO ProcessUtil:186 - browserify - Error: Cannot find module 'jquery' from 'C:\Data\projects\learn-jsweet\target\js\quickstart'
2016-02-18 11:25:31.031 INFO ProcessUtil:186 - browserify - at C:\Users\SD026\.jsweet-node_modules\node_modules\browserify\node_modules\resolve\lib\async.js:46:17
Thanks for all your time on this, I was also happy to give you mine to help make the project better. It looks really cool and good luck with it.
For the moment our team has decided to pursue TypeScript directly instead of JSweet. We may look back into the project in future.
Just to clarify, this issue is unrelated to our reasons for pursuing something other than JSweet. This issue was an annoyance perhaps, but we had a workaround for it (manually installing JavaScript dependencies).
Well, thank you also a lot for your time. It was kind of frustrating not being able to make it work, but your problem with the bundle is probably really node-specific (maybe even OS-specific). If I come across that bug again, I'll know where to start, so I think it was not a total waste of time... But you are right, it is not a blocking issue (neither a key feature), and I would have hoped to spend more time on interesting JSweet features rather than accessory ones.
So, I am very curious about the reasons of your choice. Is it just because JSweet is so small and young compared to TypeScript? Or is there a deeper reason? To me, JSweet is reversible to TypeScript any time because the generated TypeScript code is very usable (if you turn off the sourceMap option of course). So I really think that choosing JSweet is not a risky choice and in a way, it is almost like choosing TypeScript (and the final choice can be made after). But there are probably things that I don't see here. If you want to give me more specific reasons, please don't hesitate to email me privately (my email is visible on Github I think).
In any case, good luck for your new project and please re-consider using JSweet in the future :)
Oh. By the way, I forgot. If you are using TypeScript on the front, and Java on the back, you may want to consider using JSweet to automatically transform your Java beans into TypeScript interface. This is an under progress feature (see #69). You will not get refactoring, but you will get type checking and the JSweet transpiler is pretty light and easy to integrate in a Maven or Gradle build.
From version 1.1.0, JSweet will not produce bundles through Browserify, but will use a quite elaborated way to directly bundle the generated code (file permutations, lazy initialization of statics). So, JSweet will include an effective way to produce bundles without relying on external tools. Of course, it will still be possible to use external tools if you want to. This "bug" is now irrelevant.
We are evaluating JSweet for use as a development platform for web apps. We are relatively new to Javascript, but have strong Java experience.
Using the Eclipse plugin I followed the "from a blank project" quick start and produced a working example. I then added a model class and enabled the bundle option to produce a single combined Javascript class. All very good.
Next I added the jquery (1.10.2) "candie" to the project and attempted to use it from my sample code. When I did that the produced bundle-helloworld.js file is completely empty. But there are no error messages. All of the intermediate files look correct and are generated.
Why is no error message produced?
How do I go about fixing the problem?
Where exactly should I place the jquery.js file?
Here is my main class:
Here is my model class:
Here is the index.html:
Finally, here is the pom.xml: