javascript – Page 2676 – Blancer.com Tutorials and projects

I want to save how many button clicked

I want to save how many button print was click, and save it to database.

example:

<script>
count = 0;

function increment(){
count++;
return count;
}
</script>

<input type="hidden" name="count" id="count" />
<a href="#" onclick='increment()'>Print</a>

is this correct?

so when the Print clicked the count value will save to database

React useState item within useContext not updating when expected [duplicate]

I am using useContext to reference and update useState variables across multiple components without the need to drop props several component layers deep. The problem I am running across is that when I update the useState variable it appears that it isn’t read as updated to the new value until the function is called again.

Here’s the Context code:

import React, { useContext, useState } from 'react';

const AttributeContext = React.createContext({
    strength: "10",
    dexterity: "10",
    constitution: "10",
    intelligence: "10",
    wisdom: "10",
    charisma: "10"
})

export function useAttributeContext() {
    return (useContext(AttributeContext))
}

export function AttributeContextProvider({children}) {
    const [strength, setStrength] = useState("10")
    const [dexterity, setDexterity] = useState("10")
    const [constitution, setConstitution] = useState("10")
    const [intelligence, setIntelligence] = useState("10")
    const [wisdom, setWisdom] = useState("10")
    const [charisma, setCharisma] = useState("10")

    const updateStr = (value) => {
        if (value === "") {
            console.log("nothing changed. Selection empty")
        } else {
            console.log(value)
            setStrength(value)
        }
        console.log(strength)
    }

    const updateDex = (value) => {
        if (value === "") {
            console.log("nothing changed. Selection empty")
        } else {
            console.log(value)
            setDexterity(value)
        }
        console.log(dexterity)
    }

    const updateCon = (value) => {
        if (value === "") {
            console.log("nothing changed. Selection empty")
        } else {
            console.log(value)
            setConstitution(value)
        }
        console.log(constitution)
    }

    const updateInt = (value) => {
        if (value === "") {
            console.log("nothing changed. Selection empty")
        } else {
            console.log(value)
            setIntelligence(value)
        }
        console.log(intelligence)
    }

    const updateWis = (value) => {
        if (value === "") {
            console.log("nothing changed. Selection empty")
        } else {
            console.log(value)
            setWisdom(value)
        }
        console.log(wisdom)
    }

    const updateCha = (value) => {
        if (value === "") {
            console.log("nothing changed. Selection empty")
        } else {
            console.log(value)
            setCharisma(value)
        }
        console.log(charisma)
    }

    const value = {
        strength,
        updateStr,
        dexterity,
        updateDex,
        constitution,
        updateCon,
        intelligence,
        updateInt,
        wisdom,
        updateWis,
        charisma,
        updateCha
    }

    return (
        <AttributeContext.Provider value={value}>
            {children}
        </AttributeContext.Provider>
    )
}

and where it is called:

const handleChange = (ev) => {
        setChosenOptions({...chosenOptions, [ev.target.name]: ev.target.value});
        let value = ""
        if (ev.target.value === "14-1") {
           value = "14"
        } else if (ev.target.value === "12-1") {
            value = "12"
        } else {value = ev.target.value}
        switch (ev.target.name) {
            case "Strength": 
                updateStr(value)
                break;
            case "Dexterity": 
                updateDex(value)
                break;
            case "Constitution": 
                updateCon(value)
                break;
            case "Intelligence": 
                updateInt(value)
                break;
            case "Wisdom": 
                updateWis(value)
                break;
            case "Charisma": 
                updateCha(value)
                break;
            default: 
                console.log("Select tag not recognized")
                break;
        }
    };

It calls the functions just fine but the console.log shows the value I want to change it to as expected but that second one showing me the value of the useState I wanted to change shows it as the previous value before change. When called a second that second log shows the value I wanted to change it to previously. I want to make sure that It is updating when I call it the first time. I’m unsure why it’s happening this way as I’m pretty sure my console.log statements are in the correct order to report it how I’m expecting.

logs look as follows:

16    this is the console.log(value)
10    this is the console.log(strength)

second time called it appears as such:

