dinou 1.3.1 → 1.4.1

package/README.md

@@ -18,7 +18,7 @@ Or you can create one by yourself with the following steps:
 
   - "eject": "dinou eject"
 
-- Create an `src` folder with a `page.jsx` (or `.tsx`, `.js`)
+- Create an `src` folder with a `page.jsx` (or `.tsx`)
 
   ```typescript
   "use client";
@@ -52,6 +52,8 @@ dinou main features are:
 
 - Support for the use of images in your components (`.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, `.webp`)
 
+- Support for the use of an import alias in `tsconfig.json` or `jsconfig.json` file.
+
 ## Table of contents
 
 - [Routing system, layouts, pages, not found pages, ...](#routing-system-layouts-pages-not-found-pages-)
@@ -104,6 +106,8 @@ dinou main features are:
 
 - [Images (`.png`, `.jpeg`, `.jpg`, `.gif`, `.svg`, and `.webp`)](#images-png-jpeg-jpg-gif-svg-and-webp)
 
+- [Import alias (e.g. `"@/..."`)](#import-alias-eg-)
+
 - [How to run a dinou app](#how-to-run-a-dinou-app)
 
 - [Eject dinou](#eject-dinou)
@@ -112,13 +116,13 @@ dinou main features are:
 
 ## Routing system, layouts, pages, not found pages, ...
 
-- Routes are defined by defining a `page.tsx` file (or `.jsx`, `.js`) in a folder.
+- Routes are defined by defining a `page.tsx` file (or `.jsx`) in a folder.
 
 - Route "/" corresponds to the `src` folder.
 
-- You can define layouts and nested layouts by defining a `layout.tsx` (or `.jsx`, `.js`) file in a folder. A layout file found in a folder wraps a layout file found in a more nested folder, and finally composition of all layouts found in a route hierarchy wraps the `page` component or `not_found` component.
+- You can define layouts and nested layouts by defining a `layout.tsx` (or `.jsx`) file in a folder. A layout file found in a folder wraps a layout file found in a more nested folder, and finally composition of all layouts found in a route hierarchy wraps the `page` component or `not_found` component.
 
-- You can define not found pages by defining `not_found.tsx` (or `.jsx`, `.js`) file in a folder. If more than a `not_found.tsx` file is found in a route hierarchy, the more nested one will be used.
+- You can define not found pages by defining `not_found.tsx` (or `.jsx`) file in a folder. If more than a `not_found.tsx` file is found in a route hierarchy, the more nested one will be used.
 
 - If you don't want a `page` to be applied layouts define a `no_layout` file (without extension) in the same folder. A `no_layout` file, if present, also applies to the `not_found` file if present in the same folder. There exists also a `no_layout_not_found` file if you don't want a `not_found` file to be applied layouts but you do in `page` component.
 
@@ -665,11 +669,11 @@ The routing system is file-based and supports static routes, dynamic routes, opt
 
 - All routes are resolved relative to the `src/` directory.
 
-- A route is defined by a `page.tsx` (or `.jsx`, `.js`) file in a directory.
+- A route is defined by a `page.tsx` (or `.jsx`) file in a directory.
 
-- Layouts are defined by `layout.tsx` (or `.jsx`, `.js`) files, which wrap the content of pages or nested layouts.
+- Layouts are defined by `layout.tsx` (or `.jsx`) files, which wrap the content of pages or nested layouts.
 
-- Not found pages are defined by `not_found.tsx` (or `.jsx`, `.js`) files.
+- Not found pages are defined by `not_found.tsx` (or `.jsx`) files.
 
 - Slots are defined by folders starting with `@` (e.g., `@sidebar`), containing a `page.tsx` file.
 
@@ -905,7 +909,7 @@ MY_VAR=my_value
 
 ## Styles (Tailwind.css, .module.css, and .css)
 
-dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles will be generated in a file in `public` folder named `styles.css`. So you must include this in your `page.tsx` or `layout.tsx` file, in the `head` tag:
+dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles will be generated in a file in `____public____` folder named `styles.css`. So you must include this in your `page.tsx` or `layout.tsx` file, in the `head` tag:
 
 ```typescript
 <link href="/styles.css" rel="stylesheet"></link>
@@ -991,7 +995,7 @@ dinou is ready to use Tailwind.css, `.module.css`, and `.css` styles. All styles
 
 - The above will produce the text `hi world!` in red, underlined, and with a purple background color.
 
-- **Only styles imported under `"use client"` directive will be detected by Webpack and generated in a `styles.css` in `public` folder**. This means that if you want to use server components instead of client components, then you must create an additional file (e.g. `styles.ts`) where you use the `"use client"` directive and import all the `.css` files used in server components.
+- **Only styles imported under `"use client"` directive will be detected by Webpack and generated in a `styles.css` in `____public____` folder**. This means that if you want to use server components instead of client components, then you must create an additional file (e.g. `styles.ts`) where you use the `"use client"` directive and import all the `.css` files used in server components.
 
 - Example with server components:
 
@@ -1088,7 +1092,7 @@ export default function Component() {
 }
 ```
 
-**Only images imported under `"use client"` directive will be detected by Webpack and generated in `public` 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 images imported under `"use client"` directive will be detected by Webpack and generated in `____public____` 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:
 
 ```typescript
 // src/images.ts
@@ -1106,6 +1110,38 @@ export default async function Component() {
 }
 ```
 
+## 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`:
+
+```json
+// tsconfig.json
+{
+  "compilerOptions": {
+    // other options
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*"]
+  // other configuration fields
+}
+```
+
+```json
+// jsconfig.json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"]
+}
+```
+
 ## How to run a dinou app
 
 Run `npm run dev` (or `npx dinou dev`) to start the dinou app in development mode. Wait for the logs of Webpack and `Listening on port <port>` to load the page on your browser.

package/dinou/render-html.js

@@ -4,6 +4,7 @@ register({
   target: "esnext",
   format: "cjs",
   extensions: [".js", ".jsx", ".ts", ".tsx"],
+  jsx: "automatic",
 });
 const createScopedName = require("./createScopedName");
 require("css-modules-require-hook")({

package/dinou/server.js

@@ -17,6 +17,7 @@ register({
   target: "esnext",
   format: "cjs",
   extensions: [".js", ".jsx", ".ts", ".tsx"],
+  jsx: "automatic",
 });
 const createScopedName = require("./createScopedName");
 require("css-modules-require-hook")({
@@ -45,7 +46,7 @@ if (isDevelopment) {
   app.use(webpackHotMiddleware(compiler));
 }
 
-app.use(express.static(path.resolve(process.cwd(), "public")));
+app.use(express.static(path.resolve(process.cwd(), "____public____")));
 
 app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
   try {
@@ -55,7 +56,7 @@ app.get(/^\/____rsc_payload____\/.*\/?$/, async (req, res) => {
 
     jsx = await getSSGJSXOrJSX(reqPath, { ...req.query });
     const manifest = readFileSync(
-      path.resolve(process.cwd(), "public/react-client-manifest.json"),
+      path.resolve(process.cwd(), "____public____/react-client-manifest.json"),
       "utf8"
     );
     const moduleMap = JSON.parse(manifest);

package/dinou/ssg.js

@@ -5,6 +5,7 @@ register({
   target: "esnext",
   format: "cjs",
   extensions: [".js", ".jsx", ".ts", ".tsx"],
+  jsx: "automatic",
 });
 const createScopedName = require("./createScopedName");
 require("css-modules-require-hook")({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinou",
-  "version": "1.3.1",
+  "version": "1.4.1",
   "description": "Minimal React 19 Framework",
   "main": "index.js",
   "bin": {
@@ -20,11 +20,6 @@
     "url": "https://github.com/roggc/dinou.git"
   },
   "dependencies": {
-    "@babel/core": "^7.27.1",
-    "@babel/plugin-syntax-import-meta": "^7.10.4",
-    "@babel/plugin-transform-modules-commonjs": "^7.27.1",
-    "@babel/preset-react": "^7.27.1",
-    "@babel/preset-typescript": "^7.27.1",
     "@tailwindcss/postcss": "^4.1.10",
     "autoprefixer": "^10.4.21",
     "babel-loader": "^10.0.0",
@@ -34,6 +29,7 @@
     "css-loader": "^7.1.2",
     "css-modules-require-hook": "^4.2.3",
     "dotenv": "^16.5.0",
+    "esbuild-loader": "^4.3.0",
     "esbuild-register": "^3.6.0",
     "express": "^5.1.0",
     "generic-names": "^4.0.0",
@@ -43,6 +39,7 @@
     "postcss-loader": "^8.1.1",
     "react-server-dom-webpack": "^19.1.0",
     "tailwindcss": "^4.1.10",
+    "tsconfig-paths-webpack-plugin": "^4.2.0",
     "webpack": "^5.99.8",
     "webpack-cli": "^6.0.1",
     "webpack-dev-middleware": "^7.4.2",

package/webpack.config.js

@@ -1,13 +1,28 @@
 require("dotenv/config");
 const path = require("path");
+const fs = require("fs");
 const ReactServerWebpackPlugin = require("react-server-dom-webpack/plugin");
 const webpack = require("webpack");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const createScopedName = require("./dinou/createScopedName");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
+const { EsbuildPlugin } = require("esbuild-loader");
 
 const isDevelopment = process.env.NODE_ENV !== "production";
 
+function getConfigFileIfExists() {
+  const tsconfigPath = path.resolve(process.cwd(), "tsconfig.json");
+  const jsconfigPath = path.resolve(process.cwd(), "jsconfig.json");
+
+  if (fs.existsSync(tsconfigPath)) return tsconfigPath;
+  if (fs.existsSync(jsconfigPath)) return jsconfigPath;
+
+  return null;
+}
+
+const configFile = getConfigFileIfExists();
+
 module.exports = {
   mode: isDevelopment ? "development" : "production",
   entry: {
@@ -17,7 +32,7 @@ module.exports = {
     ].filter(Boolean),
   },
   output: {
-    path: path.resolve(process.cwd(), "./public"),
+    path: path.resolve(process.cwd(), "./____public____"),
     filename: "main.js",
     publicPath: "/",
     clean: true,
@@ -25,26 +40,25 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx|ts|tsx)$/,
-        use: {
-          loader: "babel-loader",
-          options: {
-            presets: [
-              ["@babel/preset-react", { runtime: "automatic" }],
-              "@babel/preset-typescript",
-            ],
-            plugins: [
-              "@babel/plugin-transform-modules-commonjs",
-              "@babel/plugin-syntax-import-meta",
-            ],
-          },
+        // Match `.js`, `.jsx`, `.ts` or `.tsx` files
+        test: /\.[jt]sx?$/,
+        loader: "esbuild-loader",
+        options: {
+          // JavaScript version to compile to
+          target: "esnext",
+          jsx: "automatic", // Use React's automatic JSX runtime
         },
-        exclude: [/node_modules\/(?!dinou)/, /dist/],
+        exclude: [/node_modules\/(?!dinou)/],
       },
       {
         test: /\.module\.css$/,
         use: [
-          MiniCssExtractPlugin.loader,
+          {
+            loader: MiniCssExtractPlugin.loader,
+            options: {
+              defaultExport: true,
+            },
+          },
           {
             loader: "css-loader",
             options: {
@@ -115,6 +129,14 @@ module.exports = {
   ].filter(Boolean),
   resolve: {
     extensions: [".js", ".jsx", ".ts", ".tsx"],
+    plugins: configFile
+      ? [
+          new TsconfigPathsPlugin({
+            configFile,
+            extensions: [".js", ".jsx", ".ts", ".tsx"],
+          }),
+        ]
+      : [],
   },
   optimization: {
     splitChunks: {
@@ -127,5 +149,12 @@ module.exports = {
         },
       },
     },
+    minimize: !isDevelopment,
+    minimizer: !isDevelopment
+      ? [new EsbuildPlugin({ target: "esnext", css: true })]
+      : [],
+  },
+  watchOptions: {
+    ignored: /____public____/,
   },
 };