Category: javascript

So, I am trying to make a tetris game. I have created a tetriminoe using a group of tiles that is helped by a container. The container rotates fine, but I am trying to rotate this container by its center. I don’t know what point it is rotating around. I have tried using .setOrigin(), but it keeps telling me that .setOrigin() is not a function. Here is the code:

dark_blue_block() {
    const blocks = this.add.container(100, 100);
    let b1 = this.add.sprite(50, 50, "blue_tile").setScale(0.2)
    let b2 = this.add.sprite(100, 50, "blue_tile").setScale(0.2)
    let b3 = this.add.sprite(150,50, "blue_tile").setScale(0.2)
    let b4 = this.add.sprite(150,100, "blue_tile").setScale(0.2)
    blocks.add(b2)
    blocks.add(b1)
    blocks.add(b3)
    blocks.add(b4)
    blocks.y += 30
    blocks.x += 150
    return blocks
}

As you can see, I have defined a function that will create a dark blue block for me. It creates separate titles placed inside a container.

        if (this.allTiles.length == 0) {
            let tile = this.dark_blue_block()
            this.allTiles.push(tile)
            this.curr_tile = tile
        }

I call this function and set the container equal to this.curr_title.

In order to rotate this tile, I call this.curr_tile.angle += 90. Again, it rotates fine, but I want it to rotate about its center. And again, I have no idea what point it is rotating around.

Any help will be greatly appreciated. Thanks in advance.

I’m developing a React Native app using Expo and experiencing issues with a component I created to show a loader using Expo BlurView.

Basically, when I add the experimentalBlurMethod=”dimezisBlurView” to test on Android, a transparent overlay is covering the entire screen, making dark gray colors look like light gray instead. Other than that, everything works as expect, when loading state is true, the component shows up with blur, the only downside is this overlay covering the entire screen.

I’ve tried:

• Conditional rendering
• Adjusting BlurView intensity
• Adding pointerEvents=”none”

Expected behavior:

• Blur overlay appears during loading
• Overlay completely disappears when loading is false

import React from 'react';
import { View, ActivityIndicator, StyleSheet } from 'react-native';
import { BlurView } from 'expo-blur';
import Colors from '@/constants/Colors';

const LoadingOverlay = ({ loading }: { loading?: boolean }) => {
  if (!loading) return null;

  return (
    <View style={styles.container}>
      <BlurView intensity={20} style={styles.blurView} experimentalBlurMethod="dimezisBlurView">
        <View style={styles.loadingBox}>
          <ActivityIndicator size="large" color={Colors.PRIMARY} />
        </View>
      </BlurView>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    ...StyleSheet.absoluteFillObject,
    zIndex: 999,
  },
  blurView: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  loadingBox: {
    backgroundColor: Colors.WHITE,
    padding: 20,
    borderRadius: 20,
  },
});

export default LoadingOverlay;

Can anyone help resolve this BlurView rendering issue?

I know, this is a duplicate question, but I want to get sure.
I have got I javascript file and want to load a preloader before the page is loaded and not after.

Here is my script:

"use strict";

addEventListener('load', function () {

/* Hide Preloader */
document.getElementById("loader-background").style.display = 'none';
document.getElementById("loader").style.display = 'none';

});


addEventListener('DOMContentLoaded', ()=> {

  /* Navbar active state */
  const activeLink = document.querySelector(".nav-link[href='" + window.location.pathname + "']");
  if(activeLink) activeLink.classList.add("active");


  /* Burger-Menu toggle nav */
  const topNav      = document.getElementById("myTopnav");
  const burgerMenu  = document.getElementById("burgerMenu");

  burgerMenu.addEventListener("click", () => { 
    topNav.classList.toggle("responsive");
    burgerMenu.classList.toggle("toggleMenu");

  });

});

This can help too:
Difference between DOMContentLoaded and load events

If I get it right, load will wait for images and fully loaded page and DOMContentLoaded will trigger before the page is loaded? So the preloader will wait and hide after all is done?

Maby you have some enhancements for my script.

I have a very basic tiptap editor setup in VueJS, something like this:

// TipTap.vue

