Category: javascript

I’d like to ask you if there is another way to call function from a class where this INSTANCE of another class is coming from?

Or do you think my approach is correct?

class App(){
  constructor(){
    this.interface = new Interface();
  }

  refresh(){
  ...refresh app somehow...   
  }
}

class Interface(){
  constructor(){}

  changeInterface(){
    ...change interface somehow...
    this.App.Refresh(); // => I need to call this function from previous class
  }
}

var myGlobalVariable = new App();
    myGlobalVariable.interface.changeInterface();

Only I can think of is to use global variable inside…but than I need to set this variable and use it all the time

var myGlobalVariable = new App();
    myGlobalVariable.interface.changeInterface();

and use it in a Class

class Interface(){
  constructor(){}

  changeInterface(){
    ...change interface...
    myGlobalVariable.App.Refresh(); // => call function from pre set
  }
}

Or maybe my thinking is wrong and I have to change it?

Thanks.

What is the best solution to simplify this condition statement?
Should I use switch statement?

function handleUserRole(title) {
  if (title === 'mr') {
    // logic
  } else if (title === 'ms') {
    // logic
  } else if (title === 'name') {
    // logic
    if (/* some condition */) {
      // logic
    } else {
      // logic
    }
  } else if (title === 'surname') {
    // Guest-specific logic
  } else if (title === 'member') {
    // logic
    if (/* some condition */) {
      // logic
    } else {
      // logic
    }
  } else if (title === 'test') {
    // logic
  } else if (title === 'blank') {
    // logic
  } else {
    // logic
  }
}

I tried switch statement for it but not sure if this is the best solution.

I haven’t changed my firebase functions in a while, yesterday I wanted to create a new firebase function and added it to the top of all my functions, so this are my first lines:

const functions = require('firebase-functions');
const admin = require('firebase-admin');
const uuid = require('uuid');

admin.initializeApp();
const db = admin.firestore();
const storage = admin.storage().bucket();
const app = express();
app.use(cors({ origin: true }));

