Inital code commit

gulpfile.mjs

@@ -0,0 +1,216 @@
+import { spawn } from 'child_process';
+import path from 'path';
+import fs from 'fs';
+import gulp from "gulp";
+import rename from 'gulp-rename';
+import { deleteAsync } from 'del';
+import replace from 'gulp-replace';
+import postcss from 'gulp-postcss';
+import atImport from 'postcss-import';
+import presetEnv from 'postcss-preset-env';
+import cssnano from 'cssnano';
+
+// Task which would delete the old dist directory if present
+gulp.task("build-clean", () => {
+    return deleteAsync(["./dist"]);
+});
+
+// Task which would transpile typescript to javascript
+gulp.task("typescript", (done) => {
+    const tsconfigPath = path.resolve(path.join('.', 'tsconfig.build.json'));
+
+    let proc;
+    if(process.platform === 'win32') {
+        proc = spawn('powershell', ['-NoProfile', '-ExecutionPolicy', 'Bypass',  '-Command', 'yarn', 'tsgo', '-p', `"${tsconfigPath}"`], { stdio: 'inherit' });
+    }
+    else {
+        proc =  spawn('yarn', ['tsgo', '-p', `${tsconfigPath}`], { stdio: 'inherit' });
+    }
+    
+    proc.on('close', code => {
+        if (code !== 0) {
+            return done(new Error(`tsgo process exited with code ${code}`));
+        }
+
+        done();
+    });
+});
+
+// Task which would bundle and minify the client-side JavaScript using Rollup
+gulp.task("bundle-minify-js", (done) => {
+    const scriptFiles = [];
+
+    fs.readdirSync(path.join('src', 'components')).forEach(component => {
+        // Check the current item is a directory (i.e., a component folder)
+        if (fs.statSync(path.join('src', 'components', component)).isDirectory()) {
+            fs.readdirSync(path.join('src', 'components', component)).forEach(file => {
+                const componentScriptFiles = [];
+
+                // Include any JS files found in a "scripts" subfolder of the component
+                if(file === 'scripts' && fs.statSync(path.join('src', 'components', component, file)).isDirectory()) {
+                    fs.readdirSync(path.join('src', 'components', component, file)).forEach(scriptFile => {
+                        if(scriptFile.endsWith('.js')) {
+                            scriptFiles.push(path.join('src', 'components', component, 'scripts', scriptFile));
+                        }
+                    });
+                }
+
+                // Look for *.js files inside the root of the component folders
+                if (file.endsWith('.js')) {
+                    scriptFiles.push(path.join('src', 'components', component, file));
+                }
+
+                scriptFiles.push(...componentScriptFiles);
+            });
+        }
+    });
+
+    let clientEntryJSContent = '';
+    scriptFiles.forEach(scriptFile => {
+        const relativePath = path.relative(path.join('src', 'components'), scriptFile).replace(/\\/g, '/');
+        clientEntryJSContent += `import './${relativePath}';\n`;
+    });
+
+    fs.writeFileSync(path.join('src', 'components', 'client-entry.js'), clientEntryJSContent);
+    
+    let proc;
+    if(process.platform === 'win32') {
+        proc = spawn('powershell', ['-NoProfile', '-ExecutionPolicy', 'Bypass',  '-Command', 'yarn', 'rollup', '-c'], { stdio: 'inherit' });
+    }
+    else {
+        proc =  spawn('yarn', ['rollup', '-c'], { stdio: 'inherit' });
+    }
+    
+    proc.on('close', code => {
+        // Clean up the temporary entry file so tht the src/ directory stays pristine
+        const entryPath = path.join('src', 'components', 'client-entry.js');
+        if (fs.existsSync(entryPath)) {
+            fs.rmSync(entryPath);
+        }
+
+        if (code !== 0) {
+            return done(new Error(`Rollup process exited with code ${code}`));
+        }
+
+        done();
+    });
+});
+
+// Task which would just create a copy of the current views directory in dist directory
+gulp.task("copy-ejs", function () {
+    return gulp.src("./src/components/**/*.ejs")
+        .pipe(rename((parsedPath) => {
+            // `parsedPath.dirname` is the path relative to the glob base ("./src/components/")
+            // Example A: "tooltip"
+            // Example B: "tabs/templates" (or "tabs\templates" on Windows)
+            
+            // Normalize the slashes to forward slashes to prevent Windows path bugs
+            const normalizedDir = parsedPath.dirname.replace(/\\/g, '/');
+            const pathParts = normalizedDir.split('/');
+            
+            // The first folder level is always your component's name
+            const componentName = pathParts[0];
+
+            // If the path includes a 'templates' directory, it's a complex component
+            if (pathParts.includes('templates')) {
+                // Keep the file inside a folder named after the component
+                // This outputs to: dist/components/tabs/tab-content.ejs
+                parsedPath.dirname = componentName; 
+            }
+            else {
+                // It's a simple component. Flatten it completely.
+                // This outputs to: dist/components/tooltip.ejs
+                parsedPath.dirname = ''; 
+            }
+        }))
+        .pipe(gulp.dest("./dist/components"));
+});
+
+// Task which will copy the assets from the static CSS directory to the dist directory
+gulp.task("process-css", () => {
+    // Gather all the component CSS files
+    const styleFiles = [];
+
+    fs.readdirSync(path.join('src', 'components')).forEach(component => {
+        // Check the current item is a directory (i.e., a component folder)
+        if (fs.statSync(path.join('src', 'components', component)).isDirectory()) {
+            fs.readdirSync(path.join('src', 'components', component)).forEach(file => {
+                const componentStyleFiles = [];
+
+                // Include any JS files found in a "styles" subfolder of the component
+                if(file === 'styles' && fs.statSync(path.join('src', 'components', component, file)).isDirectory()) {
+                    fs.readdirSync(path.join('src', 'components', component, file)).forEach(styleFile => {
+                        if(styleFile.endsWith('.css')) {
+                            componentStyleFiles.push(path.join('src', 'components', component, 'styles', styleFile));
+                        }
+                    });
+                }
+
+                // Look for *.css files inside the root of the component folders
+                if (file.endsWith('.css')) {
+                    componentStyleFiles.push(path.join('src', 'components', component, file));
+                }
+
+                styleFiles.push(...componentStyleFiles);
+            });
+        }
+    });
+
+    const libraryCSSAppendContent = styleFiles.map(styleFile => {
+        const relativePath = path.relative(path.join('src', 'components'), styleFile).replace(/\\/g, '/');
+        return `@import "./${relativePath}";`;
+    }).join('\n');
+
+    return gulp.src("./src/components/import.css")
+        .pipe(replace(/\/\* Component Styles \*\//g, libraryCSSAppendContent))
+        .pipe(
+            postcss([
+                atImport(),                   // Resolves @import paths (including node_modules)
+                presetEnv({ 
+                    stage: 1,                 // Allows use of future CSS features today
+                    features: {
+                        'nesting-rules': true // Allows SCSS-like nesting natively
+                    }
+                }),
+                cssnano({
+                    preset: [
+                        'default', {
+                            calc: false
+                        }
+                    ]
+                })
+            ])
+        )
+        .on('error', function(error) {
+            console.error("\n❌ CSS Error:", error.message);
+
+            // Optionally print the code snippet if available
+            if (error.source) {
+                console.error("   File:", error.file);
+                console.error("   Line:", error.line);
+            }
+            this.emit('end'); // Prevents Gulp from crashing completely
+        })
+        .pipe(rename('components.css'))
+        .pipe(gulp.dest("./dist/client"));
+});
+
+// The default task which runs at start of the gulpfile.js
+gulp.task("default", gulp.series("build-clean", "typescript", "bundle-minify-js", "copy-ejs", "process-css"), () => {
+    console.log("Done");
+});
+
+ gulp.task('copy-package-files', () => {
+    // After the default build tasks are done, we can copy the package.json, README.md, and LICENSE to the dist directory for npm publishing
+    return gulp.src(["./package.lib.json", "./README.md", "./LICENSE"])
+        .pipe(rename((path) => {
+            if(path.basename === "package.lib") {
+                path.basename = "package";
+            }
+        }))
+        .pipe(gulp.dest("./dist"));
+});
+
+gulp.task('package', gulp.series('default', 'copy-package-files'), () => { 
+    console.log("Package ready in dist/ directory"); 
+});