If you're a library developer for Javascript or Typescript, a new badge to show unpacked size of your packages is now available.

• Related Issue
• Related Pull Request
• Documentation and Badge Generation Page

Badge URL format:

https://img.shields.io/npm/unpacked-size/npmPackageName

This exercise will demonstrate how to create page elements dynamically and how to use a global value to easily be able to update the page contents. Use of document.createElement() to dynamically create page elements and how to append them to the web page with appendChild().

I've been writing a hook+component library for React and Firebase, the source of which can be seen here.

It reached to a certain stability. My current goal is to reduce the size as much as possible. I've checked documents and stuff and this is the vite.config.ts that I have:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import { defineConfig } from "vite";
import dts from "vite-plugin-dts";
import { peerDependencies } from "./package.json";

export default defineConfig({
  build: {
    lib: {
      entry: "./src/index.ts", // Specifies the entry point for building the library.
      name: "firereact", // Sets the name of the generated library.
      fileName: (format) => `index.${format}.js`, // Generates the output file name based on the format.
      formats: ["cjs", "es"], // Specifies the output formats (CommonJS and ES modules).
    },
    rollupOptions: {
      external: [...Object.keys(peerDependencies)], // Defines external dependencies for Rollup bundling.
    },
    sourcemap: true, // Generates source maps for debugging.
    emptyOutDir: true, // Clears the output directory before building.
  },
  plugins: [dts(), peerDepsExternal()], // Uses the 'vite-plugin-dts' plugin for generating TypeScript declaration files (d.ts).
});

build.lib.rollupOptions.external is to be expected: It gets peer dependencies from package.json. peerDepsExternal helps to not bundle the dependencies of peer dependencies.

Still, I've thought the final size is not that reasonable compared to some similar libraries.

That's why I've checked what's being included with npx vite-bundle-visualizer.

Seems like @firebase is being included to the final library. I can also confirm it with less dist/index.es.js and see @firebase being mangled.

Firebase is a peer dependency so it shouldn't be bundled to the final library (or maybe I misunderstand something cruicial about peerDependencies).

How do I exclude @firebase from the library?

Troubleshooting

Here are some ways that I've tried to remove @firebase from the final library:

• Tried to manually add it into build.lib.rollupOptions.external in vite.config.ts.
• Played with some settings in tsconfig.json.

~~ cross-posted from: https://programming.dev/post/9179830 ~~

Hi,

I'm loading some content with XHR (aka Ajax) the loaded input elements that have a invalid value assigned are not checked trough the validation process.

so the CSS styling with :invalid is for example not working etc..

is there a way to force the validation process on those elements ?

edit: Browser is Firefox

Thanks.

I've decided to write my first library in Typescript, which is here.

I've got some questions that I don't think is suitable for StackOverflow because it's quite case-specific rather than being generic and I've got a couple of them rather than one.

I'm trying to wrap my head around JS/TS module system for some while. There are some problems with my library:

1. If a user imports a hook, they have to do import { useDocument } from 'firereact/firestore/useDocument', but it'd be much better if they could do import { useDocument } from 'firereact/firestore'. I've tried many ways but I couldn't export it to firestore/index.ts I guess. What am I doing wrong?
2. I have realized that consumers can also import test modules and firebase.ts, which are only used for testing and it is not desirable for them to be imported by the consumers. How can I ignore some specific exports while bundling? They are meant to be used internally.

Thanks in advance. And btw, extra reviews and critics are appreciated since this is going to be my first library.

Hello, I am trying to learn JavaScript using morzilla developer network, are there any other good sources to learn and practice javascript.

I currently use Svelte in my main personal project but while enjoying it's relatively concise, declarative syntax, I don't really like how it's not always easy or even possible to do stuff without relying on shared state and I think that's bad. So I started looking into Elm, but it seems to require a significant portion of boilerplate and somewhat more procedural code, which surprised me, considering how Haskell is often notably more concise than C. Is there anything that is somewhat like Elm, i.e. functional, but without being overly verbose?

Edit: I'd also prefer bundle sizes no larger or marginally larger than with Svelte and decent noscript support, at least on par with Vue or HTMX.

I am part of a team that runs a small wiki for a game 99% of the population never heard of (don't ask me what it is), so I wanted to make a discord bot that used our API to pull info quickly, how it works is you do /search name:[enter name of item] and you get a list of, at most, the top 5 search results with emojis at the bottom to react with, then the bot should spit out another embed message with item description and stats, etc. The issue is that for the life of me, I can't seem to make the bot recognize what emoji the user has selected, as it always just returns '0' emojis selected. I am noob at JS, plz help

Here is what I got: `

async execute(interaction) {
    const query = interaction.options.getString("name");

    let itemData;

    try {
        // Get data from api
        const itemAPIList = await fetch(
            `the link for our api, not important q=${query}`
        ).then((res) => res.json());
        itemData = itemAPIList.data;

        const emojis = ["1️⃣", "2️⃣", "3️⃣", "4️⃣", "5️⃣"];

        // Check if itemData from api is not empty
        if (itemData.length > 0) {
            // Create the embed message
            const itemEmbed = new EmbedBuilder()
                .setColor(0x00ff80)
                .setDescription(
                    "React with the corresponding emoji to select an item"
                );
            // List out the top 5 results from api with an emoji next to it
            for (let i = 0; i < 5 && i < itemData.length; i++) {
                itemEmbed.addFields({
                    name: `${emojis[i]}: ${itemData[i].name}`,
                    value: " ",
                });
            }
            // Sends the embedded message
            const sentItemList = await interaction
                .reply({
                    embeds: [itemEmbed],
                    fetchReply: true,
                })
                .then(async (itemListMsg) => {
                    // Reacts to the message with correct number of emoji numbers
                    for (
                        let i = 0;
                        i < emojis.length && i < itemData.length;
                        i++
                    ) {
                        await itemListMsg.react(emojis[i]);
                    }

                    // Filter for checking if emoji and user are correct
                    const collectorFilter = (reaction, user) => {
                        return (
                            emojis.includes(reaction.emoji.name) &&
                            user.id === interaction.user.id
                        );
                    };

                    const collector =
                        await itemListMsg.createReactionCollector({
                            filter: collectorFilter,
                            time: 5000,
                        });

                    collector.on("collect", (reaction, user) => {
                        console.log(
                            `Collected ${reaction.emoji.name} from ${user.tag}`
                        );
                    });

                    collector.on("end", (collected) => {
                        console.log(`Collected ${collected.size} items`);
                    });
                });
        }

`

Title. I'm trying to compile this but I can't seem to do so with node.js.

Thanks in advance.

Hello!

I am pleased to announce a new version of my Understanding JavaScript RegExp ebook. This book will help you learn JavaScript Regular Expressions step-by-step from beginner to advanced levels with hundreds of examples and exercises.

Links:

• PDF/EPUB versions: https://learnbyexample.gumroad.com/l/js_regexp (free till 05-Nov-2023)
• Web version: https://learnbyexample.github.io/learn_js_regexp/
• Markdown source, exercise solutions, etc: https://github.com/learnbyexample/learn_js_regexp
• Short video about the book: https://youtu.be/8X-hUel3GxM

I would highly appreciate it if you'd let me know how you felt about this book. It could be anything from a simple thank you, pointing out a typo, mistakes in code snippets, which aspects of the book worked for you (or didn't!) and so on. Reader feedback is essential and especially so for self-published authors.

Happy learning :)

The next minor release of ESLint will deprecate core formatting rules. [The dev team] recommends you use a source code formatter [Prettier, dprint] instead.