Category: javascript

I am using DataTables to display, paginate and sort a set of data.

new DataTable('#employees', {
  info: false,
  paging: true,
  filter: false,
  "aLengthMenu": [5, 10],
  initComplete: function() {
    if (this.api().page.info().pages < 2) {
      $('.dt-paging').hide();
    }
  }
});

$(document).ready(function() {
  $('.truncate').block_ellipsis({
    lines: 2,
    more: function(nb) {
      return '<span class="badge bg-secondary">Show ' + nb + ' more</span>';
    },
    less: '<span class="badge bg-secondary">Show less</span>'
  });
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/2.1.8/css/dataTables.bootstrap5.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.min.js"></script>
<script src="https://cdn.datatables.net/2.1.8/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Show-ide-Block-Elements-Block-Ellipsis/dist/block_ellipsis.js"></script>



<div class="container-fluid my-2">
  <h2>Data Tables</h2>
  <table id="employees" class="table table-bordered table-striped mx-1">
    <thead>
        <tr>
            <th class="w-auto">Name</th>
            <th class="w-25">Position</th>
            <th class="w-10">Office</th>
            <th class="w-25">Age</th>
            <th class="w-10">Skills</th>
            <th class="w-10">Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>            
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td class="truncate">
                <span class="badge rounded-pill bg-secondary">JavaScript</span>
                <span class="badge rounded-pill bg-secondary">CSS</span>
                <span class="badge rounded-pill bg-secondary">PHP</span>
                <span class="badge rounded-pill bg-secondary">Laravel</span>
                <span class="badge rounded-pill bg-secondary">Java</span>
                <span class="badge rounded-pill bg-secondary">Node</span>
                <span class="badge rounded-pill bg-secondary">CI/CD</span>
            </td>
            <td>$320,800</td>
        </tr>
        <tr>            
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td class="truncate">
                <span class="badge rounded-pill bg-secondary">JavaScript</span>
                <span class="badge rounded-pill bg-secondary">CSS</span>
                <span class="badge rounded-pill bg-secondary">PHP</span>
            </td>
            <td>$170,750</td>
        </tr>
        <tr>                
            <td>Ashton Cox</td>
            <td>Senior Software Developer</td>
            <td>San Francisco</td>
            <td>66</td>
            <td class="truncate">
                <span class="badge rounded-pill bg-secondary">JavaScript</span>
                <span class="badge rounded-pill bg-secondary">CSS</span>
                <span class="badge rounded-pill bg-secondary">PHP</span>
                <span class="badge rounded-pill bg-secondary">Laravel</span>
                <span class="badge rounded-pill bg-secondary">React</span>
                <span class="badge rounded-pill bg-secondary">Angular</span>
                <span class="badge rounded-pill bg-secondary">Java</span>
            </td>
            <td>$86,000</td>
        </tr>
        <tr>            
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td class="truncate">
                <span class="badge rounded-pill bg-secondary">JavaScript</span>
                <span class="badge rounded-pill bg-secondary">CSS</span>
            </td>
            <td>$433,060</td>
        </tr>
        <tr>            
            <td>Ștefan Popa</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td class="truncate">
                <span class="badge rounded-pill bg-secondary">CSS</span>
                <span class="badge rounded-pill bg-secondary">React</span>
            </td>
            <td>$162,700</td>
        </tr>
        <tr>            
            <td>Allan Smith</td>
            <td>Accountant</td>
            <td>London</td>
            <td>33</td>
            <td class="truncate">
                <span class="badge rounded-pill bg-secondary">CSS</span>
                <span class="badge rounded-pill bg-secondary">React</span>
            </td>
            <td>$162,700</td>
        </tr>
    </tbody>
  </table>
</div>

I am using the Block Ellipsis plugin in order to truncate the cells on the “Skills” column if they are too long.

The problem I am faced with is that the truncation only works on the first page of results.

What causes this issue and how can I fix it?

When I reduce the screen size, the options starting to disapper. I attach a pic where you can see.

<header>
<a href="#" class="logo" ><i class="ri-home-2-fill"></i><span>Logo</span></a>

<ul class="navbar">
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#">About me</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Blog</a></li>
  <li><a href="#">Contact me</a></li>
</ul>

<div class="main">
  <a href="#" class="user"><i class="ri-user-line"></i>Sign In</a>
  <a href="#">Register</a>
  <div class="bx bx-menu" id="menu-icon" ></div>
</div>

This is my CSS:

#menu-icon{
font-size: 35px;
color: var(--text-color);
cursor: pointer;
z-index: 10001;
display: none;
}

@media (max-width: 1280px){

header{
    padding: 14px 2%;
    transition: .2s;
}

.navbar a{
    padding: 5px 0;
    margin: 0px 20px;
}
}

@media (max-width: 1090px){

#menu-icon{
    display: block;
}

.navbar{
    position: absolute;
    top: 100%;
    right:-100%;
    width: 270px;
    height: 29vh;
    background: var(--main-color);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    border-radius: 10px;
    transition: all .50s ease;
}

.navbar a{
    display: block;
    margin: 12px 0;
    padding: 0px 25px;
    transition: all .50s ease;    
}

.navbar a:hover{
    color: var(--text-color);
    transform: translateY(5px);
}

.navbar a:active{
    color: var(--text-color)
}

.navbar .open{
    right: 2%;
}
}

