fix: module import #135

[32teeth]

Problem

npm run dev && husky break things for module import

Solution

[!WARNING]
npm run dev && husky break things for module import

(node:66958) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/../../example/dev.js:1
import open from 'open';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:76:18)
    at wrapSafe (node:internal/modules/cjs/loader:1283:20)
    at Module._compile (node:internal/modules/cjs/loader:1328:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1422:10)
    at Module.load (node:internal/modules/cjs/loader:1203:32)
    at Module._load (node:internal/modules/cjs/loader:1019:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:128:12)
    at node:internal/main/run_main_module:28:49

[!NOTE]
Add dynamic import, easy clean up

// Dynamic import handling
const openFile = async () => {
    try {
        // Use dynamic import to load the ES module
        const open = (await import('open')).default;
        await open('./dist/index.html');
    } catch (err) {
        console.error('Error opening file:', err);
    }
};

openFile();

License

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

[Jurredr]

Nice fix. We don't really use the dev command though, we only use watch for development. Would be better if you could just get rid of the dev commands altogether IMO.

Also, the serve command is a really nice addition. Maybe let's just turn that into the dev command? Also good to advise users to install live-server globally in some place or to include it as a package in the project.

Also don't forget to update the documentation, especially the getting started part in the main read me, where we can advise to use the dev command from now on.

@dogusata opinion?

[32teeth]

Nice fix. We don't really use the dev command though, we only use watch for development. Would be better if you could just get rid of the dev commands altogether IMO.

Also, the serve command is a really nice addition. Maybe let's just turn that into the dev command? Also good to advise users to install live-server globally in some place or to include it as a package in the project.

Also don't forget to update the documentation, especially the getting started part in the main read me, where we can advise to use the dev command from now on.

@dogusata opinion?

Updated

"dev": "npm run clean && npm install && npm run build && npm run start:example",

• npm run dev runs it all and watch
• live-server is installed globally in postinstall (we don't necessarily want it in our package)
• README reflects based on comments

Snip from README.md

Setup, configuration and use

To set up your local development environment quickly, run the following command:

npm run dev

This command will:

1. Clean: Remove existing dist and node_modules directories to ensure you're working with a fresh environment.
2. Install: Reinstall all necessary dependencies for both the main project and the example project.
3. Build: Compile the project using Webpack in production mode.
4. Start Example: Install dependencies and build the example project, then start the development server with watch mode enabled. The project will be served on localhost:9000 using live-server.
5. Watch: Start the main project in watch mode. After running this command, any changes you make will automatically rebuild and refresh your development environment, allowing you to work seamlessly.

[dogusata]

• live-server is installed globally in postinstall (we don't necessarily want it in our package)

This makes sense now, since we really don't like to increase the dependencies. Nice decision!