14    this is the console.log(value) with a different choice
16    this is the console.log(strength)

How would I fix this?

Angular dynamic formBuilder input fields lose focus after typing one character

I have tried everything on StackOverflow similar questions but still I couldn’t fix this issue.

I have this method in my component.ts file.

private initForm() {
    if (this.form) {
        this.form.patchValue(this.course);

    } else {

        var controlsConfig = {
            duration: [this.course.duration],
            credits: [this.course.credits],
            expires: [],
            comment: [this.course.comment]
        };

        // adding custom fields to course controls
        for (var i = 0; i < this.courseCustomFields.length; i++) {
            controlsConfig[this.courseCustomFields[i].key] = [this.course[this.courseCustomFields[i].key]];
        }

        this.form = this.formBuilder.group(controlsConfig);
    }

And I have populated the custom field input fields in my component.html like below.

<div class="row" *ngFor="let courseCustomFieldRow of courseCustomFieldsForFront">
     <div class="col-md-3" *ngFor="let courseCustomField of courseCustomFieldRow">
         <div class="form-group">
              <label>{{courseCustomField.title}}</label>
              <input type="text" class="form-control" [formControlName]="courseCustomField.key">
         </div>
     </div>
</div>

But still it loses focus when I type one character.

My images load but don’t show up. I dont know what happened [closed]

I was making a website for a friend’s portfolio, but when I was doing some tests with the button to load more images (which is loading every 10) the images just don’t render, but inspecting the page the images appear. And sometimes the application starts with only 2 or 4 images, but inspecting the others are there but don’t appear.

That’s what happened

Css Code with Styled Components
React Code

I I thought it was the size of the images but they were all weighing 32mb.

Find Matching Object in a Collection of Objects [duplicate]

I have a collection of objects and would like to find the object that matches a search condition. I’ve defined the collection as an Array, but (I think) since the collection is an object, Array.find() won’t work.

Is the only way to do this to iterate through each object in the collection?

I am new to javascript, so perhaps I am doing this entirely wrong.

class Inmate {
  constructor() {
    this.firstName = '';
    this.lastName = '';
  }
}

// returns an array of mate objects with names and emails
class Asylum {

  constructor() {
    const MATE_DATA = [ ['randle', 'patrick' ], ['billy', 'bibbit' ]];
    let mateArray = new Array;

    for (const mateData of MATE_DATA) {
      let mateObject = new Inmate;
      mateObject.firstName = mateData[0];
      mateObject.lastName = mateData[1];
      mateArray.push( mateObject);
    }
    Logger.log( mateArray);
  }

  findMateName(mateName) {
        Logger.log('finding: ' + mateName);
    const firstNameCondition = mateObj => mateObj.firstName == mateName;
    const mateObj = this.find(firstNameCondition);
    if (mateObj) {
      return mateObj;
    }
    else {
      Logger.log('Cannot find ' + mateName);
      return 0;
    }
  }

}

function main (){
  let asylum = new Asylum;
  const inmateObj = asylum.findMateName('randle');
}

// output
Info [{lastName=patrick, firstName=randle}, {lastName=bibbit, firstName=billy}]
Info finding: randle
Error TypeError: this.find is not a function findMateName

Why is Storybook Throwing this “undefined apply” error?

If I remove the “initialize” in the middle, it works … sort of. It fails with some other errors around Configure.mdx. So I followed the instructions[1] and I get the errors below. I can’t quite figure out what I’m missing!

Here is the error:

Cannot read properties of undefined (reading 'apply')

Here is my preview.tsx:

import type { Preview } from "@storybook/react"
import {
  reactRouterParameters,
  withRouter,
} from "storybook-addon-react-router-v6"
import "../src/index.scss"
import { passthrough } from "msw"
import { setupWorker } from "msw/browser"
import { initialize, mswDecorator } from 'msw-storybook-addon';
import { handlers as storyBookHandlers } from "../.storybook/storybookHandlers"

const handlers = []

initialize({
  onUnhandledRequest: ({ method, url }) => {
    console.info(`Full: ${method} ${url}`)
    if (!url.includes("/api")) {
      console.info(`Passthrough: ${method} ${url}`)
      return passthrough();
    }
  },
}, storyBookHandlers)

const preview: Preview = {
  // decorators: [(storyFn, context) => withConsole()(storyFn)(context)],
  parameters: {
    actions: { argTypesRegex: "^on[A-Z].*" },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
}

if (typeof global.process === "undefined") {
  const { worker } = require("../tests/mocks/browser")
  worker.start()
}

export default {
  decorators: [withRouter],
  parameters: {
    reactRouter: reactRouterParameters({}),
  },
} satisfies Preview

[1] https://github.com/mswjs/msw-storybook-addon#configuring-msw

Problems with atribute components like ngClass or ngStyle

I’m new to Angular 17 and I’ve noticed that every time I want to use an ngClass attribute or an ngStyle I get an error like it doesn’t recognize them and I get this error
NG8002: Can’t bind to ‘ngClass’ since it isn’t a known property of ‘p’.

atributte.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-atributo',
  standalone: true,
  imports: [ ],
  templateUrl: './atributo.component.html',
  styleUrl: './atributo.component.css'
})
export class AtributoComponent {
  messageType = 1
}

