Develop Reference

Why does my D3 code break when I set the script type to module?

I am working on a project built with Javascrpt, jQuery, and Vite.js. My colleague built a data visualization using D3 - a US states map - that I need to implement in the project on a specific page. They built the component using test data, my job is basically to load the component onto a page passing it actual returned data from an API call.
Everything in the test project works perfectly, but when I tried to implement this code into a script file in the project - literally copying and pasting from the working version - I got an error saying certain properties could not be read. After failing to debug for sometime, I randomly tried removing type="module" from the script tag link in HTML, and boom, everything worked. Does anyone have an idea of why this would be? I cannot get this code to run when the script type is set to module, except I need the script type to be set to module since I'm importing lots of components for other aspects of the page.
With the way the CodePen is set up, I couldn't replicate the issue since the HTML and JS files are automatically linked. But if you copy this code into your editor, and then in the html, set the the JS file to a module ` You'll see the issue.
Thanks. I'm at a total loss for what to do here. I could put all the D3 code in it's own script file, but then I have no way pass it variables from other files if it's not a module.

Per the comments, the following lines in my original code were not working in strict mode:
this.uStates = uStates;
this.uStatePaths = uStatePaths;
The fix was simple, I just needed to write the following instead:
window.uStates = uStates;
window.uStatePaths = uStatePaths;

How to upload and convert XLSX file to JSON using ember.js

I am trying to allow the user to upload an XLSX file to be converted to a JSON or CSV file to be parsed through on the back-end. I am using node.js, and tried several packages including the read-excel-file
(https://github.com/catamphetamine/read-excel-file/blob/master/README.md)
readXlsxFile(file).then(function(data) {
let jsondata = JSON.parse(data);
-do something with jsondata-
});

The usual place to look for add-ons would be Ember Observer but the options available seem have a status of Work In Progress - they might be a useful place to look though to get some inspiration for how to proceed.
There are plenty of options on npm. You can import one of those into your project using the new add-on ember-auto-import or, if you'd rather do the hard work yourself, the Ember guides provide some guidance on manually importing.

You can use js-xlsx. Add it as bower dependecy and add its imports to your ember-cli-build file as:
app.import('bower_components/js-xlsx/dist/jszip.js');
app.import('bower_components/js-xlsx/dist/xlsx.min.js');
Handle it as the documentation's parsing-workbooks section shows. (handleFile function is explaining it well.)

How to get LanguageModel JS File?

I have been using PocketSphinx.js for speech recognition on my website. I have Downloaded language model file (.dmp). But their code uses JS file for Language model. I dont know where to get JS file. Help me out. Thanks.

As per documentation, you can convert dmp file to js and load it afterwards, see the section https://github.com/syl22-00/pocketsphinx.js/#i-embedding-the-files-into-one-large-javascript-file. Something like
$ cmake -DEMSCRIPTEN=1 -DCMAKE_TOOLCHAIN_FILE=path_to_emscripten/cmake/Modules/Platform/Emscripten.cmake -LM_BASE=/lm/dmp/folder/name -LM_FILES=model.dmp ..
Also check an alternative section https://github.com/syl22-00/pocketsphinx.js#ii-package-model-files-outside-the-main-javascript where you can do:
# python .../emscripten/tools/file_packager.py .../pocketsphinx.js/build/pocketsphinx.js --embed model.dmp --js-output=model.dmp.js
Overall, you need smaller models, big models from CMUSPHINX downloads are too large

Including an external javascript library in pebble js file?

Is there any way I can include an external JS library in my pebble code?
Conventionally on a webpage I would do this in my head tags:
<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.11/firebase.js'></script>
But in pebble, I am unable to do that since I am only using JS. So how can I include an external library for a JavaScript file.

At present, you cannot include external JS files.
If you're using CloudPebble, then the only way to do this is to copy and paste the content of the JS library files into your JS file.
If you're doing native development, you can modify the wscript file to combine multiple JS files into one at build time.

I think there's some confusion over Pebble.js vs PebbleKit JS (v3.8.1). Pebble.js is a fledgling SDK where eventually the programmer will be able to write pure JavaScript. It's still cooking so there's some functionality missing like the ability to draw a line or obtain the screen dimensions. The repo is a mix of C and JS sources where you can add C code to augment missing functionality but otherwise all your code lives in src/js/app.js or src/js/app/. Anyway, Pebble.js does support require.
I don't use CloudPebble but I got the impression that it either supports Pebble.js (and hence require) or is planning to. I think all this SDK boilerplate code would be hidden.
PebbleKit JS does not support require out of the box AFAIK. I've made a demo that ports require support from Pebble.js to PKJS. The summary of changes is:
Move your project's src/js/pebble-js-app.js to src/js/app/index.js.
Remove any ready event listener from src/js/app/index.js. index.js will
be loaded when the ready event is emitted.
Add src/js/loader.js from Pebble.js.
Add a src/js/main.js that calls require('src/js/app') on the ready event.
Update your wscript with the following
deltas.
When adding new modules, place them under src/js/app/ and require('./name') will work.
I've tried to cover this all in the demo's readme.
BTW, here's the official breakdown of all the different SDKs but it's a little confusing.

I am not sure if there have been changes since the above answer, but it looks like there is in fact a way to include additional resources while keeping things tidy. On the pebbleJS page, there is the following section with an some information on the subject.
GLOBAL NAMESPACE - require(path)
Loads another JavaScript file allowing you to write a multi-file project. Package loading loosely follows the CommonJS format. path is the path to the dependency.
You can then use the following code to "require" a JS library in your pebble project. This should be usable on both Cloud Pebble as well as native development.
// src/js/dependency.js
var dep = require('dependency');
You can then use this as shown below:
dep.myFunction(); // run a function from the dependency
dep.myVar = 2; // access or change variables
Update:
After some digging into this for my own, I have successfully gotten CloudPebble to work with this functionality. It is a bit convoluted, but follows the ECMAScript 6 standards. Below I am posting a simple example of getting things set up. Additionally, I would suggest looking at this code from PebbleJS for a better reference of a complex setup.
myApp.js
var resource = require('myExtraFile'); // require additional library
console.log(resource.value); // logs 42
resource.functionA(); // logs "This is working now"
myExtraFile.js
var myExtraFile = { // create a JSON object to export
"value" : 42, // variable
functionA : function() { // function
console.log("This is working now!");
}
};
this.exports = myExtraFile; // export this function for
// later use

Uncaught TypeError with Handlebars.js

I am using Handlebars.js with precompiled templates. I have the following code (using JQuery in the first line):
$('#'+id).append('<script src="'+widgetContext.templateDir+
template+'.tmpl">');
console.log(Handlebars);
console.log(Handlebars.templates);
var html = Handlebars.templates[template](data);
I get the following at the console:
The 'widget_container' template file definitely exists in the location specified. I've also tried with both the standard handelbars.js and handelbars.runtime.js.
Any idea what is going on here or how to fix the error?
Update: it appears to work if the HTML is on the same domain as the javascript file and templates but not if it isn't, so something to do with the same origin policy? I'm trying the handlebars require.js plugin here https://github.com/SlexAxton/require-handlebars-plugin but having problems getting it working.

I solved this using:
The text plugin for require.js and loading the handlebars templates as text files
The optimizeAllPluginResources build option for r.js
Getting a very recently updated version of require.js/r.js which fixed a bug with the
optimizeAllPluginResources build option
A rather horrible use of eval to run the template file code - would still be nice to avoid this
Still not quite sure exactly what was going on with the undefined Handlebars.templates though.