@tomasvn/glightbox 0.0.0-stage → 3.3.4

package/bower.json

@@ -0,0 +1,29 @@
+{
+    "name": "glightbox",
+    "description": "JavaScript animation engine",
+    "main": "dist/js/glightbox.min.js",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/mcstudios/glightbox"
+    },
+    "keywords": [
+        "lightbox",
+        "javascript",
+        "gallery",
+        "popup"
+    ],
+    "authors": [
+        "MC Studios <manuel@mcstudios.com.mx>"
+    ],
+    "license": "MIT",
+    "homepage": "https://glightbox.mcstudios.com.mx",
+    "ignore": [
+        "**/.*",
+        "node_modules",
+        "bower_components",
+        "*.psd",
+        "demo",
+        "test",
+        "tests"
+    ]
+}

package/development/build.js

@@ -0,0 +1,44 @@
+const fs = require('node:fs');
+const path = require('node:path');
+const jscompiler = require('./jscompiler');
+const postcssCompiler = require('./postcss');
+const terser = require('terser');
+
+const root = path.join(__dirname, '..');
+const sourceJs = path.join(root, 'src/js/glightbox.js');
+const sourceCss = path.join(root, 'src/postcss');
+const distJs = path.join(root, 'dist/js');
+const distCss = path.join(root, 'dist/css');
+
+async function build() {
+    await jscompiler({
+        file: sourceJs,
+        dest: 'dist/js',
+        format: 'umd',
+        sourcemap: false,
+        moduleID: 'GLightbox'
+    });
+
+    const js = fs.readFileSync(path.join(distJs, 'glightbox.js'), 'utf8');
+    const minified = await terser.minify(js);
+    if (minified.error) {
+        throw minified.error;
+    }
+    fs.writeFileSync(path.join(distJs, 'glightbox.min.js'), minified.code);
+
+    const stylesheets = fs.readdirSync(sourceCss).filter((file) => file.endsWith('.css'));
+    for (const stylesheet of stylesheets) {
+        await postcssCompiler({
+            file: path.join('src/postcss', stylesheet),
+            dest: 'dist/css',
+            minify: true
+        });
+    }
+
+    console.log('Build complete');
+}
+
+build().catch((error) => {
+    console.error(error);
+    process.exitCode = 1;
+});

package/development/jscompiler.js