This is my javascript file:

let menu = document.querySelector('#menu-icon');
let navbar = document.querySelector('.navbar');

menu.onclick = () => {
    menu.classList.toggle('bx-x');
    navbar.classList.toggle('open');
}*emphasized text*

enter image description here

enter image description here

When ever I reduce the screen size, the other options of the navbar don’t open, only cross sign will show. Can someone help me in resolve this issue?

My program has a button that moves when you click it and adds one to your score however the score doesn’t display correctly. Here is my HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p id="demo">Score: 0</p>
    <button id="move-button" onclick="moveButton()"></button>
    <script src="js.js"></script>
</body>
</html>

And here is the JavaScript:

let score = 0;
function moveButton()
{
    score= score + 1
    document.getElementById("demo").innerText = "Score:", score;
    const btn = document.getElementById('move-button');
    const maxX = window.innerWidth - btn.offsetWidth;
    const maxY = window.innerHeight - btn.offsetHeight;

    const randomX = Math.floor(Math.random() * maxX);
    const randomY = Math.floor(Math.random() * maxY);

    btn.style.left = `${randomX}px`
    btn.style.top = `${randomY}px`
    
}

This is the css code in case it helps:

body{
    display: flex;
    overflow: hidden;
}
button{
    position: absolute;
    align-self: center;
    height: 15px;
}

What can i do to make the score display correctly?

let score = 0;
function moveButton()
{
    score= score + 1
    document.getElementById("demo").innerText = "Score:", score;
    const btn = document.getElementById('move-button');
    const maxX = window.innerWidth - btn.offsetWidth;
    const maxY = window.innerHeight - btn.offsetHeight;

    const randomX = Math.floor(Math.random() * maxX);
    const randomY = Math.floor(Math.random() * maxY);

    btn.style.left = `${randomX}px`
    btn.style.top = `${randomY}px`
    
}

body{
    display: flex;
    overflow: hidden;
}
button{
    position: absolute;
    align-self: center;
    height: 15px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <p id="demo">Score: 0</p>
    <button id="move-button" onclick="moveButton()"></button>
    <script src="js.js"></script>
</body>
</html>

I’m trying to log the title of the index.html page with zombie.js, but I don’t seem to be able to make it work.

const Browser = require('zombie')
const browser = new Browser()

browser.visit('http://0.0.0.0:3000/', () => {
    console.log(browser.text("title"))
})

Below is the terminal output.

$ node --watch zombie_tests

Completed running 'zombie_tests'

Since “welcome” is the title of the index page, I anticipate “welcome” as the result.

I want to create a simple opacity gradient on an image. I’m using Next.JS with Chakra UI and Tailwind CSS for the front-end design, and I cannot find a way to do it.

This is a result that I did on figma using an image and a box with an alpha mask and a linear gradient:
See this image example

This is what I currently have: Image of my current web-app

This is my current code:

loginPage.js

import { Box, Flex, Image, Card } from "@chakra-ui/react";
export default function LoginPage() {
  return (
    <Flex
      paddingX={0}
      marginX={0}
      width={"100%"}
      justifyContent={"space-between"}
    >
      <Box>
        <Image src="./img/bordeaux.png"></Image>
      </Box>

      <Flex direction={"column"} justifyContent={"space-evenly"}>
        <Card.Root>
          <Card.Header />
        </Card.Root>
        <Card.Root>
          <Card.Header />
        </Card.Root>
      </Flex>
    </Flex>
  );
}

page.js

import Header from "./pages/header";
import LoginPage from "./pages/loginPage";

export default function Home() {
  return (
    <>
      <Header />
      <LoginPage />
    </>
  );
}

layout.js

import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { ColorModeProvider } from "@/components/ui/color-mode";
import { Provider } from "@/components/ui/provider";

const geistSans = Geist({
  variable: "--font-geist-sans",
  subsets: ["latin"],
});

const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});

