WIP Webpack

README.md

@@ -69,4 +69,8 @@ In Japan, since Motoki Shōzō began his work with movable type printing, anothe
 // https://www.madebymike.com.au/writing/precise-control-responsive-typography/
 // https://trentwalton.com/2012/06/19/fluid-type/
 // https://tbrown.org/notes/2012/02/03/molten-leading-or-fluid-line-height/
-// https://css-tricks.com/snippets/sass/strip-unit-function/
+// https://css-tricks.com/snippets/sass/strip-unit-function/
+
+
+
+https://art-design-glossary.musabi.ac.jp/kyu-ha-point/

babel.config.mjs

@@ -0,0 +1,15 @@
+// babel.config.js (ES Modules Format)
+// Babel configuration for compiling JavaScript code
+
+export const presets = [
+    [
+        '@babel/preset-env',
+        {
+            // Enables transformation of ES6+ syntax to ES5
+          loose: true, // Enable "loose" transformations for any plugins in this preset that allow them
+          bugfixes: true, // Enable bugfixes that allow Babel to produce smaller output in some cases
+        //   modules: true // Preserve ES modules. Set to false to not transform modules, or specify a module type
+          modules: false // Preserve ES modules. Set to false to not transform modules, or specify a module type
+        }
+    ]
+];

package.json

