Category: javascript

Category Added in a WPeMatico Campaign

svelte 5 not updating during outro

I am in the middle of a migration from svelte 4 to svelte 5 and I’ve run into an issue.

Previously when there was an update to a variable the component updated in response to it, even if the component was transitioning out.

Now however there are no updates at all.

I’ve created a repl https://svelte.dev/playground/30310dd48fb74fc5a73c229c717a2369?version=5.17.3
that shows the issue.

When the component gets added everything runs like normal. However when the component gets removed there are no more updates being done to it.

It might be unusual to need this, but I do, so is there any way to get that functionality back in svelte 5?

same code in version 4 “works”

https://svelte.dev/playground/30310dd48fb74fc5a73c229c717a2369?version=4.2.2

Error fetching USD/ETH price: Cannot use ‘in’ operator to search for ‘blockIdentifier’ in null

I am making use of starknet.js, and i am making a contract call to Pragmas contract. however running myscript returns the following error:

Connected to: https://starknet-sepolia.public.blastapi.io/rpc/v0_7
Error fetching USD/ETH price: Cannot use 'in' operator to search for 'blockIdentifier' in null

The script in question is as follows:

import { RpcProvider, Contract } from 'starknet';
import fs from 'fs';
import path from 'path';

const contractABIPath = path.resolve('./contractabi.json');
const contractABI = JSON.parse(fs.readFileSync(contractABIPath, 'utf-8'));

console.log(contractABI);

async function fetchUSDToETHPrice() {
  const providers = [
    'https://starknet-sepolia.public.blastapi.io/rpc/v0_7',
    'https://free-rpc.nethermind.io/sepolia-juno/v0_7',
    'https://starknet-mainnet.public.blastapi.io/rpc/v0_7',
    'https://json-rpc.starknet-mainnet.public.lavanet.xyz',
    'https://free-rpc.nethermind.io/mainnet-juno/v0_7',
  ];

  let provider;
  for (const nodeUrl of providers) {
    try {
      provider = new RpcProvider({ nodeUrl });
      console.log(`Connected to: ${nodeUrl}`);
      break;
    } catch (error) {
      console.warn(`Failed to connect to ${nodeUrl}: ${error.message}`);
    }
  }

  if (!provider) {
    throw new Error('Failed to connect to any RPC provider.');
  }

  const contractAddress =
    '0x02a85bd616f912537c50a49a4076db02c00b29b2cdc8a197ce92ed1837fa875b';

  const contract = new Contract(contractABI, contractAddress, provider);

  const baseCurrencyId = '4346947'; // Ensure this ID is correct as per contract's logic
  const quoteCurrencyId = '4543560'; // Ensure this ID is correct as per contract's logic
  const aggregationMode = 'Median'; // Make sure this is a valid option in the contract
  const typeofData = 'price';
  const expirationTimestamp = null; // If no expiration, pass null or use a valid timestamp

  try {
    // Ensure method exists and is callable
    if (!contract.get_data_with_USD_hop) {
      throw new Error(
        'Method get_data_with_USD_hop not found in the contract.'
      );
    }

    const response = await contract.get_data_with_USD_hop(
      baseCurrencyId,
      quoteCurrencyId,
      aggregationMode,
      typeofData,
      expirationTimestamp
    );

    if (!response || response.price == null) {
      throw new Error('Invalid response: price data is missing.');
    }

    const humanReadablePrice = response.price / 1e18;
    console.log(`Price of USD/ETH: ${humanReadablePrice}`);
  } catch (error) {
    console.error('Error fetching USD/ETH price:', error.message);
  }
}

fetchUSDToETHPrice();

I have looked at other questions on SOF but I haven’t had any luck in finding out what is causing the error? My assumption is that i am handling the json incorrectly but that cant be the case because it prints out the js object just fine.

Any criticisms or help would be appreciated.

Adding Entries to SharePoint List Using JavaScript

I am new to the topic of SharePoint access / JavaScript and a bit overwhelmed.
I have a SharePoint list that I would like to fill with entries using JavaScript.
The list only has the title column at the moment

I have a small test script that I would like to extend with an input field, the content of which is then stored in the list.
What do I have to add to it to fill the list?


<body>
    <h1>Das ist Ein Test. Anscheinend hat es geklappt.</h1>
    <button onclick="closePage()">Bestätigen</button>