export const metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({ children }) {
  return (
    <html suppressHydrationWarning>
      <body>
        <Provider>
          <ColorModeProvider
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
          >
            {children}
          </ColorModeProvider>
        </Provider>
      </body>
    </html>
  );
}

I tried to:

• Have an image with a linear gradient background
• Have a box with linear gradient and an image inside it with blend mode multiply
• Have a box on top of an image with a linear gradient.

But nothing works…

Thanks!

Next.js (V15, App router, SSR) does not render HTML as initially structured.

It renders <template> tags inside the structure, and further in the source, the content in a hidden <div>.

Thus, there is no structure in the source HTML, all attempts to be semantically correct are quite vain: all you see before JS is an empty structure and then a bunch of unstructured data.

**Isn’t that a problem for SEO and/or accessibility?

Is it taken for granted that JS will be ran by search engines and a11y tools? Then why even bother doing SSR?

Here are two examples of what Next.js (V15, App router) renders as the initial HTML for server components.

Main content:

JSX

<body>
                <main id="main">
                    {children}
                </main>
</body>

Renders:

<body>

<main id="main">
        <template id="P:1"></template><!--$--><!--/$--><!--$--><!--/$-->
</main>

<!-- ... -->
<!-- This is supposed to be #main content -->
<div hidden id="S:1">
    <div>
        <div class="cards-scroller-titles"></div>
        <div class="cards-scroller">
            <div class="card"><h1 class="card-title">À propos</h1>
                <div class="about-grid">
                    <section class="presentation">
                        <div class="">
                            <div><span><p>Je suis développeur freelance, basé sur Nantes et spécialisé en <strong>Symfony</strong>, <strong>architecture back-end</strong>, <strong>React/Next.js</strong> et <strong>intégration soignée</strong>.</p>

<!-- ... -->
</body>

Some components:

JSX:

<ul className="section-content">
                        {data.parcours.map((job: string) =>
                            <TimedItem item={job}/>
                       )}
                    </ul>

Renders:

<ul class="section-content">
                    <li class="timed-item">
                        <time class="date">
                            <template id="P:14"></template>
                        </time>
                        <h4 class="title">
                            <template id="P:15"></template>
                        </h4>
                    </li>
                    <li class="timed-item">
                        <time class="date">
                            <template id="P:16"></template>
                        </time>
                        <h4 class="title">
                            <template id="P:17"></template>
                        </h4>
                    </li>
</ul>
<!-- ... -->
<div hidden id="S:14">2010+</div>
<script>$RS("S:14", "P:14")</script>
<div hidden id="S:15">Développeur / architecte web freelance</div>
<script>$RS("S:15", "P:15")</script>
<div hidden id="S:16">2010+</div>
<script>$RS("S:16", "P:16")</script>
<div hidden id="S:17">Contributions à des projets open-source (modules Symfony, plugins PhpStorm, Mastodon...)</div>
<script>$RS("S:17", "P:17")</script>
<div hidden id="S:18">2006 — 2012</div>

چه مشکلی پیش اومده؟
داده‌ها از API به‌درستی دریافت می‌شن (توی console.log(data) نشون داده می‌شن)، اما وقتی می‌خوام اون‌ها رو داخل JSX رندر کنم، چیزی روی صفحه نشون داده نمی‌شه.

چه کاری می‌خواستی انجام بدی؟
می‌خواستم یک لیست از محصولات رو از API که با Express ساختم دریافت کنم و داخل یک کامپوننت React نمایش بدم.

چه چیزهایی رو تست کردم؟
fetch به /api/products انجام می‌شه و جواب می‌گیرم.

از useEffect برای گرفتن دیتا استفاده کردم.

داده‌ها به‌درستی در useState ذخیره می‌شن.

ولی توی map که برای رندر کردن محصولات استفاده کردم، چیزی نشون داده نمی‌شه.

