@raisenow/tamaro-cli 1.0.0

package/.eslintignore

@@ -0,0 +1,2 @@
+dist/*
+node_modules/*

package/.eslintrc.js

@@ -0,0 +1,53 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const {resolve} = require('path')
+
+///////////////////////////////////////////////////////////////////////////////
+
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    node: true,
+    es2021: true,
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2021,
+    sourceType: 'module',
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:node/recommended',
+    'plugin:promise/recommended',
+    // 'plugin:unicorn/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  plugins: [],
+  rules: {
+    curly: 1,
+
+    'node/no-unsupported-features/es-syntax': 0,
+    'node/no-missing-import': 0,
+    'no-process-exit': 0,
+
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-non-null-assertion': 0,
+    '@typescript-eslint/prefer-optional-chain': 1,
+
+    'prettier/prettier': 1,
+    'arrow-body-style': 0,
+    'prefer-arrow-callback': 0,
+  },
+  overrides: [
+    {
+      files: ['*.ts', '*.tsx'],
+      parserOptions: {
+        project: resolve(__dirname, 'tsconfig.json'),
+      },
+    },
+  ],
+}

package/.gitignore

@@ -0,0 +1,13 @@
+/*
+!bin
+!src
+!.eslintignore
+!.eslintrc.js
+!.gitignore
+!.nvmrc
+!.prettierignore
+!.prettierrc.js
+!global.d.ts
+!package.json
+!package-lock.json
+!tsconfig.json

package/.nvmrc

@@ -0,0 +1 @@
+14.18.1

package/.prettierignore

@@ -0,0 +1,2 @@
+dist/*
+node_modules/*

package/.prettierrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  printWidth: 80,
+  tabWidth: 2,
+  useTabs: false,
+  semi: false,
+  singleQuote: true,
+  quoteProps: 'as-needed',
+  jsxSingleQuote: false,
+  trailingComma: 'all',
+  bracketSpacing: false,
+  bracketSameLine: false,
+  arrowParens: 'always',
+  requirePragma: false,
+  insertPragma: false,
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'lf',
+  embeddedLanguageFormatting: 'auto',
+}

package/bin/cli

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+
+// @ts-ignore
+require('../dist/cli.js')

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@raisenow/tamaro-cli",
+  "version": "1.0.0",
+  "author": {
+    "name": "RaiseNow",
+    "email": "development@raisenow.com"
+  },
+  "main": "bin/cli",
+  "scripts": {
+    "prepare": "npm run build",
+    "start": "npm run dev",
+    "dev": "npm run build -- --watch",
+    "build": "tsup src/cli.ts src/webpack.config.ts --format cjs",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "bin": "bin/cli",
+  "engines": {
+    "node": ">=14"
+  },
+  "dependencies": {
+    "@babel/cli": "^7.15.7",
+    "@babel/core": "^7.15.8",
+    "@babel/plugin-proposal-decorators": "^7.15.8",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@babel/runtime": "^7.15.4",
+    "@babel/runtime-corejs3": "^7.15.4",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1",
+    "@svgr/webpack": "^5.5.0",
+    "@types/columnify": "^1.5.1",
+    "@types/css-minimizer-webpack-plugin": "^3.0.2",
+    "@types/lodash": "^4.14.175",
+    "@types/mini-css-extract-plugin": "^2.3.0",
+    "@types/node": "^16.11.0",
+    "@types/node-notifier": "^8.0.1",
+    "@types/webpack-config-utils": "^2.3.1",
+    "@types/webpack-dev-server": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^5.0.0",
+    "@typescript-eslint/parser": "^5.0.0",
+    "autoprefixer": "^10.3.7",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-lodash": "^3.3.4",
+    "boxen": "^5.1.2",
+    "chalk": "^4.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "columnify": "^1.5.4",
+    "commander": "^8.2.0",
+    "core-js": "^3.18.3",
+    "css-loader": "^6.4.0",
+    "css-minimizer-webpack-plugin": "^3.1.1",
+    "current-script-polyfill": "^1.0.0",
+    "dotenv": "^10.0.0",
+    "dotenv-expand": "^5.1.0",
+    "element-closest": "^3.0.2",
+    "escape-string-regexp": "^4.0.0",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-webpack-plugin": "^3.0.1",
+    "execa": "^5.1.1",
+    "file-loader": "^6.2.0",
+    "fork-ts-checker-webpack-plugin": "^6.3.4",
+    "glob": "^7.2.0",
+    "html-loader": "^2.1.2",
+    "html-webpack-plugin": "^5.4.0",
+    "json-loader": "^0.5.7",
+    "lodash": "^4.17.21",
+    "mini-css-extract-plugin": "^2.4.2",
+    "node-notifier": "^10.0.0",
+    "postcss": "^8.3.9",
+    "postcss-custom-properties": "^12.0.0",
+    "postcss-loader": "^6.2.0",
+    "prettier": "^2.4.1",
+    "react-refresh": "^0.10.0",
+    "regenerator-runtime": "^0.13.9",
+    "resolve-url-loader": "^4.0.0",
+    "sass": "^1.43.2",
+    "sass-loader": "^12.2.0",
+    "source-map-loader": "^3.0.0",
+    "strip-indent": "^3.0.0",
+    "style-loader": "^3.3.0",
+    "tailwindcss": "^0.7.4",
+    "ts-node": "^10.3.0",
+    "tsconfig-paths-webpack-plugin": "^3.5.1",
+    "tsup": "^5.4.0",
+    "typescript": "^4.4.4",
+    "unfetch": "^4.2.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.58.2",
+    "webpack-cli": "^4.9.0",
+    "webpack-config-utils": "^2.3.1",
+    "webpack-dev-server": "^4.3.1",
+    "yaml-loader": "^0.6.0"
+  }
+}

package/src/InterpolateHtmlPlugin.ts

@@ -0,0 +1,43 @@
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import {Compiler} from 'webpack'
+import escapeStringRegexp from 'escape-string-regexp'
+
+///////////////////////////////////////////////////////////////////////////////
+
+type Replacements = {[key: string]: any}
+
+///////////////////////////////////////////////////////////////////////////////
+
+class InterpolateHtmlPlugin {
+  replacements: Replacements
+
+  constructor(replacements: Replacements) {
+    this.replacements = {...replacements}
+  }
+
+  apply(compiler: Compiler): void {
+    compiler.hooks.compilation.tap('InterpolateHtmlPlugin', (compilation) => {
+      const hooks = HtmlWebpackPlugin.getHooks(compilation)
+
+      hooks.alterAssetTagGroups.tap('InterpolateHtmlPlugin', (assets) => {
+        this.replacements['ENTRY'] = assets.headTags[0].attributes['src']
+
+        return assets
+      })
+
+      hooks.afterTemplateExecution.tap('InterpolateHtmlPlugin', (data) => {
+        // Run HTML through a series of user-specified string replacements.
+        Object.entries(this.replacements).forEach(([key, value]) => {
+          data.html = data.html.replace(
+            new RegExp(`%${escapeStringRegexp(key)}%`, 'g'),
+            value,
+          )
+        })
+
+        return data
+      })
+    })
+  }
+}
+
+export default InterpolateHtmlPlugin

package/src/cli.ts

@@ -0,0 +1,57 @@
+import {createCommand} from 'commander'
+import pkg from '../package.json'
+import {dev} from 'commands/dev'
+import {build} from 'commands/build'
+
+///////////////////////////////////////////////////////////////////////////////
+
+// Makes the script crash on unhandled rejections instead of silently
+// ignoring them. In the future, promise rejections that are not handled will
+// terminate the Node.js process with a non-zero exit code.
+process.on('unhandledRejection', (error) => {
+  throw error
+})
+
+// Exit on ctrl+c
+process.on('SIGINT', () => {
+  process.exit(0)
+})
+
+///////////////////////////////////////////////////////////////////////////////
+
+const cli = createCommand().name(pkg.name).version(pkg.version, '-v, --version')
+
+///////////////////////////////////////////////////////////////////////////////
+
+cli
+  .command('dev')
+  .description('Run dev server for Tamaro core or customer configuration')
+  .action(async () => {
+    await dev()
+  })
+
+cli
+  .command('build')
+  .description('Build Tamaro core or customer configuration for production')
+  .action(async () => {
+    await build()
+  })
+
+///////////////////////////////////////////////////////////////////////////////
+
+// cli
+//   .command('build')
+//   .description('Build customer config')
+//   .option('--deploy', 'Deploy to AWS')
+//   .option('--deploy-later', 'Build widget for deployment, but do not actually deploy it')
+//   .option('--latest', 'Deploy with tag "latest"')
+//   .option('--ns <ns>', 'Deploy widget to a specific namespace')
+//   .option('--tag <tag>', 'Deploy widget with a specific tag')
+//   .action(async (options: BuildOptions) => {
+//     await build(options)
+//   })
+
+///////////////////////////////////////////////////////////////////////////////
+;(async () => {
+  await cli.parseAsync(process.argv)
+})()

package/src/commands/build/index.ts

@@ -0,0 +1,22 @@
+import {commandSync} from 'execa'
+import {
+  logCommand,
+  notify,
+  resolveWebpackBin,
+  resolveWebpackConfig,
+} from 'lib/helpers'
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const build = async (): Promise<void> => {
+  const cmd = `${resolveWebpackBin()} --config ${resolveWebpackConfig()} --env min`
+  logCommand(cmd)
+  commandSync(cmd, {stdio: 'inherit'})
+
+  process.on('exit', () => {
+    notify({
+      title: '"build" command',
+      message: 'Process is done',
+    })
+  })
+}

package/src/commands/dev/index.ts

@@ -0,0 +1,10 @@
+import {commandSync} from 'execa'
+import {logCommand, resolveWebpackBin, resolveWebpackConfig} from 'lib/helpers'
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const dev = async (): Promise<void> => {
+  const cmd = `${resolveWebpackBin()} serve --config ${resolveWebpackConfig()}`
+  logCommand(cmd)
+  commandSync(cmd, {stdio: 'inherit'})
+}

package/src/lib/helpers.ts

@@ -0,0 +1,42 @@
+import chalk from 'chalk'
+import {resolve} from 'path'
+import {notify as nodeNotify} from 'node-notifier'
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const logCommand = (...args: any[]): void => {
+  console.log(chalk.dim(...args))
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const resolveWebpackBin = (): string => {
+  // __dirname is "dist" in runtime
+  return resolve(__dirname, '../node_modules/.bin/webpack')
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export const resolveWebpackConfig = (): string => {
+  // __dirname is "dist" in runtime
+  return resolve(__dirname, './webpack.config.js')
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+export type NotifyArgs = {
+  title: string
+  message: string
+}
+
+export const notify = (args: NotifyArgs): void => {
+  const {title, message} = args
+
+  nodeNotify({
+    title,
+    message,
+    // __dirname is "dist" in runtime
+    contentImage: resolve(__dirname, '../src/assets/rnw-logo.jpg'),
+    sound: 'Funk',
+  })
+}

package/src/polyfills.js

@@ -0,0 +1,8 @@
+import 'core-js/stable'
+// import 'core-js/features/promise'
+// import 'core-js/features/symbol'
+// import 'core-js/features/object/assign'
+// import 'core-js/features/string/match-all'
+import 'element-closest/browser.js'
+import 'unfetch/polyfill'
+import 'current-script-polyfill'

package/src/webpack.config.ts

@@ -0,0 +1,641 @@
+import {basename, dirname, resolve} from 'path'
+import {existsSync, realpathSync} from 'fs'
+import glob from 'glob'
+import dotenv from 'dotenv'
+import dotenvExpand from 'dotenv-expand'
+import chalk from 'chalk'
+import boxen from 'boxen'
+import columnify from 'columnify'
+import webpack, {
+  Configuration,
+  DefinePlugin,
+  IgnorePlugin,
+  ProgressPlugin,
+  RuleSetUseItem,
+} from 'webpack'
+import {getIfUtils, IfUtils, IfUtilsFn, removeEmpty} from 'webpack-config-utils'
+import {TsconfigPathsPlugin} from 'tsconfig-paths-webpack-plugin'
+import {CleanWebpackPlugin} from 'clean-webpack-plugin'
+import HtmlWebpackPlugin from 'html-webpack-plugin'
+import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'
+import MiniCssExtractPlugin from 'mini-css-extract-plugin'
+import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'
+// Needed for webpack-dev-server types to be picked up correctly
+import {} from 'webpack-dev-server'
+import InterpolateHtmlPlugin from './InterpolateHtmlPlugin'
+import ESLintPlugin from 'eslint-webpack-plugin'
+import stripIndent from 'strip-indent'
+
+///////////////////////////////////////////////////////////////////////////////
+
+export type ResolveFn = (relativePath: string) => string
+
+export type EnvVars = {
+  [key: string]: string | undefined
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Supported packages
+///////////////////////////////////////////////////////////////////////////////
+
+const TAMARO_CORE_PACKAGE_NAMES = ['@raisenow/tamaro-core', 'demo-tamaro-core']
+const TAMARO_CONFIGURATIONS_PACKAGE_NAMES = [
+  'widget-tamaro-customer-configurations',
+  'demo-tamaro-customer-configurations',
+]
+
+///////////////////////////////////////////////////////////////////////////////
+
+const getIfCoreFns = (): IfUtils => {
+  const corePkgPath = resolve(realpathSync(process.cwd()), 'package.json')
+  const configsPkgPath = resolve(
+    realpathSync(process.cwd()),
+    '../../package.json',
+  )
+
+  if (existsSync(corePkgPath)) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const pkg = require(corePkgPath)
+    const name = pkg.name
+
+    if (TAMARO_CORE_PACKAGE_NAMES.includes(name)) {
+      return getIfUtils({core: true}, ['core'])
+    }
+  }
+
+  if (existsSync(configsPkgPath)) {
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const pkg = require(configsPkgPath)
+    const name = pkg.name
+
+    if (TAMARO_CONFIGURATIONS_PACKAGE_NAMES.includes(name)) {
+      return getIfUtils({core: false}, ['core'])
+    }
+  }
+
+  console.error(
+    chalk.red(
+      stripIndent(`\
+      You must run "dev" and "build" commands from:
+      1. Root of "${chalk.bold(TAMARO_CORE_PACKAGE_NAMES[0])}" package folder.
+      2. Root of particular customer configuration folder of "${chalk.bold(
+        TAMARO_CONFIGURATIONS_PACKAGE_NAMES[0],
+      )}" package.
+      You are currently in "${chalk.bold(realpathSync(process.cwd()))}".
+    `),
+    ),
+  )
+  process.exit(0)
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Paths
+///////////////////////////////////////////////////////////////////////////////
+
+const moduleFileExtensions = ['ts', 'tsx', 'js', 'jsx']
+const extensions = moduleFileExtensions.map((v) => `.${v}`)
+
+///////////////////////////////////////////////////////////////////////////////
+
+const resolveModule = (resolveFn: ResolveFn, filePath: string) => {
+  const extension = moduleFileExtensions.find((extension) =>
+    existsSync(resolveFn(`${filePath}.${extension}`)),
+  )
+
+  if (extension) {
+    return resolveFn(`${filePath}.${extension}`)
+  }
+
+  return resolveFn(`${filePath}.js`)
+}
+
+///////////////////////////////////////////////////////////////////////////////
+
+const resolveApp: ResolveFn = (relativePath) =>
+  resolve(realpathSync(process.cwd()), relativePath)
+
+///////////////////////////////////////////////////////////////////////////////
+
+// __dirname is "dist" in runtime
+const resolveOwn: ResolveFn = (relativePath) =>
+  resolve(__dirname, '..', relativePath)
+
+///////////////////////////////////////////////////////////////////////////////
+
+const getPaths = (ifCore: IfUtilsFn) => {
+  return ifCore(
+    {
+      app: resolveApp('.'),
+      appEntry: resolveModule(resolveApp, 'src/index'),
+      appDist: resolveApp('dist'),
+      appNodeModules: resolveApp('node_modules'),
+      appTsConfig: resolveApp('tsconfig.json'),
+      appHtml: resolveApp('src/*.html'),
+      appEnv: resolveApp('.env'),
+      appTailwindConfig: resolveApp('tailwind.config.js'),
+    },
+    {
+      app: resolveApp('.'),
+      appEntry: resolveModule(resolveApp, 'widget'),
+      appDist: resolveApp(`../../dist/${process.env.WIDGET_UUID}`),
+      appNodeModules: resolveApp('../../node_modules'),
+      appTsConfig: resolveApp('../../tsconfig.json'),
+      appHtml: resolveApp('*.html'),
+      appEnv: resolveApp('.env'),
+      appTailwindConfig: undefined,
+    },
+  )
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Env
+///////////////////////////////////////////////////////////////////////////////
+
+const getEnvVars = (filePath: string, ifMin: IfUtilsFn, ifCore: IfUtilsFn) => {
+  dotenvExpand(dotenv.config({path: filePath}))
+
+  process.env.NODE_ENV ??= ifMin('production', 'development')
+  process.env.BABEL_ENV ??= ifMin('production', 'development')
+  process.env.EXPOSE_VAR ??= ifCore('rnw.tamaroCore', 'rnw.tamaro')
+  process.env.ELEMENT_ATTRIBUTE_DATA_WIDGET ??= ifCore(
+    'rnw-tamaro-core',
+    'rnw-tamaro',
+  )
+  process.env.WEBPACK_UNIQUE_NAME ??= ifCore('RnwTamaroCore', 'RnwTamaro')
+
+  // HMR doesn't work in ie11, it breaks everything.
+  // If you want to run dev-server and test in ie11, set HMR_ENABLED to 'false'
+  process.env.HMR_ENABLED ??= ifMin('false', 'true')
+
+  if (ifCore()) {
+    process.env.PRODUCT_NAME = 'tamaro'
+
+    const corePkgPath = resolve(realpathSync(process.cwd()), 'package.json')
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const pkg = require(corePkgPath)
+
+    process.env.PRODUCT_VERSION = pkg.version
+  }
+
+  if (!ifCore()) {
+    process.env.WIDGET_UUID = basename(resolveApp('.'))
+
+    const version = process.env.CORE_VERSION
+      ? `@${process.env.CORE_VERSION}`
+      : ''
+
+    process.env.CORE_URL ??= `https://cdn.jsdelivr.net/npm/@raisenow/tamaro-core${version}/dist/index.js`
+  }
+
+  // var names which will be exposed along with "PUBLIC_*" var names
+  const varNames = [
+    // common
+    'NODE_ENV',
+    'BABEL_ENV',
+    'EXPOSE_VAR',
+    'ELEMENT_ATTRIBUTE_DATA_WIDGET',
+    'WEBPACK_UNIQUE_NAME',
+
+    // core
+    'PRODUCT_NAME',
+    'PRODUCT_VERSION',
+
+    // config
+    'WIDGET_UUID',
+    'CORE_URL',
+    'CORE_VERSION', // must be explicitly specified in each config
+    'IS_CREDIT_CARD_IFRAME',
+
+    // // todo: Environment variables for twint-qr-base
+    // 'EPMS_ENV',
+    // 'SOLUTION_CONFIG_BASE_URL',
+    // 'SHORT_ID_RESOLUTION_URL',
+    // 'HANDSHAKE_RESOLUTION_URL',
+    // 'TWINT_CHECKOUT_PAGE',
+  ]
+
+  // Collect all vars which names start from "PUBLIC_" or present in "varNames" array
+  const raw = Object.keys(process.env)
+    .filter((key) => /^PUBLIC_/.test(key) || varNames.includes(key))
+    .reduce<EnvVars>((env, key) => {
+      env[key] = process.env[key]
+
+      return env
+    }, {})
+
+  // Stringify all values so we can feed into webpack DefinePlugin
+  const stringified = {
+    'process.env': Object.keys(raw).reduce<EnvVars>((env, key) => {
+      env[key] = JSON.stringify(raw[key])
+
+      return env
+    }, {}),
+  }
+
+  return {raw, stringified}
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Stats
+///////////////////////////////////////////////////////////////////////////////
+
+// Reduce stats output verbosity
+const stats: Configuration['stats'] = {
+  modules: false,
+  children: false,
+  chunks: false,
+  env: true,
+  entrypoints: true,
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Other
+///////////////////////////////////////////////////////////////////////////////
+
+const imageInlineSizeLimit = 0
+// const imageInlineSizeLimit = 8 * 1024 // 8kb
+
+// Log data into console as a table
+const logDataTable = (
+  vars: {[key: string]: string | undefined},
+  title: string,
+): void => {
+  const boxTitle = chalk.bold(`${title}:\n`)
+  const boxTable = columnify(vars, {showHeaders: false})
+
+  // eslint-disable-next-line no-console
+  console.log(
+    boxen(`${boxTitle}\n${boxTable}`, {
+      margin: 0,
+      padding: {
+        top: 0,
+        right: 1,
+        bottom: 0,
+        left: 1,
+      },
+      borderColor: 'green',
+    }),
+  )
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// Webpack config
+///////////////////////////////////////////////////////////////////////////////
+
+const getWebpackConfig = async (env: any): Promise<Configuration> => {
+  const {ifMin, ifNotMin} = getIfUtils(env, ['min'])
+  const {ifCore} = getIfCoreFns()
+  const paths = getPaths(ifCore)
+  const appHtmlFiles = glob.sync(paths.appHtml)
+  const envVars = getEnvVars(paths.appEnv, ifMin, ifCore)
+  const {ifHmr} = getIfUtils({hmr: process.env.HMR_ENABLED === 'true'}, ['hmr'])
+
+  logDataTable(paths, 'Paths')
+  logDataTable(envVars.raw, 'Environment variables')
+
+  const getCssLoaders = (cssOptions: any = {}): RuleSetUseItem[] => {
+    return removeEmpty([
+      ifMin({loader: MiniCssExtractPlugin.loader}),
+      ifNotMin({
+        loader: require.resolve('style-loader'),
+        options: {
+          attributes: {
+            'data-widget': process.env.ELEMENT_ATTRIBUTE_DATA_WIDGET,
+          },
+        },
+      }),
+      {
+        loader: require.resolve('css-loader'),
+        options: {
+          sourceMap: ifNotMin(),
+          importLoaders: 3,
+          esModule: false,
+          ...cssOptions,
+        },
+      },
+      {
+        loader: require.resolve('postcss-loader'),
+        options: {
+          postcssOptions: {
+            plugins: removeEmpty([
+              ifCore([require.resolve('tailwindcss'), paths.appTailwindConfig]),
+              require.resolve('postcss-custom-properties'),
+              require.resolve('autoprefixer'),
+            ]),
+          },
+        },
+      },
+      {
+        loader: require.resolve('resolve-url-loader'),
+        options: {sourceMap: ifNotMin()},
+      },
+      {
+        loader: require.resolve('sass-loader'),
+        options: {sourceMap: ifNotMin()},
+      },
+    ])
+  }
+
+  const config: Configuration = {
+    mode: ifMin('production', 'development'),
+    resolve: {
+      symlinks: false,
+      extensions: [...extensions, '...'],
+      modules: ['node_modules', paths.appNodeModules],
+      plugins: [
+        new TsconfigPathsPlugin({
+          configFile: paths.appTsConfig,
+          extensions,
+        }),
+      ],
+    },
+    entry: [resolveOwn('src/polyfills.js'), paths.appEntry],
+    output: {
+      publicPath: 'auto',
+      path: ifMin(paths.appDist, undefined),
+      pathinfo: false,
+      filename: ifCore('index.js', 'widget.js'),
+      chunkFilename: ifMin('[name]-[contenthash:16].js', '[name].js'),
+      // assetModuleFilename: ifMin('assets/[name]-[contenthash:16][ext]', 'assets/[name][ext]'),
+      assetModuleFilename: 'assets/[name]-[contenthash:16][ext]',
+      crossOriginLoading: 'anonymous',
+      uniqueName: process.env.WEBPACK_UNIQUE_NAME,
+    },
+    stats,
+    module: {
+      rules: removeEmpty([
+        // Source maps
+        ifNotMin({
+          enforce: 'pre',
+          exclude: /@babel\/runtime/,
+          test: /\.(js|jsx|ts|tsx|css|scss)$/,
+          use: require.resolve('source-map-loader'),
+        }),
+
+        // Javascript and Typescript (Babel)
+        {
+          test: /\.(js|ts)x?$/,
+          exclude: /node_modules/,
+          loader: require.resolve('babel-loader'),
+          options: {
+            babelrc: false,
+            configFile: false,
+            sourceMaps: ifNotMin(),
+            inputSourceMap: ifNotMin(),
+            presets: removeEmpty([
+              require.resolve('@babel/preset-env'),
+              [
+                require.resolve('@babel/preset-typescript'),
+                {
+                  allowDeclareFields: true,
+                },
+              ],
+              require.resolve('@babel/preset-react'),
+            ]),
+            plugins: removeEmpty([
+              [
+                require.resolve('@babel/plugin-transform-runtime'),
+                {
+                  corejs: {
+                    version: 3,
+                    proposals: true,
+                  },
+                  absoluteRuntime: dirname(
+                    require.resolve('@babel/runtime/package.json'),
+                  ),
+                },
+              ],
+              [
+                require.resolve('@babel/plugin-proposal-decorators'),
+                {
+                  legacy: true,
+                },
+              ],
+              require.resolve('@babel/plugin-syntax-dynamic-import'),
+              require.resolve('babel-plugin-lodash'),
+              ifHmr(require.resolve('react-refresh/babel')),
+            ]),
+          },
+        },
+
+        // Styles (not modules)
+        {
+          test: /\.s?css$/,
+          exclude: /\.module\.s?css$/,
+          use: getCssLoaders({
+            modules: false,
+          }),
+        },
+
+        // Styles (modules)
+        {
+          test: /\.module\.s?css$/,
+          use: getCssLoaders({
+            modules: {localIdentName: '[local]__[hash:base64]'},
+          }),
+        },
+
+        // SVG (in HTML)
+        {
+          test: /\.svg$/,
+          issuer: /\.html$/,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: imageInlineSizeLimit,
+            },
+          },
+        },
+
+        // SVG (in components)
+        {
+          test: /\.svg$/,
+          issuer: {
+            not: [/\.html$/],
+          },
+          use: [
+            {
+              loader: require.resolve('@svgr/webpack'),
+              options: {
+                svgoConfig: {
+                  plugins: [
+                    {
+                      removeHiddenElems: false,
+                      moveGroupAttrsToElems: false,
+                      collapseGroups: false,
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              loader: require.resolve('url-loader'),
+              options: {
+                // name: ifMin(
+                //   'assets/[name]-[contenthash:16].[ext]',
+                //   'assets/[name].[ext]'
+                // ),
+                name: 'assets/[name]-[contenthash:16].[ext]',
+                limit: imageInlineSizeLimit,
+              },
+            },
+          ],
+        },
+
+        // Images and fonts
+        {
+          test: /\.(png|jpe?g|webp|gif|ico|ttf|eot|woff2?)$/,
+          type: 'asset',
+          parser: {
+            dataUrlCondition: {
+              maxSize: imageInlineSizeLimit,
+            },
+          },
+        },
+
+        // YML
+        {
+          test: /\.ya?ml$/,
+          use: [
+            {loader: require.resolve('json-loader')},
+            {loader: require.resolve('yaml-loader')},
+          ],
+        },
+
+        // HTML
+        {
+          test: /\.html$/,
+          loader: require.resolve('html-loader'),
+          options: {
+            esModule: false,
+            minimize: false,
+          },
+        },
+      ]),
+    },
+
+    devtool: ifMin(false, 'cheap-module-source-map'),
+
+    devServer: {
+      static: false,
+      historyApiFallback: {
+        disableDotRule: true,
+      },
+      hot: ifHmr(),
+      headers: {
+        'Access-Control-Allow-Origin': '*',
+      },
+      client: {
+        overlay: {
+          warnings: false,
+          errors: true,
+        },
+      },
+    },
+
+    optimization: {
+      // minimize: false,
+      removeEmptyChunks: true,
+      // moduleIds: 'deterministic', // todo: use instead of HashedModuleIdsPlugin
+      // chunkIds: 'named',
+      minimizer: ['...', new CssMinimizerPlugin()], // sourceMaps: true?
+    },
+
+    plugins: removeEmpty([
+      new ProgressPlugin(),
+      new ESLintPlugin({
+        extensions: ['js', 'jsx', 'ts', 'tsx'],
+        eslintPath: require.resolve('eslint'),
+        cwd: paths.app,
+        resolvePluginsRelativeTo: paths.app,
+      }),
+      ifMin(
+        new CleanWebpackPlugin({
+          // verbose: true,
+        }),
+      ),
+
+      ...appHtmlFiles.map(
+        (file) =>
+          new HtmlWebpackPlugin({
+            template: file,
+            filename: basename(file),
+            inject: false,
+            minify: false,
+            // ...ifMin({
+            //   minify: {
+            //     collapseWhitespace: true,
+            //     removeComments: true,
+            //     removeRedundantAttributes: true,
+            //     removeScriptTypeAttributes: true,
+            //     removeStyleLinkTypeAttributes: true,
+            //     useShortDoctype: true,
+            //     quoteCharacter: '"',
+            //     minifyJS: true,
+            //     minifyCSS: true,
+            //   },
+            // }),
+          }),
+      ),
+
+      new InterpolateHtmlPlugin(envVars.raw),
+      new DefinePlugin(envVars.stringified),
+
+      new ForkTsCheckerWebpackPlugin({
+        typescript: {
+          typescriptPath: require.resolve('typescript', {
+            paths: [paths.appNodeModules],
+          }),
+          configFile: paths.appTsConfig,
+          mode: 'write-references',
+          diagnosticOptions: {
+            syntactic: true,
+            semantic: true,
+            declaration: false,
+            global: false,
+          },
+        },
+      }),
+
+      ifHmr(new ReactRefreshWebpackPlugin()),
+
+      ifMin(
+        new MiniCssExtractPlugin({
+          filename: '[name]-[contenthash:16].css',
+          chunkFilename: '[name]-[contenthash:16].css',
+          ignoreOrder: true,
+          attributes: {
+            'data-widget': `${process.env.ELEMENT_ATTRIBUTE_DATA_WIDGET}`,
+          },
+        }),
+      ),
+
+      new IgnorePlugin({
+        resourceRegExp: /^\.\/locale$/,
+        contextRegExp: /moment$/,
+      }),
+
+      ifMin(new webpack.ids.HashedModuleIdsPlugin()), // todo: remove?
+
+      // ifMin(
+      //   new CopyPlugin({
+      //     patterns: [
+      //       {
+      //         from: 'docs',
+      //         to: 'docs',
+      //       },
+      //     ],
+      //   }),
+      // ),
+
+      // ifMin(new BundleAnalyzerPlugin()),
+    ]),
+  }
+
+  // console.log(util.inspect(config, {showHidden: false, depth: null}))
+
+  return removeEmpty(config)
+}
+
+export default getWebpackConfig

package/tsconfig.json

@@ -0,0 +1,76 @@
+{
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig.json to read more about this file */
+
+    /* Basic Options */
+    // "incremental": true,                   /* Enable incremental compilation */
+    "target": "esnext",                       /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
+    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
+    // "lib": [],                             /* Specify library files to be included in the compilation. */
+    "allowJs": true,                          /* Allow javascript files to be compiled. */
+    // "checkJs": true,                       /* Report errors in .js files. */
+    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
+    // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
+    // "sourceMap": true,                     /* Generates corresponding '.map' file. */
+    // "outFile": "./",                       /* Concatenate and emit output to single file. */
+    // "outDir": "./",                        /* Redirect output structure to the directory. */
+    // "rootDir": "./",                       /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
+    // "composite": true,                     /* Enable project compilation */
+    // "tsBuildInfoFile": "./",               /* Specify file to store incremental compilation information */
+    // "removeComments": true,                /* Do not emit comments to output. */
+    "noEmit": true,                           /* Do not emit outputs. */
+    // "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
+    // "downlevelIteration": true,            /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
+    "isolatedModules": true,                  /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
+
+    /* Strict Type-Checking Options */
+    "strict": true,                           /* Enable all strict type-checking options. */
+    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    // "strictNullChecks": true,              /* Enable strict null checks. */
+    // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
+    // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
+    // "strictPropertyInitialization": true,  /* Enable strict checking of property initialization in classes. */
+    // "noImplicitThis": true,                /* Raise error on 'this' expressions with an implied 'any' type. */
+    // "alwaysStrict": true,                  /* Parse in strict mode and emit "use strict" for each source file. */
+
+    /* Additional Checks */
+    // "noUnusedLocals": true,                /* Report errors on unused locals. */
+    // "noUnusedParameters": true,            /* Report errors on unused parameters. */
+    // "noImplicitReturns": true,             /* Report error when not all code paths in function return a value. */
+    "noFallthroughCasesInSwitch": true,       /* Report errors for fallthrough cases in switch statement. */
+    // "noUncheckedIndexedAccess": true,      /* Include 'undefined' in index signature results */
+
+    /* Module Resolution Options */
+    "moduleResolution": "node",               /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
+    "baseUrl": ".",                           /* Base directory to resolve non-absolute module names. */
+    "paths": {                                /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+      "commands/*": ["src/commands/*"],
+      "lib/*": ["src/lib/*"]
+    },
+    // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
+    // "typeRoots": [],                       /* List of folders to include type definitions from. */
+    // "types": [],                           /* Type declaration files to be included in compilation. */
+    "allowSyntheticDefaultImports": true,     /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
+    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
+    // "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
+    // "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */
+
+    /* Source Map Options */
+    // "sourceRoot": "",                      /* Specify the location where debugger should locate TypeScript files instead of source locations. */
+    // "mapRoot": "",                         /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,               /* Emit a single file with source maps instead of having a separate file. */
+    // "inlineSources": true,                 /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
+
+    /* Experimental Options */
+    // "experimentalDecorators": true,        /* Enables experimental support for ES7 decorators. */
+    // "emitDecoratorMetadata": true,         /* Enables experimental support for emitting type metadata for decorators. */
+
+    /* Advanced Options */
+    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
+    "forceConsistentCasingInFileNames": true, /* Disallow inconsistently-cased references to the same file. */
+
+    /* Allow imports from json files */
+    "resolveJsonModule": true,
+  },
+}