JavaScript

2733 readers
2 users here now

founded 3 years ago
MODERATORS
1
2
3
4
1
submitted 5 days ago* (last edited 5 days ago) by xoron@programming.dev to c/javascript@programming.dev
 
 

Im investigating an idea i had about JSX for webcomponents after some experience with Lit.

Lit is a nice lightweight UI framework, but i didnt like that it was using class-based components.

Vue has a nice approach but i prefer working with the syntax that React uses. I find it more intuitive for debugging and deterministic rendering. I wondered if with webcomponents, i could create a UI framework that didnt need to be transpiled.

(My intentions with this framework is to get to a reasonable level of stability, to then replace React on some of my existing projects.)

IMPORTANT: Im not trying to push "yet another ui framework", this is an investigation to see what is possible. You should not use this framework in your own code. It is not production-ready. It is intended for myself on my own projects. This project is far from finished. I am sharing because it might be interesting for someone. Feel free to reach out for clarity if you have any questions.

5
6
7
8
9
10
11
12
13
 
 

a crossword where the clue = eval(answer)

So cursed some of the fuckery needed to answer these

14
 
 

Solved So turns out I need to store the original response and return clones. I've updated the code below to reflect that change. But feel free to use the below to deduplicate requests.

Hello,

I'm working on a small class to deduplicate API request calls. The basic function being a map of request path -> request promise. The issue I am running into is that on sequential calls I get a "response body has already been consumed" error.

From what I've read, I need to use response: (await res).clone() in the call to this.queryMap.set, however when I do that the map doesn't get updated in time to cache the calls (I think) and all 10 queries get sent to the API endpoint without being cached.

Any ideas on what I need to do?

class Deduplicator {
    queryMap = null;

    constructor() {
        this.queryMap = new Map();
    }

    async get(query, ttl = 10) {
        let now = Temporal.Now.instant();
        let cacheCheck = this.queryMap.get(query);
        if (cacheCheck == undefined || now.since(Temporal.Instant.from(cacheCheck.at)).seconds > ttl) {
            console.log("Cache miss on ", query)
            const res = fetch(query, {
                method: "GET",
            });
            this.queryMap.set(query, {
                at: now,
                response: res,
            })
            return (await res).clone(); //Previously just returned res
        } else {
            console.log("Cached response of ", query);
            return (await cacheCheck.response).clone(); //Previously just returned cacheCheck.response
        }
    }
}

Example:

let deduplicator = new Deduplicator();
for( let i = 0; i < 10; i++){
   let a = (await deduplicator.get("https://jsonplaceholder.typicode.com/todos/3", 10)).json();
   console.log('res: ', a);
}
15
16
17
18
 
 

Because there's no guide on how each package manager sets their minimumReleaseAge and every package manager uses a different format... (can we please get a standards committee going for security-related configs like these?)

Note: unless otherwise specified, X is a number ONLY. No date units (don't specify 7d or 1440m. Your config will error.)

And for the love of your favourite deity, remove all carets (^) from your package.json unless you know what you are doing. Always pin to exact versions (there should be no special characters in front of your version number)

  • npm: In .npmrc, min-release-age=X. X is the number of days. Requires npm v11.10.0 or above.

  • pnpm: In pnpm-workspace.yaml, set minimumReleaseAge: X. X is the number of minutes. Requires pnpm v10.16.0 or above. From v11 onwards, the default is 1440 minutes (1 day)

  • Yarn: In .yarnrc.yml, set npmMinimalAgeGate: X. X is a duration (date units supported are ms, s, m, h, d, w, e.g. 7d). If no duration is specified, then it is parsed as minutes (i.e. npmMinimalAgeGate: 1440 is equal to npmMinimalAgeGate: 1440m). Requires Yarn v4.11 or above (Yarn v4.10 also has the option, but only supported minutes as a raw number)

  • Deno: In deno.json, set "minimumDependencyAge": "X". X can be a number in minutes, a ISO-8601 Duration or a RFC3339 absolute timestamp (basically anything that looks like a date; if you are in Freedom Country remember to swap the month and the date) Requires Deno v2.6.0 or above.

  • Bun: In bunfig.toml, set:

      [install]
    
      minimumReleaseAge = X
    

X is the number of seconds. Requires Bun v1.3.0 or above.

19
20
21
22
23
 
 

ES2025 is out, ES2026 is close. Here is the new feature of Javascript we can use today, what is coming next

24
 
 

A minimal *Node.js *wrapper around ClamAV that scans any file and returns a typed Verdict Symbol:

  • Verdict.Clean
  • Verdict.Malicious
  • Verdict.ScanError

Zero runtime dependencies. No daemon. No cloud. No native bindings. Works locally via clamscan or remotely via clamd TCP socket (Docker-friendly).

npm install pompelmi

Repo: https://github.com/pompelmi/pompelmi Issues, PRs, and stars all welcome — it's how open source stays alive.

25
view more: next ›