attributte.component.html

<p [ngClass]="{'info' : messageType === 1, 'error' : messageType !== 1  }">Mensaje importante</p>

Do you know if the import is okay or should I import something else?

Thanks ins advance

Then notice that if I add it works with ngClass but not working with ngStyle

import { CommonModule } from '@angular/common';


@Component({
   selector: 'app-attribute',
   standalone: true,
   imports: [CommonModule],
   templateUrl: './attribute.component.html',
   styleUrl: './attribute.component.css'
})

How to validate Google Map ID if the entered value is wrong

How to validate Google Map ID if it is wrong value. I need to throw particular error message in JavaScript if it is wrong value. Please suggest

In network traffic, observed that calling https://maps.googleapis.com/maps/api/mapsjs/mapConfigs:batchGet. In this response, showing Map ID is not valid. But here how to capture in JavaScript this error message.

Embedding a Script in NextJS with Typescript

I am attempting to embed a script from GameChanger (https://web.gc.com) and this is the code they provided me:

<!-- Put this div wherever you want the widget to be embedded -->
<div id="gc-scoreboard-widget-umpl"></div>

<!-- Put this before the closing </body> tag -->
<script src="https://widgets.gc.com/static/js/sdk.v1.js"></script>
<script>
    window.GC.scoreboard.init({
        target: "#gc-scoreboard-widget-umpl",
        widgetId: "UUID HERE",
        maxVerticalGamesVisible: 4,
    })
</script>

I’m using NextJS 14 with Typescript. My Component looks like this:

import Script from "next/script";

export default function GameChangerScoreboard() {
  return (
    <>
      <Script src="https://widgets.gc.com/static/js/sdk.v1.js" />
      <Script
        id="gc-scoreboard-init"
        dangerouslySetInnerHTML={{
          __html: `
                    window.GC.scoreboard.init({
                        target: 'gc-scoreboard-widget-umpl',
                        widgetId: "UUID HERE",
                        maxVerticalGamesVisible: 4
                    });
                `,
        }}
      />
      <div id="gc-scoreboard-widget-umpl"></div>
    </>
  );
}

I’m getting the following error when trying to do this:

VM938:2 Uncaught TypeError: Cannot read properties of undefined (reading 'scoreboard')
    at <anonymous>:2:31
    at loadScript (script.js:140:19)
    at eval (script.js:223:17)
    at commitHookEffectListMount (react-dom.development.js:18071:39)
    at commitHookPassiveMountEffects (react-dom.development.js:19742:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19826:29)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19918:25)
    at recursivelyTraversePassiveMountEffects (react-dom.development.js:19808:21)
    at commitPassiveMountOnFiber (react-dom.development.js:19824:25)
