Category: javascript

In our app we listen to the AppState, but even responding immediately and as efficiently as possible in the JS thread, we fail to save the state to disk every time. How are we supposed to get our data saved to disk so a user swiping away from the app quickly won’t result in data loss?

We manage to get all the processing of the state done (which is not much but still work) but that state is never successfully written to the disk. If we just had 2ms that would be plenty, but of course, we apparently don’t have even that much time.

How we listen:

  AppState.addEventListener('change', nextAppState => emit(nextAppState));
  AppState.addEventListener('blur', nextAppState => emit(nextAppState));

I need a function that I could call like this:

myFunction("a.b.c.d.e.f", value)

and that will return me an object like this:

{ a: { b: { c: { d: { e: { f: value } } } } } } 

I started doing this:

function myFunction(obj, o) {
    let results = []
      let sp =obj.split('.')
      const firstProperty = sp.shift()
      results[firstProperty] = {}

      if(sp.length > 0) {
        return myFunction(sp.join("."))
      }
      return results
}

but it isn’t working.

I want to run Vitest tests in a monorepo. I’d like to distinguish between the tests of my different packages when running them, so I used the test.projects array in vitest.config.ts. To avoid listing every package manually, I used the following setup:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    projects: [
      './packages/*',
    ],
  },
})

However, I noticed that Vitest also treated the packages folder, which contains my packages, as a project, causing my tests to run and appear twice.

✓ packages @my-first-package/src/utils/segment.test.ts (12 tests) 4ms
✓ @my-first-package src/utils/segment.test.ts (12 tests) 4ms
✓ packages @my-first-package/src/index.test.ts (2 tests) 46ms
✓ @my-first-package src/index.test.ts (2 tests) 44ms

Note: The order of the tests is not significant.

When I listed my projects manually without the *, it worked correctly.

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    projects: [
      './packages/@my-first-package',
      // ...
    ],
  },
})

✓ @my-first-package src/utils/segment.test.ts (12 tests) 4ms
✓ @my-first-package src/index.test.ts (2 tests) 44ms