I’m using Angular 18 with signals.
My CalculationService basically calculates a price based on some parameters.
Building with ng serve doesn’t throw any errors neither does VSCode, however my browser throws the following:

 ERROR TypeError: this.doorAmount is not a function at Object.calculatePricePerDoor [as computation] (calculation.service.ts:52:48)

And my component doesn’t load.

calculation.service.ts

import { computed, Injectable, signal } from '@angular/core';
import {
  basePrice,
  basePricePerDay,
  basePricePerDoor,
  minutesPerDoor,
  stepPrice,
} from '../consts';

@Injectable({
  providedIn: 'root',
})
export class CalculationService {
  #price = signal(0);
  #basicDoorAmount = signal(0);
  #electroDoorAmount = signal(0);
  #automaticDoorAmount = signal(0);

  doorAmount = computed(this.countDoorAmount);
  price = computed(this.#price);
  pricePerDoor = computed(this.calculatePricePerDoor);
  priceStep = computed(this.calculatePriceStep);
  hours = computed(this.countHours);
  days = computed(this.countDays);

  constructor() {
    this.calculatePrice();
  }

  calculatePrice() {
    this.#price.set(
      basePrice +
        this.pricePerDoor() +
        basePricePerDay * this.days() +
        this.priceStep()
    );
  }

  setBasic(amount: number) {
    this.#basicDoorAmount.set(amount);
  }

  setElectro(amount: number) {
    this.#electroDoorAmount.set(amount);
  }

  setAutomatic(amount: number) {
    this.#automaticDoorAmount.set(amount);
  }

  private calculatePricePerDoor() {
    const { basic, electro, automatic } = this.doorAmount();
    return (
      basic * basePricePerDoor.basic +
      electro * basePricePerDoor.electro +
      automatic * basePricePerDoor.automatic
    );
  }

  private calculatePriceStep() {
    const { basic } = this.doorAmount();
    if (basic < 21) return 0;
    if (basic < 101) return stepPrice[100];
    if (basic < 251) return stepPrice[250];
    if (basic < 1001) return stepPrice[1000];
    return stepPrice[1001];
  }

  private countDoorAmount() {
    return {
      basic: this.#basicDoorAmount(),
      electro: this.#electroDoorAmount(),
      automatic: this.#automaticDoorAmount(),
    };
  }

  private countHours() {
    const { basic, electro, automatic } = this.doorAmount();
    return (
      (basic * minutesPerDoor.basic +
        electro * minutesPerDoor.electro +
        automatic * minutesPerDoor.automatic) /
      60
    );
  }

  private countDays() {
    return Math.ceil(this.countHours() / 7.5);
  }
}

Here is my code

async function getFilesHandles(dirHandle) {
    const handles = [];
    for await (const entry of dirHandle.values()) {
      if (entry.kind === 'directory') {
        handles.push(...(await this.listAllFilesAndDirs(entry)));
      } else {
        handles.push(entry);
      }
    }
    return handles;
  }

const directoryHandle= await window.showDirectoryPicker({ mode: 'read' });
const handles = await getFilesHandles(directoryHandle);

await handles[0].getFile(); // <-- doesn't work when path+filename length > 231 chars

Throws the followinf Error

Uncaught NotFoundError: A requested file or directory could not be found at the time an operation was processed.

Is there a way to work around this ?

OS: Windows
Browser: Chrome (Version 134.0.6998.178 – 64 bits)

I’m facing issues while uploading an iOS build for a React Native app (using Hermes and Razorpay) to App Center and TestFlight. Even after cleaning and rebuilding multiple times, I encounter the following validation and symbol upload errors.
The archive did not include a dSYM for the Razorpay.framework with the UUIDs [UUIDs].
Ensure that the archive’s dSYM folder includes a DWARF file for Razorpay.framework with the expected UUIDs.

The archive did not include a dSYM for the hermes.framework with the UUIDs [UUIs].
Ensure that the archive’s dSYM folder includes a DWARF file for hermes.framework with the expected UUIDs.

What I’ve tried:
Cleaned the project and derived data.

Re-archived using Xcode (Product > Archive).

Verified debug_information_format is set to dwarf-with-dsym.

Attempted to manually find and include missing dSYM files.

Checked for bitcode settings in Xcode and in Podfile.

