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 correctly connect the module to the Head tag?

There is such a js file that needs to be included in the head tag
After an incorrect (as I understand it) attempt to do this, I get the following result on the LAN:
We can see that firstly there is some kind of error in the head tag.
Also, when trying to load this script at the end of the body tag
(this is done only for the purpose of experiment) - I cannot at least get a connection via an absolute path(__nuxt/.....)
Question:
What am I missing and how can I correctly connect the required js file?

There are several ways to add this kind of 3rd party scripts. You could either use a dedicated Nuxt module, sometimes plugins is also a good solution but if you want to have it directly embedded like this, you can follow my answer here with all the possible variants: https://stackoverflow.com/a/67535277/8816585

TinyMCE MS MVC looking for non-minified file

I have an MS MVC deployment that is looking for a subscript for TinyMCE "theme.js" and not finding it because the file is theme.min.js. How do I get MVC to look for the minified file?
The tinymce file is tinyMCE.min.js, so it is finding that one. Is this a problem with setting TinyMCE or MS MVC?
Long explanation : We are in the process of implementing TinyMCE on a Microsoft MVC page. It was working locally but would not run when deployed to the server. It was failing with a 404, file not found for the file :
PROJECT_ROOT/bundles/themes/modern/theme.js
This was not the location of the theme file it was looking for and after a little research I found out that you needed to set the tinymce.baseURL property. When I did this it helped a little by changing the location in the error to the actual location of the file :
PROJECT_ROOT/Scripts/libs/tinymce/themes/modern/theme.js
The problem is that for some reason it was looking for the un-minified file theme.js and not theme.min.js. If I change the name to theme.js it works.
I thought that MVC and/or TinyMCE would do some magic to get the right name. Is there a setting I need to change?

You need to set tinymce.suffix = '.min'; before you init TinyMCE
tinymce.suffix = '.min';
tinymce.baseURL = '/js/tinymce';
tinymce.init({
selector: '#editor',
menubar: false,
plugins: 'code'
});

TinyMCE should work out to load minified (or non-minified) files based on which TinyMCE file you load (tinymce.js or tinymce.min.js).
Not sure what's happening in your case but that logic appears to be failing.
If you grab the DEV package from https://www.tiny.cloud/get-tiny/self-hosted/ it would come with both the minified and non-minified versions of each file so the editor would find what it needs at runtime.
Note: The code in the minified and non-minified files functions just the same so from a functionality perspective it does not really matter if theme.min.js or theme.js code is loaded. It only add ~200K to the file size so even that is immaterial.

I think I found the solution for this. There is a property you can set in the tinymce object called "suffix" that resolved this for me.
So, for the first part I set a rootURL property in the page calling TinyMCE, and then added the line tinymce.baseURL = rootURL + 'Scripts/libs/tinymce' just before the tinymce.init.
Then, to get it to find the theme.min.js set tinymce.suffix = '.min'
This seems to have resolved the issue. Not sure if this is a hack solution but it is working. If anyone has a better way to do it please let me know.

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

Adding a Kickstrap App on a page basis without extra less file

I am using Kickstrap 1.3.0 and want to add an App in my PHP-View with a method like <?php $this->enableKickstrapApp('myapp'); ?>. This method would put the app name into an apps array and the layout template could generate any code anywhere in the page to active the app.
But I don't know how to load the app. The docs say that I should add a page specific less file. But I don't want to autogenerate such an extra less file (I will do this it there is no better solution). Also an API method loadApp() is mentioned in the API docs. But there seems to be no loadApp in the source code. Also it is not documented how to get the API object (maybe this should be a global method--I couldn't find it). In an maybe outdated doc at GitHub I found the tip to write a pageApps array. But scanning the source code for "pageApps" also had no results.
Is there any way to activate an app dynamically (or in the global ks variable) without an extra less file?

That works:
var ks = {
apps: ['myapp']
}
Must be defined before loading kickstrap.js of course.