<template>
  <div>
    <editor-content :editor="editor" spellcheck="false" />
  </div>
</template>
<script setup>
// Imports
const editor = ref(null)

onMounted(() => {
  editor.value = new Editor({
    editable: true,
    extensions: [
      StarterKit
    ],
    content: props.modelValue,
  })
})
</script>

And it works fine, but when I want to centralize my state in a Pinia store so that I’d be able to check editors state or call its’ methods from different components, like so:

// editorStore.js

export const useEditorStore = defineStore('editor', () => {
  const editorRef = ref(null)
  const textEditorContent = ref('')

  const initializeEditor = () => {
    editorRef.value = new Editor({
      editable: true,
      extensions: [
        StarterKit
      ],
      content: textEditorContent.value,
    })
  }
})

<template>
  <div>
    <editor-content :editor="editor" spellcheck="false" />
  </div>
</template>
<script setup>

const editorStore = useEditorStore()
const editor = editorStore.editorRef
onMounted(() => {
  editorStore.initializeEditor()
})

It either breaks the reactivity

• when using const editor = shallowRef(null) in the store

Or creates too much recursion

• when using const editor = ref(null)

I feel like I am missing crucial logic when it comes to reactivity/state management here.
What could be the problem?

I have a Project type in my app. I need to be able to access it via two separate async function:

• getProductBySlug
• getProductById

At the root of the page I use the URL to derive the slug and query for it using a useGetProductBySlugQuery hook (with a queryKey of [products, productSlug]) but everywhere else in component hierarchy where I need to access a project I use a useProductByIdQuery hook (with a queryKey of [products, productId]), and there are a variety of other hooks that update projects which all use this queryKey too.

Although storing the same data in the cache at two locations isn’t in itself a problem, this also means the same resource is stored in two different locations in the cache. This is problematic because:

• Any hooks that use the [products, productId] will not be fired when [products, productSlug] is updated or invalidated.
• Any hooks that use the [products, productSlug] will not be fired when [products, productId] is updated or invalidated.
• Using the project returned form useGetProductBySlugQuery to supply the id to useGetProductByIdQuery results in an unnecessary second request to get the same data.

So far there appear to be two solutions to this problem:

1. Manually update / invalidate both keys in each hook that uses either key. This involves a lot of duplicated logic, and is an obvious potential source of bugs.

2. Create a special dependent query at the root that will be triggered only when the query using [projects, projectSlug] succeeds in returning a project. That way the only place there is a dependency on the slug query is at the root of the project, and the rest of the project and queries are completely oblivious to it, meaning there is no need to update the [projects, projectSlug] key at all.

Something like this:

const useCopyProjectToCacheQuery = (project: Project) => {
  const queryClient = useQueryClient()
  return useQuery({
    queryKey: projectKeyFactory.project(project?.id),
    queryFn: async () => {
      // Check the cache for data stored under the project's id
      const projectDataById = await queryClient.getQueryData(
        projectKeyFactory.project(project.id)
      )

      return isNil(projectDataById)
        ? // If the data isn't found, copy the data from the project's slug key
          await queryClient.getQueryData<ProjectWithRelations>(
            projectKeyFactory.project(project.id)
          )
        : // Otherwise get it from the server
          await findProjectByIdAction(project.id)
    },
    enabled: isNotNil(project),
  })
}

This will populate the [projects, projectId] key with the project from the [projects, projectSlug] key when it is first populated, then will run a normal query on subsequent calls.