Searched for the UUIDs in dwarfdump output – not found.
React Native with Hermes enabled

Razorpay iOS SDK integration

Xcode 16.x

Archive being uploaded via App Center or manually to TestFlight

How can i add the URL of the page (where the user opened the chatbot) to the Transcript of VoiceFlow AI agent? This will help us to understand which website pages users are asking their Questions! I tried the following but did not work:

(function(d, t) {
  var v = d.createElement(t), s = d.getElementsByTagName(t)[0];
  v.onload = function() {
    window.voiceflow.chat.load({
      verify: { projectID: 'XXXXCURRENT_IDXXXX' },
      url: 'https://general-runtime.voiceflow.com',
      versionID: 'production',
      launch: {
        event: {
            type: "launch",
            payload: {
            current_url: window.location.href
            }
        }
        },
        autostart: false
    });
  }
  v.src = "https://cdn.voiceflow.com/widget/bundle.mjs"; v.type = "text/javascript"; s.parentNode.insertBefore(v, s);})(document, 'script');

and

if (last_event) {
  current_url = last_event.payload.current_url
} else {
  current_url = "i dunno"
}

It seems last_event is not found and also not sure how this could add the url to the Transcript.

Ik use a jquery/javascript for cropping and resizing image and that works fine. The problem is that I want to upload the cropped image via a normal input (file) so that my server sided laminas script can process the adjusted image. How to get the adjusted image into the input field of my form? I can receive a base64 encoded image, but I want to receive it in the “normal” way.
In the script the dataUrl is composed like below:

var dataUrl     = (options.canvasImageOnly == true) ? $(canvasImageOnly)[0].toDataURL(image.data('mime')) : $(canvas)[0].toDataURL(image.data('mime'))

It (seems) that the image is put in the input over here (but that is encoded I suppose)

 var json       = JSON.stringify($.extend({data: dataUrl},obj));
                        $(input).after($('<input type="text" name="' + $(input).attr('name') + '_values" class="final" />').val(json));
                        
                        $(input).data('required',$(input).prop('required'));
                        $(input).prop('required',false);
                        $(input).wrap('<form>').parent('form').trigger('reset');
                        $(input).unwrap();
                        
                        $(element).find('.tools .saving').remove();
                        $(element).find('.tools').children().toggle();
                        
                        _self.imageFinal();

I’m trying to solve a variation of the classic “Decode String” problem in JavaScript, but instead of characters or strings inside brackets, my inputs contain numbers — and they can be nested.

let sampleA = "3[2]5[8]"; 
// Expected output: "22288888"

let sampleB = "2[2[32]1[82]]"; 
// Expected output: "323282323282"

Thanks in advance!

What I tried and what I expected:

I started by modifying a standard decoder that handles strings like "3[a]2[bc]". Here’s a simplified version of what I tried:

function decodeString(s) {
  const stack = [];
  let current = "";
  let k = 0;

  for (let ch of s) {
    if (!isNaN(ch)) {
      k = k * 10 + parseInt(ch);
    } else if (ch === '[') {
      stack.push([current, k]);
      current = "";
      k = 0;
    } else if (ch === ']') {
      const [prev, repeat] = stack.pop();
      current = prev + current.repeat(repeat);
    } else {
      current += ch;
    }
  }

  return current;
}

This works fine for alphabetic inputs like "3[a2[c]]" → "accaccacc".
But for my case with numeric content like "2[2[32]1[82]]", it fails because:

• It treats numbers only as repeat counts.

• It doesn’t distinguish numbers inside brackets from the ones outside.

• The inner numeric strings get interpreted incorrectly or ignored.

I am completely new to React-Native world. I was setting up React-Native ENV locally for existing project. I am getting Task :app:mergeDebugAssets FAILED error when i run npm run android please help me. Thanks in advance.

I have attached screenshot of technical stacks i am using for env setup and also attached important file info, please let me know if any other info is required.

Error info

> Task :app:mergeDebugAssets FAILED

Deprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.
Use '--warning-mode all' to show the individual deprecation warnings.
See https://docs.gradle.org/6.9/userguide/command_line_interface.html#sec:command_line_warnings
86 actionable tasks: 86 executed

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeDebugAssets'.
> Could not resolve all files for configuration ':app:debugRuntimeClasspath'.
   > Failed to transform annotation-experimental-1.4.0.aar (androidx.annotation:annotation-experimental:1.4.0) to match attributes {artifactType=android-assets, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-runtime}.
      > Execution failed for JetifyTransform: /Users/bahubali/.gradle/caches/modules-2/files-2.1/androidx.annotation/annotation-experimental/1.4.0/c7a2038d831d0cfbfb9a440890b287c2e839ecf/annotation-experimental-1.4.0.aar.
         > Failed to transform '/Users/bahubali/.gradle/caches/modules-2/files-2.1/androidx.annotation/annotation-experimental/1.4.0/c7a2038d831d0cfbfb9a440890b287c2e839ecf/annotation-experimental-1.4.0.aar' using Jetifier. Reason: IllegalArgumentException, message: Unsupported class file major version 61. (Run with --stacktrace for more details.)
           Suggestions:
            - Check out existing issues at https://issuetracker.google.com/issues?q=componentid:460323&s=modified_time:desc, it's possible that this issue has already been filed there.
            - If this issue has not been filed, please report it at https://issuetracker.google.com/issues/new?component=460323 (run with --stacktrace and provide a stack trace if possible).

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 7m 25s

gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
distributionUrl=https://services.gradle.org/distributions/gradle-6.9-all.zip
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists

App leve build.gradle

buildscript {
    repositories {
        maven { url 'https://plugins.gradle.org/m2/' } // Gradle Plugin Portal
    }
    dependencies {
    }
}


apply plugin: "com.android.application"

import com.android.build.OutputFile



project.ext.react = [
    enableHermes: true,  // clean and rebuild if changing
]

apply from: "../../node_modules/react-native/react.gradle"
apply from: "../../node_modules/react-native-code-push/android/codepush.gradle"


def enableSeparateBuildPerCPUArchitecture = true

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false


def jscFlavor = 'org.webkit:android-jsc:+'


def enableHermes = project.ext.react.get("enableHermes", false);

android {
    ndkVersion rootProject.ext.ndkVersion

    compileSdkVersion rootProject.ext.compileSdkVersion

    dexOptions {
        incremental true
        javaMaxHeapSize "4g"
    }


    defaultConfig {
        applicationId "com.myapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode MYAPP_UPLOAD_VERSION_CODE.toInteger()
        versionName MYAPP_UPLOAD_VERSION_NAME
        vectorDrawables.useSupportLibrary = true
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk true  // If true, also generate a universal APK
            include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
        }
    }
    signingConfigs {
        debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }
        release {
            storeFile file(MYAPP_UPLOAD_STORE_FILE)
            storePassword MYAPP_UPLOAD_STORE_PASSWORD
            keyAlias MYAPP_UPLOAD_KEY_ALIAS
            keyPassword MYAPP_UPLOAD_KEY_PASSWORD
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

    packagingOptions {
        pickFirst "lib/armeabi-v7a/libc++_shared.so"
        pickFirst "lib/arm64-v8a/libc++_shared.so"
        pickFirst "lib/x86/libc++_shared.so"
        pickFirst "lib/x86_64/libc++_shared.so"
    }

    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // https://developer.android.com/studio/build/configure-apk-splits.html
            // Example: versionCode 1 will generate 1001 for armeabi-v7a, 1002 for x86, etc.
            def versionCodes = ["armeabi-v7a": 1, "x86": 2, "arm64-v8a": 3, "x86_64": 4]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        defaultConfig.versionCode * 1000 + versionCodes.get(abi)
            }

        }
    }
}

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    //noinspection GradleDynamicVersion
    implementation "com.facebook.react:react-native:+"  // From node_modules

    implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.0.0"

    implementation project(':react-native-splash-screen')

    implementation project(':lottie-react-native')

    implementation 'com.airbnb.android:lottie:4.2.0'

    implementation project(':react-native-maps')
    implementation project(':react-native-code-push')

    compile project(':react-native-exception-handler')


    //implementation group: 'com.cloudinary', name: 'cloudinary-android'

    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}") {
      exclude group:'com.facebook.fbjni'
    }

    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
        exclude group:'com.squareup.okhttp3', module:'okhttp'
    }

    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}") {
        exclude group:'com.facebook.flipper'
    }

    if (enableHermes) {
        def hermesPath = "../../node_modules/hermes-engine/android/";
        debugImplementation files(hermesPath + "hermes-debug.aar")
        releaseImplementation files(hermesPath + "hermes-release.aar")
    } else {
        implementation jscFlavor
    }
}

// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.implementation
    into 'libs'
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

def REACT_NATIVE_VERSION = new File(['node', '--print',"JSON.parse(require('fs').readFileSync(require.resolve('react-native/package.json'), 'utf-8')).version"].execute(null, rootDir).text.trim())

allprojects {
    configurations.all {
        resolutionStrategy {
            // Remove this override in 0.65+, as a proper fix is included in react-native itself.
            force "com.facebook.react:react-native:" + REACT_NATIVE_VERSION
        }
    }
}

Root level build.gradle

// Top-level build file where you can add configuration options common to all sub-projects/modules.

buildscript {
    ext {
        buildToolsVersion = "30.0.2"
        minSdkVersion = 21
        compileSdkVersion = 31
        targetSdkVersion = 31
        ndkVersion = "20.1.5948944"
        playServicesVersion = "17.0.0"
        androidMapsUtilsVersion = "2.2.2"
        supportLibVersion = "28.0.0"
        RNMapboxMapsImpl = "maplibre" // optinal - as this is the default

        RNMapboxMapsLibs = { // optional - only required if you want to customize it
            implementation ("org.maplibre.gl:android-sdk:9.5.2")
            implementation ("org.maplibre.gl:android-sdk-turf:5.9.0")

            implementation ("org.maplibre.gl:android-plugin-localization-v9:1.0.0")
            implementation ("org.maplibre.gl:android-plugin-annotation-v9:1.0.0")
            implementation ("org.maplibre.gl:android-plugin-markerview-v9:1.0.0")
        }
    }
    repositories {
        google()
        mavenCentral()
        //jcenter()
        //maven { url 'https://plugins.gradle.org/m2/' }
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.2.1")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    tasks.withType(Javadoc).all { enabled = false }
    repositories {
        mavenCentral()
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../node_modules/react-native/android")
            maven { url "https://maven.google.com" }
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../node_modules/jsc-android/dist")
        }

        google()
        //jcenter()
        maven { url 'https://www.jitpack.io' }
    }
}

I’m trying to define props with nested structure and generics, but I’m encountering an error

Current issue： error on line 46

Desired solution path, only modify the generics and parameter types of defineProps, do not modify other types.

import { Ref } from "vue";

interface IPropDef<T> {
  title: string | Ref<string>;
  default: T;
  editorOnly?: boolean;
  exit?: boolean;
}

type IInvalidConfigKey = `$${string}` | keyof IPropDef<unknown>;

type IPropConfig<T> = {
    [P in keyof T]: P extends IInvalidConfigKey
        ? never
        : T[P] extends Record<string, unknown>
          ? IPropConfig<T[P]>
          : IPropDef<T[P]>;
};

type DeepIPropConfig = {
  [key: string]: IPropDef<unknown> | DeepIPropConfig;
}

function defineProps<T extends Record<string, unknown> = Record<string, unknown>>(
  props: IPropConfig<T> & DeepIPropConfig
): void {}


//-------------- split-line --------------
// Test case
// Constraints to be met:
// 1. Users can choose to pass in generics or not (case1 and case2)
// 2. When users pass in generics
  // 2.1 They can pass in only some keys in props or all keys (case1 and case2)
  // 2.2 The type corresponding to the passed key needs to include the type inferred from the default defined in props (case3)
// 3. Both T and props are nested structures

// case1
defineProps({
  trigger: {
      title: 'string',
      default: true,
  },
  mask: {
      // Error: Object literal may only specify known properties, and 'isShow' does not exist in type 'IPropDef<string>'
      isShow: {
          title: "just show",
          default: true,
      },
      close: {
          title: "Just close",
          default: false,
      },
  },
});

// case1
defineProps<{
  trigger: boolean;
}>({
  trigger: {
      title: 'string',
      editorOnly: true,
      default: true,
  },
  mask: {
      isShow: {
          title: "just Show",
          default: true,
          // Notice: When I type "edi", The IDEA can give me the correct type hint.(editorOnly)
          // edi
      },
      close: {
          title: "just Close",
          default: false,
      },
  },
});

// case3:
defineProps<{
  // Manually provide a more precise, expected type
  trigger: boolean | string;
}>({
  trigger: {
    title: 'string',
    default: true,
  },
});

Typescript playground: playground