Senin, 07 Juli 2025

Deno 2.4 brings back deno bundle, GitHub Copilot Chat is now open source, Minecraft built in 100% CSS, and more

| Senin, 07 Juli 2025

Hello JavaScript Enthusiasts!

Welcome to a new edition of "This Week in JavaScript"!

This week, deno bundle made an insane comeback, GitHub Copilot Chat gets open-sourced, Someone made Minecraft with CSS, and PNG receives updates too.

Plus, we’ve got some powerful new+updated tools for your development workflow!

Deno 2.4: deno bundle is Back

Deno 2.4 reintroduces the long-requested deno bundle command, enabling single-file JavaScript or TypeScript bundles for both server and browser environments. With support for npm and JSR dependencies, plus automatic tree-shaking and minification via esbuild, this marks a major leap forward for Deno’s developer experience.

Previously deprecated due to complexity, deno bundle now uses esbuild under the hood and is here to stay. Future plans include exposing a runtime bundling API and plugin support for customizable builds , making it more flexible than ever.

Beyond bundling, Deno 2.4 introduces several notable features that enhance both DX and spec-alignment:

  • Importing text and binary files directly into modules, useful for assets like markdown, icons, or binary blobs. Instead of loading assets at runtime, developers can now import them statically in a spec-friendly way, aligning with the direction of the Import Attributes proposal.

  • Stable OpenTelemetry support is now built into Deno, enabling structured observability without extra setup.

  • A new --preload flag allows you to modify the Deno runtime environment before executing scripts, useful for injecting setup code or instrumentation.

  • deno update simplifies dependency management by keeping everything fresh with one command.

  • Script coverage can now be collected via deno run --coverage, making it easier to track test quality and identify untested logic.

  • Additional changes include:

  • Support for DENO_COMPAT=1 mode for better Node compatibility

  • Conditional exports in package.json

  • XML and SVG support in deno fmt

  • Expanded support for local npm packages

  • Better tsconfig.json handling

  • Simplified Node global handling

  • Improvements to the Language Server Protocol (LSP)

Deno 2.4 is one of the most substantial releases yet, tightening the runtime's alignment with modern standards while improving bundling, observability, and ergonomics across the board.

GitHub Copilot Chat Is Now Open Source in VS Code

Microsoft has officially open-sourced the GitHub Copilot Chat extension for Visual Studio Code under the MIT license, marking its first major milestone toward building an open-source AI-powered code editor. This move opens up a fully transparent look into how Microsoft implements agent-based AI coding inside VS Code.

You can now explore how context is passed to LLMs, how system prompts are structured, and how AI interactions are embedded into the editor interface , directly in the public repo. Everything from the telemetry capture to the prompt engineering logic is visible and modifiable.

The release is part of a broader effort to promote community-driven innovation in AI tooling. By open-sourcing Copilot Chat, Microsoft hopes to replicate the success of VS Code’s open model while advancing trust, extensibility, and insight into AI integration.

Developers can:

  • Study how agent mode works under the hood

  • Learn from Microsoft’s implementation of multi-step task handling and chat-based programming

  • Contribute directly to the extension or file issues

  • Use Copilot’s own chat capabilities to navigate and understand the codebase itself

Long term, Microsoft aims to integrate the Copilot Chat extension directly into VS Code core. While the original Copilot inline-completion engine remains closed source for now, Microsoft has stated that future iterations of that functionality may also move to the open-source Copilot Chat foundation.

This release supports full chat interaction inside the editor, from multi-turn conversations to AI-driven edits, method refactoring, and error handling, across dozens of languages like Python, JavaScript, Go, and C++.

With full integration into the VS Code UI, Copilot Chat updates alongside every VS Code release. To access the latest capabilities, users must stay on the most recent VS Code version.

This open-sourcing step strengthens transparency, improves community trust, and gives developers fine-grained control over how AI tools are embedded into their workflows. Microsoft’s commitment is clear: AI-first development should be open by design.

Minecraft... in Pure CSS?!

Yes, it’s real: someone recreated Minecraft using only HTML and CSS, no JavaScript, no WebGL. You can build blocks, break them, rotate the world, and explore, all with just CSS selectors, radios, and some wild creativity.

This project pushes CSS to its absolute limits, using a mix of :has(), radio inputs, and label mechanics to simulate interactive 3D state changes , essentially turning the browser into a voxel engine using pure style rules.

At its core:

  • The game uses over 35,000 <label> elements and nearly 6,000 <input type="radio"> elements to store state.

  • Each cube in the 3D grid is represented using combinations of these inputs, allowing CSS to "track" block types and positions.

Changing blocks works by selecting different radio inputs. The associated label targets use for attributes to update visible styles, changing textures or removing blocks based on which input is checked.

Rendering and interactivity are handled through:

  • CSS-only animations that run on interaction using the :active and animation-play-state trick. Holding a movement button (like "up" or "down") triggers smooth transforms and rotates the world.

  • 3D transforms and perspectives, including pixelated rendering of textures for that authentic Minecraft look.

  • A precompiled 46,000-line HTML file with just 480 lines of actual CSS (generated via SCSS templates) orchestrates the entire experience.