@@ -0,0 +1,90 @@
+const { rollup } = require('rollup');
+const babel = require('rollup-plugin-babel');
+const resolve = require('rollup-plugin-node-resolve');
+const commonjs = require('rollup-plugin-commonjs');
+const path = require('path');
+
+global.rollupCache = global.rollupCache || {};
+
+function camelCase(str) {
+    return str
+        .replace(/(?:^\w|[A-Z]|\b\w|[-_])/g, (letter, index) => {
+            return index == 0 ? letter.toLowerCase() : letter.toUpperCase();
+        })
+        .replace(/\s+/g, '')
+        .replace(/[`~!@#$%^&*()_|+\-=?;:'",.<>\{\}\[\]\\\/]/gi, '');
+}
+
+function jscompiler(config) {
+    const { file, dest } = config;
+
+    const fileName = path.basename(file);
+    const extension = path.extname(fileName);
+    const singleFileName = fileName.replace(extension, '');
+    const cache = global.rollupCache[fileName] ? global.rollupCache[fileName] : null;
+    const format = config.hasOwnProperty('format') ? config.format : 'iife';
+    const strict = config.hasOwnProperty('strict') ? config.strict : true;
+    const sourcemap = config.hasOwnProperty('sourcemap') ? config.sourcemap : false;
+    const moduleID = config.hasOwnProperty('moduleID') ? config.moduleID : false;
+
+    let name = config.hasOwnProperty('name') ? config.name : camelCase(singleFileName);
+    let outPutFile = path.join(__dirname, '../', dest, fileName);
+    let customFileName = config.hasOwnProperty('fileName') ? config.fileName : false;
+
+    if (customFileName) {
+        customFileName = customFileName.replace('{name}', singleFileName);
+        outPutFile = outPutFile.replace(fileName, customFileName);
+    }
+
+    return new Promise((res, rej) => {
+        rollup({
+            input: file,
+            cache: cache,
+            plugins: [
+                resolve({
+                    mainFields: ['module', 'main'],
+                    browser: true
+                }),
+                commonjs(),
+                babel({
+                    comments: false,
+                    exclude: 'node_modules/**',
+                    presets: [
+                        [
+                            '@babel/preset-env',
+                            {
+                                modules: false
+                            }
+                        ]
+                    ]
+                })
+            ]
+        })
+            .then((bundle) => {
+                global.rollupCache[fileName] = bundle.cache;
+                bundle
+                    .write({
+                        file: outPutFile,
+                        format: format, // amd, cjs, esm, iife, umd
+                        strict: strict,
+                        sourcemap: sourcemap,
+                        name: moduleID ? moduleID : name
+                    })
+                    .then(() => {
+                        res(true);
+                    })
+                    .catch((error) => {
+                        console.error(error);
+                        rej(error);
+                    });
+
+                return outPutFile;
+            })
+            .catch((error) => {
+                console.log(error);
+                throw new Error(error);
+            });
+    });
+}
+
+module.exports = jscompiler;

package/development/notifications.js

@@ -0,0 +1,15 @@
+const path = require('path');
+const notifier = require('node-notifier');
+
+function notify(title, body) {
+    const icon = path.join(__dirname, 'icon.png');
+
+    notifier.notify({
+        title: title,
+        message: body,
+        icon: icon
+    });
+    console.log(`${title}, ${body}`);
+}
+
+module.exports = notify;

package/development/package.js

@@ -0,0 +1,116 @@
+const fs = require('fs');
+const os = require('os');
+const jetpack = require('fs-jetpack');
+const path = require('path');
+const archiver = require('archiver');
+const args = process.argv.slice(2);
+const folder = path.join(__dirname, '/..');
+
+/**
+ * Realease new version
+ * calling
+ * node development/package.js versionhere
+ * then npm publish
+ */
+
+async function createFolder() {
+    jetpack.remove(path.join(folder, 'glightbox-master.zip'));
+
+    const tmpfolder = path.join(os.tmpdir(), 'glightbox-master');
+    const newVersion = args[0];
+
+    await updateFileVersion({
+        file: path.join(folder, 'index.html'),
+        search: /download\/(.*)\/glightbox/g,
+        replace: newVersion
+    });
+
+    await updateFileVersion({
+        file: path.join(folder, 'package.json'),
+        search: /"version":\s?"(.*)",/g,
+        replace: newVersion
+    });
+
+    await updateFileVersion({
+        file: path.join(folder, 'README.md'),
+        search: /v([0-9-.]+)/g,
+        replace: newVersion
+    });
+
+    await updateFileVersion({
+        file: path.join(folder, 'src/js/glightbox.js'),
+        search: /version\s?=\s?'(.*)';/g,
+        replace: newVersion
+    });
+
+    jetpack.copy(folder, tmpfolder, {
+        matching: [
+            '!node_modules',
+            '!node_modules/**/*',
+            '!.git',
+            '!.git/**/*',
+            '!.github',
+            '!.github/**/*',
+            '!.vscode',
+            '!.idea',
+            '!.idea/**/*',
+            '!.nova',
+            '!.nova/**/*',
+            '!icons.zip',
+            '!.vscode/**/*',
+            '!*.psd',
+            '!.DS_Store'
+        ]
+    });
+    console.log('Created folder', 'Created folder correctly');
+
+    const zip = await createZip(tmpfolder).catch((error) => {
+        jetpack.remove(tmpfolder);
+    });
+
+    const folderName = path.basename(folder);
+    jetpack.remove(tmpfolder);
+    jetpack.move(zip, path.join(folder, folderName + '-master.zip'));
+
+    console.log('Done', 'Packaging process ended correctly');
+}
+createFolder();
+
+async function createZip(folder) {
+    return new Promise((resolve, reject) => {
+        const name = folder + '.zip';
+        const output = fs.createWriteStream(name);
+        const archive = archiver('zip', { zlib: { level: 9 } });
+
+        output.on('close', () => {
+            console.log('Zipped', 'zip archive was created correctly');
+            resolve(name);
+        });
+        archive.on('error', (err) => {
+            console.log('Package Error', 'The was an error creating the zip.');
+            reject(err);
+        });
+
+        archive.pipe(output);
+        archive.directory(folder, false);
+        archive.finalize();
+    });
+}
+
+async function updateFileVersion(data) {
+    return new Promise((resolve, reject) => {
+        jetpack.readAsync(data.file).then((str) => {
+            let regexp = new RegExp(data.search);
+
+            while ((matches = regexp.exec(str)) !== null) {
+                let foundLine = matches[0];
+                let newLine = foundLine.replace(matches[1], data.replace);
+                str = str.replace(foundLine, newLine);
+            }
+
+            jetpack.writeAsync(data.file, str).then(() => {
+                resolve(data.file);
+            });
+        });
+    });
+}

package/development/postcss.js

@@ -0,0 +1,63 @@
+const postcss = require('postcss');
+const cssnext = require('postcss-preset-env');
+const cssnested = require('postcss-nested');
+const cssmqpacker = require('css-mqpacker');
+const cssprettify = require('postcss-prettify');
+const CssClean = require('clean-css');
+const path = require('path');
+const fs = require('fs');
+
+function postcssCompiler(config) {
+    const { file, dest, minify = true } = config;
+    const fileName = path.basename(file);
+    const from = path.join(__dirname, '../', file);
+    const to = path.join(__dirname, '../', dest, fileName);
+    const fileNameMin = path.extname(fileName);
+    const min = path.join(__dirname, '../', dest, fileName.replace(fileNameMin, `.min${fileNameMin}`));
+    const css = fs.readFileSync(from, 'utf8');
+
+    return new Promise((resolve, reject) => {
+        return postcss([
+            cssnested(),
+            cssnext({
+                stage: 0,
+                browsers: ['last 2 version'],
+                features: {
+                    calc: false
+                }
+            }),
+            cssmqpacker({
+                sort: true
+            }),
+            cssprettify()
+        ])
+            .process(css, {
+                from,
+                to
+            })
+            .then((result) => {
+                if (result && result.css) {
+                    fs.writeFile(to, result.css, 'utf8', (err) => reject(err));
+
+                    if (minify) {
+                        const minified = new CssClean({}).minify(result.css);
+                        fs.writeFile(min, minified.styles, 'utf8', (err) => reject(err));
+
+                        if (result.map) {
+                            fs.writeFile(to + '.map', result.map, 'utf8', (err) => reject(err));
+                        }
+                    }
+
+                    resolve(to);
+                } else {
+                    reject(result);
+                }
+            })
+            .catch((err) => {
+                console.log(err);
+                reject(err);
+            });
+    });
+}
+
+module.exports = postcssCompiler;

package/development/watcher.js

@@ -0,0 +1,105 @@
+const fs = require('node:fs');
+const chokidar = require('chokidar');
+const path = require('node:path');
+const jscompiler = require('./jscompiler');
+const postcssCompiler = require('./postcss');
+const terser = require('terser');
+
+let config = {
+    js: {
+        src: 'src/js',
+        dest: 'dist/js',
+    },
+    css: {
+        src: 'src/postcss',
+        dest: 'dist/css',
+    }
+};
+
+/**
+ * Handle Javascript files
+ * compile the javascript files
+ * to es2015, minify and sync the files
+ *
+ * @param {string} file path
+ */
+async function handleJavascript(file) {
+    file = path.join(config.js.src, 'glightbox.js');
+
+    const name = path.basename(file);
+
+    const res = await jscompiler({
+        file,
+        dest: config.js.dest,
+        format: 'umd',
+        sourcemap: false,
+        moduleID: 'GLightbox'
+    }).catch(error => console.log(error));
+
+    if (!res) {
+        console.log('Build Error', `View logs for more info`);
+        console.log(res)
+        return false;
+    }
+
+    const minName = name.replace('.js', '.min.js');
+    const processed = path.join(config.js.dest, name);
+    const code = fs.readFileSync(processed, 'utf8');
+    const minified = terser.minify(code);
+    const minifyPath = path.join(config.js.dest, minName);
+    fs.writeFileSync(minifyPath, minified.code);
+
+    console.log('Javascript Build', `Compiled and Minified ${name}`);
+}
+
+
+/**
+ * Handle Postcss files
+ * compile the css files
+ *
+ * @param {string} file path
+ */
+async function handlePostCSS(file) {
+    const name = path.basename(file);
+    const dest = config.css.dest;
+
+    let res = await postcssCompiler({
+        file,
+        dest,
+        minify: true
+    }).catch(error => console.log(error));
+    if (!res) {
+        return false;
+    }
+    console.log('PostCSS Build', `Compiled and Minified ${name}`);
+}
+
+
+
+/**
+ * Watcher
+ * what the files for the backedn
+ * this includes js and css files
+ */
+function filesWatcher() {
+    const watcher = chokidar.watch(['src'], {
+        ignored: ['.DS_Store', 'src/js/.jshintrc', 'src/js/.babelrc'],
+        persistent: true,
+        depth: 3,
+        awaitWriteFinish: {
+            stabilityThreshold: 500,
+            pollInterval: 500
+        },
+    });
+
+    watcher.on('change', path => {
+        if (path.endsWith('.js')) {
+           return handleJavascript(path);
+        }
+        if (path.endsWith('.css')) {
+            return handlePostCSS(path);
+        }
+    })
+    watcher.on('ready', () => console.log('Watching files', 'Initial scan complete. Ready for changes'))
+}
+filesWatcher();