How does ESM tree-shaking / dead code elimination work?

I'm curious how tree-shaking/dead code elimination of ESM works. I'm using Typescript for various Node.js projects and I started to export my own ESM packages (tsc --module es2015 --target es5 --outDir dist/esm) instead of CJS packages. Moreover, I tried to replace dependencies (like lodash) that are only available as CJS module with libraries that are available as ESM.

When I build a project, my entire TS codebase (./src) is transpiled to JS (./dist); dependencies are still taken from (./node_modules). No tree-shaking performed.

I guess I'd still need a bundler (like Webpack) that needs (at least) an entry point so that it can shake away everything that's not needed, so that I can reduce the package size of (e.g.) an AWS lambda? Is this something you would do?

from How does ESM tree-shaking / dead code elimination work?

How to scroll and expand an Accordion by onClick on an icon from a component?

I have a component MainContentwith its child Component AddMock. There is a table in MainContent which shows some list of items. It has a certain action on each row like view and edit which are rendered by Icons by semantic-UI react. By clicking on each icon, I need to scroll up and expand an accordion. The accordion is in AddMock.

// AddMock.js
const AddMock = () => {
  return (
    <div className="row">
      <Accordion style=>
        <Card className="collapseStyle">
          <Card.Header>
            <Accordion.Toggle as={Button} variant="link" eventKey="0">
              Add Mock
            </Accordion.Toggle>
          </Card.Header>
          <Accordion.Collapse eventKey="0">
            <Card.Body>
              <Container className="mockbody">
                <Header as="h3">Hierarchy</Header>
                <TabContent />
              </Container>
            </Card.Body>
          </Accordion.Collapse>
        </Card>
      </Accordion>
    </div>
  );
};

Below is the MainContent.js

const MainContent = () => {
  
  return (
    <div>
      <AddMock />
      <div className="container-fluid">
        <div className="row">
          <div className="col-md-12">
            <div className="card">
              <div className="card-header card-header-info">
                <h4 className="card-title ">MOCK</h4>
              </div>
              <div className="card-body">
                <form>
                  {loading ? (
                    <div className="table-responsive">
                      <table className="table">
                        <thead>
                          <tr>
                            <th>AppName</th>
                            <th>Parent_App</th>
                            <th>Created_Date</th>
                            <th>Req_Path</th>
                            <th>Resp_Code</th>
                            <th>Resp_Content_Type</th>
                            <th>Resp_Delay</th>
                            <th>Action</th>
                          </tr>
                        </thead>
                        <tbody>
                          {data.map((routes, index) => {
                            return routes.map(contents, index);
                          })}
                        </tbody>
                      </table>
                    </div>
                  ) : (
                    <Spinner
                      animation="border"
                      style=
                    />
                  )}
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Is it possible to implement this with window.scrollTo() or any other better way to implement this in react?

from How to scroll and expand an Accordion by onClick on an icon from a component?

How to execute axios code using the window's beforeunload event in React

I'm using React and PHP, and I need it to do something specific. I'm using Axios to send requests to my PHP pages which then changes my database. I need to make an update to my MySQL database that changes the is_logged value from true to false if the user closes the page or the browser. The code to do this is set in the window's beforeunload event. However, the database is never updated. Is what I'm trying to do even possible in React?

Here's my React component code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import Viewers from './Viewers';

const Live = ({ match }) => {

  window.addEventListener("beforeunload", () => {
    axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
      .then(response => console.log(response))
  })

  // Set token from url
  const token = match.params.token

  //Get the fullname and update logged_in to true
  const [fullname, setFullname] = useState("")

  useEffect(() => {
    axios.get('http://localhost/live-streaming-app/get_user.php?token=' + token)
      .then(response => {
        setFullname(response.data.fullname)
        console.log("Data", response.data)
      })
      .catch(error => console.log(error))

    return () => {
      axios.get('http://localhost/live-streaming-app/get_viewers.php?=' + token)
        .then(response => console.log(response))
        .catch(error => console.log(error))
    }
  }, [token])

  //Jsx for when user is unauthorised
  const rejected = (
    <div className="container text-center pt-5">
      <h1>Rejected Connection</h1>
      <p>You are unauthorised to view this page</p>
    </div>
  )

  let my_render = ""

  if (fullname && fullname != null) {
    my_render = <Viewers fullname={fullname} />
  } else {
    my_render = rejected
  }

  return my_render
};

export default Live;

Here is the PHP page that is called:

<?php
require 'connect.php';

$token = $_GET['token'];

$sql = "UPDATE `viewers` SET `logged_in`='false' WHERE `live_token`='{$token}'";
if(mysqli_query($con, $sql)){
  http_response_code(201);
}
else {
  http_response_code(422);
}

exit;

from How to execute axios code using the window's beforeunload event in React