exports.runPredictionOnUpload = functions.firestore
.document('Project/{projectID}/models/{modelID}/predictions/{docId}')
.onCreate(async (snap, context) => {
const { projectID, modelID, docId } = context.params;
const document = snap.data();

if (!document || !document.data) {
  console.error('Missing data field in the document.');
  await admin.firestore().collection('Project').doc(projectID).collection('models').doc(modelID).collection('predictions').doc(docId).update({
    status: 'error',
    error: 'Data field is missing',
  });
  return;
}

}

The function is not done, yet. But if I now run firebase deploy –only functions, I get the following error:

TypeError: functions.firestore.document is not a function

The problem is that my next cloud functions (which I haven’t changed in months and always used to work) also starts with functions.firestore.document, and so If i remove the new function I get the same error with all of my “old” functions. So now I cannot push updates out anymore or add new functions. Does anyone know what goes wrong?

I am using the Creative Editor of IMG.LY and want to serve the fonts from my application instead of the IMG.LY CDN. My default asset sources configurations looks like this:

instance.addDefaultAssetSources({
  baseURL: '/public/cesdk/assets/',
});

Expected Behavior

I expect the font to be applied directly from the URL specified in addDefaultAssetSources when selected.

Actual Behavior

The font loads from a URL that is appended to the base URL defined in the CreativeEditorSDK configuration.

Steps to Reproduce

If I change the typeface of a text element, all the fonts shown in the selector are loaded from the expected URL:

http://localhost:9000/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_abril_fatface_regular.ttf

However, when I click on a font to apply it to the text element, the font is loaded from:

http://localhost:9000/public/cesdk/engine/public/cesdk/assets//ly.img.typeface/fonts/imgly_font_bungee_inline.ttf

It appears that the base URL of the default asset sources is being appended to the base URL specified in the CreativeEditorSDK config.

An example to reproduce the issue is available here: https://github.com/rtm-celum/imgly-hosted-fonts

Details

I followed these guides

• Integrate Creative Editor
• Fonts & Typefaces

IMG.LY Setup:

import CreativeEditorSDK from '../node_modules/@cesdk/cesdk-js/index.js';

const config = {
  license: 'mtLT-_GJwMhE7LDnO8KKEma7qSuzWuDxiKuQcxHKmz3fjaXWY2lT3o3Z2VdL5twm',
  userId: 'guides-user',
  // Serve assets from IMG.LY cdn or locally
  // baseURL: 'https://cdn.img.ly/packages/imgly/cesdk-js/1.35.1/assets',
  baseURL: '/public/cesdk/engine',
  locale: 'en',
};

CreativeEditorSDK.create('#cesdk_container', config).then(async (instance) => {
  await instance.addDefaultAssetSources({
    baseURL: '/public/cesdk/assets/',
    excludeAssetSourceIds: [
      'ly.img.vectorpath',
      'ly.img.filter.duotone',
      'ly.img.filter.lut',
      'ly.img.sticker',
      'ly.img.image',
      'ly.img.colors.defaultPalette',
      'ly.img.effect',
      'ly.img.blur',
    ],
  });

  const engine = instance.engine;
  const scene = engine.scene.create();
  const page = engine.block.create('page');
  engine.block.appendChild(scene, page);
});

Screenshots

Font Selector

Font Selector – Network Trace

Applying the Font

Applying the Font – Network Trace

My knowledge on JS is close to zero and I’m trying to modifying the answer of this question: Navigating using keys

I’m trying to implement the same in my Shiny app which uses modules, but I cant figure out where I should add the namespace in the code? The code below works, but does not react on the keystrokes.

js <- paste(
  "$(document).on('keydown', function(event){",
  "  var key = event.which;",
  "  if(key === 37){",
  "    Shiny.setInputValue('arrowLeft', true, {priority: 'event'});",
  "  } else if(key === 39){",
  "    Shiny.setInputValue('arrowRight', true, {priority: 'event'});",
  "  }",
  "});"
)

datasets <- list(mtcars, iris, PlantGrowth)

nameUI <- function(id) {
  ns <- NS(id)
  
       tagList(
      tags$head(tags$script(HTML(js))),
      mainPanel(
        titlePanel("Simplified example"),
        tableOutput(ns("cars")),
        actionButton(ns("prevBtn"), icon = icon("arrow-left"), ""),
        actionButton(ns("nextBtn"), icon = icon("arrow-right"), ""),
        verbatimTextOutput(ns("rows"))
      )
    )
  
}

nameServer <- function(id) {
  moduleServer(
    id,
    function(input, output, session) {
      
      output$cars <- renderTable({
        head(dat())
      })
      
      dat <- reactive({
        if (is.null(rv$nr)) {
          d <- mtcars
        }
        else{
          d <- datasets[[rv$nr]]
        }
      })
      
      rv <- reactiveValues(nr = 1)
      
      set_nr <- function(direction) {
        rv$nr <- rv$nr + direction
      }
      
      observeEvent(list(input$nextBtn, input$arrowRight), { 
        set_nr(1)
      })
      
      observeEvent(list(input$prevBtn, input$arrowLeft), { 
        set_nr(-1)
      })
      
      ro <- reactive({
        nrow(dat())
      })
      
      output$rows <- renderPrint({
        print(paste(as.character(ro()), "rows"))
      })
      
      vals <- reactiveValues(needThisForLater = reactive(30 * ro()))
      
    }
  )
}

app <- function() {
  ui <- fluidPage(
    nameUI("clicker")
  )
  server <- function(input, output, session) {
    nameServer("clicker")
  }
  shinyApp(ui, server)  
}

app()

I have been trying to find a solution to implement richer autocompletion for python for quite some time now, and I have not been able to do it yet. I would like to achieve the same autocompletion result as javascript. I thought it should be easy, but I started to come across articles that say that you need to deploy a language server for this purpose. Is there really no simpler way to achieve autocompletion (for example, to display a list of methods for a class created by the user)? I found the following method (which, by the way, does not work quite correctly and, in addition, all the hints must be implemented manually):

import { FC, useEffect } from "react";
import * as monaco from "monaco-editor";

function createDependencyProposals(range) {
  // returning a static list of proposals, not even looking at the prefix (filtering is done by the Monaco editor),
  // here you could do a server side lookup
  return [
    {
      label: "test",
      insertText: "test",
      range: range,
    },
  ];
}

export const MonacoEditorComponent: FC = () => {
  let flag = false;
  useEffect(() => {
    if (!flag) {
      monaco.languages.registerCompletionItemProvider("python", {
        provideCompletionItems: function (model, position) {
          const word = model.getWordUntilPosition(position);
          const range = {
            startLineNumber: position.lineNumber,
            endLineNumber: position.lineNumber,
            startColumn: word.startColumn,
            endColumn: word.endColumn,
          };
          return {
            suggestions: createDependencyProposals(range),
            suggestions: [],
          };
        },
      });

      monaco.editor.create(document.getElementById("container"), {
        value: "def something():ntreturn 5nn",
        language: "python",
      });
    }

    flag = true;
  }, []);
  return <div id="container" style={{ width: 800, height: 400 }}></div>;
};

I have a lightweight html file with a jquery snippet to open a new browser tab with a local/NFS directory or folder path.

This works when I open the html file directly in my browser (edge/chrome)

But when I use a webserver like ‘serve’ (https://www.npmjs.com/package/serve) to host the html page on localhost, the jquery snippet fails and gives me an error – failed to load local resource.

Is there an underlying cross-origin issue due to which this happens?

I’m trying to show a loading indicator when executing a long-running task. The loader should remain visible for the entire duration of the task and then be hidden when the task completes. However, the loader–show class is briefly applied and does not stay visible at all during the execution of the task.

Here’s a simplified version of my code: https://jsfiddle.net/p6ejkdcb/

<button id="test">
Do Something
</button>

<div id="loader" class="loader">
Loading...
</div>

const button = document.getElementById("test");
const loader = document.getElementById("loader");

test.addEventListener("click", (_) => {
  new Promise(function (resolve, reject) {
      console.log("showLoader");
      showLoader();
      resolve();
    })
    .then(function (result) {
      for (let i = 0; i < 500000; i++) {
        console.log("do the work");
      }
      return result;
    })
    .then(function (result) {
      console.log("hide the loader");
      hideLoader();
      return result;
    })
})

function showLoader() {
  loader.classList.add("loader--show");
}
function hideLoader() {
  loader.classList.remove("loader--show");
}

.loader {
  display: none;
  &--show {
    display: block;
  }
}

Expected behaviour:

• The loader should become visible when I click the “Do Something” button.
• It should remain visible while the code inside the promise’s then() method executes.
• Once the task is complete, the loader should be hidden.

Actual behaviour:

• The loader briefly received the loader–show class but does not stay visible during the execution of the loop.

I am using the drizzle auth template and trying to modify it to add Role Based Authentication. So I made some changes to the db.ts to add in the roles

import { drizzle } from 'drizzle-orm/postgres-js';
import { pgTable, serial, varchar } from 'drizzle-orm/pg-core';
import { eq } from 'drizzle-orm';
import postgres from 'postgres';
import { genSaltSync, hashSync } from 'bcrypt-ts';

// Optionally, if not using email/pass login, you can
// use the Drizzle adapter for Auth.js / NextAuth
// https://authjs.dev/reference/adapter/drizzle
let client = postgres(`${process.env.POSTGRES_URL!}?sslmode=require`);
let db = drizzle(client);

export async function getUser(email: string) {
  const users = await ensureTableExists();
  return await db.select().from(users).where(eq(users.email, email));
}

export async function createUser(email: string, password: string, role: string = 'learner') {
  const users = await ensureTableExists();
  let salt = genSaltSync(10);
  let hash = hashSync(password, salt);

  return await db.insert(users).values({ email, password: hash, role });
}

async function ensureTableExists() {
  const result = await client`
    SELECT EXISTS (
      SELECT FROM information_schema.tables 
      WHERE table_schema = 'public' 
      AND table_name = 'User'
    );`;

  if (!result[0].exists) {
    await client`
      CREATE TABLE "User" (
        id SERIAL PRIMARY KEY,
        email VARCHAR(64) UNIQUE NOT NULL,
        password VARCHAR(128) NOT NULL,
        role VARCHAR(20) DEFAULT 'user' NOT NULL
      );`;
  }

  const table = pgTable('User', {
    id: serial('id').primaryKey(),
    email: varchar('email', { length: 64 }),
    password: varchar('password', { length: 128 }),
    role: varchar('role', { length: 20 }),
  });

  return table;
}

However when I try to now update the database for this new column drizzle does not work as I cannot get the CLI to migrate or open the studio.

(base) PS C:UsersuserDocumentsProjectsTemplatingDocuments> npx drizzle-kit migrate
>> npx drizzle-kit push
No config path provided, using default 'drizzle.config.ts'
Reading config file 'C:UsersuserDocumentsProjectsTemplatingDocumentsappdrizzle.config.ts'
Using 'pg' driver for database querying
[⣷] applying migrations...Error: Can't find meta/_journal.json file
    at readMigrationFiles (C:UsersuserDocumentsProjectsTemplatingDocumentsnode_modulessrcmigrator.ts:29:9)
    at migrate (C:UsersuserDocumentsProjectsTemplatingDocumentsnode_modulessrcnode-postgresmigrator.ts:9:21)
    at migrateFn (C:UsersuserDocumentsProjectsTemplatingDocumentsnode_modulesdrizzle-kitbin.cjs:61949:18)
    at Object.handler (C:UsersuserDocumentsProjectsTemplatingDocumentsnode_modulesdrizzle-kitbin.cjs:84856:11)
    at async run (C:UsersuserDocumentsProjectsTemplatingDocumentsnode_modulesdrizzle-kitbin.cjs:83343:7)No config path provided, using default 'drizzle.config.ts'
Reading config file 'C:UsersuserDocumentsProjectsTemplatingDocumentsdrizzle.config.ts'
Using 'pg' driver for database querying
[✓] Pulling schema from database...
C:UsersuserDocumentsProjectsTemplatingDocumentsnode_modulesbcrypt-tsdistnode.mjs:1
import{randomBytes as R}from"node:crypto";const I=16,$=10,B=16,v=100,w="./ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789".split(""),b=Array.from({length:64},(n,r)=>r),d=n=>Array(n).fill(-1),f=[...d(46),0,1,...b.slice(54,64),...d(7),...b.slice(2,28),...d(6),...b.slice(28,54),...d(5)],_=[608135816,2242054355,320440878,57701188,2752067618,698298832,137296536,3964562569,1160258022,953160567,3193202383,887688300,3232508343,3380367581,1065670069,3041331479,2450970073,2306472731],P=[3509652390,2564797868,805139163,3491422135,3101798381,1780907670,3128725573,4046225305,614570311,3012652279,134345442,2240740374,1667834072,1901547113,2757295779,4103290238,227898511,1921955416,1904987480,2182433518,2069144605,3260701109,2620446009,720527379,3318853667,677414384,3393288472,3101374703,2390351024,1614419982,1822297739,2954791486,3608508353,3174124327,2024746970,1432378464,3864339955,2857741204,1464375394,1676153920,1439316330,715854006,3033291828,289532110,2706671279,2087905683,3018724369,1668267050,732546397,1947742710,3462151702,2609353502,2950085171,1814351708,2050118529,680887927,999245976,1800124847,3300911131,1713906067,1641548236,4213287313,1216130144,1575780402,4018429277,3917837745,3693486850,3949271944,596196993,3549867205,258830323,2213823033,772490370,2760122372,1774776394,2652871518,566650946,4142492826,1728879713,2882767088,1783734482,3629395816,2517608232,2874225571,1861159788,326777828,3124490320,2130389656,2716951837,967770486,1724537150,2185432712,2364442137,1164943284,2105845187,998989502,3765401048,2244026483,1075463327,1455516326,1322494562,910128902,469688178,1117454909,936433444,3490320968,3675253459,1240580251,122909385,2157517691,634681816,4142456567,3825094682,3061402683,2540495037,79693498,3249098678,1084186820,1583128258,426386531,1761308591,1047286709,322548459,995290223,1845252383,2603652396,3431023940,2942221577,3202600964,3727903485,1712269319,422464435,3234572375,1170764815,3523960633,3117677531,1434042557,442511882,3600875718,1076654713,1738483198,4213154764,2393238008,3677496056,1014306527,4251020053,793779912,2902807211,842905082,4246964064,1395751752,1040244610,2656851899,3396308128,445077038,3742853595,3577915638,679411651,2892444358,2354009459,1767581616,3150600392,3791627101,3102740896,284835224,4246832056,1258075500,768725851,2589189241,3069724005,3532540348,1274779536,3789419226,2764799539,1660621633,3471099624,4011903706,913787905,3497959166,737222580,2514213453,2928710040,3937242737,1804850592,3499020752,2949064160,2386320175,2390070455,2415321851,4061277028,2290661394,2416832540,1336762016,1754252060,3520065937,3014181293,791618072,3188594551,3933548030,2332172193,3852520463,3043980520,413987798,3465142937,3030929376,4245938359,2093235073,3534596313,375366246,2157278981,2479649556,555357303,3870105701,2008414854,3344188149,4221384143,3956125452,2067696032,3594591187,2921233993,2428461,544322398,577241275,1471733935,610547355,4027169054,1432588573,1507829418,2025931657,3646575487,545086370,48609733,2200306550,1653985193,298326376,1316178497,3007786442,2064951626,458293330,2589141269,3591329599,3164325604,727753846,2179363840,146436021,1461446943,4069977195,705550613,3059967265,3887724982,4281599278,3313849956,1404054877,2845806497,146425753,1854211946,1266315497,3048417604,3681880366,3289982499,290971e4,1235738493,2632868024,2414719590,3970600049,1771706367,1449415276,3266420449,422970021,1963543593,2690192192,3826793022,1062508698,1531092325,1804592342,2583117782,2714934279,4024971509,1294809318,4028980673,1289560198,2221992742,1669523910,35572830,157838143,1052438473,1016535060,1802137761,1753167236,1386275462,3080475397,2857371447,1040679964,2145300060,2390574316,1461121720,2956646967,4031777805,4028374788,33600511,2920084762,1018524850,629373528,3691585981,3515945977,2091462646,2486323059,586499841,988145025,935516892,3367335476,2599673255,2839830854,265290510,3972581182,2759138881,3795373465,1005194799,847297441,406762289,1314163512,1332590856,1866599683,4127851711,750260880,613907577,1450815602,3165620655,3734664991,3650291728,3012275730,3704569646,1427272223,778793252,1343938022,2676280711,2052605720,1946737175,3164576444,3914038668,3967478842,3682934266,1661551462,3294938066,4011595847,840292616,3712170807,616741398,312560963,711312465,1351876610,322626781,1910503582,271666773,2175563734,1594956187,70604529,3617834859,1007753275,1495573769,4069517037,2549218298,2663038764,504708206,2263041392,3941167025,2249088522,1514023603,1998579484,1312622330,694541497,2582060303,2151582166,1382467621,776784248,2618340202,3323268794,2497899128,2784771155,503983604,4076293799,907881277,423175695,432175456,1378068232,4145222326,3954048622,3938656102,3820766613,2793130115,2977904593,26017576,3274890735,3194772133,1700274565,1756076034,4006520079,3677328699,720338349,1533947780,354530856,688349552,3973924725,1637815568,332179504,3949051286,53804574,2852348879,3044236432,1282449977,3583942155,3416972820,4006381244,1617046695,2628476075,3002303598,1686838959,431878346,2686675385,1700445008,1080580658,1009431731,832498133,3223435511,2605976345,2271191193,2516031870,1648197032,4164389018,2548247927,300782431,375919233,238389289,3353747414,2531188641,2019080857,1475708069,455242339,2609103871,448939670,3451063019,1395535956,2413381860,1841049896,1491858159,885456874,4264095073,4001119347,1565136089,3898914787,1108368660,540939232,1173283510,2745871338,3681308437,4207628240,3343053890,4016749493,1699691293,1103962373,3625875870,2256883143,3830138730,1031889488,3479347698,1535977030,4236805024,3251091107,2132092099,1774941330,1199868427,1452454533,157007616,2904115357,342012276,595725824,1480756522,206960106,497939518,591360097,863170706,2375253569,3596610801,1814182875,2094937945,3421402208,1082520231,3463918190,2785509508,435703966,3908032597,1641649973,2842273706,3305899714,1510255612,2148256476,2655287854,3276092548,4258621189,236887753,3681803219,274041037,1734335097,3815195456,3317970021,1899903192,1026095262,4050517792,356393447,2410691914,3873677099,3682840055,3913112168,2491498743,4132185628,2489919796,1091903735,1979897079,3170134830,3567386728,3557303409,857797738,1136121015,1342202287,507115054,2535736646,337727348,3213592640,1301675037,2528481711,1895095763,1721773893,3216771564,62756741,2142006736,835421444,2531993523,1442658625,3659876326,2882144922,676362277,1392781812,170690266,3921047035,1759253602,3611846912,1745797284,664899054,1329594018,3901205900,3045908486,2062866102,2865634940,3543621612,3464012697,1080764994,553557557,3656615353,3996768171,991055499,499776247,1265440854,648242737,3940784050,980351604,3713745714,1749149687,3396870395,4211799374,3640570775,1161844396,3125318951,1431517754,545492359,4268468663,3499529547,1437099964,2702547544,3433638243,2581715763,2787789398,1060185593,1593081372,2418618748,4260947970,69676912,2159744348,86519011,2512459080,3838209314,1220612927,3339683548,133810670,1090789135,1078426020,1569222167,845107691,3583754449,4072456591,1091646820,628848692,1613405280,3757631651,526609435,236106946,48312990,2942717905,3402727701,1797494240,859738849,992217954,4005476642,2243076622,3870952857,3732016268,765654824,3490871365,2511836413,1685915746,3888969200,1414112111,2273134842,3281911079,4080962846,172450625,2569994100,980381355,4109958455,2819808352,2716589560,2568741196,3681446669,3329971472,1835478071,660984891,3704678404,4045999559,3422617507,3040415634,1762651403,1719377915,3470491036,2693910283,3642056355,3138596744,1364962596,2073328063,1983633131,926494387,3423689081,2150032023,4096667949,1749200295,3328846651,309677260,2016342300,1779581495,3079819751,111262694,1274766160,443224088,298511866,1025883608,3806446537,1145181785,168956806,3641502830,3584813610,1689216846,3666258015,3200248200,1692713982,2646376535,4042768518,1618508792,1610833997,3523052358,4130873264,2001055236,3610705100,2202168115,4028541809,2961195399,1006657119,2006996926,3186142756,1430667929,3210227297,1314452623,4074634658,4101304120,2273951170,1399257539,3367210612,3027628629,1190975929,2062231137,2333990788,2221543033,2438960610,1181637006,548689776,2362791313,3372408396,3104550113,3145860560,296247880,1970579870,3078560182,3769228297,1714227617,3291629107,3898220290,166772364,1251581989,493813264,448347421,195405023,2709975567,677966185,3703036547,1463355134,2715995803,1338867538,1343315457,2802222074,2684532164,233230375,2599980071,2000651841,3277868038,1638401717,4028070440,3237316320,6314154,819756386,300326615,590932579,1405279636,3267499572,3150704214,2428286686,3959192993,3461946742,1862657033,1266418056,963775037,2089974820,2263052895,1917689273,448879540,3550394620,3981727096,150775221,3627908307,1303187396,508620638,2975983352,2726630617,1817252668,1876281319,1457606340,908771278,3720792119,3617206836,2455994898,1729034894,1080033504,976866871,3556439503,2881648439,1522871579,1555064734,1336096578,3548522304,2579274686,3574697629,3205460757,3593280638,3338716283,3079412587,564236357,2993598910,1781952180,1464380207,3163844217,3332601554,1699332808,1393555694,1183702653,3581086237,1288719814,691649499,2847557200,2895455976,3193889540,2717570544,1781354906,1676643554,2592534050,3230253752,1126444790,2770207658,2633158820,2210423226,2615765581,2414155088,3127139286,673620729,2805611233,1269405062,4015350505,3341807571,4149409754,1057255273,2012875353,2162469141,2276492801,2601117357,993977747,3918593370,2654263191,753973209,36408145,2530585658,25011837,3520020182,2088578344,530523599,2918365339,1524020338,1518925132,3760827505,3759777254,1202760957,3985898139,3906192525,674977740,4174734889,2031300136,2019492241,3983892565,4153806404,3822280332,352677332,2297720250,60907813,90501309,3286998549,1016092578,2535922412,2839152426,457141659,509813237,4120667899,652014361,1966332200,2975202805,55981186,2327461051,676427537,3255491064,2882294119,3433927263,1307055953,942726286,933058658,2468411793,3933900994,4215176142,1361170020,2001714738,2830558078,3274259782,1222529897,1679025792,2729314320,3714953764,1770335741,151462246,3013232138,1682292957,1483529935,471910574,1539241949,458788160,3436315007,1807016891,3718408830,978976581,1043663428,3165965781,1927990952,4200891579,2372276910,3208408903,3533431907,1412390302,2931980059,4132332400,1947078029,3881505623,4168226417,2941484381,1077988104,1320477388,886195818,18198404,3786409e3,2509781533,112762804,3463356488,1866414978,891333506,18488651,661792760,1628790961,3885187036,3141171499,876946877,2693282273,1372485963,791857591,2686433993,3759982718,3167212022,3472953795,2716379847,445679433,3561995674,3504004811,3574258232,54117162,3331405415,2381918588,3769707343,4154350007,1140177722,4074052095,668550556,3214352940,367459370,261225585,2610173221,4209349473,3468074219,3265815641,314222801,3066103646,3808782860,282218597,3406013506,3773591054,379116347,1285071038,846784868,2669647154,3771962079,3550491691,2305946142,453669953,1268987020,3317592352,3279303384,3744833421,2610507566,3859509063,266596637,3847019092,517658769,3462560207,3443424879,370717030,4247526661,2224018117,4143653529,4112773975,2788324899,2477274417,1456262402,2901442914,1517677493,1846949527,2295493580,3734397586,2176403920,1280348187,1908823572,3871786941,846861322,1172426758,3287448474,3383383037,1655181056,3139813346,901632758,1897031941,2986607138,3066810236,3447102507,1393639104,373351379,950779232,625454576,3124240540,4148612726,2007998917,544563296,2244738638,2330496472,2058025392,1291430526,424198748,50039436,29584100,3605783033,2429876329,2791104160,1057563949,3255363231,3075367218,3463963227,1469046755,985887462],j=[1332899944,1700884034,1701343084,1684370003,1668446532,1869963892],T=(n,r)=>{if(r<=0||r>n.length)throw Error(`Illegal len: ${r}`);let o=0,t,e;const s=[];for(;o<r;){if(t=n[o++]&255,s.push(w[t>>2&63]),t=(t&3)<<4,o>=r){s.push(w[t&63]);break}if(e=n[o++]&255,t|=e>>4&15,s.push(w[t&63]),t=(e&15)<<2,o>=r){s.push(w[t&63]);break}e=n[o++]&255,t|=e>>6&3,s.push(w[t&63]),s.push(w[e&63])}return s.join("")},D=(n,r)=>{if(r<=0)throw Error(`Illegal len: ${r}`);const o=n.length;let t=0,e=0,s,l,i,u,h,p;const a=[];for(;t<o-1&&e<r&&(p=n.charCodeAt(t++),s=p<f.length?f[p]:-1,p=n.charCodeAt(t++),l=p<f.length?f[p]:-1,!(s==-1||l==-1||(h=s<<2>>>0,h|=(l&48)>>4,a.push(String.fromCharCode(h)),++e>=r||t>=o)||(p=n.charCodeAt(t++),i=p<f.length?f[p]:-1,i==-1)||(h=(l&15)<<4>>>0,h|=(i&60)>>2,a.push(String.fromCharCode(h)),++e>=r||t>=o)));)p=n.charCodeAt(t++),u=p<f.length?f[p]:-1,h=(i&3)<<6>>>0,h|=u,a.push(String.fromCharCode(h)),++e;return a.map(c=>c.charCodeAt(0))},F=(n,r)=>{let o=null;for(typeof n=="number"&&(o=n,n=()=>null);o!==null||(o=n())!==null;)o<128?r(o&127):o<2048?(r(o>>6&31|192),r(o&63|128)):o<65536?(r(o>>12&15|224),r(o>>6&63|128),r(o&63|128)):(r(o>>18&7|240),r(o>>12&63|128),r(o>>6&63|128),r(o&63|128)),o=null},L=(n,r)=>{let o,t=null;for(;(o=t!==null?t:n())!==null;){if(o>=55296&&o<=57343&&(t=n())!==null&&t>=56320&&t<=57343){r((o-55296)*1024+t-56320+65536),t=null;continue}r(o)}t!==null&&r(t)},G=(n,r)=>{L(n,function(o){F(o,r)})},A=typeof process=="object"&&process.env.NEXT_RUNTIME==="edge"?setTimeout:typeof setImmediate=="function"?setImmediate:typeof process=="object"&&typeof process.nextTick=="function"?process.nextTick:setTimeout,M=n=>{const r=[];let o=0;return G(()=>o>=n.length?null:n.charCodeAt(o++),t=>{r.push(t)}),r},m=(n,r,o,t)=>{let e,s=n[r],l=n[r+1];return s^=o[0],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[1],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[2],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[3],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[4],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[5],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[6],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[7],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[8],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[9],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[10],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[11],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[12],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[13],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[14],e=t[s>>>24],e+=t[256|s>>16&255],e^=t[512|s>>8&255],e+=t[768|s&255],l^=e^o[15],e=t[l>>>24],e+=t[256|l>>16&255],e^=t[512|l>>8&255],e+=t[768|l&255],s^=e^o[16],n[r]=l^o[B+1],n[r+1]=s,n},E=(n,r)=>{let o=0;for(let t=0;t<4;++t)o=o<<8|n[r]&255,r=(r+1)%n.length;return{key:o,offp:r}},k=(n,r,o)=>{const t=r.length,e=o.length;let s=0,l=[0,0],i;for(let u=0;u<t;u++)i=E(n,s),s=i.offp,r[u]=r[u]^i.key;for(let u=0;u<t;u+=2)l=m(l,0,r,o),r[u]=l[0],r[u+1]=l[1];for(let u=0;u<e;u+=2)l=m(l,0,r,o),o[u]=l[0],o[u+1]=l[1]},X=(n,r,o,t)=>{const e=o.length,s=t.length;let l=0,i=[0,0],u;for(let h=0;h<e;h++)u=E(r,l),l=u.offp,o[h]=o[h]^u.key;l=0;for(let h=0;h<e;h+=2)u=E(n,l),l=u.offp,i[0]^=u.key,u=E(n,l),l=u.offp,i[1]^=u.key,i=m(i,0,o,t),o[h]=i[0],o[h+1]=i[1];for(let h=0;h<s;h+=2)u=E(n,l),l=u.offp,i[0]^=u.key,u=E(n,l),l=u.offp,i[1]^=u.key,i=m(i,0,o,t),t[h]=i[0],t[h+1]=i[1]},U=(n,r,o,t,e)=>{const s=j.slice(),l=s.length;if(o<4||o>31){const c=new Error(`Illegal number of rounds (4-31): ${o}`);if(t===!1)return Promise.reject(c);throw c}if(r.length!==I){const c=new Error(`Illegal salt length: ${r.length} != ${I}`);if(t===!1)return Promise.reject(c);throw c}o=1<<o>>>0;let i,u,h=0,p;Int32Array?(i=new Int32Array(_),u=new Int32Array(P)):(i=_.slice(),u=P.slice()),X(r,n,i,u);const a=()=>{if(e&&e(h/o),h<o){const c=Date.now();for(;h<o&&(h=h+1,k(n,i,u),k(r,i,u),!(Date.now()-c>v)););}else{for(h=0;h<64;h++)for(p=0;p<l>>1;p++)m(s,p<<1,i,u);const c=[];for(h=0;h<l;h++)c.push((s[h]>>24&255)>>>0),c.push((s[h]>>16&255)>>>0),c.push((s[h]>>8&255)>>>0),c.push((s[h]&255)>>>0);return t===!1?Promise.resolve(c):c}if(t===!1)return new Promise(c=>A(()=>{a().then(c)}))};if(t===!1)return a();{let c;for(;;)if(typeof(c=a())<"u")return c||[]}},H=n=>R(n),S=(n=$)=>{if(typeof n!="number")throw Error("Illegal arguments: "+typeof n);n<4?n=4:n>31&&(n=31);const r=[];return r.push("$2a$"),n<10&&r.push("0"),r.push(n.toString()),r.push("$"),r.push(T(H(I),I)),r.join("")},N=(n=$)=>{if(typeof n!="number")throw Error("illegal arguments: "+typeof n);return new Promise((r,o)=>A(()=>{try{r(S(n))}catch(t){o(t)}}))};function C(n,r,o,t){if(typeof n!="string"||typeof r!="string"){const g=new Error("Invalid string / salt: Not a string");if(o===!1)return Promise.reject(g);throw g}let e,s;if(r.charAt(0)!=="$"||r.charAt(1)!=="2"){const g=new Error("Invalid salt version: "+r.substring(0,2));if(o===!1)return Promise.reject(g);throw g}if(r.charAt(2)==="$")e="",s=3;else{if(e=r.charAt(2),e!=="a"&&e!=="b"&&e!=="y"||r.charAt(3)!=="$"){const g=Error("Invalid salt revision: 
"+r.substring(2,4));if(o===!1)return Promise.reject(g);throw g}s=4}if(r.charAt(s+2)>"$"){const g=new Error("Missing salt rounds");if(o===!1)return Promise.reject(g);throw g}const l=parseInt(r.substring(s,s+1),10)*10,i=parseInt(r.substring(s+1,s+2),10),u=l+i,h=r.substring(s+3,s+25);n+=e>="a"?"":"";const p=M(n),a=D(h,I),c=g=>{const y=[];return y.push("$2"),e>="a"&&y.push(e),y.push("$"),u<10&&y.push("0"),y.push(u.toString()),y.push("$"),y.push(T(a,a.length)),y.push(T(g,j.length*4-1)),y.join("")};return o===!1?U(p,a,u,!1,t).then(g=>c(g)):c(U(p,a,u,!0,t))}const x=(n,r=$)=>{if(typeof r=="number"&&(r=S(r)),typeof n!="string"||typeof r!="string")throw Error("Illegal arguments: "+typeof n+", "+typeof r);return C(n,r,!0)},O=function(n,r,o){return typeof n=="string"&&typeof r=="number"?N(r).then(t=>C(n,t,!1,o)):typeof n=="string"&&typeof r=="string"?C(n,r,!1,o):Promise.reject(new Error(`Illegal arguments: ${typeof n}, ${typeof r}`))},W=(n,r)=>{if(typeof n!="string"||typeof r!="string")throw Error("Illegal arguments: "+typeof n+", "+typeof r);return r.length!==60?!1:x(n,r.substring(0,r.length-31))===r},Y=(n,r,o)=>new Promise((t,e)=>{if(typeof n!="string"||typeof r!="string"){A(()=>e(new Error(`Illegal arguments: ${typeof n}, ${typeof r}`)));return}if(r.length!==60){A(()=>e(!1));return}O(n,r.substring(0,29),o).then(s=>t(s===r)).catch(s=>e(s))}),q=n=>{if(typeof n!="string")throw new Error(`Illegal arguments: 
${typeof n}`);return parseInt(n.split("$")[2],10)},z=n=>{if(typeof n!="string")throw new Error(`Illegal arguments: ${typeof n}`);if(n.length!==60)throw new Error(`Illegal hash length: ${n.length} != 60`);return n.substring(0,29)};export{Y as compare,W as compareSync,N as genSalt,S as genSaltSync,q as getRounds,z as getSalt,O as hash,x as hashSync};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1288:20)
    at Module._compile (node:internal/modules/cjs/loader:1340:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Object.newLoader [as .mjs] (C:UsersuserDocumentsProjectsTemplatingDocumentsnode_modulesdrizzle-kitbin.cjs:14724:13)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (c:UsersuserDocumentsProjectsTemplatingDocumentsappdb.ts:5:39)

The following is my package.json:

{
  "private": true,
  "scripts": {
    "dev": "next dev --turbo",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@radix-ui/react-dialog": "^1.1.1",
    "@radix-ui/react-dismissable-layer": "^1.1.0",
    "@radix-ui/react-dropdown-menu": "^2.1.1",
    "@radix-ui/react-focus-scope": "^1.1.0",
    "@radix-ui/react-portal": "^1.1.1",
    "@radix-ui/react-presence": "^1.1.0",
    "@radix-ui/react-primitive": "^2.0.0",
    "@radix-ui/react-progress": "^1.1.0",
    "@radix-ui/react-roving-focus": "^1.1.0",
    "@radix-ui/react-separator": "^1.1.0",
    "@radix-ui/react-slot": "^1.1.0",
    "@radix-ui/react-tabs": "^1.1.0",
    "@radix-ui/react-tooltip": "^1.1.2",
    "@types/node": "^20.10.5",
    "@types/react": "^18.2.45",
    "@types/react-dom": "^18.2.18",
    "bcrypt-ts": "^5.0.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "dotenv": "^16.4.5",
    "drizzle-orm": "^0.34.0",
    "framer-motion": "^11.11.1",
    "geist": "^1.2.0",
    "lucide-react": "^0.446.0",
    "next": "^14.0.4",
    "next-auth": "5.0.0-beta.4",
    "pg": "^8.13.0",
    "postgres": "^3.4.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwind-merge": "^2.5.2",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/pg": "^8.11.10",
    "autoprefixer": "^10.4.16",
    "drizzle-kit": "^0.25.0",
    "eslint": "8.56.0",
    "eslint-config-next": "^14.0.4",
    "postcss": "^8.4.32",
    "tailwindcss": "^3.4.0",
    "tsx": "^4.19.1",
    "typescript": "^5.3.3"
  }
}

The following is my tsconfig.json

{
  "compilerOptions": {
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext", "es6"],
    "allowJs": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/pages/*": ["pages/*"],
      "@/app/*": ["app/*"],
      "@/lib/*": ["lib/*"],
      "@/styles/*": ["styles/*"],
      "@/*": ["./*"],
    },
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ]
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

Below is my drizzle.config.ts

import 'dotenv/config';
import { defineConfig } from 'drizzle-kit';

export default defineConfig({
  out: './drizzle',
  schema: './app/db.ts',
  dialect: 'postgresql',
  dbCredentials: {
    url: process.env.POSTGRES_URL!,
  },
});

I have tried updating my packages, stating in my package.json to use modules however this in turn stops nextJS from working.

In my App, I am implementing Product Listing page which lists out the products on the listing page. I am looking to integrate some good practices based on this post – https://dev.to/vyan/using-async-functions-in-useeffect-best-practices-and-pitfalls-o75 but instead of let I am using ref to track.

I am getting the list of products in the console message but it displays no list in the UI. When I comment the – isMounted.current = false; line in my cleanup function then only it displays the list. Let me know what I am doing wrong here with the cleanup ?

App.jsx –

import { useEffect, useRef, useState } from "react";
import ProductsList from "./components/ProductsList";
import "./styles.css";

export default function App() {
  const isMounted = useRef(true);
  const [products, setProducts] = useState([]);

  const fetchData = async () => {
    try {
      const data = await fetch("https://dummyjson.com/products");
      const { products = [] } = await data.json();
      console.log(products); // It shown as Array of object in the console

      if (isMounted.current) {
        setProducts(products);
      }
    } catch (error) {
      if (isMounted.current) {
        console.error("Error fetching data: ", error);
      }
    }
  };

  useEffect(() => {
    fetchData();
    return () => {
      isMounted.current = false; // Cleanup on unmount
    };
  }, []);

  return (
    <div className="App">
      <h1>Product Listing Page</h1>
      {products.length ? <ProductsList products={products} /> : null}
    </div>
  );
}

ProductsList.jsx –

const ProductsList = ({ products }) => {
  return (
    <div className="products-list">
      {products.map((product) => {
        return (
          <div className="product" key={product.id}>
            <div className="max-w-sm rounded overflow-hidden shadow-lg">
              <img
                className="w-full"
                src={product.thumbnail}
                alt={product.thumbnail}
              />
              <div className="px-6 py-4">
                <div className="font-bold text-xl mb-2">{product.title}</div>
                <p className="text-gray-700 text-base">{product.description}</p>
              </div>
              <div className="px-6 pt-4 pb-2">
                {product.tags.map((tag, index) => (
                  <span
                    key={index}
                    className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
                  >
                    #{tag}
                  </span>
                ))}
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default ProductsList;

I’m trying to generate content in PHP that’s then going to be downloaded via JavaScript.

So now, I’m calling the PHP function from JavaScript:

fetch("retrieveContent.php", options)
    .then(response => response.text())
    .then(response=> {
      $("#container-result").val(response);
      saveFile(response.replaceAll('"', ''), $("#nomeFileTelematico").val());
    })

The saveFile function:

var saveFile = (function () {
  var a = document.createElement("a");
  document.body.appendChild(a);
  a.style = "display: none";

  return function (data, fileName) {
    console.log(data);
    var blob = new Blob([data], {type: "text/plain;charset=utf-8"});
    var url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = fileName;
    a.click();
  };

}());

The variable data contains the literal characters rn and is generated by PHP:

$endLine = "rn";
    
// RECORD DI TESTA
$content .= $blabla
         . $endLine;

echo json_encode($content);

How can I treat this characters in order to be visualized as an actual new line by Windows?

For now, here’s what part the file looks like:

LRN****16L015MZZL****1M16L0***2024A      531      212rn9QSS000***413102**FI** - ************************MANTO

You can see the rn in the middle of the line.

I already tried to set the characters of $endLine as chr(13) and chr(10) but nothing worked.

I’m using the note app built in Windows.

I am using a content editable list. Currently I am not able to solve the following chrome problem (it works fine in FF at least).

When you click after the end of the following lines, the cursor is placed after the lines last character, except for lines that have another UL inside. By accident I found out after disabling the list-style-type, it works as well.

What is causing this and are there any ideas on how to solve it? Is it a bug that I need to report to Chrome?

<ul contenteditable>
  <li>Works</li>
  <li>Doesn't
    <ul><li>Works</li></ul>
  </li>
  <li style="list-style-type: none">Works
    <ul><li>Works</li></ul>
  </li>
</ul>

I am using the quill text editor in a javascript. I want to add custom font size and I am do this but all font size’s name are seem ‘normal’.

this is my active code parts:

this part is HTML code for running quill

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>

this part is my configuration

<script>
    const fontSizeArr = ['8px', '9px', '10px', '12px', '14px', '16px', '20px', '24px', '32px'];

    var Size = Quill.import('attributors/style/size');
    Size.whitelist = fontSizeArr;
    Quill.register(Size, true);


    var toolbarOptions = [
        [{ 'font': [] },],
        [{ 'size': fontSizeArr }],
        ['bold', 'italic', 'underline', 'strike']
    ];


    var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions,
        },
        theme: 'snow'
    });
</script>

I tried different usages this time the font size’s name seen but font sizes didn’t change

Code 2:

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<div id="editor-container">
    <p></p>
</div>
<script>
const fontSizeArr = [
    { value: '8px', name: '8px' },
    { value: '9px', name: '9px' },
    { value: '10px', name: '10px' },
    { value: '12px', name: '12px' },
    { value: '14px', name: '14px' },
    { value: '16px', name: '16px' },
    { value: '20px', name: '20px' },
    { value: '24px', name: '24px' },
    { value: '32px', name: '32px' }
];

var Size = Quill.import('attributors/style/size');
Size.whitelist = fontSizeArr;
Quill.register(Size, true);

 var toolbarOptions = [
    [{ 'font': [] },],
    [{ 'size': fontSizeArr.map(size => size.value)}],
    ['bold', 'italic', 'underline', 'strike']
];



 var quill = new Quill('#editor-container', {
        modules: {
            toolbar: toolbarOptions,
        },
        theme: 'snow'
 });


function updateToolbarSizeNames() {
    const sizeSelect = document.querySelector('.ql-size');
    sizeSelect.innerHTML = ''; 

    fontSizeArr.forEach(size => {
        const option = document.createElement('option');
        option.value = size.value; 
        option.innerText = size.name; 
        sizeSelect.appendChild(option);
    });
}

updateToolbarSizeNames();
</script>

I was trying to implement a sipjs session.

initializeSip() {
const uri = UserAgent.makeURI('sip:[email protected]'); // Replace with your SIP URI
if (!uri) {
  throw new Error('Failed to create URI');
}

const userAgentOptions: UserAgentOptions = {
  uri,
  transportOptions: {
    server: 'ws://127.0.0.1:9090',
  },

  delegate: {
    onInvite: (invitation: Invitation) => {
      return this.handleIncomingCall(invitation);
    },
  },
};

this.userAgent = new UserAgent(userAgentOptions);

const registererOptions: RegistererOptions = {
  // Customize registererOptions as needed
};
this.registerer = new Registerer(this.userAgent, registererOptions);

this.userAgent.start().then(() => {
  this.registerer.register();
})}

this is how defined accept call in handleIncomingCall function

const acceptCall = () => {
  const constraints = {
    audio: true,
    video: false,
  };

  navigator.mediaDevices
    .getUserMedia(constraints)
    .then((localStream) => {
      // Attach local stream to an audio element if needed
      const localAudio = document.getElementById(
        'localAudio'
      ) as HTMLAudioElement;
      if (localAudio) {
        localAudio.srcObject = localStream;
      }
    })
    .catch((error) => {
      console.error('Error getting user media:', error);
    });

  const peerConnectionConfig = {
    iceServers: [
      {
        urls: ['stun:stun.l.google.com:19302'],
        
      },
    ],
    iceTransportPolicy: 'all',
    bundlePolicy: 'balanced' as RTCBundlePolicy,
    rtcpMuxPolicy: 'require' as RTCRtcpMuxPolicy,
  };

  const options = {
    sessionDescriptionHandlerOptions: {
      constraints,
      peerConnectionConfiguration: peerConnectionConfig,
      peerConnectionOptions: {
        rtcConfiguration: peerConnectionConfig,
        iceGatheringTimeout: 5000,
      },
    },
  };

  // Accept the call
  // Adding the listener for state changes

  invitation
    .accept(options)
    .then(() => {
      console.log('Call accepted successfully');
    })
    .catch((error) => {
      console.error('Failed to accept call:', error);
    });
};

I configured discription and pass that to an argument while accepting the invitation. but even after i am passing i an getting below error. i tried to solve in many ways, but nothing seems working.is there any mistakes while i passing the ice flags ?

sip.SessionDescriptionHandler | SessionDescriptionHandler.setDescription failed – InvalidAccessError: Invalid description, no ice-ufrag attribute at level 0

How do I obtain the preferred hourCycle of the user’s current locale? I’ve tried a few locales ((new Intl.Locale('en-US')).hourCycle) in both Firefox 131 and Chrome 129, but both return undefined.