introducing webpack

.babelrc

@@ -0,0 +1,9 @@
+{
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+    ],
+    "plugins": []
+  }
+

.gitignore

@@ -35,3 +35,6 @@ public/Users/Public/**
 !public/Users/Public/Start Menu/Games/Quake III Arena.url
 !public/Users/Public/Start Menu/Games/Space Cadet.url
 !public/Users/Public/Videos
+
+
+dist/

bootstrap.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { StyledApp } from './components/pages/StyledApp'; // Adjust the path to your styled component
+import App from './pages/_app'; // Adjust the path to your main component
+
+createRoot(document.getElementById('root')).render(
+    <App Component={() => 'hello world'} />
+);
+

components/system/Apps/AppsLoader.tsx

@@ -1,10 +1,10 @@
 import { AnimatePresence } from "framer-motion";
 import dynamic from "next/dynamic";
 import { memo } from "react";
-import { useProcesses } from "contexts/process";
+import { useProcesses } from "../../../contexts/process";
 
 const RenderComponent = dynamic(
-  () => import("components/system/Apps/RenderComponent")
+  () => import("../../../components/system/Apps/RenderComponent")
 );
 
 const AppsLoader: FC = () => {

contexts/process/index.tsx

@@ -1,5 +1,5 @@
-import contextFactory from "contexts/contextFactory";
-import useProcessContextState from "contexts/process/useProcessContextState";
+import contextFactory from "../../contexts/contextFactory";
+import useProcessContextState from "../../contexts/process/useProcessContextState";
 
 const { Provider, useContext } = contextFactory(useProcessContextState);
 

contexts/process/useProcessContextState.ts

@@ -9,13 +9,13 @@ import {
   setProcessElement,
   setTitle,
   setUrl,
-} from "contexts/process/functions";
+} from "../../contexts/process/functions";
 import {
   type ProcessArguments,
   type ProcessElements,
   type Processes,
-} from "contexts/process/types";
-import { TRANSITIONS_IN_MILLISECONDS } from "utils/constants";
+} from "../../contexts/process/types";
+import { TRANSITIONS_IN_MILLISECONDS } from "../../utils/constants";
 
 type ProcessContextState = {
   argument: (

index.js

@@ -0,0 +1 @@
+import("./bootstrap");

package.json

@@ -30,7 +30,9 @@
     "serve": "serve out",
     "stylelint": "stylelint --formatter=verbose **/*.ts*",
     "test": "jest",
-    "unused-exports": "ts-prune --project tsconfig.json --ignore \"\\pages|\\e2e\" --error"
+    "unused-exports": "ts-prune --project tsconfig.json --ignore \"\\pages|\\e2e\" --error",
+    "build:webpack": "webpack --config webpack.config.js",
+    "dev:webpack": "webpack serve --config webpack.config.js"
   },
   "lint-staged": {
     "*": "prettier --ignore-unknown --write",
@@ -43,8 +45,13 @@
     "@prettier/plugin-xml": "^3.4.1",
     "@wasmer/wasm-transformer": "^0.12.0",
     "ani-cursor": "^0.0.5",
+    "assert": "^2.1.0",
+    "babel-loader": "^8.0.0",
     "browserfs": "https://github.com/jvilk/BrowserFS.git#a96aa2d",
+    "buffer": "^6.0.3",
     "butterchurn-presets": "^3.0.0-beta.4",
+    "crypto-browserify": "^3.12.0",
+    "css-loader": "^5.0.0",
     "decode-ico": "^0.4.1",
     "dompurify": "^3.1.3",
     "exif-js": "^2.3.0",
@@ -53,6 +60,8 @@
     "fix-webm-duration": "^1.0.5",
     "framer-motion": "^11.2.0",
     "gif.js": "^0.2.0",
+    "html-webpack-plugin": "^5.0.0",
+    "https-browserify": "^1.0.0",
     "idb": "^8.0.0",
     "ini": "^4.1.2",
     "isomorphic-git": "^1.25.10",
@@ -62,24 +71,39 @@
     "multiformats": "^13.1.0",
     "music-metadata-browser": "^2.5.10",
     "next": "^14.2.3",
+    "node-polyfill-webpack-plugin": "^4.0.0",
     "nostr-tools": "^1.17.0",
     "opentype.js": "^1.3.4",
+    "os-browserify": "^0.3.0",
+    "path-browserify": "^1.0.1",
     "playlist-parser": "^0.0.12",
     "prettier": "^3.2.5",
     "print-js": "^1.6.0",
+    "process": "^0.11.10",
     "quickjs-emscripten": "^0.29.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-rnd": "^10.4.10",
     "resedit": "^2.0.2",
     "rtf.js": "^3.0.9",
+    "stream-browserify": "^3.0.0",
+    "stream-http": "^3.2.0",
+    "style-loader": "^3.0.0",
     "styled-components": "^6.1.11",
+    "url": "^0.11.3",
     "utif": "https://github.com/photopea/UTIF.js",
-    "wasi-js": "^1.7.3"
+    "wasi-js": "^1.7.3",
+    "webpack": "^5.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.0.0"
   },
   "devDependencies": {
     "7z-wasm": "^1.1.0",
     "@axe-core/playwright": "^4.9.0",
+    "@babel/core": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "@babel/preset-typescript": "^7.24.6",
     "@next/bundle-analyzer": "^14.2.3",
     "@next/eslint-plugin-next": "^14.2.3",
     "@playwright/test": "^1.44.0",
@@ -141,6 +165,7 @@
     "terser": "^5.31.0",
     "tinymce": "^6.8.3",
     "ts-prune": "^0.10.3",
+    "tsconfig-paths-webpack-plugin": "^4.1.0",
     "typescript": "^5.4.5",
     "webamp": "^1.5.0",
     "xlsx": "^0.18.5",

pages/index.tsx

@@ -1,5 +1,5 @@
-import { memo } from "react";
-import AppsLoader from "components/system/Apps/AppsLoader";
+import React, { memo } from "react";
+import AppsLoader from "../components/system/Apps/AppsLoader";
 import Desktop from "components/system/Desktop";
 import Taskbar from "components/system/Taskbar";
 import useGlobalErrorHandler from "hooks/useGlobalErrorHandler";

public/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Your App Name</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script src="main.bundle.js"></script>
+</body>
+</html>

tsconfig.json

@@ -17,7 +17,14 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "esnext",
-    "types": ["jest", "offscreencanvas", "wicg-file-system-access"]
+    "types": ["jest", "offscreencanvas", "wicg-file-system-access"],
+    "paths": {
+      "components/*": ["./components/*"],
+      "hooks/*": ["./hooks/*"],
+      "pages/*": ["./pages/*"],
+      "styles/*": ["./styles/*"],
+      "utils/*": ["./utils/*"],
+    },
   },
   "exclude": ["node_modules"],
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]