(anonymous) @ VM938:2
loadScript @ script.js:140
eval @ script.js:223
commitHookEffectListMount @ react-dom.development.js:18071
commitHookPassiveMountEffects @ react-dom.development.js:19742
commitPassiveMountOnFiber @ react-dom.development.js:19826
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19824
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19918
recursivelyTraversePassiveMountEffects @ react-dom.development.js:19808
commitPassiveMountOnFiber @ react-dom.development.js:19832
commitPassiveMountEffects @ react-dom.development.js:19799
flushPassiveEffectsImpl @ react-dom.development.js:22446
flushPassiveEffects @ react-dom.development.js:22398
eval @ react-dom.development.js:22188
workLoop @ scheduler.development.js:200
flushWork @ scheduler.development.js:178
performWorkUntilDeadline @ scheduler.development.js:416
Show 100 more frames
Show less

I’m not sure what my error is. I’m assuming it has something to do with not having the type information for the embed, but I’m not sure. Thank you in advance for any help.

I initially tried just copying and pasting the code in, which wouldn’t compile. CoPilot recommended that I use the dangerouslySetInnerHTML which led to my change in the code. I’m not sure what next to try.

How to access different feature maps created by conv2d layers in tensorflowjs?

I’m trying to get various feature maps created by the convolutional layers using tensorflowjs. Below is my attempt to obtain different feature maps but they’re all the same when plotted. There might be something wrong in the way they’re sliced? It’d probably be better if I could slice the tensors directly?

”’

// Apply first 3 conv2d layers to image tensor
var output1 = conv2d_0.apply(image_tensor);
var output2 = conv2d_1.apply(output1);
var output3 = conv2d_2.apply(output2);

// Turn tensor into array with shape = (1,78,78,128)
var array = nj.array(output3.arraySync());

// Slice array, resulting array of shape (1,78,78,1)
var sliced = array.slice(null,null,null,[2,null,3]);
var sliced2 = array.slice(null,null,null,[22,null,23]);
var sliced3 = array.slice(null,null,null,[12,null,13]);
var sliced4 = array.slice(null,null,null,[2,null,3]);

”’

How to mock an async function that makes multiple http requests that return promises in AngularJS using httpbackend?

Im trying to write unit tests for a function that I know works through thorough testing but I can not for the life of me figure out why my unit tests arent working

The function is very simple I have an initial function which does some preprocessing, then makes a call to a second helper async function. That second function makes a post request to start a job which takes some time, then it makes a get request to grab the results from the job.:

_this.getFormula = async function() {
    //does some preprocessing and sets improvedformula
    const resultFromService = await _this.getFormulaFromService();
    //does some postprocessing and sets improvedformula to result
  };

  _this.getFormulaFromService = async function() {
    try {
      // Request 1:
      const firstResponse = await $http.post(url, query, headers);
      // Request 2:
      // We need to wait to let it finish
      const jobId = firstResponse.data.job_id;
      let finalResult;
      finalResult = await $http.get(newurl);
      return finalResult.data.results[0].result.formula || NO_FORMULA_FOUND_MESSAGE;
    } catch (e) {
      return 'Error!';
    }
  };

My unit test:

it('gets formula from service', function (done) {
        ctrlInstance.searchQuery = 'query';
    
        const jobIDResponse = {
          job_id: 'dummyJobID',
        };
    
        const jobResultResponse = {
          results: [
            {
              result: {
                formula: 'formula',
              },
            },
          ],
        };
        $httpBackend
        .whenPOST(/.*/)
        .respond(jobIDResponse);
      $httpBackend
        .whenGET(/.*/)
        .respond(jobResultResponse);
        ctrlInstance.getFormula().then(() => {
              expect(ctrlInstance.improvedFormula).toEqual('formula');
              done();
            });
        $httpBackend.flush();
      });

The unit test should be very simple but it never seems to progress past the POST, im not sure if something is going wrong with resolving that promise, but it never seems to even reach the get. I added some debugging to modify improvedFormula at various parts and when i run the tests it will return a value such that it never even made it past the POST

I tried using async/await in the tests but that just resulted in timeout

I tried wrapping things in rootscope.apply to force digest but that just said it was already trying to apply

I tried using timeout but then the function just hung

