I'm new to ES6, and I'm struggling to import a notification module "toaster-js" to my "sw-toolbox" (service worker cache API) script.
Specifically I want to alert the end user when a cache download has finished, and my PWA is available for offline browsing.
I can't figure out where to stick
import { Toast } from "toaster-js";
without incurring various syntax errors, mainly "import declarations may only appear at top level of a module" and "Unexpected token {"
If I try loading it through html by declaring <script type="module" [...]>, then the relevant handlers aren't recognized by my sw-toolbox script.
Any pointers would be much appreciated!
Thanks
Related
In my ClojureScript code I am requiring a JavaScript module called seedrandom which is in the node_modules folder, like this:
(ns something.core
(:require ["seedrandom" :as rnd]))
(js/console.log (.quick (rnd "x")))
According to the seedrandom documentation it is intended for both nodejs and the browser, and I've previously included and used it successfully in ClojureScript code via a <script> tag, confirming it works in the browser.
Running this cljs file in lumo on the command line works well and outputs a deterministically random number.
When I try to use this same cljs file in my Reagent frontend project I see the following error:
Compiling build :app to "public/js/app.js" from ["src" "env/dev/cljs"]...
events.js:183
throw er; // Unhandled 'error' event
^
Error: module not found: "crypto" from file /home/chrism/dev/something/node_modules/seedrandom/seedrandom.js
at onresolve (/home/chrism/dev/something/node_modules/#cljs-oss/module-deps/index.js:181:30)
...
Inside seedrandom.js we see the following:
// When in node.js, try using crypto package for autoseeding.
try {
nodecrypto = require('crypto');
} catch (ex) {}
Clearly this code is intended to ignore the built-in nodejs crypto module when running in the browser. The problem, as far as I can tell, is that the ClojureScript compiler does not know that - it sees that require('crypto') and tries to pull it into the compilation phase, but can't find it because it's a nodejs built-in.
Is there some way I can tell the compiler to ignore that particular require? Or can I shim the 'crypto' module somehow? What is the cleanest way to solve this?
Note: I have previously experienced this same issue with JavaScript modules which check for the fs node module. Hope we can find a general solution to use again in future. Thanks!
Relevant versions: [org.clojure/clojurescript "1.10.520"] and [reagent "0.8.1"].
This answer is related, asking a similar question from the perspective of Google Closure, which ClojureScript uses, but I'm looking for an answer I can use specifically with cljs.
I have C+ program that compiles to web assebmbly using the emscripten system. I would like to clean up some things, flush files, etc etc. when he page running the program is closed.
in main there is:
emscripten_set_main_loop_arg(onMainLoopTick, arg, 0, 1);
Currently when the page closes the "process" is simply exited and does not continue after the "loop simulator". I figure I need to get an event from the page that will block the main thread until the C++ code process it and cleans up it's mess.
What event should I forward to C++ and how should I use it ?
The first things to know is that there is no native library nor APIs for WebAssembly (I mean..yet, as of MVP. There are native features like threads coming as post-MVP feature). What is means that all system libraries in C++ are implemented by importing emulated JavaScript functions. So if you are looking for native features like detecting closing events, you should check if there is JS/HTML5 APIs that do the similar things.
To see how it works, open generated .wast file and search for import instructions and generated JS files. Also, you may want to search on Emscripten repo directly to check if there is JS/HTML5 bindings available on C++ side, as their documentation is quite large and hard to look through.
Sticking to the point, the HTML5 events that are fired when closing are beforeunload and unload. I would prefer using beforeunload event. Emscripten provides em_beforeunload_callback callback function type and emscripten_set_beforeunload_callback to register in html5.h bindings.
Otherwise, you use them directly. For example:
In C++:
void EMSCRIPTEN_KEEPALIVE clean_stuff() {
// Clean up the mess...
// You should use EMSCRIPTEN_KEEPALIVE or
// add it to EXPORTED_FUNCTIONS in emcc compilation options
// to make it callable in JS side.
}
In JS:
window.addEventListener("beforeunload", function (event) {
// Exported functions are prefixed by an underscore
Module._clean_stuff();
});
I'm trying to diagnose a problem thats recently arisen for us, after upgrading our suppported browser (~40 -> ~60)
We have this effective code in an external (now unsupported) library, that sits in an iffe:
(function(window, undefined){
# external library
if(!window.terribleIdea){
window.terribleIdea = {}
}
<some code>
if(!window.terribleIdea.config.url){
window.terribleIdea.config.url = 'the wrong url'
}
localStorage.set('somethingImportant', getStuff(window.terribleIdea.config.url))
})( window );
Now we did have a bootstap type file that looked like this:
# appBootstrapper.js
import applyConfig from './app/configApplier';
import ALL_ANGULAR_MODULES from './app'; # contains angular.module set up for
# app and every dependency
fetchConfig()
.then(applyConfig)
.then () => angular.bootstrap(document, [ALL_ANGULAR_MODULES])
.catch( error => {
alert(`It borked: ${error.message}`)
});
Amongst other things applyConfig does:
window.terribleIdea = {
config: {
url: 'not terrible'
}
}
What now happens, is that the import statement of ALL_ANGULAR_MODULES ends up running the code in the external library, and setting local storage. What we think used to happen is that it was only called on angular.bootstrap running.
Now what I need to find out is, has the functionality of the import statement changed in a later version of chrome, or has it always been running this code and gone unnoticed?
All I can find is references to Dynamic Imports, and the order of scripts running, in <script></script> tags.
It is hard to debug without access to the project (see discussion in comments above). Here are some possibilities worth exploring while encountering such issues. It is of course possible that it was like this all along.
Change in the bundler configuration. Webpack accepts entries as arrays, and order matters in them.
Change in the way the bundler/dependency manager reacts to dynamic imports
Change in the way your application loads its dependency during the its bootstrap phase. It is not (imo) angular specific, as many app use some kind of "componentization" which translates in files executed in a different order they are imported (as they may only export constructors or whatnot).
I had a groovy code wich contains "import groovy.json.JsonSlurper".
I have spent a day testing and i dont know how to load external libraries using declarative syntax.
This is my code:
pipeline {
agent any
import groovy.json.JsonSlurper
stages {
stage("test") {
steps {
}
}
}
}
I have read the jenkins documentation, and i have tried to use the next but without success:
#Grab('groovy.json.JsonSlurper')
import groovy.json.JsonSlurper
both import and #Grab is not recognized. Some idea?
Thanks!
What #Daniel Majano says is true about the import syntax, but the #Grab syntax I found holds differences of behavior between a Pipeline script maintained directly in Jenkins vs Pipeline script from SCM.
When I placed a Grab command in the Pipeline script for a tester pipeline job I found that it didn't make any difference whether the Grab command was there or if it was commented out.
However when used from a Pipeline script from SCM it would throw the following exception...
java.lang.RuntimeException: No suitable ClassLoader found for grab
I removed it from the SCM script and everything worked out in the end.
Additional Background
I'm not sure why the grab was choking in the SCM version, but there's definitely some working parts to the groovy editor because if you define a partial grab command it will give you some validation errors pointing to the broken line as you see in the red X box below, with the error The missing attribute "module" is required in #Grab annotations:
Therefore the script validator is aware of the Grab annotation as it calls it and that it has both a group and module attribute. I'm using the so called shorthand notation in this example.
I currently try to use google map API with react js and babel. I don't want to use the existing react components (that are uncomplete).
The problem I encounter is that I can't load the google map object. Babel always show me a compilation error like this one :
error 'google' is not defined
Event if I load the google map script in my index :
<script src="https://maps.googleapis.com/maps/api/js?key=MY_KEY&libraries=places&callback=initAutocomplete" ></script>
I understand that babel doesn't load the google map library at compile time, but try to compile some code lines like this :
var map = new google.maps.Map(document.getElementById('map')...
Is there someone who know how to handle this case ?
Thank you
Install the google maps api npm module and import it into your relevent files. https://www.npmjs.com/package/google-maps