Skip Navigation
InitialsDiceBearhttps://github.com/dicebear/dicebearhttps://creativecommons.org/publicdomain/zero/1.0/„Initials” (https://github.com/dicebear/dicebear) by „DiceBear”, licensed under „CC0 1.0” (https://creativecommons.org/publicdomain/zero/1.0/)ER
Posts
12
Comments
8
Joined
2 yr. ago
React @programming.dev
erayerdin @programming.dev
Rust @programming.dev
erayerdin @programming.dev

A Practical Introduction to Derive Macros in Rust

Rust @programming.dev
erayerdin @programming.dev

How do I parse the escape characters of the content of a string literal input with nom?

So, I'm basically trying to parse a string literal with nom. This is the code I've come up with:

 rust
    
use nom::{
    bytes::complete::{tag, take_until},
    sequence::delimited,
    IResult,
};

/// Parses string literals.
fn parse_literal<'a>(input: &'a str) -> IResult<&'a str, &'a str> {
    // escape tag identifier is the same as delimiter, obviously
    let escape_tag_identifier =
        input
            .chars()
            .nth(0)
            .ok_or(nom::Err::Error(nom::error::Error::new(
                input,
                nom::error::ErrorKind::Verify,
            )))?;

    let (remaining, value) = delimited(
        tag(escape_tag_identifier.to_string().as_str()),
        take_until(match escape_tag_identifier {
            '\'' => "'",
            '"' => "\"",
            _ => unreachable!("parse_literal>>take_until branched into unreachable."),
        }),
        tag(escape_tag_identifier.to_string().as_str()),
    )(input)?;

    Ok((remaining, value))
}

#[cfg(t
  
JavaScript @programming.dev
erayerdin @programming.dev

Third party library mocked with Jest still tries to access internals

I have a function as such:

 typescript
    
export type SendMessageParams = {
  chatSession?: ChatSession,
  // ... other params ...
};

const sendMessage = async ({
  chatSession,
  // ... other params ...
}: SendMessageParams): Promise<void> => {
  // await chatSession?.sendMessage()
  // somewhere in implementation
};

export default sendMessage;

  

ChatSession is from @google/generative-ai.

I'd like to mock it in my test file as such:

 typescript
    
let defaultParams: SendMessageParams;

beforeEach(() => {
  jest.mock('@google/generative-ai', () => ({
    ChatSession: {
      sendMessage: async (content: string) => content,
    },
  }));
  defaultParams = {
    chatSession: new ChatSession('', ''),
    // ... other params ...
  };
});

afterEach(() => {
  jest.clearAllMocks();
});

it('should send message', async () => {
  // await sendMessage();
  
JavaScript @programming.dev
erayerdin @programming.dev

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

Badge URL format:

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

  
ReactJS @lemmy.ml
erayerdin @programming.dev

Firereact: React hooks, components and utilities for Firebase

cross-posted from: https://programming.dev/post/9577952

Firereact is hooks, component and utilities library for Firebase and React.

Features

  • Very lightweight,
    when unpacked,
    when minified,
    when minified+gzipped
  • Supports Auth, Firestore, Functions, Providers and Storage.
  • Provides hooks such as useUser for Auth or useDocument for Firestore, which can
React @programming.dev
erayerdin @programming.dev

Firereact: React hooks, components and utilities for Firebase

Firereact is hooks, component and utilities library for Firebase and React.

Features

  • Very lightweight,
    when unpacked,
    when minified,
    when minified+gzipped
  • Supports Auth, Firestore, Functions, Providers and Storage.
  • Provides hooks such as useUser for Auth or useDocument for Firestore, which can listen to realtime changes as well
  • Provides custom components such as
JavaScript @programming.dev
erayerdin @programming.dev

Vite bundles peer dependencies for library

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:

 typescript
    
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(peerDependencie
  
JavaScript @programming.dev
erayerdin @programming.dev

Help me understand module system in ES

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 advanc

React @programming.dev
erayerdin @programming.dev

How can I render a custom component in head with React Helmet?

I use React Helmet. I wanted to inject social meta tags in some of the pages. In order to DRY, I wanted to define these social meta tags as a separate component, which looks as below:

 typescript
    
type SocialMetaProps = {
  title: string,
  description: string,
}

const SocialMeta = ({ title, description }: SocialMetaProps) => {
  return (
    <>
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:url" content={window.location.href} />

      <meta property="twitter:title" content={title} />
      <meta property="twitter:description" content={description} />
      <meta property="twitter:url" content={window.location.href} />
    </>
  )
}

export default SocialMeta

  

...which looks as such when I use it in a page:

 typescript
    
<Helmet>
  <title>{resource.title}</title>
  <SocialMeta title={resource.title} description={resource.shortDescription} />
</Helmet>

  

The problem with that is that

Programming @programming.dev
erayerdin @programming.dev

Freelancing (?) programmers here: How do you estimate how many scrum points a specific project will require? Is there a template?

I know this is kind of a soft problem and is highly dependent on the context of a project.

For my own projects, I use scrum points to estimate how much effort it will require to reach to a certain point. I measured my throughput and it seems like, with the amount of time left from my daily job, I can complete around 100 points every month.

Recently, this idea is stuck in my head. Every (web/mobile) project requires a certain set of requirements such as:

  • Authentication and authorization
  • Performance metrics and logging
  • Storage
  • CRUD for each model etc.

Of course, mostly through Firebase.

I was wondering if there's a way, a website or a platform maybe, to define a list of features/stories and get an estimated total points.

Rust @programming.dev
erayerdin @programming.dev

Omniscient - A simple process manager and system information app powered by Tauri, Rust, NextJS and Typescript

This is a process manager and system information app I've written by using Tauri. I've done it to see how Tauri works. PRs are welcome.