The second option appears to be working fine (although I end up with a cache entry for the key [projects, null]created whileprojectis null), but this seems like a really clumsy way to solve the problem. My next through was to subscribe to the QueryCache and copy the data from each key to the other whenever one of the keys changes, however [the docs][1] forQueryCache.subscribe` state:

Out of scope mutations to the cache are not encouraged and will not fire subscription callbacks

So what is the correct way to deal with this situation?

I want the Sankey chart to highlight all the forward and backward links connected to the nodes on which I’m hovering.
Examples:

1. When I hover on the node Natural Gas, it should highlight that node followed by all the forward nodes/links. But not the backward node, i.e., Net import.

Incorrect Highlighted Image

2. When hovered over the Net import link, it highlights all the correct nodes and links.

Correctly Highlighted Image

Fiddle Implementation: https://jsfiddle.net/g5wqpamc/

Sample code

Highcharts.chart("container", {
  exporting: { enabled: false },
  title: {
    text: null,
  },
  subtitle: {
    text: null,
  },
  accessibility: {
    point: {
      valueDescriptionFormat:
        "{index}. {point.from} to {point.to}, " + "{point.weight}.",
    },
  },
  plotOptions: {
    sankey: {
      point: {
        events: {
          mouseOver() {
            linksHover(this, "hover", false, this.isNode)
          },
          mouseOut() {
            linksHover(this, "")
          },
        },
      },
    },
  },
  tooltip: {
    enabled: false,
    headerFormat: undefined,
    pointFormat: undefined,
    nodeFormat: undefined,
  },
  series: [
    {
      keys: ["cat1", "cat2", "value"],

      nodes: [
        {
          id: "Electricity & Heat",
          color: "#ffa500",
        },
        {
          id: "Net Import",
          color: "000000",
        },
        {
          id: "Residential",
          color: "#74ffe7",
          column: 2,
        },
        {
          id: "Commercial",
          color: "#8cff74",
          column: 2,
        },
        {
          id: "Industrial",
          color: "#ff8da1",
          column: 2,
        },
        {
          id: "Transportation",
          color: "#f4c0ff",
          column: 2,
        },
        {
          id: "Rejected Energy",
          color: "#e6e6e6",
          column: 3,
        },
        {
          id: "Energy Services",
          color: "#F9E79F",
          column: 3,
        },
        {
          id: "Net Import",
          color: "000000",
        },
        {
          id: "Solar",
          color: "#009c00",
        },
        {
          id: "Nuclear",
          color: "#1a8dff",
        },
        {
          id: "Hydro",
          color: "#009c00",
        },
        {
          id: "Wind",
          color: "#009c00",
        },
        {
          id: "Geothermal",
          color: "#009c00",
        },
        {
          id: "Natural Gas",
          color: "#1a8dff",
        },
        {
          id: "Biomass",
          color: "#009c00",
        },
        {
          id: "Coal",
          color: "#989898",
        },
        {
          id: "Petroleum",
          color: "#989898",
          offset: -1,
        },
      ],

      data: [
        {
          from: "Net Import",
          to: "Electricity & Heat",
          weight: 14,
        },
        {
          from: "Solar",
          to: "Electricity & Heat",
          weight: 1.28,
        },
        {
          from: "Nuclear",
          to: "Electricity & Heat",
          weight: 8.05,
        },
        {
          from: "Hydro",
          to: "Electricity & Heat",
          weight: 2.31,
        },
        {
          from: "Wind",
          to: "Electricity & Heat",
          weight: 3.84,
        },
        {
          from: "Geothermal",
          to: "Electricity & Heat",
          weight: 0.15,
        },
        {
          from: "Natural Gas",
          to: "Electricity & Heat",
          weight: 12.5,
        },
        {
          from: "Coal",
          to: "Electricity & Heat",
          weight: 8.9,
        },
        {
          from: "Biomass",
          to: "Electricity & Heat",
          weight: 0.41,
        },
        {
          from: "Petroleum",
          to: "Electricity & Heat",
          weight: 0.24,
        },
        {
          from: "Electricity & Heat",
          to: "Residential",
          weight: 5.19,
        },
        {
          from: "Solar",
          to: "Residential",
          weight: 0.4,
        },
        {
          from: "Geothermal",
          to: "Residential",
          weight: 0.04,
        },
        {
          from: "Natural Gas",
          to: "Residential",
          weight: 5.17,
        },
        {
          from: "Biomass",
          to: "Residential",
          weight: 0.48,
        },
        {
          from: "Petroleum",
          to: "Residential",
          weight: 0.98,
        },
        {
          from: "Electricity & Heat",
          to: "Commercial",
          weight: 4.69,
        },
        {
          from: "Solar",
          to: "Commercial",
          weight: 0.16,
        },
        {
          from: "Geothermal",
          to: "Commercial",
          weight: 0.02,
        },
        {
          from: "Natural Gas",
          to: "Commercial",
          weight: 3.65,
        },
        {
          from: "Coal",
          to: "Commercial",
          weight: 0.02,
        },
        {
          from: "Biomass",
          to: "Commercial",
          weight: 0.15,
        },
        {
          from: "Petroleum",
          to: "Commercial",
          weight: 0.88,
        },
        {
          from: "Electricity & Heat",
          to: "Industrial",
          weight: 3.44,
        },
        {
          from: "Solar",
          to: "Industrial",
          weight: 0.04,
        },
        {
          from: "Natural Gas",
          to: "Industrial",
          weight: 10.8,
        },
        {
          from: "Coal",
          to: "Industrial",
          weight: 0.99,
        },
        {
          from: "Biomass",
          to: "Industrial",
          weight: 2.27,
        },
        {
          from: "Petroleum",
          to: "Industrial",
          weight: 9.13,
        },
        {
          from: "Electricity & Heat",
          to: "Transportation",
          weight: 0.02,
        },
        {
          from: "Natural Gas",
          to: "Transportation",
          weight: 1.29,
        },
        {
          from: "Biomass",
          to: "Transportation",
          weight: 1.57,
        },
        {
          from: "Petroleum",
          to: "Transportation",
          weight: 24.6,
        },
        {
          from: "Petroleum",
          to: "Plastics & Rubbers",
          weight: 50,
        },
        {
          from: "Plastics & Rubbers",
          to: "Waste Products",
          weight: 100,
        },
        {
          from: "Waste Products",
          to: "Pollutions",
          weight: 200,
        },
        {
          from: "Electricity & Heat",
          to: "Rejected Energy",
          weight: 24.3,
        },
        {
          from: "Residential",
          to: "Rejected Energy",
          weight: 4.29,
        },
        {
          from: "Commercial",
          to: "Rejected Energy",
          weight: 3.35,
        },
        {
          from: "Industrial",
          to: "Rejected Energy",
          weight: 13.6,
        },
        {
          from: "Transportation",
          to: "Rejected Energy",
          weight: 21.7,
        },
        {
          from: "Residential",
          to: "Energy Services",
          weight: 7.97,
        },
        {
          from: "Commercial",
          to: "Energy Services",
          weight: 6.22,
        },
        {
          from: "Industrial",
          to: "Energy Services",
          weight: 13.1,
        },
        {
          from: "Transportation",
          to: "Energy Services",
          weight: 5.77,
        },
      ],
      type: "sankey",
      name: "Sankey demo series",
    },
  ],
})

function linksHover(point, state, fromNode, isInitialStateNode) {
  if (point.isNode) {
    if (
      point?.series?.options?.columns?.length - 1 === point.column &&
      isInitialStateNode
    ) {
      fromNode = true
    }
    if (fromNode) {
      point.linksTo.forEach(function (l) {
        l.setState(state)
        if (!l.isNode) {
          linksHover(l.fromNode, state, true)
        }
      })
    } else {
      point.linksFrom.forEach(function (l) {
        l.setState(state)
        if (!l.isNode) {
          linksHover(l.toNode, state, false)
        }
      })
    }
  } else {
    linksHover(point.toNode, state, false)
    linksHover(point.fromNode, state, true)
  }
}

I tried changing the logic of the function but it’s breaking for some cases as shown in image 1.

I recently encountered an issue whereby the browser always cache the previous version even though a newer version of deployment has been released. The users always need to keep on refreshing or perform hard refresh in order to get the latest updated files. Is there anyway to solve this?

I saw web pack recommend something like contenthash but it doesn’t seem to be working. From what I know, contenthash changes only applies on files with changes. Am I missing something?

// Host module
  output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].chunk.js',
    publicPath: '/',
    clean: true,
  },

// child module
  output: {
    filename: '[name].[contenthash].js',
    publicPath: '/someChildName/',
    clean: true,
  },

I am trying to run firebase auth emulator on local and its running fine on local but not run on EC2 instance and i am facing issues that are stated below

{
  "projectId": "bubble-dev-361213",
  "emulators": {
    "auth": {
      "host": "localhost",
      "port": 9099
    },
    "firestore": {
      "host": "localhost",
      "port": 8088
    },
    "database": {
      "host": "localhost",
      "port": 9000
    },
    "storage": {
      "host": "localhost",
      "port": 9199
    },
    "ui": {
      "enabled": true,
      "host": "localhost",
      "port": 4000
    },
    "singleProjectMode": false
  },
  "storage": {
    "rules": "storage.rules"
  }
}

This is my firebase.json file on local And below is my nodemon.json file

{
  "watch": ["dist/"],
  "ext": ".ts,.js",
  "ignore": [],
  "exec": "node --inspect node_modules/@google-cloud/functions-framework/build/src/main.js --source=dist/ --target=main --debug",
  "env": {
    "NODE_OPTIONS": "--enable-source-maps",
    "FIREBASE_AUTH_EMULATOR_HOST": "18.207.204.161:9099",
    "DB_RESET_TOKEN": "ABC",
    "CRON_RUN_TOKEN": "ABC",
    "ENVIRONMENT": "local"
  }
}

i am very new to these type of things I tried running in my local and exposing the firebase emulator using the ngrok and it was working fine(in nodejs with typeScript) also i run my server using the pm2 run dev command

And expose the server and firebase url using the ngrok That work fine on local

But on ec2 instance i’m able to access the firebase emulator but i’m unable to see the data on the emulator ui and facing connection problems.

I am trying to implement WhatsApp Embedded Signup using the Facebook SDK, but FB.login() does not return the expected authorization code in the callback function. Below is my implementation as official documentation here

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Embedded Signup</title>
</head>
<body>

<!-- SDK loading -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>

<script>
  // SDK initialization
  window.fbAsyncInit = function() {
    FB.init({
      appId: 'appId', // my app ID
      autoLogAppEvents: true,
      xfbml: true,
      version: 'v22.0' // Graph API version
    });
  };

  // Session logging message event listener
  window.addEventListener('message', (event) => {
    if (event.origin !== "https://www.facebook.com" && event.origin !== "https://web.facebook.com") return;
    try {
      const data = JSON.parse(event.data);
      if (data.type === 'WA_EMBEDDED_SIGNUP') {
        console.log('message event: ', data); // Debugging log
      }
    } catch {
      console.log('message event: ', event.data); // Debugging log
    }
  });

  // Response callback
  const fbLoginCallback = (response) => {
    if (response.authResponse) {
      const code = response.authResponse.code; // Expected authorization code
      console.log('response: ', code); // Debugging log
    } else {
      console.log('response: ', response); // Debugging log
    }
  };

  // Launch method and callback registration
  const launchWhatsAppSignup = () => {
    FB.login(fbLoginCallback, {
      config_id: 'config_id', // my configuration ID
      response_type: 'code',
      override_default_response_type: true,
      extras: {
        setup: {},
        featureType: '',
        sessionInfoVersion: '3',
      }
    });
  };
</script>

<!-- Launch button -->
<button onclick="launchWhatsAppSignup()" style="background-color: #1877f2; border: 0; border-radius: 4px; color: #fff; cursor: pointer; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: bold; height: 40px; padding: 0 24px;">Login with Facebook</button>

</body>
</html>

Here simple function in Django to run the html page

@csrf_exempt

def hello_view(request):
    return render(request, 'test.html')

Clicking the “Login with Facebook” button triggers launchWhatsAppSignup(), but the authResponse object in the callback does not contain the expected authorization code. It seems to that Django doesn’t wait until the user finish Signup. It through none immediately after I click on the button. However when I try this html in native JavaScript, it works properly. What solution for this ?

what i got after conversion :

I am currently working on the react project that takes the user input that from the dropdown and input text field, i am getting the index as an tag in the xml conversion i want to get rid of it from the conversion of xml.

i am facing this isssue because the array to object conversion creates indexs as keys of the new object from the array.

<contacts>
    <0>
        <contactDetails>
            <contactType>Email</contactType>
            <contactValue>asdfasdf</contactValue>
        </contactDetails>
    </0>
    <1>
        <contactDetails>
            <contactType>Email</contactType>
            <contactValue>asdfasdf</contactValue>
        </contactDetails>
    </1>
</contacts>



//my object to xml convertion function : 

export const OBJtoXML = (obj) => {
  var xml = "";
  for (var prop in obj) {
    if (!obj.hasOwnProperty(prop)) {
      continue;
    }
    if (obj[prop] === undefined) continue;
    xml += `<${prop}>`;
    if (typeof obj[prop] == "object") {
      if (obj[prop].constructor === "object") {
        for (var i = 0; i < obj[prop].length; i++) {
          xml += "<item>";
          xml += OBJtoXML(new Object(obj[prop]));
          xml += "</item>";
        }
      } else {
        xml += OBJtoXML(new Object(obj[prop]));
      }
    } else {
      xml += obj[prop];
    }
    xml += `</${prop}>`;
  }
  return xml;
};

//in create user component
//i am coverting in this way:
// the object i am creating is

const [contactType, setContactType] = useState("");
const [contactValue, setContactValue] = useState("");
const [contactsDetailsArray] = useState([]);
const [contactsDetailsArrayObj] = useState({
  contacts: contactsDetailsArray,
});

export const CreateUser = () => {
  //constructor
  function contactDetails(contactType, contactValue) {
    this.contactType = contactType;
    this.contactValue = contactValue;
  }
  //function add contacts to the object on the button click and genetate the table
  const addContacts = () => {
    if (!contactType || !contactValue) {
      alert("invalid");
      return;
    } else {
      //step-7
      const contactStructure = new contactDetails(contactType, contactValue);
      const newContact = { contactDetails: contactStructure };
      contactsDetailsArray.push(newContact);
    }
    console.log("newContact", contactsDetailsArray);
    //clear input after contact added
    setContactType("");
    setContactValue("");
  };
  var contactsString = OBJtoXML(contactsDetailsArrayObj);

  return (
    <>
      <div className="row">
        <Table bordered hovered striped>
          <thead>
            <tr style={tablestyle.centerTable}>
              <th scope="col">Sr.No.</th>
              <th scope="col">Contact Type</th>
              <th scope="col">Value</th>
              <th scope="col">Actions</th>
            </tr>
          </thead>
          <tbody>
            {contactsDetailsArray?.map((item, index) => (
              <tr key={item._id} style={tablestyle.centerTable}>
                <td>{index + 1}</td>
                <td>{item.contactDetails.contactType}</td>
                <td>{item.contactDetails.contactValue}</td>
                <td>
                  <div className="d-flex justify-content-evenly">
                    <Link
                      type="button"
                      onClick={() => {
                        deleteContact(index);
                      }}
                    >
                      delete
                    </Link>
                  </div>
                </td>
              </tr>
            ))}
          </tbody>
        </Table>
      </div>
    </>
  );
};

this is the correct format i want to store in the database in the string format of this xml conversion. help me to achive this goal.

<contacts>
    <contactDetails>
        <contactType>Email</contactType>
        <contactValue>asdfasdf</contactValue>
    </contactDetails>
    <contactDetails>
        <contactType>Email</contactType>
        <contactValue>asdfasdf</contactValue>
    </contactDetails>
</contacts>

This should be pretty straight foward, but it is not working as expected. I want to add a marker exactly where the user clicks on the map. But, the marker is way off from where I clicked, and I do not know why. Also, the controls which I add with map.addControl(new mapboxgl.NavigationControl(), "top-right"); also don’t show up.

const MyMap = () => {
    const mapRef = useRef<HTMLDivElement | null>(null)

    useEffect(() => {
        if (!mapRef.current) return;
        mapboxgl.accessToken = "...";
        const map = new mapboxgl.Map({
            container: mapRef.current,
            style: "mapbox://styles/mapbox/dark-v11",
            center: [-74.0060152, 40.7127281],
            zoom: 5,
            maxZoom: 15,
        });

        map.on("load", () => {
            map.addControl(new mapboxgl.NavigationControl(), "top-right");
            map.on("click", event => {
                const {lngLat: {lng, lat}} = event
                new mapboxgl.Marker()
                    .setLngLat([lng, lat])
                    .addTo(map);
            });
        });
        return () => map.remove();
    }, []);

   

    return <div className={"protected-container"}>
               <div className={"container"}>
                   <div ref={mapRef} className={'map'} />
               </div>
           </div>
}

And this is the CSS

.protected-container {
  width: 100%;
  height: calc(100% - ...);
}

.container {
  height: 100%;
  overflow-y: auto;
}

.map {
    width: 100%;
    position: relative;
    height: 50%;
}

-root
 - node_modules
 - src
   - migrator
 - package.json

 - migrator
    - src
      -index.js
    - package.json

root(package.json) -

{
 "script" : {
   "build": "npm run build --ws --if-present",
   "lint": "npm run lint --ws --if-present",
   "lint-fix": "npm run lint-fix --ws --if-present"
   "test": "npm run test --ws --if-present"
   "automation-tests": "mocha ./src/automation-tests/**/*.test.js"
}
"workspaces": ["./src/*"]
}

migrator (package.json) -

{
"scripts": {
"test": "jest --coverage --verbose --colors --reporters=default --reporters=jest-junit",
"build": "rm -rf dist && mkdir dist && cp package.json dist && cp -r src dist",
"lint-fix": "retail-linter --sourceFolder=./ --type=javascript --fix",
"lint": "retail-linter --sourceFolder=./ --type=javascript"
}

}

I am working on a Node.js project and following the specified file structure. The issues I am facing are:

When I am inside the migrator folder and run npm i, it installs the packages for the parent project instead of the child project.
On the server, it is generating two folders: dist and src, with src containing the same files as dist.

I have this scenario, where I want to increment/decrement two values, so I use the standard ++ and -- operation to do this inside the update method of signals.

import { Component, signal } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  template: `
    <hr/>
    {{id()}}
    <hr/>
    {{num()}}
  `,
})
export class App {
  id = signal(1);
  num = signal(1000);

  ngOnInit() {
    setInterval(() => {
      this.id.update((prev: number) => prev++);
      this.num.update((prev: number) => prev--);
    }, 2000);
  }
}
bootstrapApplication(App);

Why are my signals updated, when I clearly incremented them.

Stackblitz Replication

I am working on this E-commerce website built in Laravel.
Client can download the sale report, products list and all reports in PDF file but when the products are named in Bangla Language, the pdf returns the characters as boxes. meaning the words are not readable. how to fix this?

$(document).ready(function() {
        var table = $('#product-data-table').DataTable( {
            responsive: true,
            fixedHeader: {
                header: true,
                footer: true
            },
            "processing": true,
            "serverSide": true,
            "ajax":{
                url:"products/product-data",
                data:{
                    all_permission: all_permission
                },
                dataType: "json",
                type:"post"
            },
            "createdRow": function( row, data, dataIndex ) {
                $(row).addClass('product-link');
                $(row).attr('data-product', data['product']);
                $(row).attr('data-imagedata', data['imagedata']);
            },
            "columns": columns,
            'language': {
                /*'searchPlaceholder': "{{trans('file.Type Product Name or Code...')}}",*/
                'lengthMenu': '_MENU_ {{trans("file.records per page")}}',
                 "info":      '<small>{{trans("file.Showing")}} _START_ - _END_ (_TOTAL_)</small>',
                "search":  '{{trans("file.Search")}}',
                'paginate': {
                        'previous': '<i class="dripicons-chevron-left"></i>',
                        'next': '<i class="dripicons-chevron-right"></i>'
                }
            },
            order:[['2', 'asc']],
            'columnDefs': [
                {
                    "orderable": false,
                    'targets': [0, 1, 9, 10, 11]
                },
                {
                    'render': function(data, type, row, meta){
                        if(type === 'display'){
                            data = '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>';
                        }

                       return data;
                    },
                    'checkboxes': {
                       'selectRow': true,
                       'selectAllRender': '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>'
                    },
                    'targets': [0]
                }
            ],
            'select': { style: 'multi', selector: 'td:first-child'},
            'lengthMenu': [[10, 25, 50, -1], [10, 25, 50, "All"]],
            dom: '<"row"lfB>rtip',
            buttons: [
                {
                    extend: 'pdf',
                    text: '<i title="export to pdf" class="fa fa-file-pdf-o"></i>',
                    exportOptions: {
                        columns: ':visible:not(.not-exported)',
                        rows: ':visible',
                        stripHtml: false
                    },
                   customize: function(doc) {
                        
                            doc.content[1].table.body.forEach(function(row) {
                                row.forEach(function(cell) {
                                    cell.margin = [5, 0, 5, 0];
                                });
                            });
                        
                        // Handle images in the table
                        for (var i = 1; i < doc.content[1].table.body.length; i++) {
                            if (doc.content[1].table.body[i][0].text.indexOf('<img src=') !== -1) {
                                var imagehtml = doc.content[1].table.body[i][0].text;
                                var regex = /<img.*?src=['"](.*?)['"]/;
                                var src = regex.exec(imagehtml)[1];
                                var tempImage = new Image();
                                tempImage.src = src;
                                var canvas = document.createElement("canvas");
                                canvas.width = tempImage.width;
                                canvas.height = tempImage.height;
                                var ctx = canvas.getContext("2d");
                                ctx.drawImage(tempImage, 0, 0);
                                var imagedata = canvas.toDataURL("image/png");
                                delete doc.content[1].table.body[i][0].text;
                                doc.content[1].table.body[i][0].image = imagedata;
                                doc.content[1].table.body[i][0].fit = [30, 30];
                            }
                        }
                    }
                },

i want a solution that i can modify this code snippet which will help me to show the Bangla texts properly. I dont know how to fix this.

I’m trying to integrate the Google login flow in my React app using the GoogleLogin component from @react-oauth/google. However, I want to customize the UI by hiding the default button and instead triggering the login flow using my own styled button. To achieve this, I’ve tried using a React ref to access the hidden GoogleLogin container and simulating a click on the underlying element. Unfortunately, the simulated click doesn’t seem to trigger the Google login flow.

import { GoogleLogin } from '@react-oauth/google';

interface GoogleLoginButtonProps {
    onSuccess: (data: any) => void;
    onError: (error: any) => void;
}

const GoogleLoginButton = ({ onSuccess, onError }: GoogleLoginButtonProps) => {
    // Create a ref to hold the hidden GoogleLogin container.
    const hiddenLoginRef = useRef<HTMLDivElement>(null);

    // This function simulates a click on the hidden GoogleLogin button.
    const handleCustomClick = () => {
        if (hiddenLoginRef.current) {
            // Query for the underlying button element and trigger click.
            const button = hiddenLoginRef.current.querySelector('div');
            console.log(button);
            if (button) {
                button.click();
            }
        }
    };

    const handleSuccess = (credentialResponse: any) => {
        onSuccess(credentialResponse);
    };

    const handleFailure = () => {
        onError(new Error('Google login failed'));
    };

    return (
        <div className="google-login-container">
            {/* Hidden GoogleLogin component */}
            <div style={{ display: 'none' }} ref={hiddenLoginRef}>
                <GoogleLogin onSuccess={handleSuccess} onError={handleFailure} theme="filled_black" />
            </div>
            {/* Your custom button */}
            <button
                type="button"
                className="btn btn-outline-primary gap-2 d-flex align-items-center justify-content-center"
                onClick={handleCustomClick}
            >
                <img src="./assets/images/google-icon.svg" alt="Google" width="20" height="20" />
                Login with Google
            </button>
        </div>
    );
};

export default GoogleLoginButton;

My issues/questions are:

1. Why doesn’t simulating a click on the hidden element trigger the
   Google login flow?
2. Is there a recommended approach for integrating
   GoogleLogin with a custom button?
3. Are there any pitfalls with using
   a hidden component and synthetic clicks that I should be aware of?

I suspect that the Google login library might be preventing synthetic clicks for security reasons, or that the hidden element isn’t being correctly targeted. Any insights, workarounds, or best practices would be highly appreciated!