dinou 1.9.3 → 1.10.0

package/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [1.10.0]
+
+### Added
+
+- Support for additional assets or media file extensions (image, audio, and video).
+
 ## [1.9.3]
 
 ### Changed

package/README.md

@@ -110,7 +110,7 @@ dinou main features are:
 
 - [Styles (Tailwind.css, .module.css, and .css)](#styles-tailwindcss-modulecss-and-css)
 
-- [Images (`.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, and `.webp`)](#images-png-jpeg-jpg-gif-svg-and-webp)
+- [Assets or media files (image, video, and sound)](#assets-or-media-files-image-video-and-sound)
 
 - [Import alias (e.g. `"@/..."`)](#import-alias-eg-)
 
@@ -1142,9 +1142,11 @@ dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles
   import "./page.module.css";
   ```
 
-## Images (`.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, and `.webp`)
+## Assets or media files (image, video, and sound)
 
-dinou is ready to support the use of images in your components. Just do:
+dinou supports the use of assets in your components. Supported file extensions are: `.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, `.webp`, `.avif`, `.ico`, `.mp4`, `.webm`, `.ogg`, `.mov`, `.avi`, `.mkv`, `.mp3`, `.wav`, `.flac`, `.m4a`, `.aac`, `.mjpeg`, and `.mjpg`.
+
+To use an asset in your component just import it as a default import:
 
 ```typescript
 // src/component.tsx
@@ -1157,10 +1159,10 @@ export default function Component() {
 }
 ```
 
-**Only images imported under `"use client"` directive will be detected by Webpack and generated in webpack folder**. If you use server components, then you must create an additional file (e.g. `images.ts`) with the `"use client"` directive and import there the images too:
+**Only assets imported under `"use client"` directive will be detected by Webpack and generated in webpack folder**. If you use **server components**, then you must create an additional file (e.g. `assets.ts`) with the `"use client"` directive and import there the assets too:
 
 ```typescript
-// src/images.ts
+// src/assets.ts
 "use client";
 
 import "./image.png";
@@ -1175,6 +1177,30 @@ export default async function Component() {
 }
 ```
 
+For typescript, you should create a declaration file like this:
+
+```typescript
+// src/assets.d.ts
+declare module "*.jpeg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+
+// and continue with the rest of supported file extensions
+```
+
+If you miss a certain file extension you can eject and customize dinou to meet your requirements. Just eject and add the extension in these three places: `webpack.config.js`, `dinou/server.js`, and `dinou/render-html.js`. Just look for the place were all the extensions are mentioned and add yours in these three files.
+
 ## Import alias (e.g. `"@/..."`)
 
 dinou is ready to support import alias, as `import some from "@/..."`. If you want to use them just define the options in `tsconfig.json` or `jsconfig.json`:

package/dinou/render-html.js

@@ -15,12 +15,34 @@ require("css-modules-require-hook")({
   generateScopedName: createScopedName,
 });
 addHook({
-  extensions: ["png", "jpg", "jpeg", "gif", "svg", "webp"],
+  extensions: [
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "svg",
+    "webp",
+    "avif",
+    "ico",
+    "mp4",
+    "webm",
+    "ogg",
+    "mov",
+    "avi",
+    "mkv",
+    "mp3",
+    "wav",
+    "flac",
+    "m4a",
+    "aac",
+    "mjpeg",
+    "mjpg",
+  ],
   name: function (localName, filepath) {
     const result = createScopedName(localName, filepath);
     return result + ".[ext]";
   },
-  publicPath: "/images/",
+  publicPath: "/assets/",
 });
 
 const { renderToPipeableStream } = require("react-dom/server");

package/dinou/server.js

@@ -24,12 +24,34 @@ require("css-modules-require-hook")({
   generateScopedName: createScopedName,
 });
 addHook({
-  extensions: ["png", "jpg", "jpeg", "gif", "svg", "webp"],
+  extensions: [
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "svg",
+    "webp",
+    "avif",
+    "ico",
+    "mp4",
+    "webm",
+    "ogg",
+    "mov",
+    "avi",
+    "mkv",
+    "mp3",
+    "wav",
+    "flac",
+    "m4a",
+    "aac",
+    "mjpeg",
+    "mjpg",
+  ],
   name: function (localName, filepath) {
     const result = createScopedName(localName, filepath);
     return result + ".[ext]";
   },
-  publicPath: "/images/",
+  publicPath: "/assets/",
 });
 const generateStatic = require("./generate-static.js");
 const renderAppToHtml = require("./render-app-to-html.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "1.9.3",
+  "version": "1.10.0",
   "description": "Minimal React 19 Framework",
   "main": "index.js",
   "bin": {

package/webpack.config.js

@@ -97,7 +97,7 @@ module.exports = {
         ],
       },
       {
-        test: /\.(png|jpe?g|gif|svg|webp)$/i,
+        test: /\.(png|jpe?g|gif|svg|webp|avif|ico|mp4|webm|ogg|mov|avi|mkv|mp3|wav|flac|m4a|aac|mjpeg|mjpg)$/i,
         type: "asset/resource",
         generator: {
           filename: (pathData) => {
@@ -111,7 +111,7 @@ module.exports = {
             );
             const scoped = createScopedName(base, resourcePath);
 
-            return `/images/${scoped}[ext]`;
+            return `/assets/${scoped}[ext]`;
           },
           publicPath: "",
         },