I tried using async/await and done together but that didnt work either

How is component inheritance done in Svelte?

I currently have a Modal.svelte component that uses native , I would like to create another component called ModalSheet.svelte whose parent is Modal.svelte.

Is this possible in Svelte without conflicts? Let’s say I want to take advantage of all the functions already built into the parent component (Modal.svelte) in the child component (ModalSheet.svelte) and also add new functions in ModalSheet.

I also want to be able to use both and in the same page at the same time. I don’t know to what extent it is possible.

Modal.svelte file:

<script>
  export let backdropClose;
  export let modalId;
  export let modalClass;
  export let labelledby;
  export let label;
  export let modal;

  let content;
  const isModal = typeof modal === "string" ? modal !== "false" : true;

  export function openModal() {
    if (content) {
      if (isModal) {
        content.showModal();
        return;
      }
      content.show();
    }
  }

  export function closeModal() {
    if (content) {
      content.close();
    }
  }

  function handleClick(event) {
    if (content && isModal && backdropClose === "true") {
      const rect = content.getBoundingClientRect();
      if (
        event.clientX < rect.left ||
        event.clientX > rect.right ||
        event.clientY < rect.top ||
        event.clientY > rect.bottom
      ) {
        content.close();
      }
    }
  }
</script>

<dialog
  aria-label={label}
  aria-labelledby={labelledby}
  id={modalId}
  class={modalClass || "ph-modal"}
  bind:this={content}
  on:click={handleClick}
>
  <slot />
</dialog>

<style lang="scss">
  dialog {
    border: 0;
    border-radius: 8px;
    background-color: #fff;
    &::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
    }
  }
</style>

Why is .js code working by console but not in form of a plug in?

I am trying to remove an element
For this purpose I am trying to make small plug in in .js
I have tailored this to this one specific google form I want to use it at, and for some reason I am haveing more issues in docs.google.com than I have in other websites

// content.js
const element = document.getElementsByClassName("xxxxxx");
element[0].remove();

“xxxxx” is the class of the block that holds the email display, I’ve changed it here, idk if one could pull the emails with it

When I paste the code in the console manually it works as I want it ,
but if I run it by plug in it gives me an error code:
“Uncaught TypeError: Cannot read Properties of undefined (reading ‘remove’)”

ExpoMetroConfig.loadAsync is not a function when i run “npx expo start”

I’m getting the error “TypeError: ExpoMetroConfig.loadAsync is not a function
at runMetroDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/@expo/dev-server/src/MetroDevServer.ts:86:45)
at startDevServerAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startDevServerAsync.ts:75:77)
at startAsync (/usr/local/lib/node_modules/expo-cli/node_modules/xdl/src/start/startAsync.ts:84:41)”.
And I’m using npx but it’s like I’m using local-cli, I don’t know why.

I’ve already used ‘npx expo-doctor’ but it continues to show that there is an error with the packages, and “npx expo-doctor –fix-dependencies” results in ” –fix-dependencies does not exist”
[enter image description here](https://i.stack.imgur.com/DEFbn.png)

Erro when a try to NavLink import

whenever i try to import and use navlink in my code i get a error that i dont really understand, cause i got my react-router-dom installed
im trying to import in my component navbar the NavLink

here it is


import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <div>
    <nav>
    <NavLink to="/">
      Uni<span>Facisa</span>
    </NavLink>
    <ul>
      <li>
        <NavLink to="/">Home</NavLink>
      </li>
      <li>
        <NavLink to="/about">Sobre</NavLink>
      </li>
      <li>
        <NavLink to='/contact'>Contato</NavLink>
      </li>
    </ul>
   </nav>
    </div>
  );
};

export default Navbar;

but is giving me a lot of errors like

: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:22.
    at App
printWarning @ react-jsx-dev-runtime.development.js:87
error @ react-jsx-dev-runtime.development.js:61
jsxWithValidation @ react-jsx-dev-runtime.development.js:1244
App @ bundle.js:77
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 14 more frames
Show less
bundle.js:77 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:22.
    at App

tried to reinstall react-router-dom and change de export default but does not change