</body>
<script>
var loc = window.location.href;
const urlParams = new URLSearchParams(loc);
var tableDisplayName = urlParams.get("tableDisplayName");
var tablePathName = urlParams.get("tablePathName");
var id = urlParams.get("id");
var action = urlParams.get("action");
var customFields = null;
if(loc.indexOf("customfields") != -1) {
    customFields = JSON.parse(urlParams.get("customfields"));
}

SP.SOD.executeOrDelayUntilScriptLoaded(retrieveListItems, "sp.js");

function retrieveListItems() {
    alert("Script loaded successfully!"); // Popup-Fenster zum Testen
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 'n' + args.get_stackTrace());
}

function closePage() {
    window.close();
}
</script>

@reduxjs/toolkit – createSelector with parameters

I have a ReactJS app with Redux and a couple of createSelector but some of them I would like to change.

Here are examples of the current selectors:

export const getAppData = createSelector(
  (state: RootState): AppDataState => state[`appData-${getUniquishModuleId()}`],
  (appData: AppDataState): AppDataState => appData,
);

export const getNextPageToRender = createSelector(
  [
    (state: RootState): PageSlug[] =>
      state[`appData-${getUniquishModuleId()}`].pagesToRender,
    (_: RootState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

Now what I would like to do is that getNextPageToRender also makes usage of the getAppData selector.

I have tried:

export const getNextPageToRender = createSelector(
  getAppData,
  [
    (appData: AppDataState): PageSlug[] =>
      getContextRelatedAppData(appData).pagesToRender,
    (_: AppDataState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

And I also tried:

export const getNextPageToRender = createSelector(
  [
    getAppData,
    (appData: AppDataState): PageSlug[] =>
      getContextRelatedAppData(appData).pagesToRender,
    (_: AppDataState, currentPageSlug: PageSlug): PageSlug => currentPageSlug,
  ],
  (pagesToRender: PageSlug[], currentPageSlug: PageSlug): PageSlug => {
    const currentPageIndex: number = pagesToRender.findIndex(
      (page: PageSlug) => page === currentPageSlug
    );
    return pagesToRender[currentPageIndex + 1];
  },
);

But this syntax does not seem to work.

Can someone help? What am I doing wrong?

Content Security Policy website is blocked loading contents

I wanted to load a website like enter link description here, is there a way to skip the security policy in the chrome browser and make it load properly as this web page developer hasn’t fixed the issue for a long time.

I am also curious to know how to overcome these kinds of issues as an end user.

Thank you in advance for the solution.

i have tried to load it by disabling the javascript from dev tool but didnt work, expecting some one to assist in it.

AR.JS – Multiple markers not working correctly

I am working on an AR.JS project and need to display different 3D models, each with their own custom markers.

I have setup multiple markers with custom patterns and different 3D objects, however both patterns display the same 3D model when configured.

I would expect it to show different 3D models for each pattern.

<!DOCTYPE html>
<html>
  <head>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="style.css" />
  </head>
  <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body>
    <div class="scanlines">
      <div class="glitch-container">
        <p class="glitch">
          <span aria-hidden="true"
            >Four truths linger, unseen by mortal eyes.</span
          >
          Four truths linger, unseen by mortal eyes.
          <span aria-hidden="true"
            >Four truths linger, unseen by mortal eyes.</span
          >
        </p>
      </div>
      <a-scene embedded arjs="debugUIEnabled: true" vr-mode-ui="enabled: false">
        <a-marker
          preset="custom"
          type="pattern"
          url="patterns/pattern-01000110.patt"
        >
          <a-entity
            position="0 0 0"
            scale="0.01 0.01 0.01"
            gltf-model="models/chimpanzee/scene.gltf"
          ></a-entity>
        </a-marker>
        <a-marker
          preset="custom"
          type="pattern"
          url="patterns/pattern-01000101.patt"
        >
          <a-entity
            position="0 0 0"
            scale="0.01 0.01 0.01"
            gltf-model="models/future/scene.gltf"
          ></a-entity>
        </a-marker>
        <a-entity camera></a-entity>
      </a-scene>
    </div>
  </body>
</html>

Help would be appreciated, thanks.

Waiting for an object to be defined before returning it

Hi I am calling this function to return the datalayer node called “browseResults” but when this code runs the node is not present yet, can someone please help me to edit the code so that it wait for “browseResults” node to be defined and once defined then only return the node.

this.getBrowseResults = function() {
   return this.dataLayer.browseResults;}



 function recordBrowseResultsView(model, dataLayerHelper) {
                        var browseResults = dataLayerHelper.getBrowseResults() || {};
                        var products = [];
                        try {
                            var browseResultsItems = browseResults.items || [];
                            for (var i = 0; i < browseResultsItems.length; i++) {
                                var item = browseResults.items[i];
                                if (item.type === 'Giftcard') {
                                    item.model.tileType = 'Giftcard';
                                    products.push(item.model);
                                }
                            }
                        } catch (e) {
                            console.log("utag.js error", e);
                        }
                        browseResults.products = products;
                    }

Validation not updating in custom form controls using Angular’s Control Value Accessor

I built a shared input component in Angular using Control Value Accessor interface. The input itself works but validation doesn’t get updated when I change the value within the input. Here is the input component I created.

import { Component, forwardRef, Input, OnInit } from '@angular/core';
import {
  AbstractControl,
  ControlValueAccessor,
  FormsModule,
  NG_VALIDATORS,
  NG_VALUE_ACCESSOR,
  ValidationErrors,
  Validator,
} from '@angular/forms';

@Component({
  selector: 'app-input',
  standalone: true,
  imports: [FormsModule],
  templateUrl: './input.component.html',
  styleUrl: './input.component.scss',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true,
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => InputComponent),
      multi: true,
    },
  ],
})
export class InputComponent implements ControlValueAccessor, Validator {
  @Input() value: string = '';
  @Input() type: string = 'text';
  @Input() placeholder: string = '';
  @Input() disabled: boolean = false;
  @Input() label: string = '';
  // default to a random id unless one is provided.
  @Input() id: string = '';

  isInvalid: boolean = false;
  touched: boolean = false;

  onChange = (value: string) => {};
  onTouched = () => {};
  onValidationChange = () => {};
  errorMessage: string = '';

  writeValue(value: string): void {
    this.value = value;
  }

  registerOnChange(onChange: any): void {
    this.onChange = onChange;
  }

  registerOnTouched(onTouched: any): void {
    this.onTouched = onTouched;
  }

  setDisabledState(isDisabled: boolean): void {
    this.disabled = isDisabled;
  }

  onInputChange($event: Event) {
    const input = $event.target as HTMLInputElement;
    this.value = input.value;
    this.onChange(this.value);
    this.markAsTouched();
    this.onValidationChange();
  }

  markAsTouched() {
    if (!this.touched) {
      this.onTouched();
      this.touched = true;
    }
  }

  validate(control: AbstractControl): ValidationErrors | null {
    this.errorMessage = this.getErrorMessage(control.errors);
    return control.errors;
  }

  registerOnValidatorChange(onValidationChange: () => void): void {
    this.onValidationChange = onValidationChange;
  }

  private getErrorMessage(errors: ValidationErrors | null): string {
    if (!this.touched || !errors) {
      return '';
    }
    if (errors['required']) {
      return 'This field is required';
    }
    if (errors['minLength']) {
      return `Minimum length is ${errors['minLength'].requiredLength}.`;
    }

    return '';
  }
}

When I log the control.errors within the validate method, it still shows that the required validation still has an error.

I have a sample angular project showing this issue here:

https://stackblitz.com/edit/stackblitz-starters-fy4zue?file=src%2Finput%2Finput.component.ts

Things I have tried:

  • I changed [(ngModel)] two way binding and (ngModelChanges) listener to just a simple [value] and (input) listener but that did not help.
  • I registered the onValidationChange method but that did not work.

Is there anything I am doing wrong, or something that I forgot to add, or is this an actual angular bug?

Is there a `resolveActivity()` equivalent for opening applications from browser?

I am aware that there is an intent.resolveActivity(...) method in android that checks if the intent can be handled by the device.
I am trying to open an app using the browser that will send an intent url of the form intent://example#Intent;scheme=foo;end is there any way to check this in a browser window using javascript/typescript

I am opening the intent using the window.open call but it seems the return value of the call only depends on whether a new window was opened or not and not if the url was correct or not,
If the app is not installed on the device, then I get a net::ERR_UNKNOWN_URL_SCHEME error in the browser window which I don’t want, the App not found should be shown on the website itself

Thanks in advance.

How to handle calling external API with large data in Nodejs?

In frontend I am using React Js and in Backend I am using Node Js.
So in frontend I call an API <api_base_url>/v1/translate and pass down request params like { translate_ids: [1,2,3,4,5, ... 100000] } and in Node JS I receive the params and translate like,

exports.translateSelectedString = async (req, res) => {
    try {
        const { translate_ids } = req.body;
        const records = await models.translate.findAll({ attributes: ["str_value"], where: { id: translate_ids } });
        const translations = await Promise.all(records.map(async (record) => {
            await getTranslationTextFromTranslateApi(record.str_value, 'eng', 'fra');
        }));
        return res.status(200).json({ status: "success", data: translations });
    }
    catch (exception) {
        return res.status(500).json({ status: "failure", message: exception.message });
    }
};​

Here getTranslationTextFromTranslateApi​ is function which calls another url which actually translate the actual text received and the function looks like,

async function getTranslationTextFromTranslateApi(text, fromLanguage, toLanguage) {
    try {
        let url = `https://<translate_api_end_point>/v1/TranslateText/direction=${fromLanguage}-${toLanguage}?outputFormat=json`;
        let response = await axios.post(url, text, { headers: headers });
    } catch (error) {
        console.error('An error occurred while processing your request:', error.response ? error.response.data : error.message);
    }
}

So this cause performance issue because I pass 100000 ( 100 thousand ids) and using model I check for the related text to be translated and pass down the text with fromLanguage and targetLanguage to another translation api which translates each text. So for fewer records like 10 or 20 records it is working fine but for this 100 thousand data it is causing performance issue like the API request is getting timeout.
How can I overcome this performance issue of handling more records which has been sent to the external API?

Here for translation API, I am referring https://www.reverso.net/text-translation

obs-websocket-js fails to connect through ngrok sometimes due to error 1006

I’m using obs-websocket-js in a Tampermonkey userscript. This is more or less how it’s defined, as minimal reproducible example:

let webSocketUrl = 'wss://link.to.ngrok.free.endpoint';
let websocketPassword = 'something';
const obs = new OBSWebSocket();

await connectToOBS();

async function connectToOBS() {
  try {
    await obs.connect(webSocketURL, webSocketPassword);
  } catch (error) {
    console.error(`Failed to connect to OBS: ${error.message || error.code}`);
  }
}

With that code I had 1006 errors quite often when refreshing a page with the script or going back in history. My reconnection mechanism also couldn’t reconnect. So I expected the problem to be with hanging sessions, which OBS terminates too late and causes some connection conflicts. It turned out to be right as adding:

window.addEventListener('beforeunload', async () => {
  await obs.disconnect;
});

to the script almost got rid of the error. The problem is that it still appears very rarely.

What could other possible causes be? I suspected the disconnect erroring, but when debugging that it always closed the connection successfully. Any other ideas?

One more note is that there’s nothing listen in the OBS websocket window when the fails happen, which would indicate there’s in fact no session conflict anymore. It’d likely help to know what the 1006 is, but couldn’t find how to get more debugging info about it.

Traversing all paths except the ones prior to given start node in a graph structure

I am trying to traverse a graph where nodes are arranged from left to right (so are the links between nodes. Always flows from left to right).

Here’s a visualization of the graph:

enter image description here

Given any node in-between in the graph, I want to traverse the remaining nodes in the graph starting with that node including the paths that lead to any of the subsequent nodes.

The start node can contain only a single incoming. However, the subsequent nodes to start nodes can have multiple incoming links.

The graph has a nodes array where each node has the following format:

{
  "id": 123
}

Each link is of the following format:

{
  "id": 111,
  "left": {
    "id": 123,
  },
  "right": {
    "id": 234,
  }, 
}

Here’s my code so far:

traverseDownstream(graph, startNode) {
    const links = graph.links;
    const linksToUpdate = links.filter(link => link.left.id === startNode.id);
    linksToUpdate.forEach(link => {
      const rightNode = graph.nodes.find(
        node => node.id === link.right.id
      );
      if (rightNode) {
        rightNode.traversed = true;
        this.traverseDownstream(graph, rightNode);
      }
    });
  }

The code traverses through all the right nodes, but the issue is that, when I add a logic for traversing the left as well, I experience call stack exceeded errors. How can I do this traversal???

Old school Recursive Angluar 19

I have a recursive javascript (my brain-fried logic ) that I am using in angular 19 to pull data from Youtube. The script is working except that I am wondering that should be a better way to do it since this is my old schooljavascript.
Thank you for any suggestion.

public getSeriesList() {
  this.record.webTubeSeries = [];
  this._seqNum = 0;
  this.getUrlYouTube()
  .pipe(first())
    .subscribe({
      next: (res: any) => {
        this.parseVideoList(res["items"]);
        if (res['nextPageToken']) {
          let repeatGetNextVideoPage = (_token: string) => {
            this.getNextVideoPage(_token)
              .subscribe(
                (result: any) => {
                  this.parseVideoList(result["items"]);
                  if (result["nextPageToken"]) {
                    repeatGetNextVideoPage(result["nextPageToken"]);
                  }
                }
              ),
              (err: any) => {
                console.log("HTTP Error", err.message)
              }
          }
          repeatGetNextVideoPage(res["nextPageToken"]);
        }
      }
    }
  );
}
private getNextVideoPage(_token: string) {
  let url = (this.urlYouTube + this.videoListId + '&pageToken=' + _token);
  return this.http.get(url);
}
private parseVideoList(result: any) {
  for (let v of result) {
    var item = new WebtubeSeries;
    item.videoTitle = v.snippet.title;
    item.videoId = v.snippet.resourceId.videoId;
    if (v.snippet.thumbnails) {
      item.urlThumbNailDefault = v.snippet.thumbnails.default.url;
      item.urlThumbNailMedium = v.snippet.thumbnails.medium.url;
      item.urlThumbNailHigh = v.snippet.thumbnails.high.url;
      item.widthDefault = v.snippet.thumbnails.default.width.toString();
      item.heightDefault = v.snippet.thumbnails.default.height.toString();

      item.widthMedium = v.snippet.thumbnails.medium.width.toString();
      item.heightMedium = v.snippet.thumbnails.medium.height.toString()

      item.widthHigh = v.snippet.thumbnails.high.width.toString()
      item.heightHigh = v.snippet.thumbnails.high.height.toString();
      item.seqNumber = this._seqNum++;
      //item.id = item.seqNumber;
      this.record.webTubeSeries.push(item);
    }
  }
}

Thanks.

Why does my Electron app refresh the entire window when using react-router-dom routes when a save any changes on my react side (renderer)?

I’m developing an Electron app with React and react-router-dom. When I use HashRouter to define routes in my React application and electron, the app refreshes the entire window every time I make and save changes on my reactside during development. However, when I remove the routes and directly render components (e.g., <RegisterUserPage />), the app doesnt refresh any time I make changes.
**What I’ve Tried: I used HashRouter for routing **

import { HashRouter as Router, Routes, Route } from "react-router-dom";
export default function App() {
return (
    <Router>
        <Routes>
            <Route path="/" element={<RegisterUserPage />} />
            <Route path="/dashboard" element={<DashboardPage />} />
        </Routes>
    </Router>
);
}

Configured the main.js file to load the correct entry point

mainWindow.loadURL(MAIN_WINDOW_WEBPACK_ENTRY + "#/");

My Observation

  1. Using <HashRouter> with routes (e.g., /dashboard) causes the entire
    Electron window to reload during development.
  2. Rendering a single component (e.g., <RegisterUserPage />) without
    routing works perfectly without refreshing the entire app.

I am having Issues installing node packages like bcrypt,multer,cloudinary and multer-storage-cloudinary

Each time i try install the following packages multer-storage-cloudinary,bcrypt, cloudinary i get the error below : i have tried uninstalling node and cleaning caches but none is workinenter image description here
PS C:UsersUserDocumentsCommerceApiapi> npm install –save multer-storage-cloudinary
npm warn deprecated [email protected]: You or someone you depend on is using Q, the JavaScript Promise library that gave JavaScript developers
strong feelings about promises. They can almost certainly migrate to the native JavaScript promise now. Thank you literally everyone
for joining me in this bet against the odds. Be excellent to each other.
npm warn deprecated
npm warn deprecated (For a CapTP with native promises, see @endo/eventual-send and @endo/captp)
npm error code ERR_INVALID_ARG_TYPE
npm error The “file” argument must be of type string. Received undefined
npm error A complete log of this run can be found in: C:UsersUserAppDataLocalnpm-cache_logs2025-01-10T03_36_27_845Z-debug-0.log