@@ -1,6 +1,6 @@
 {
     "name": "unit.gl",
-    "description": "",
+    "description": "A Sass-based layout engine for fluid typography and responsive design, utilizing the Kyu unit measurement system.",
     "version": "0.0.1",
     "config": {
         "version_short": "0.0"
@@ -20,9 +20,9 @@
         "web"
     ],
     "homepage": "https://www.unit.gl/",
-    "author": "Lars van Vianen",
+    "author": "Lars van Vianen <[email protected]> (https://vianen.com)",
     "contributors": [
-        "Scape Agency"
+        "Scape Agency <[email protected]>"
     ],
     "license": "Apache-2.0",
     "repository": {
@@ -40,9 +40,9 @@
     ],
     "main": "src/scss/index.scss",
     "type": "module",
-    "module": "",
-    "sass": "",
-    "style": "",
+    "module": "dist/js/unit.gl.js",
+    "style": "dist/css/unit.gl.css",
+    "sass": "src/scss/index.scss",
     "scripts": {
         "format": "npx prettier --write .",
         "lint": "eslint 'src/**/*.ts' || true",
@@ -97,8 +97,10 @@
     },
     "jspm": {
         "registry": "npm",
-        "main": "",
-        "directories": {},
+        "main": "dist/js/unit.gl.js",
+        "directories": {
+            "lib": "src"
+        },
         "shim": {},
         "dependencies": {},
         "peerDependencies": {}

test/index.scss

@@ -0,0 +1,12 @@
+body {
+    font-family: 'Arial', sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-color: #f0f0f0;
+    color: #333;
+
+    h1 {
+      color: navy;
+    }
+  }
+

tsconfig.json

@@ -60,7 +60,7 @@
       // "emitDeclarationOnly": true,                         /* Only output d.ts files and not JavaScript files. */
       "sourceMap": true,                                      /* Create source map files for emitted JavaScript files. */
       // "outFile": "./",                                     /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-      // "outDir": "./dist",                                  /* Specify an output folder for all emitted files. */
+      "outDir": "./dist",                                  /* Specify an output folder for all emitted files. */
       "removeComments": true,                                 /* Disable emitting comments. */
       // "noEmit": true,                                      /* Disable emitting files from a compilation. */
       "noImplicitReturns": true,

webpack.common.js

@@ -1,19 +1,23 @@
 // webpack.common.js
 
+// Import necessary dependencies and configuration files
 import paths from "./webpack.paths.js";
 
 /**
  * Common Webpack Configuration
  * 
  * This configuration file is the base for both development and production
- * environments.
- * It includes configurations that are common across both environments.
+ * environments. It includes configurations that are common across both.
  */
 const configCommon = {
 
     // Target environment
-    target: "web",
+    // ========================================================================
+    // target: "web",
+    target: ['web', 'es5'],
 
+    // Entry points
+    // ========================================================================
     // Entry points for the application
     // Where webpack looks to start building the bundle
     entry: {
@@ -26,6 +30,9 @@ const configCommon = {
     // Module rules for handling different file types
     // Determine how modules within the project are treated
     module: {
+        // entry: './js/index.js',
+        // ...
+        // target: ['web', 'es5'],
         rules: [
 
             // TypeScript Rules
@@ -40,20 +47,36 @@ const configCommon = {
                     // Transpiles TypeScript to JavaScript with Babel.
                     // This allows for the use of the latest JavaScript
                     // features and ensures compatibility with older browsers.
-                    {
-                        loader: 'babel-loader',
-                        options: {
-                            presets: [
-                                // Preset for compiling ES6+ syntax
-                                '@babel/preset-env',
-                                // Preset for handling TypeScript
-                                '@babel/preset-typescript'
-                            ],
-                            plugins: [
-                                // Add any necessary Babel plugins here
-                            ],
-                        },
-                    },
+                    // {
+                    //     loader: 'babel-loader',
+                    //     options: {
+                    //         presets: [
+                    //             // Preset for compiling ES6+ syntax
+                    //             // Preset for compiling modern JavaScript to a more compatible version
+                    //             ['@babel/preset-env', {
+                    //                 targets: "> 0.25%, not dead", // Define target environments
+                    //                 useBuiltIns: 'usage', // Only include polyfills and transforms needed for target environments
+                    //                 corejs: 3, // Specify the core-js version for polyfills
+                    //                 // modules: true // Preserve ECMAScript modules for tree shaking in Webpack
+                    //                 modules: false // Preserve ECMAScript modules for tree shaking in Webpack
+                    //             }],
+
+
+                    //             // Preset for handling TypeScript
+                    //             '@babel/preset-typescript'
+                    //         ],
+                    //         caller: {
+                    //             supportsStaticESM: true
+                    //         },
+                    //         plugins: [
+                    //             // Add any necessary Babel plugins here
+                    //             // Enables dynamic import syntax in JavaScript (important for code splitting in ESM)
+                    //             '@babel/plugin-syntax-dynamic-import',
+
+                    //             // Other plugins that your project might need
+                    //         ],
+                    //     },
+                    // },
                     // TypeScript Loader
                     // Handles the TypeScript compilation
                     {

webpack.config.js

@@ -1,23 +1,37 @@
 // webpack.config.js
 
+// Import necessary dependencies and configuration files
 import { merge } from "webpack-merge";
 import configCommon from "./webpack.common.js";
 import configDevelopment from "./webpack.dev.js";
 import configProduction from "./webpack.prod.js";
 
-
-// Config | Merge
-export const config = (env, args) => {
-    switch(args.mode) {
-        case "development":
+/**
+ * Merge Webpack Configuration
+ * 
+ * Merges the common configuration with environment-specific configurations
+ * based on the build mode (development or production).
+ * 
+ * @param {object} env - The environment variables passed to the Webpack configuration.
+ * @param {object} args - Arguments and options passed via the command line or scripts.
+ * @return {object} - The merged Webpack configuration object.
+ * @throws {Error} - Throws an error if an invalid build mode is specified.
+ */
+//  export const config = (env, args) => {
+const config = (env, args) => {
+    switch (args.mode) {
+        case 'development':
+            console.info('Merging common configuration with development settings...');
             return merge(configCommon, configDevelopment);
-        case "production":
+
+        case 'production':
+            console.info('Merging common configuration with production settings...');
             return merge(configCommon, configProduction);
+
         default:
-            throw new Error("No matching configuration was found!");
+            throw new Error('No matching configuration was found! Please specify "development" or "production" mode.');
     }
-}
-
+};
 
 // Config | Export
 export default config

webpack.dev.js

@@ -8,8 +8,12 @@ export const configDevelopment = {
 
     // Set the mode to development or production
     mode: "development",
+
     // Control how source maps are generated
     // devtool: "inline-source-map",
+
+    // Development Server configuration
+    // ========================================================================
     // Spin up a server for quick development
     devServer: {
         historyApiFallback: true,
@@ -26,13 +30,14 @@ export const configDevelopment = {
         },
     },
 
-
+    // Plugins
+    // ========================================================================
     plugins: [
         // Only update what has changed on hot reload
         new webpack.HotModuleReplacementPlugin(),
         // Serve test page
         new HtmlWebpackPlugin({
-          template: './test/index.html',
+            template: './test/index.html',
         }),
     ],
 

webpack.paths.js

@@ -1,19 +1,34 @@
+// webpack.paths.js
+
+// Importing necessary Node.js path module and utility to convert file URL to path
 import path from "path"
 import { fileURLToPath } from "url";
 
+// Convert the current file's URL to a file path
 const __filename = fileURLToPath(import.meta.url);
+
+// Derive the directory name of the current module
 const __dirname = path.dirname(__filename);
 
 
+/**
+ * Paths Webpack Configuration
+ * 
+ * Defines common paths used throughout the Webpack configuration.
+ * 
+ * - `src`: Path to the source files.
+ * - `build`: Path where production build files will be placed.
+ * - `public`: Path to public/static files to be copied to the build folder.
+ */
 const configPaths = {
 
-  // Source files
+  // Path to source files
   src: path.resolve(__dirname, "/src"),
 
-  // Production build files
+  // Path for production build files
   build: path.resolve(__dirname, "/dist"),
 
-  // Static files that get copied to build folder
+  // Path to public/static files
   public: path.resolve(__dirname, "/public"),
 
 };