Support ES6 import function

[DoomyTheFroomy]

Hi, maybe i'm too stupid, but I tried to import your lib as ES6 module, but always getting an error. I had a look and couldn't find any hints for this. Is it possible to create an extra export as ES6 Module? E.g.:

import { QRCodeStyling } from '/lib/qr-code-styling.module.js'

This would really save my day!

Or you can point me to the right configuration so I can export/create it by my own? Unfortunately I'm not in to TypeScript config...

[kozakdenys]

@DoomyTheFroomy this library doesn't support ES6 Modules. You can import it in your HTML file like this <script type="text/javascript" src="/lib/qr-code-styling.js"></script> and then access QRCodeStyling from window.QRCodeStyling

[DoomyTheFroomy]

Hi thx for your reply unfortunately this is not possible, cause I want to create a widget which should not load script afterwards. I think this should just be a configuration in the tsconfig export script? I would do it just for me, but I don't know what to change?

[DoomyTheFroomy]

I was able to create a module out of it, therefore I had to make some changes:

1. I had to manually install canvas, a fresh install leads to an error (may be another issue?)
2. I have upgrade web pack to it's latest version (module output is still under development)
3. I have created a new webpack.config.module.js, which looks as the following see documentation for more information:

   
   const path = require('path')
   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   const ESLintPlugin = require('eslint-webpack-plugin')

const rootPath = path.resolve(__dirname, './') const srcPath = path.resolve(rootPath, 'src') const libPath = path.resolve(rootPath, 'libs')

module.exports = { entry: srcPath + '/index.ts', output: { path: libPath, library: { // do not specify a name here type: 'module' }, filename: 'qr-code-styling.module.js' }, experiments: { outputModule: true }, module: { rules: [ { test: /.ts$/, loader: 'ts-loader', exclude: /node_modules/ } ] }, plugins: [new CleanWebpackPlugin(), new ESLintPlugin({ fix: true })], resolve: { extensions: ['.ts', '.js'] } }

4. As you see I have also added `ESLintPlugin` instead of `eslint-loader` which is deprecated and automatically let it fix the errors. Otherwise the `production` build does not work. 
5. I have added the corresponding scripts to the `package.json`: 
```json
...
"scripts": {
    "build:module": "webpack --mode=production --config webpack.config.module.js",
    "build:module:dev": "webpack --mode=development --config webpack.config.module.js"
   ...
}

@kozakdenys If you want I can also create a PR with these changes, they won't change your current work and just will add functionality. I can also create an issue with the canvas error, which can easily been solved by an version upgrade here.

[sri-k-stack]

I was able to create a module out of it, therefore I had to make some changes:

1. I had to manually install canvas, a fresh install leads to an error (may be another issue?)
2. I have upgrade web pack to it's latest version (module output is still under development)
3. I have created a new webpack.config.module.js, which looks as the following see documentation for more information:

const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')

const rootPath = path.resolve(__dirname, './')
const srcPath = path.resolve(rootPath, 'src')
const libPath = path.resolve(rootPath, 'libs')

module.exports = {
  entry: srcPath + '/index.ts',
  output: {
    path: libPath,
    library: {
      // do not specify a `name` here
      type: 'module'
    },
    filename: 'qr-code-styling.module.js'
  },
  experiments: {
    outputModule: true
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [new CleanWebpackPlugin(), new ESLintPlugin({ fix: true })],
  resolve: {
    extensions: ['.ts', '.js']
  }
}

1. As you see I have also added ESLintPlugin instead of eslint-loader which is deprecated and automatically let it fix the errors. Otherwise the production build does not work.
2. I have added the corresponding scripts to the package.json:

...
"scripts": {
    "build:module": "webpack --mode=production --config webpack.config.module.js",
    "build:module:dev": "webpack --mode=development --config webpack.config.module.js"
   ...
}

@kozakdenys If you want I can also create a PR with these changes, they won't change your current work and just will add functionality. I can also create an issue with the canvas error, which can easily been solved by an version upgrade here.

@DoomyTheFroomy Could you please share your package.json too?

[DoomyTheFroomy]

@sri-k-stack I have used qr-code-styling as submodule, so I have an own package.json for this. I think you asking for the dependencies?

{
  "name": "my-lib",
  "version": "1.0.0",
  "description": "My Libs",
  "main": "libs/my-lib.js",
  "scripts": {
    "build": "webpack --mode=production --config webpack.config.module.js",
    "build:dev": "webpack --mode=development --config webpack.config.module.js",
    "test": "cd ./qr-code-styling && npm test"
  },
  "devDependencies": {
    "clean-webpack-plugin": "*",
    "eslint": "^7.28.0",
    "eslint-webpack-plugin": "^2.5.4",
    "ts-jest": "^27.0.3",
    "ts-loader": "^9.2.3",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2"
  }
}

[jasonbarry]

FYI this will be fixed by https://github.com/kozakdenys/qr-code-styling/pull/64

[DoomyTheFroomy]

That sounds great 😊 do you need any help? Just give me a hint

[jasonbarry]

The work is already done, just awaiting the repo author to approve and merge.