What is the best way to define the entry points for all files in tsup/typescript that compile into the root dist

In my TypeScript project, I am utilizing the tsup build tool for bundling. I have a requirement to specify all the folders and files within the components directory to the root dist folder.

src/
   components/
        card/
            card.tsx
            index.ts
        carousel/
            carousel.tsx
            index.ts

        ...other components...
  
   index.ts

Currently, the output directory I am getting is structured like this:

dist/
    components
        card
            card.d.ts
            card.js
            index.d.ts
            index.js
        carousel
            carousel.d.ts
            carousel.js
            index.d.ts
            index.js
        ...

However, for better clarity in importing (tree-shaking), I aim to relocate all my components from the components folder directly into the dist directory as shown below:

dist/
    card
       card.d.ts
       card.js
       index.d.ts
       index.js
    carousel
       carousel.d.ts
       carousel.js
       index.d.ts
       index.js
    ...

Below is the configuration in my tsup file:

export default defineConfig((options: Options) => ({
   treeshake: true,
   splitting: true,
   entry: ['src/**/*.{ts,tsx}'],
   format: ['cjs', 'esm'],
   dts: true,
   ...options,
}));
javascripttypescripttsup

Answer №1

To simplify folder paths, consider using generic path names for all folders. An example is provided below using the 'glob' package.

Inspect all directories containing a 'src' folder and retrieve all .ts files within the 'src' directory and its subdirectories**

 import type { Options } from 'tsup'
import * as glob from 'glob'





const entries = glob.sync('**/src/*.ts')
console.log(entries)

const config: Options = {
  entry: entries,
  dts: true,
  sourcemap: true,
  minify: 'terser',
  outDir: 'dist',
   ...
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Higher Order Component with TypeScript using React's useContext API

Looking to convert this .js code snippet into Typescript. import React from 'react'; const FirebaseContext = React.createContext(null) export const withFirebase = Component => props => ( <FirebaseContext.Consumer> {fire ...

reactjstypescriptfirebasereact-context

Stopping a JavaScript promise.all() based on a certain condition

Here's a snippet of code I'm working with: let promiseList = [] for (let i in data) { let promise = checkIfMember(data[i].tg_id, chatId).then(res => { if (res) { //if the user has a undefined username ...

javascriptnode.js

Encountering an issue... invariant.js:42 Error: A `string` value was received instead of a function for the `onClick` listener

Currently, I am working on creating a form that allows users to build quizzes without any restrictions on the number of questions they must include. To achieve this, I plan to add an "add question" button at the bottom of the quiz form, allowing users to d ...

javascripthtmlreactjs

Monitor user activity for when they click the back button in their browser

Is there a way to detect when the user clicks on the back button of the browser? I'm working on an Ajax application and being able to detect back button clicks would allow me to display the appropriate data. I am open to solutions in PHP, JavaScript ...

phpjavascriptbrowser

Using Thymeleaf within Javascript code to generate a URL?

Here is my question: The project's base URL is : The test page URL is :, and on this page, I have included a JavaScript file called datatable.packer.js using the following code: <script type="text/javascript" th:src="@{/resources/js/datatable ...

javascriptajaxthymeleaf

Dynamically manipulate the perspective camera by moving and rotating it using a 4x4 matrix

Greetings, esteemed community members, For the past few days, I have been struggling with an issue related to updating the View Matrix (4x4) of my camera. This update is crucial for positioning objects within an AR-Scene created using three.js. The custo ...

javascriptmatrixthree.jsaugmented-realitymove

Steps to retrieve the central coordinates of the displayed region on Google Maps with the Google Maps JavaScript API v3

Is there a way to retrieve the coordinates for the center of the current area being viewed on Google Maps using JavaScript and the Google Maps JavaScript API v3? Any help would be greatly appreciated. Thank you! ...

javascriptgoogle-maps-api-3

In TypeScript with React, utilizing ref to access the video element and trigger the .play() method

I have a TypeScript React video component that I want to play when clicked. My approach is to use a click handler that accesses the video through a ref and calls .play(), but I keep encountering this error: TS2339: Property 'play' does not exist ...

reactjstypescript

What is a method to mimic the presence of JavaScript using PHP Curl?

Is it possible to parse HTML code from a webpage using PHP Curl even if there is an error message stating that JavaScript is required to access the site? Can PHP Curl be used to enable JavaScript on a webpage? ...

phpjavascriptcurllibcurl

Having trouble with Autocomplete not entering cities into the form?

While experimenting with Google's API, I have encountered confusion regarding why cities like Staten Island, Brooklyn, Queens, and various others are not being placed into the form like other cities. According to Google's API, "locality" is suppo ...

javascriptgoogle-mapsgoogle-maps-api-3

What is the best way to populate a div with multiple other div elements?

My current project involves creating a sketchpad using jQuery for an Odin Project assignment. However, I have encountered an issue with filling the canvas (wrapper div) with pixels (pixel divs). The canvas does not populate correctly. Here is the link to m ...

javascriptjqueryhtmlcss

Unable to retrieve custom date picker value with React Antd

I have implemented a custom datepicker for entering dates in the 'MMDD' or 'MMDDYY' format. The date value is stored in state and used in the datepicker component as a controlled component. However, upon form submission, the datepicker ...

javascriptreactjsdatepickerantd

Encountering a Material UI error: Incorrect hook usage when combining create-react-library with MUI

After transitioning from Material Ui v3 to v4 on a create-react-library project, I encountered an issue. This particular project serves as a dependency for other projects in order to share components. However, when attempting to display a material-ui compo ...

javascriptreactjsmigrationmaterial-ui

I require clarity on this befuddling syntax that feels like descending into

I came across this example in the official documentation at https://angular.io/guide/form-validation#custom-validators return (control: AbstractControl): {[key: string]: any} => { const forbidden = nameRe.test(control.value); return forbidden ...

angulartypescript

What is the proper method for initiating an ajax request from an EmberJs component?

Curious to learn the correct method of performing an ajax call from an Ember component. Let's say, for instance: I am looking to develop a reusable component that allows for employee search based on their Id. Once the server responds, I aim to update ...

javascriptjqueryajaxember.js

How can I dynamically show the corresponding name for a given ID in Django without the need to refresh or submit the form?

I need to dynamically display a user's name above the input box where they enter their Employee number on a form without refreshing the page. After entering the Employee number and moving to the next field, the user should see their name displayed on ...

javascriptpythondjango

All authentication logic in Angular encapsulated within the service

I am considering moving all the business logic into the auth service and simply calling the method on the component side. Since none of my functions return anything, I wonder if it's okay or if they will hang. COMPONENT credentials: Credentials = ...

angulartypescript

JavaScript -Error: Unable to access the 'children' property as it is undefined

I'm currently working on creating a tree and calculating its height. The map array is properly initialized within the for loop, but when I run console.log(map+" this is map");, it displays [object Object],[object Object],[object Object],[object Objec ...

javascriptnode.jsdata-structurestree

What's the best way to mount a file on a field?

Can you assist in resolving this issue by utilizing a form on JSFiddle? If a user fills out the following fields: name, email, phone, message The data should be output to the console. However, if a user adds a file to the field attachment No output ...

javascriptangularjsformsfileangularjs-directive

Angular: What methods can I utilize to prevent my $http requests from causing UI blockage?

The following code snippet is from my controller: PartnersService.GetNonPartnerBanks().success(function (data) { vm.nonPartnerBanksList = data; }).error( function () { vm.nonPartnerBanksList = []; }); This code calls the service s ...

javascriptangularjsajaxhttp