Is there a way to make packages/* work properly?

After adding following condition in ‘getrecyclableTypeName’ function

i18n?.language === 'ar' && product?.RecyclableTypeArbic

started getting error

Here is the functional component :

const RenderProductInfo = ({ product, handleCopyId, currentRoute, isEnvelope }) => {
  const { i18n } = useTranslation()
  const isArabic = i18n.language === 'ar'
  const unit = product.UnitOfMeasurement ? product.UnitOfMeasurement : 'T';
  const title = product.Title
    ? product.Title
    : product.TradeDetails && product.TradeDetails.title
      ? product.TradeDetails.title
      : '';
  const value = `${product?.Currency
    ? product?.Currency
    : product?.TradeDetails?.currency
      ? product?.TradeDetails?.currency
      : 'AED'
    } ${Utilities.formatNumberToCurrency(
      product.BidValue
        ? product.BidValue
        : product.TargetPrice
          ? product.TargetPrice
          : 0,
      true,
    )}`;

  const getrecyclableTypeName = () => i18n?.language === 'ar' && product?.RecyclableTypeArbic ? product?.RecyclableTypeArbic : product.TradeDetails
    ? product.TradeDetails.recyclableTypeName
    : Utilities.getKeywordFromId({
      firstKey: 'defaultRecyclableTypes',
      value: product.RecyclableType,
    });

  return (
    <View style={[styles.productInfoContainer]}>
      <Text numberOfLines={1} style={styles.productName}>
        {title}
      </Text>
      {!(
        currentRoute === 'Guest' || currentRoute === 'unVerified'
      ) &&
        (product?.TargetPrice || product?.BidValue) &&
        !isEnvelope ?
        (
          <View style={styles.productHeader}>
            <Text style={styles.productPrice}>
              {value}/{unit}
            </Text>
            {
              product?.TradeId ?
                <TouchableOpacity onPress={handleCopyId ?? undefined}>
                  <Text style={styles.productTrade}>{product?.TradeId}</Text>
                </TouchableOpacity>
                :
                null}
          </View>
        ) : null}

      <View style={styles.productSubInfoContainer}>
        <RecyclableIcon
          height={styles.subProductIcons.height}
          color={styles.subProductIcons.color}
        />
        <Text style={styles.subProductTitle}>{getrecyclableTypeName()}</Text>
        {currentRoute === 'Guest' ||
          currentRoute === 'unVerified' ? <>
          <RowView>
            <BalanceIcon
              height={styles.subProductIcons.height}
              color={styles.subProductIcons.color}
            />
            <Text style={[styles.subProductTitle]}>
              {product.Quantity ? product.Quantity : 0}
              {unit}
            </Text>
          </RowView>
          <RowView>
            <AddressIcon
              height={styles.subProductIcons.height - 3}
              color={styles.subProductIcons.color}
            />
            <Text numberOfLines={1} style={[styles.subProductTitle]}>
              {product.Emirate}
            </Text>
          </RowView>
        </> : null}
      </View>

    </View>
  );
};

I dont understand this behaviour , I have not used any hook conditionally.
Also I tried replacing the function with useState and useEffect like below

const [recyclableTypeName,setRecyclableTypeName]=useState('')

useEffect(()=>{
  if(i18n.language==="ar") setRecyclableTypeName(something)
},[i18n.language])

this resolved the issue but I still not understand where I was wrong.

If you need to provide multilingual typing (e.g., Hindi, Gujarati, Arabic, Chinese) on a webpage, the jQuery IME (Input Method Editor) library from Wikimedia is a great solution.

By default, jQuery IME attaches to an input/textarea and lets the user pick input methods. But if you want to build your own UI — for example, a custom dropdown to switch languages dynamically — you can manage the IME instance directly in JavaScript.

The following solution shows how to:
• Initialize jQuery IME on a hidden input.
• Capture keypress events and apply transliteration.
• Dynamically change languages with a dropdown ().
• Support multiple IMEs (e.g., Hindi Transliteration, Gujarati Transliteration, Arabic Buckwalter, Chinese Pinyin).

$(function() {
    var LANGS = [
        { code: 'system', label: 'Use system input (OS keyboard)', native: true },
        { code: 'en', label: 'English', native: true },
        { code: 'zh', label: '中文 (Chinese) — Pinyin', native: false, imHint: /pinyin|transliteration/i },
        { code: 'gu', label: 'ગુજરાતી (Gujarati) — Transliteration', native: false, imHint: /transliteration/i },
        { code: 'hi', label: 'हिन्दी (Hindi) — Transliteration', native: false, imHint: /transliteration|inscript/i },
        { code: 'ar', label: 'العربية (Arabic) — Buckwalter', native: false, imHint: /buckwalter|transliteration/i }
    ];

    var currentLangCode = 'en';
    var currentLangObj = LANGS.find(l => l.code === currentLangCode);

    var $selector = $('#language').empty();
    LANGS.forEach(function(L) {
        $selector.append($('<option>', { value: L.code, text: L.label }));
    });

    // Hidden element to initialize IME
    var $el = $('<input type="text" style="position:absolute;left:-9999px;">');
    if (!$el.data('ime')) {
        $el.ime({ showSelector: false, imePath: './' });
    }
    var imeInstance = $el.data('ime');

    // Default: Hindi IME
    imeInstance.setLanguage('hi');
    imeInstance.setIM('hi-transliteration');

    // Capture keypress
    $(document).on('keypress', function(e) {
        var altGr = false, c, input, replacement;
        var $target = $(e.target);

        if (!imeInstance.inputmethod) return true;

        if (e.which === 8) { // Backspace
            imeInstance.context = '';
            return true;
        }

        if (e.altKey || e.altGraphKey) altGr = true;

        if ((e.which < 32 && e.which !== 13 && !altGr) || e.ctrlKey || e.metaKey) {
            imeInstance.context = '';
            return true;
        }

        c = String.fromCharCode(e.which);
        var element = imeInstance.$element.get(0);

        input = $target.val().slice(
            Math.max(0, element.selectionStart - imeInstance.inputmethod.maxKeyLength),
            $target[0].selectionStart
        );

        replacement = imeInstance.transliterate(input + c, imeInstance.context, altGr);

        imeInstance.context = (imeInstance.context || '') + c;
        if (imeInstance.context.length > imeInstance.inputmethod.contextLength) {
            imeInstance.context = imeInstance.context.slice(
                imeInstance.context.length - imeInstance.inputmethod.contextLength
            );
        }

        if (replacement.noop) return true;

        if (document.activeElement === $target[0]) {
            var start = $target[0].selectionStart - input.length;
            var end = $target[0].selectionEnd;
            $target.val(
                $target.val().slice(0, start) +
                replacement.output +
                $target.val().slice(end)
            );
            $target[0].selectionStart = $target[0].selectionEnd = start + replacement.output.length;
        }

        e.stopPropagation();
        e.preventDefault();
        return false;
    });

    // Language change handler
    $selector.on('change', function() {
        currentLangCode = $(this).val();
        currentLangObj = LANGS.find(l => l.code === currentLangCode);

        // Update IME instance
        imeInstance.setLanguage(currentLangCode);
        imeInstance.setIM(currentLangCode + '-transliteration');

        $(':focus').trigger('focusin');
    });

    
    $selector.val('en').trigger('change');
});

I use EJS to connect repeating parts of page structure. Can you tell me if it is possible to add tags to pages using this or another method?

I understand that you can make a nested object with page keys and tag parameters. But this is not a universal method.

Now I have this code:

import {defineConfig} from "vite";
import {resolve} from "path";
import {ViteEjsPlugin} from "vite-plugin-ejs";

export default defineConfig({
    plugins: [
        ViteEjsPlugin(),
    ],
    build: {
        rollupOptions: {
            input: {
                main: resolve(__dirname, "index.html"),
                order: resolve(__dirname, "order.html"),
                notFound: resolve(__dirname, "404.html"),
                about: resolve(__dirname, "about.html"),
                deliveryPayment: resolve(__dirname, "delivery_payment.html"),
                faq: resolve(__dirname, "faq.html"),
                paymentError: resolve(__dirname, "payment_error.html"),
                successfulPayment: resolve(__dirname, "successful_payment.html"),
                contacts: resolve(__dirname, "contacts.html"),
                corporateInformation: resolve(__dirname, "corporate_information.html"),
                searchError: resolve(__dirname, "search_error.html"),
            },
        },
    },
});

<%- include("src/templates/menu.ejs") %>
<%- include("src/templates/order-call.ejs") %>
<%- include("src/templates/cart.ejs") %>
<%- include("src/templates/header.ejs") %>

I am planning to build a Google Workspace add-on. However, I am not fond of their CardService that isn’t very flexible. I would like to make a more visually appealing interface of my own, using HTML, JS, CSS.

I know the Editor add-ons lets you do that, but it is the former framework and comes with many limitations.

Is their a way to inject HTML/JS content using the CardService to be able to build custom interfaces?

I used the styled-components to style react-big-calendar and I need to pass classes to each part I need with a different name instead of passing a generic class to the styled component’s attrs. How can I do this?
here is my sample code

Div = styled.div.attrs(() => ({
    className: "rbc-my-header",
  })) < {
    "calendar": any,
    "offRange": any,
    "offRangeBG": any,
    "header": any,

  } >
  `
          .rbc-calendar {
            background-color: transparent;
            ${({calendar}) => calendar};
            ${({calendar}) => `className: $ { calendar.classes}`};
          }

          .rbc-off-range {
            background-color: transparent;
            opacity: 0.5;
            ${({offRange}) => offRange};
          }

          .rbc-off-range-bg {
            ${({offRangeBG}) => offRangeBG};
          }

          .rbc-header {
            background-color: transparent;
            ${({header}) => header};
          }

        `

i need to pass somthing like this

               .rbc-calendar {
                background-color: transparent;
                ${({calendar}) => calendar};
                ***className --> name of specific class***
              }
.
.
.

              .rbc-header {
                background-color: transparent;
                ${({header}) => header};
                ***className --> name of specific class***
              }

I’m trying to add cdn-cookieyes policy to a specific page on Next.js project, but no luck achieving that following the doc instructions.
When I add the script tag to the app.js above the main <main> tag inside the <html> tag the script content ‘the policy content’ is displaying in every page at the bottom.

When I add the script tag in cookies-policy.js page only , the content is shown only when I hard refresh the page and it’s being inserted outside the container div.

If I use the HTML generated policy then every time I do the scan I need to update it manually.

I have a webapp running in (embedded) Jetty 12 web container.

I surf (tested with Firefox and Chrome) to the home page http://localhost:8080 that queries an endpoint servlet for JSON data and displays it to the console. The home page is behind a login form page.

The issue is as if the login form page redirected to the endpoint page instead of staying on the home page upon successful authentication.

Steps to reproduce the issue (not systematically but issue shows up consistently at the end):

• launch ./start.sh in a terminal

• surf to http://localhost:8080

• login with the foo:bar credential (foo login, bar password)

• open the browser console (and leave it open) and check that endpoint data is displayed at least once in the browser console

• shutdown the webapp (i.e. CTRL-C in the terminal, there will be network errors in the browser console)

• relaunch the webapp with ./start.sh in the terminal

• check that JSON parsing errors appear in the browser console

• refresh the browser page (which is the home page which resides at http://localhost:8080)

• log in again

• then (unexpected behavior) the JSON data is displayed fullscreen rather than in the console (the address bar of the browser even displays http://localhost:8080/endpoint)

So the question is: how do I prevent a simple JSON fetch to go fullscreen instead of just to the console?

Many thanks in advance.

Here is the source tree:

• src/main/java/EndpointServlet.java

• src/main/java/MyServlet.java

• src/main/java/WebApp.java

• src/main/webapp/identification.jsp

• src/main/webapp/logout.jsp

• src/main/webapp/WEB-INF/web.xml

• pom.xml

• start.sh

import java.io.IOException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class EndpointServlet extends HttpServlet {
  protected void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException {
    res.setContentType("application/json; charset=UTF-8");
    res.getWriter().append("{ "key": 123456789 }");
  }
}

import java.io.IOException;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

public class MyServlet extends HttpServlet {
  protected void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException {
    res.getWriter().append("""
<!DOCTYPE html>
<html>
<head>
<script>
const url = "/endpoint";

async function f() {
  const response = await fetch(url, { method: "GET" });
  const data = await response.json();
  console.log(data);
}

setInterval(function() { f() }, 5000); // fetch JSON data from /endpoint every 5s
</script>
</head>
<body>Hello, web!</body>
</html>
""");
  }
}

import org.eclipse.jetty.server.Server;
import org.eclipse.jetty.security.HashLoginService;
import org.eclipse.jetty.security.UserStore;
import org.eclipse.jetty.ee10.webapp.WebAppContext;
import org.eclipse.jetty.util.security.Credential;

public class WebApp {
  public static void main(String[] args) throws Exception {
    Server server = new Server(8080);
    WebAppContext context = new WebAppContext();
    context.setContextPath("/");
    context.setWar(args[0]);
    HashLoginService loginService =
      new HashLoginService("Form-based user authentification realm");
    UserStore userStore = new UserStore();
    userStore.addUser("foo", Credential.getCredential("bar"), new String[] { "admin" });
    loginService.setUserStore(userStore);
    server.addBean(loginService);
    server.setHandler(context);
    server.start();
    server.join();
  }
}

identification.jsp:

<html>
<body>

<form method="POST" action="j_security_check" name="loginForm">
<input type="text" name="j_username" id="j_username" />
<input type="password" name="j_password" id="j_password" />
<input name="submit" type="submit" value="Connection" />
</form>

</body>
</html>

logout.jsp:

<%
request.getSession().invalidate();
%>

web.xml:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_6_0.xsd"
  version="6.0">

<servlet>
  <servlet-name>LoginServlet</servlet-name>
  <jsp-file>/identification.jsp</jsp-file>
</servlet>
<servlet-mapping>
  <servlet-name>LoginServlet</servlet-name>
  <url-pattern>/identification</url-pattern>
</servlet-mapping>

<servlet>
  <servlet-name>LogoutServlet</servlet-name>
  <jsp-file>/logout.jsp</jsp-file>
</servlet>
<servlet-mapping>
  <servlet-name>LogoutServlet</servlet-name>
  <url-pattern>/logout</url-pattern>
</servlet-mapping>

<servlet>
  <servlet-name>MyServlet</servlet-name>
  <servlet-class>MyServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>MyServlet</servlet-name>
  <url-pattern></url-pattern> <!-- empty "" actually means "/" -->
</servlet-mapping>

<servlet>
  <servlet-name>EndpointServlet</servlet-name>
  <servlet-class>EndpointServlet</servlet-class>
</servlet>
<servlet-mapping>
  <servlet-name>EndpointServlet</servlet-name>
  <url-pattern>/endpoint</url-pattern>
</servlet-mapping>

<login-config>
  <realm-name>Form-based user authentification realm</realm-name>
  <auth-method>FORM</auth-method>
  <form-login-config>
    <form-login-page>/identification</form-login-page>
  </form-login-config>
</login-config>

<security-role>
  <role-name>admin</role-name>
</security-role>

<security-constraint>
  <web-resource-collection>
    <url-pattern>/*</url-pattern>
  </web-resource-collection>
  <auth-constraint>
    <role-name>admin</role-name>
  </auth-constraint>
</security-constraint>

</web-app>

pom.xml:

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">

<modelVersion>4.0.0</modelVersion>

<groupId>testproject</groupId>
<artifactId>testproject</artifactId>
<packaging>war</packaging>
<version>1</version>

<name>Test project</name>
<url>http://localhost/</url>

<properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
  <maven.compiler.source>21</maven.compiler.source>
  <maven.compiler.target>21</maven.compiler.target>
  <jetty.version>12.1.0</jetty.version>
</properties>

<build>
  <plugins>

    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-compiler-plugin</artifactId>
      <version>3.3</version>
      <configuration>
        <encoding>UTF-8</encoding>
        <meminitial>256m</meminitial>
        <maxmem>2048m</maxmem>
        <compilerArgs>
          <arg>-Xlint:all</arg>
          <arg>-O</arg>
        </compilerArgs>
      </configuration>
    </plugin>

    <plugin>
      <groupId>org.apache.maven.plugins</groupId>
      <artifactId>maven-war-plugin</artifactId>
      <version>3.4.0</version>
      <!-- manually remove all jars from WEB-INF/lib/ -->
      <configuration>
        <packagingExcludes>WEB-INF/lib/*.jar</packagingExcludes>
      </configuration>
    </plugin>

    <plugin>
      <groupId>org.codehaus.mojo</groupId>
      <artifactId>exec-maven-plugin</artifactId>
      <version>3.5.0</version>
      <executions>
        <execution>
          <id>run the webapp</id>
          <goals>
            <goal>java</goal>
          </goals>
        </execution>
      </executions>
    </plugin>

  </plugins>

</build>

<dependencies>

  <!-- https://mvnrepository.com/artifact/org.eclipse.jetty/jetty-server -->
  <dependency>
    <groupId>org.eclipse.jetty</groupId>
    <artifactId>jetty-server</artifactId>
    <version>${jetty.version}</version>
  </dependency>

  <!-- https://mvnrepository.com/artifact/org.eclipse.jetty/jetty-security -->
  <dependency>
    <groupId>org.eclipse.jetty</groupId>
    <artifactId>jetty-security</artifactId>
    <version>${jetty.version}</version>
  </dependency>

   <!-- https://mvnrepository.com/artifact/org.eclipse.jetty.ee10/jetty-ee10-apache-jsp -->
  <dependency>
    <groupId>org.eclipse.jetty.ee10</groupId>
    <artifactId>jetty-ee10-apache-jsp</artifactId>
    <version>${jetty.version}</version>
    <!-- workaround to remove duplicate logging classes
         see https://stackoverflow.com/questions/63910110/java-util-serviceconfigurationerror-org-apache-juli-logging-log-org-eclipse-je -->
    <classifier>nolog</classifier>
  </dependency>

  <!-- https://mvnrepository.com/artifact/org.eclipse.jetty.ee10/jetty-ee10-annotations -->
  <dependency>
    <groupId>org.eclipse.jetty.ee10</groupId>
    <artifactId>jetty-ee10-annotations</artifactId>
    <version>${jetty.version}</version>
  </dependency>

  <!-- https://mvnrepository.com/artifact/org.eclipse.jetty.ee10/jetty-ee10-servlet -->
  <dependency>
    <groupId>org.eclipse.jetty.ee10</groupId>
    <artifactId>jetty-ee10-servlet</artifactId>
    <version>${jetty.version}</version>
  </dependency>

  <!-- https://mvnrepository.com/artifact/org.eclipse.jetty.ee10/jetty-ee10-webapp -->
  <dependency>
    <groupId>org.eclipse.jetty.ee10</groupId>
    <artifactId>jetty-ee10-webapp</artifactId>
    <version>${jetty.version}</version>
  </dependency>

</dependencies>

</project>

start.sh:

#!/bin/bash
mvn exec:java -Dexec.mainClass=WebApp -Dexec.args="target/testproject-1.war"

I’m making an online choose-your-own-adventure-style novelization of Deltarune, and there are events that only happen if you’ve done something previously (like speak to a character or collect an item). I’m doing this with sessionStorage/localStorage, and it’s working well to display a name the player chooses, but I can’t figure out how to make a section of text appear with this method (though I assume it’s possible).

Basically, if the player selects a certain dialogue option, the value “yesChalk” of key “talkNoelleChalk” will be saved to sessionStorage (this part is not actually implemented yet, but I know how to do it. I’ve been doing this manually with the inspect tool for testing). On another page, I want to automatically run a function when the page loads to check if the player has this value, and if they do, to then show a div containing extra dialogue.

JavaScript:

function showNoelleChalk() {
  const talkNoelleChalk = sessionStorage.getItem("talkNoelleChalk");
  var x = document.getElementById("noelleChalk");
  if (x.style.display === "block" && talkNoelleChalk === "yesChalk") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

HTML div with extra dialogue:

<div id="noelleChalk">
  <p>this is the dialogue</p>
</div>

Running the script:

<body onLoad="showNoelleChalk()">

CSS that should keep the div hidden:

#noelleChalk {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  display: none;
}

I have also tried giving the div a class with display:none;, but that doesn’t seem to work either. I think there’s probably something I’m doing wrong with the script.

Ive tried multiple different versions and tried bug fixing, but i cant figure this out. My game is failing to render anything and it gives this error:

(index):568  Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'mergeGeometries')
    at greedyMesh ((index):568:52)
    at rebuildWorldMesh ((index):617:16)
    at Socket.<anonymous> ((index):777:3)
    at Emitter.emit (index.js:136:20)
    at Socket.emitEvent (socket.js:553:20)
    at Socket.onevent (socket.js:540:18)
    at Socket.onpacket (socket.js:508:22)
    at Emitter.emit (index.js:136:20)
    at manager.js:217:18

Does anyone know how to fix it? heres the github repo and the game link

Ive tried different versions, asking on other platforms, looking at the lines of code individually

I am currently working on an interactive UI in Jupyter Notebook based mainly on IPy Widgets to feature 3D interactive models created and exported previously using Blender. I used an HTML 3D model viewer to show the 3D model (see code below), which works perfectly fine but when I try to publish the Jupyter Notebook e.g. using Voíla it will show everything except for the 3D model (see images attached). Has anyone else encountered this issue or has an idea of how to solve it?

Any hint would be much appreciated, cheers!

JupyterNotebook before publishing with 3D model shown correctly

JupyterNotebook after publishing with Voila

The HTML model viewer code:

from IPython.display import HTML, Javascript, display

# Load the model-viewer script once
display(Javascript("""
if (!window.modelViewerLoaded) {
    const script = document.createElement('script');
    script.type = 'module';
    script.src = 'https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js';
    document.head.appendChild(script);
    window.modelViewerLoaded = true;
}
"""))

# Define the model viewer display function
def display_model_waterdepth(glb_path):
    return HTML(f"""
    <div class="mv-wrap" style="position: relative; width: 100%; height: 375px;">
      <model-viewer src="{glb_path}" alt="Waterdepth model"
        interaction-prompt="auto" interaction-prompt-threshold="8000"
        disable-default-lighting shadow-intensity="0" shadow-softness="0"
        exposure="0.003" environment-image="neutral" camera-controls 
        background-color="#FDF0F5" camera-orbit="0deg 0deg 7000m" 
        min-camera-orbit="auto auto 1m" max-camera-orbit="auto auto 10000m"
        field-of-view="45deg"
        style="width: 100%; height: 100%; filter: brightness(1.0) contrast(1.3);">
      </model-viewer>

      <div style="position: absolute; bottom: 10px; right: 10px; 
                  display: flex; flex-direction: column; align-items: flex-end; gap: 5px; z-index: 10;">
        <button data-zoomplus style="background-color: #f8f8f8; width: 25px; height: 25px;">+</button>
        <button data-zoomminus style="background-color: #f8f8f8; width: 25px; height: 25px;">-</button>
        <button data-reset style="background-color: #f8f8f8; width: 25px; height: 25px;">⟳</button>
        <button data-focus="1" style="background-color: #f8f8f8; width: 100px; height: 25px;">Neubacher Au</button>
        <button data-focus="2" style="background-color: #f8f8f8; width: 100px; height: 25px;">Ofenloch</button>
      </div>
    </div>

    <script>
    (function() {{
      const root = document.currentScript.previousElementSibling;
      const viewer = root.querySelector('model-viewer');

      root.querySelector('[data-zoomplus]').addEventListener('click', () => {{
        const o = viewer.getCameraOrbit();
        viewer.cameraOrbit = `${{o.theta}}rad ${{o.phi}}rad ${{o.radius * 0.9}}m`;
      }});
      root.querySelector('[data-zoomminus]').addEventListener('click', () => {{
        const o = viewer.getCameraOrbit();
        viewer.cameraOrbit = `${{o.theta}}rad ${{o.phi}}rad ${{o.radius * 1.1}}m`;
      }});
      root.querySelector('[data-reset]').addEventListener('click', () => {{
        viewer.cameraOrbit = "0deg 0deg 7000m";
        viewer.cameraTarget = "auto auto auto";
        viewer.fieldOfView = "45deg";
        viewer.jumpCameraToGoal();
      }});
      root.querySelectorAll('[data-focus]').forEach(btn => {{
        btn.addEventListener('click', () => {{
          const area = btn.getAttribute('data-focus');
          if (area === "1") {{
            viewer.cameraOrbit = "0deg 0deg 2300m";
            viewer.cameraTarget = "-850m 0m -450m";
          }} else {{
            viewer.cameraOrbit = "55deg 0deg 1800m";
            viewer.cameraTarget = "1000m 230m -250m";
          }}
          viewer.jumpCameraToGoal();
        }});
      }});
    }})();
    </script>
    """)

I would like to map from objects that already exist elsewhere in the code, to, say, numbers.

var map = new Map();
var keyObj = {a: "b"};

map.set(keyObj, 3);

Does keyObj now exist twice in memory? Or is only a address to the original keyObj stored in the map?

This are the topic I want to create like an app :

1. AI-Powered Mental Health Companion
2. Sustainable Shopping Scanner
3. Remote Work Productivity Booster
4. Personalized Nutrition Coach
5. AR Home Workout Trainer
6. Local Community Swap Network
7. AI Language Learning Buddy
8. Pet Care Reminder & Vet Finder

I want to create something valuable to people and provide value and I am between the line.

SO I am trying to create something, that can help people and I am still in process