What makes it possible:

  • Clever use of :has() and :checked selectors allows input states to trigger DOM changes without JavaScript.

  • image-rendering: pixelated ensures clean visual fidelity for block textures.

  • Layered container elements track perspective and axis-based movement in 3D.

It’s not just a visual demo, it’s fully interactive. You can dig, place blocks, rotate, and explore a miniature CSS world. While not built for production or scalability, the engineering behind it is astonishing.

This is a stunning example of how far native web technologies have come , and how much is possible when you're willing to explore the boundaries of CSS.

PNG Gets Its First Major Update in Over 20 Years

The PNG image format just received its first major spec update in two decades, and it’s a big one. With contributions from Adobe, Apple, Google, the BBC, W3C, and more, PNG is now officially modern again, ready to compete with cutting-edge image formats in HDR workflows, animation, and metadata.

So what’s new?

  • True HDR Support PNG now supports High Dynamic Range color with just 4 extra bytes per image (plus chunk overhead). This brings vivid, wide-gamut color support to a format previously limited to SDR , and it’s designed to be future-proof. The new color encoding is well documented and already supported in major browsers and image tools.

  • Animated PNGs (APNGs) Are Now Official Long supported unofficially in Firefox and later Chrome and Safari, APNGs are now formally part of the spec. This codifies their place in modern image workflows and clears the way for broader adoption.

  • Embedded EXIF Metadata PNG now supports embedding EXIF data , including GPS, copyright, and camera settings , just like JPEG. This improves compatibility across photo and archival applications, while reducing reliance on sidecar files.

  • Spec Cleanup and Clarifications The update also includes long-needed housekeeping: clearer documentation, resolved errata, and harmonized interpretations of key features.

Why Now?

This update was sparked by a need for HDR support in subtitling workflows from the W3C Timed Text Working Group. What began as a narrow technical proposal gained rapid momentum, drawing interest from a who's-who of media and platform giants.

Backers of the new spec include:\
Adobe, Apple, BBC, Comcast/NBCUniversal, Google, MovieLabs, and W3C.With this kind of institutional backing, PNG is not just updated , it’s accelerating.

Already Supported- The updated PNG spec is already implemented in:

  • Browsers: Chrome, Firefox, Safari

  • Operating Systems: iOS, macOS

  • Tools: Photoshop, DaVinci Resolve, Avid Media Composer

Broadcast workflows are also adopting it. So the next time you see an HDR news ticker or sports graphic, there’s a good chance it’s running on this modernized PNG.

Tools & Releases You Should Know About

Rspack 1.4: High-Speed Web Bundling , Now in the Browser

Rspack is a Rust-based web bundler designed to be a faster, drop-in replacement for Webpack.

It compiles modern JavaScript, TypeScript, CSS, and other frontend assets with lightning speed, and is fully compatible with existing Webpack configs , making migration seamless for large codebases.

Version 1.4 takes a bold step forward: Rspack can now run inside the browser, thanks to WebAssembly. This unlocks use cases like online code editors, playgrounds, and instant previews without server roundtrips. For teams building DX tools or educational platforms, Rspack’s new in-browser capabilities offer fast, portable builds where traditional tooling can’t reach.

Electron 37.0: Build Cross-Platform Desktop Apps with Web Tech

Electron is the go-to framework for building desktop apps using web technologies like HTML, CSS, and JavaScript. It packages Chromium and Node.js together, giving developers full control over UI and system-level features in a single codebase.

Electron 37.0 includes the latest Chromium and Node updates, performance improvements, and better compatibility across operating systems. Whether you’re building productivity apps, developer tools, or internal utilities, Electron lets you reuse your frontend skills to ship native-feeling apps across macOS, Windows, and Linux.

ESLint 9.30.1: Cleaner Linting for TypeScript Imports

ESLint is the industry-standard linter for JavaScript and TypeScript projects, helping developers catch bugs early, enforce style guides, and maintain consistent code across teams.

Version 9.30.1 is a patch release, but includes a notable fix for TypeScript users: the no-duplicate-imports rule now allows default and named type imports to coexist from the same module. This resolves a long-standing friction when using TypeScript with strict linting rules, and ensures cleaner, conflict-free import statements without workarounds.

Babel 7.28.0: TypeScript Native, and Ready for the Future

Babel is a widely-used JavaScript compiler that allows developers to use next-gen JavaScript features today by transpiling them to widely supported syntax. It’s essential for large codebases that want to stay modern without sacrificing browser compatibility.

In version 7.28.0, Babel introduces native support for TypeScript config files (babel.config.ts and babel.config.mts), eliminating the need for additional tooling. It also enables ES2026’s explicit resource management by default (using using statements), supports the discard binding proposal (useful for ignoring values in destructuring), and adds a new sourceType option to better handle CommonJS modules.

These upgrades make Babel more capable, ergonomic, and future-ready for modern JS projects, especially in hybrid codebases mixing ESM, CJS, and TypeScript.

And that's it for the forty-second issue of "This Week in JavaScript", brought to you by jam.dev—the tool that makes it impossible for your team to send you bad bug reports.

Feel free to share this newsletter with a fellow developer, and make sure you're following for more weekly updates.

Until next time, happy coding!


Related Posts

Tidak ada komentar:

Posting Komentar