easyeditor icon indicating copy to clipboard operation
easyeditor copied to clipboard

Lack of documentation where lib can be imported at ES-6 modules in Vite Projects

Open pc-magas opened this issue 1 year ago • 0 comments

I have a case that I need to use the EasyEditor as ES-6 Module as follows:

import EasyEditor from 'easyeditor';

Usage Scenario with vite

The scenario I am doing is that I did first:

npm install --save jquery easyeditor

Then in my laravel project I used the vite with the following vite.config.js:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

import { readdirSync,lstatSync } from 'fs';
import { resolve } from 'path';


function getFilesFromDir(dir) {
    const filesToReturn = [];

    function walkDir(currentPath) {

        if(lstatSync(currentPath).isFile()){
            filesToReturn.push(currentPath);
            return;
        }

        const files = readdirSync(currentPath);
        for (let i in files) {
            console.log(files[i]);
            const curFile = resolve(currentPath, files[i]);
            if(lstatSync(curFile).isDirectory()){
                walkDir(curFile);
                continue;
            }
            const file = resolve(currentPath, files[i]);
            filesToReturn.push(file);
        }
    }

    walkDir(resolve(__dirname, dir));
    return filesToReturn;
}


// Get all .css and .scss files in the directory
const js = getFilesFromDir('./resources/js');

const paths = [


    ...js,

    'node_modules/jquery/dist/jquery.js',
    'node_modules/jscroll/dist/jquery.jscroll.min.js',

    "node_modules/easyeditor/src/easyeditor.css",
    "node_modules/easyeditor/src/jquery.easyeditor.js"
]



export default defineConfig({
    plugins: [
        laravel({
            input:paths,
            refresh: true,
        }),
    ],
    build: {
        rollupOptions: {
            external: [
                "js/modules/*",
            ],
            include:[
                'assets/js/utils.js'
            ]
        }
    }
});

And then I do npm run build.

But in the documentation I see no case on how can be used with ES-6 modules. To be more specific I see no usage with vite into these pages:

  • http://habibhadi.com/lab/easyeditor/index.html
  • http://habibhadi.com/lab/easyeditor/default-example.html

That helps me to reduce the nessesary dependencies upon page load because vite (and webpack or silimar tools) do optimize Js code removing unsused functions, resulting faster page load.

Is there a way to do it?

pc-magas avatar Feb 23 '24 12:02 pc-magas