webpack.config.js

@@ -0,0 +1,105 @@
+const path = require('path');
+const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
+const { NormalModuleReplacementPlugin, ProvidePlugin } = require('webpack');
+
+module.exports = {
+  entry: './index.js', // Adjust the entry point as needed
+  mode: 'development', // Use 'production' for production builds
+  output: {
+    publicPath: 'http://localhost:3000/', // Adjust as needed for your dev server
+    path: path.resolve(__dirname, 'dist'),
+    filename: '[name].bundle.js',
+  },
+  resolve: {
+    extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    plugins: [new TsconfigPathsPlugin()],
+    alias: {
+      path: 'path-browserify',
+      'node:buffer': 'buffer',
+      'node:stream': 'stream-browserify',
+      'node:crypto': 'crypto-browserify',
+      'node:assert': 'assert',
+      'node:http': 'stream-http',
+      'node:https': 'https-browserify',
+      'node:os': 'os-browserify/browser',
+      'node:url': 'url',
+    },
+    fallback: {
+      "buffer": require.resolve("buffer/"),
+      "stream": require.resolve("stream-browserify"),
+      "crypto": require.resolve("crypto-browserify"),
+      "assert": require.resolve("assert/"),
+      "http": require.resolve("stream-http"),
+      "https": require.resolve("https-browserify"),
+      "os": require.resolve("os-browserify/browser"),
+      "url": require.resolve("url/"),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx|ts|tsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    new NodePolyfillPlugin(),
+    new ProvidePlugin({
+      Buffer: ['buffer', 'Buffer'],
+      process: 'process/browser',
+      React: 'react'
+    }),
+    new HtmlWebpackPlugin({
+      template: './public/index.html', // Adjust the template path as needed
+    }),
+    new ModuleFederationPlugin({
+      name: 'app', // Adjust the name
+      filename: 'remoteEntry.js',
+      exposes: {
+        './Component': './pages/index.tsx', // Adjust the path
+      },
+      remotes: {
+        // Example remote module
+        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
+      },
+      // shared: {
+      //   react: {
+      //     singleton: true,
+      //     requiredVersion: '^18.3.1', // Adjust the version
+      //   },
+      //   'react-dom': {
+      //     singleton: true,
+      //     requiredVersion: '^18.3.1', // Adjust the version
+      //   },
+      // },
+    }),
+    new NormalModuleReplacementPlugin(/node:/, (resource) => {
+      const mod = resource.request.replace(/^node:/, "");
+      switch (mod) {
+        case "buffer":
+          resource.request = "buffer";
+          break;
+        case "stream":
+          resource.request = "readable-stream";
+          break;
+        default:
+          throw new Error(`Not found ${mod}`);
+      }
+    }),
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 3000, // Adjust the port as needed
+  },
+};