I'm using scala.js to create javascript code to be run in a browser, served up by an akka-http server. I had it mostly working using mill as my build tool, but then wanted to switch to sbt so I could use the ScalaJSBundler plugin for npm dependencies and packaging. Using sbt, when I do a fastOpt to compile my scala.js code, javascript code is created slightly different than what mill created and it now includes require statements (which the mill build didn't) such as
var $i_react = require("react");
When this code is run in my browser require comes up as undefined. Also variables I have exported in scala.js come up as undefined. I thought this was because the code being created was for ModuleKind.CommonJSModule (set via the sbt setting scalaJSModuleKind), but when I try to change that to ModuleKind.ESModule the build fails with:
scalaJSModuleKind must be set to ModuleKind.CommonJSModule in projects where ScalaJSBundler plugin is enabled
I'm new to javascript (and scala.js). What am I doing wrong? How should this be done?
Thank you!
As described in the Getting Started of scalajs-bundler, you should serve the result of webpack/fastOptJS to the browser, instead of fastOptJS. This is necessary because the latter is emitted as a CommonJS module, unsuitable for the browser, but then processed by Webpack to produce the former, a bundle suited for the browser, also containing the npm dependencies.
Related
I'm trying to create a simple proof-of-concept of using Deno to bundle a browser application which is using Lit. Basic functionality (e.g., initial component rendering) is functional, but I'm unable to get simple DOM manipulations to trigger the reactive property changes.
My simple example can be seen working at this Lit Playground example. An example which does not work is this Deno bundle version. These 2 versions have the exact same source code (i.e., index.html and main.ts).
You can view all of the code and the build process for creating the Deno bundle here.
Is Deno capable of producing bundles which behave in the expected manner?
Deno 1.17.2 is able to successfully create a bundle. See https://github.com/denoland/deno/issues/13048 for background. As #jsejcksn said, SWC is most likely the culprit for the original issue.
try https://github.com/mindon/packup which is using esbuild to bundle js for browser.
here's a demo with lit (with locales), material design web and three.js
https://github.com/mindon/deno.lit-and-mw3.demo
We plan on using SASS instead of plain CSS for our SharePoint project very soon. While testing and trying to set everything up, I ran into some problems:
We're using Visual Studio 2015 and on my developer machine I installed the Web Compiler Extension to compile the .scss-files and partial files to a regular .css-file.
That worked very nicely but the problem is, that there will be a few developers working simultaneously on the styles. I want to avoid merging the resulting css-file each time someone tries to check in something into source control (we're using Team Foundation Server).
Since there is a build running every time someone is checking in their changes, and to deploy the resulting solution to the nightly build machine, the idea was to somehow include the SASS compiler in the build definition. This way the more readable scss-files get merged and the build creates the resulting css-file to include it in the solution.
Maybe I'm thinking too complicated, but I just couldn't get that to work so far.
Any ideas how I can achieve that?
(Maybe I should also mention that none of the dev machines got any internet connection)
If you're building an MVC app, you can use MVC's bundling feature along with the SASS NuGet package. And, be sure to enable minification. There's a UseNativeMinification property on SassAndScssSettings. That way you don't need to deal with merging the css file when you get latest or check in. Reference this thread: SASS/TFS best practice
Another way is running a script (e.g with PowerShell task) on the server that to install the gulp components and then call the sass compile task to compile the SASS. Refer to Powershell build - compiling SASS for details.
I am configuring grunt for SAPUI5 project. I can configure grunt taks for minify, test and etc. I see there is grunt-ui5 grunt plugin but I am not able to understand what exactly this plugin is doing or useful to SAPUI5 projects.
Thanks
The grunt-openui5 plugin by SAP is documented at github.
It can be used to build UI5 themes and package components and libraries into preload-files.
UI5 tries to load most of the modules of a component or library with a single request from a component-preload.json / library-preload.json file. If it cannot find a preload file, it has to request all modules individually resulting in many many requests and thus poor performance.
grunt-openui5 is used to create these preload files. It also minifies the code while doing so.
The grunt-ui5 plugin is something inofficial which seems to do similar things. You would have to ask the author directly to get more information. I recommend to use the official grunt-openui5 plugin.
For ui5 applications it's not common to use the grunt task for minification , instead we use the grunt-openui5 task. It will create the preload file, which is a json object that contains the whole app.
{
"version":"0.0",
"name":"app name",
"modules":[
"control1": "code for control1",
"control2": "code for control1",
]}
When control1 is required, ui5 just uses the preload to get the code for control1. In this way, ui5 avoids triggering a new request. Anyway, If the preload file is not present, it will have to request control1.js .
If you want to see a real preload file, open any ui5 app and go to the network tab of the browser.
Using the grunt-openui5 plugin for grunt, it will do the work for you, and will give you as a result a library.css, rtl, library-parameters.json (same thing, but for themes) and the preload.json (for the js files).
Instead of using grunt-ui5, I would recommend you to use the the oficial plugin grunt-openui5!
grunt-openui5 is a really amazing grunt plugin created by bunch of SAPUI5 core dev team ;)
It mainly allow you to do 4 things:
create Component-preload.js (optimized and minified version of your app)
create library-preload.js (optimized and minified version of a custom library)
create a custom theme
create a local web server to test your app locally
I've covered it a little bit on my blog post Custom Control 101 if you want to check it out.
I'm using it in daily basis and you can read some of my blog posts about it.
Just a small remark: in the future, consider switching from grunt to gulp, as gulp is newer and faster. For SAPUI5 there are packages with same functionality in gulp, as ingrunt.
I'm using premake4 on Linux to build a project which links to a third party .a file.
Neither links {"foo"} nor links {"libfoo.a"} work, since premake generates a build script which incorrectly uses the flag -lfoo as if I'm linking a shared library. Using files {"libfoo.a"} will make premake ignore the file since it isn't C.
Premake4 is getting awfully old at this point. Is switching to Premake5 an option?
If not, one hacky workaround would be to use linkoptions to emit the link flags however you would like them to appear.
I am a little new to angular-meteor and want to add an external js library to my project.
The library is Fusioncharts.js http://www.fusioncharts.com/angularjs-charts/#/demos/ex1 and it cannot be installed using any of these options
1) bower install
2) npm install
3) meteor add (from atmosphere)
So what i did is, I followed these steps How can I add third-party JavaScript libraries to a Meteor application?
and added the libraries manually under public/js directory
Created a main.js file and added all the scripts using $.getScript
Strange thing is when I add the dependency of the 'ng-fusioncharts' module in my angular.module it throws an error
" Module 'ng-fusioncharts' is not available! You either misspelled the module name or forgot to load it."
Please let me know what could be going wrong here.
P.S : When I type in FusionCharts in the console.log I do see that object.
So it means the Fusioncharts libraries were imported properly but not added to the angular dependency
Thanks in advance
Please note that $.getScript is asynchronous, so you would need a little timeout to wait for the module to be available to the rest of your code.
Another possibility to try out would be to include your script rather in client/compatibility special folder. It will be included in your JS and execute before the rest of your client JS code.