Ship JS instead of TS

[Artur-]

You should not ship TypeScript files that are compiled by the end user because different TypeScript settings might make your TypeScript not compile. Instead you should compile your TS files to js (+d.ts if needed) as part of the project build and ship those

[Artur-]

e.g. https://github.com/vaadin/appsec-kit/blob/4126981904dbe037a25fdcdf3b0c3874a8251c95/appsec-kit-starter/src/main/resources/META-INF/resources/frontend/appsec-kit/appsec-kit-plugin.ts#L11 seems to assume that @vaadin/flow-frontend exists. It does not in most projects

[heruan]

Thanks! So the JAR file should include the compiled JS not the TS. How do you suggest to organize the source files for a correct build?

[Artur-]

I don't think I have a working example to refer to but basically you should be able to:

1. Place TS sources in /frontend so they are only used as sources. Whatever folder works really but should not end up in target when building.
2. Add a vite.config.ts that builds JS, something like

   build: {
   lib: {
     name: 'appsec-kit',
     entry: 'frontend/themaintsfile.ts',
     formats: ['es'],
   },
   outDir: 'target/classes/META-INF/frontend/appsec-kit',

3. Run the build during mvn install, e.g.

           <plugin>
               <groupId>org.codehaus.mojo</groupId>
               <artifactId>exec-maven-plugin</artifactId>
               <version>3.1.0</version>
               <executions>
                   <execution>
                       <id>build frontend</id>
                       <phase>generate-resources</phase>
                       <goals>
                           <goal>exec</goal>
                       </goals>
                       <configuration>
                           <arguments>
                               <argument>run</argument>
                               <argument>build</argument>
                           </arguments>
                       </configuration>
                   </execution>
               </executions>
               <configuration>
                   <executable>npm</executable>
               </configuration>
           </plugin>

4. Add a package.json with Vite as a dev dependency + any other you need, and a script that runs vite as part of the build, e.g.

   "scripts": {
   "build": "npm install && vite build",

5. Fix all the issues