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
Related
I'm using Vaadin 14.4.4 with Gradle 6.3 and Spring Boot.
When I was creating a website in developer's mode everything was working well. Now I switched to productionMode = true and website doesn't load a single css file.
I'm trying to use one css file per class.
After switching back to developer's mode the CSS formatting is not working as it used to.
I tried vaadinClean, vaadinBuildFrontend and vaadinPrepareFrontend but that doesn't seem to fix my problem...
Do you guys have any suggestions does any of you interfered with the same problem as I ?
From the docs of the gradle plugin for
Vaadin:
./gradlew clean build -Pvaadin.productionMode - will compile Vaadin
in production mode, then packages everything into the war/jar archive.
Automatically calls the vaadinPrepareFrontend and
vaadinBuildFrontend tasks.
Note the explicit passing of -Pvaadin.productionMode. It might seem
a bit counter intuitive to have to pass that explicitly to a task like
vaadinBuildFrontend, which sole purpose usually is to build the
production stage.
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.
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've read a bit about AFrame, and I am very familiar with Node.js. But why does AFrame require Node to run? I tried looking at the index.html in the Aframe boilerplate sample--and it runs just the same in the browser with or without Node running. Is Node really required to be running? What is Node rendering?
Node.js is not required to run A-Frame — it runs in a browser with no expectation that your server use Node vs PHP, or that you use a webserver at all. Are you seeing something that makes it seem like Node would be needed?
However, the aframe-boilerplate starter kit does provide convenience features — used only during development — that rely on Node.js to automatically reload the page when your HTML changes, or deploy to GitHub Pages. These are not requirements for A-Frame itself, and can be ignored if you prefer.
This is a noob question.
I would like to use grunt.js as a build tool for my web project. Can use grunt.js to validate my HTML/CSS files? Do you have an example of such a grunt.js file?
There is another plugin that seems to be updated more often and does not require java. grunt-html-validation. It has a number of options and has been working great for me. You can install and use it like this:
npm install grunt-html-validation --save-dev
Then put something like this in the initconfig of your Gruntfile.js
and this in appropriate places in your Gruntfile.js
grunt.loadNpmTasks('grunt-html-validation');
grunt.registerTask("default", ["validation"]);
There is also a number of useful options including the ability to relax errors based on a regular expression (could be useful for AngularJS for example) and the ability to save a report.
You can use the grunt plugin grunt-html. Beware, you will need Java on your computer to use it. It works well for me.
As of now there seem to be two popular HTML validation plugins:
grunt-html-validation
grunt-html
grunt-html-validation uses the W3C Markup Validation Service and grunt-html uses a local copy of the java-based The Nu HTML Checker.
They both work well and have very similar options so it comes down to whether you want to wait for an external service call or wait for a local java app.