@botonic/example-blank 0.25.0-alpha.0

package/babel.config.js

@@ -0,0 +1,29 @@
+/*
+ * This babel configuration is used along with Jest for execute tests,
+ * do not modify to avoid conflicts with webpack.config.js.
+ */
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+    [
+      '@babel/react',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
+  ],
+  plugins: [
+    require('@babel/plugin-transform-modules-commonjs'),
+    require('@babel/plugin-transform-runtime'),
+  ],
+}

package/jest.config.js

@@ -0,0 +1,18 @@
+const path = require('path')
+
+module.exports = {
+    rootDir: "tests",
+    transform: {
+        "^.+\\.jsx?$": [
+            "babel-jest",
+            { "configFile": path.resolve(__dirname, "babel.config.js") },
+          ],
+    },
+    transformIgnorePatterns: [
+      "/node_modules/(?!@botonic).+\\.(js|jsx|ts|tsx)$"
+    ],
+    moduleNameMapper: {
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
+      "\\.(scss|css|less)$": "<rootDir>/__mocks__/styleMock.js"
+    }
+}

package/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "@botonic/example-blank",
+  "version": "0.25.0-alpha.0",
+  "scripts": {
+    "build": "webpack --env target=all --mode=production",
+    "start": "webpack-dev-server --env target=dev --mode=development",
+    "deploy": "botonic deploy -c build",
+    "test": "jest"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.23.9",
+    "@botonic/react": "0.25.0-alpha.6"
+  },
+  "devDependencies": {
+    "@botonic/dx": "0.25.0-alpha.7"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/src/index.js

@@ -0,0 +1 @@
+export const config = { defaultDelay: 0, defaultTyping: 0 }

package/src/locales/index.js

@@ -0,0 +1 @@
+export const locales = {}

package/src/plugins.js

@@ -0,0 +1 @@
+export const plugins = []

package/src/routes.js

@@ -0,0 +1 @@
+export const routes = []

package/src/webchat/index.js

@@ -0,0 +1 @@
+export const webchat = {}

package/src/webviews/index.js

@@ -0,0 +1 @@
+export const webviews = []

package/tests/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub'

package/tests/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {}

package/tests/app.test.js

@@ -0,0 +1,20 @@
+import {
+  BotonicInputTester,
+  BotonicOutputTester,
+  NodeApp,
+} from '@botonic/react'
+
+import { config } from '../src/'
+import { locales } from '../src/locales'
+import { plugins } from '../src/plugins'
+import { routes } from '../src/routes'
+
+const app = new NodeApp({ routes, locales, plugins, ...config })
+
+const input = new BotonicInputTester(app)
+const output = new BotonicOutputTester(app)
+
+test('TEST: (404) NOT FOUND', async () => {
+  const response = await input.text('whatever')
+  expect(response).toBe(output.text("I don't understand you"))
+})

package/webpack-entries/dev-entry.js

@@ -0,0 +1,15 @@
+import { DevApp } from '@botonic/react'
+
+import { config } from '../src'
+import { locales } from '../src/locales'
+import { plugins } from '../src/plugins'
+import { routes } from '../src/routes'
+import { webchat } from '../src/webchat'
+
+export const app = new DevApp({
+  routes,
+  locales,
+  plugins,
+  ...webchat,
+  ...config,
+})

package/webpack-entries/node-entry.js

@@ -0,0 +1,8 @@
+import { NodeApp } from '@botonic/react'
+
+import { config } from '../src'
+import { locales } from '../src/locales'
+import { plugins } from '../src/plugins'
+import { routes } from '../src/routes'
+
+export const app = new NodeApp({ routes, locales, plugins, ...config })

package/webpack-entries/webchat-entry.js

@@ -0,0 +1,5 @@
+import { WebchatApp } from '@botonic/react'
+
+import { webchat } from '../src/webchat'
+
+export const app = new WebchatApp(webchat)

package/webpack-entries/webviews-entry.js

@@ -0,0 +1,6 @@
+import { WebviewApp } from '@botonic/react'
+
+import { locales } from '../src/locales'
+import { webviews } from '../src/webviews'
+
+export const app = new WebviewApp({ webviews, locales })

package/webpack.config.js

@@ -0,0 +1,338 @@
+const path = require('path')
+const webpack = require('webpack')
+const TerserPlugin = require('terser-webpack-plugin')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
+
+const ROOT = path.resolve(__dirname, 'src')
+const ASSETS_DIRNAME = 'assets'
+
+const OUTPUT_PATH = path.resolve(__dirname, 'dist')
+const WEBVIEWS_PATH = path.resolve(OUTPUT_PATH, 'webviews')
+
+const BOTONIC_PATH = path.resolve(
+  __dirname,
+  'node_modules',
+  '@botonic',
+  'react'
+)
+
+const WEBPACK_MODE = {
+  DEVELOPMENT: 'development',
+  PRODUCTION: 'production',
+}
+
+const BOTONIC_TARGETS = {
+  ALL: 'all',
+  DEV: 'dev',
+  NODE: 'node',
+  WEBVIEWS: 'webviews',
+  WEBCHAT: 'webchat',
+}
+
+const WEBPACK_ENTRIES_DIRNAME = 'webpack-entries'
+const WEBPACK_ENTRIES = {
+  DEV: 'dev-entry.js',
+  NODE: 'node-entry.js',
+  WEBCHAT: 'webchat-entry.js',
+  WEBVIEWS: 'webviews-entry.js',
+}
+
+const TEMPLATES = {
+  WEBCHAT: 'webchat.template.html',
+  WEBVIEWS: 'webview.template.html',
+}
+
+const UMD_LIBRARY_TARGET = 'umd'
+const BOTONIC_LIBRARY_NAME = 'Botonic'
+const WEBCHAT_FILENAME = 'webchat.botonic.js'
+
+function sourceMap(mode) {
+  if (mode === WEBPACK_MODE.PRODUCTION) return 'hidden-source-map'
+  else if (mode === WEBPACK_MODE.DEVELOPMENT) return 'eval-cheap-source-map'
+  else
+    throw new Error(
+      'Invalid mode argument (' + mode + '). See package.json scripts'
+    )
+}
+
+const optimizationConfig = {
+  minimize: true,
+  minimizer: [
+    new TerserPlugin({
+      parallel: true,
+      terserOptions: {
+        keep_fnames: true,
+      },
+    }),
+  ],
+}
+
+const resolveConfig = {
+  extensions: ['*', '.js', '.jsx', '.ts', '.tsx', '.mjs'],
+  alias: {
+    react: path.resolve(__dirname, 'node_modules', 'react'),
+    'styled-components': path.resolve(
+      __dirname,
+      'node_modules',
+      'styled-components'
+    ),
+  },
+  fallback: {
+    util: require.resolve('util'),
+  },
+}
+
+const babelLoaderConfig = {
+  test: /\.(js|jsx|ts|tsx|mjs)$/,
+  exclude: /node_modules\/(?!@botonic)/,
+  use: {
+    loader: 'babel-loader',
+    options: {
+      sourceType: 'unambiguous',
+      cacheDirectory: true,
+      presets: [
+        '@babel/react',
+        [
+          '@babel/preset-env',
+          {
+            modules: false,
+          },
+        ],
+      ],
+      plugins: [
+        '@babel/plugin-transform-runtime',
+      ],
+    },
+  },
+}
+
+function fileLoaderConfig(outputPath) {
+  return {
+    test: /\.(jpe?g|png|gif|svg)$/i,
+    use: [
+      {
+        loader: 'file-loader',
+        options: {
+          outputPath: outputPath,
+        },
+      },
+    ],
+  }
+}
+
+const nullLoaderConfig = {
+  test: /\.(scss|css)$/,
+  use: 'null-loader',
+}
+
+const stylesLoaderConfig = {
+  test: /\.(scss|css)$/,
+  use: [
+    {
+      loader: 'style-loader',
+      options: {
+        insert: function (element) {
+          if (!window._botonicInsertStyles) window._botonicInsertStyles = []
+          window._botonicInsertStyles.push(element)
+        },
+      },
+    },
+    'css-loader',
+    'sass-loader',
+  ],
+}
+
+const imageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      plugins: [
+        "imagemin-gifsicle",
+        "imagemin-jpegtran",
+        "imagemin-optipng",
+        "imagemin-svgo",
+      ],
+    },
+  },
+})
+
+function botonicDevConfig(mode) {
+  return {
+    mode: mode,
+    devtool: sourceMap(mode),
+    entry: path.resolve(WEBPACK_ENTRIES_DIRNAME, WEBPACK_ENTRIES.DEV),
+    target: 'web',
+    module: {
+      rules: [
+        babelLoaderConfig,
+        fileLoaderConfig(ASSETS_DIRNAME),
+        stylesLoaderConfig,
+      ],
+    },
+    output: {
+      filename: WEBCHAT_FILENAME,
+      library: BOTONIC_LIBRARY_NAME,
+      libraryTarget: UMD_LIBRARY_TARGET,
+      libraryExport: 'app',
+      path: OUTPUT_PATH,
+    },
+    resolve: resolveConfig,
+    devServer: {
+      static: [OUTPUT_PATH],
+      liveReload: true,
+      historyApiFallback: true,
+      hot: true,
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(BOTONIC_PATH, 'src', TEMPLATES.WEBCHAT),
+        filename: 'index.html',
+      }),
+      new webpack.HotModuleReplacementPlugin(),
+      imageminPlugin,
+      new webpack.DefinePlugin({
+        IS_BROWSER: true,
+        IS_NODE: false,
+        HUBTYPE_API_URL: JSON.stringify(process.env.HUBTYPE_API_URL),
+        ...(mode === 'development'
+          ? { MODELS_BASE_URL: JSON.stringify('http://localhost:8080') }
+          : {}),
+      }),
+      new webpack.ProvidePlugin({
+        process: 'process/browser',
+      }),
+    ],
+  }
+}
+
+function botonicWebchatConfig(mode) {
+  return {
+    optimization: optimizationConfig,
+    mode: mode,
+    devtool: sourceMap(mode),
+    target: 'web',
+    entry: path.resolve(WEBPACK_ENTRIES_DIRNAME, WEBPACK_ENTRIES.WEBCHAT),
+    module: {
+      rules: [
+        babelLoaderConfig,
+        fileLoaderConfig(ASSETS_DIRNAME),
+        stylesLoaderConfig,
+      ],
+    },
+    output: {
+      filename: WEBCHAT_FILENAME,
+      library: BOTONIC_LIBRARY_NAME,
+      libraryTarget: UMD_LIBRARY_TARGET,
+      libraryExport: 'app',
+      path: OUTPUT_PATH,
+    },
+    resolve: resolveConfig,
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(BOTONIC_PATH, 'src', TEMPLATES.WEBCHAT),
+        filename: 'index.html',
+      }),
+      imageminPlugin,
+      new webpack.DefinePlugin({
+        IS_BROWSER: true,
+        IS_NODE: false,
+        HUBTYPE_API_URL: JSON.stringify(process.env.HUBTYPE_API_URL),
+        WEBCHAT_PUSHER_KEY: JSON.stringify(process.env.WEBCHAT_PUSHER_KEY),
+      }),
+    ],
+  }
+}
+
+function botonicWebviewsConfig(mode) {
+  return {
+    optimization: optimizationConfig,
+    mode: mode,
+    devtool: sourceMap(mode),
+    target: 'web',
+    entry: path.resolve(WEBPACK_ENTRIES_DIRNAME, WEBPACK_ENTRIES.WEBVIEWS),
+    output: {
+      filename: 'webviews.js',
+      library: 'BotonicWebview',
+      libraryTarget: UMD_LIBRARY_TARGET,
+      libraryExport: 'app',
+      path: WEBVIEWS_PATH,
+    },
+    module: {
+      rules: [
+        babelLoaderConfig,
+        fileLoaderConfig(path.join('..', ASSETS_DIRNAME)),
+        stylesLoaderConfig,
+      ],
+    },
+    resolve: resolveConfig,
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: path.resolve(BOTONIC_PATH, 'src', TEMPLATES.WEBVIEWS),
+        filename: 'index.html',
+      }),
+      imageminPlugin,
+      new webpack.DefinePlugin({
+        IS_BROWSER: true,
+        IS_NODE: false,
+        HUBTYPE_API_URL: JSON.stringify(process.env.HUBTYPE_API_URL),
+      }),
+    ],
+  }
+}
+
+function botonicNodeConfig(mode) {
+  return {
+    context: ROOT,
+    optimization: optimizationConfig,
+    mode: mode,
+    devtool: sourceMap(mode),
+    target: 'node',
+    entry: path.resolve(WEBPACK_ENTRIES_DIRNAME, WEBPACK_ENTRIES.NODE),
+    resolve: resolveConfig,
+    output: {
+      filename: 'bot.js',
+      library: 'bot',
+      libraryTarget: UMD_LIBRARY_TARGET,
+      libraryExport: 'app',
+      path: OUTPUT_PATH,
+    },
+    module: {
+      rules: [
+        babelLoaderConfig,
+        fileLoaderConfig(ASSETS_DIRNAME),
+        nullLoaderConfig,
+      ],
+    },
+    plugins: [
+      new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: ['dist'] }),
+      imageminPlugin,
+      new webpack.DefinePlugin({
+        IS_BROWSER: false,
+        IS_NODE: true,
+        HUBTYPE_API_URL: JSON.stringify(process.env.HUBTYPE_API_URL),
+      }),
+    ],
+  }
+}
+
+module.exports = function (env, argv) {
+  if (env.target === BOTONIC_TARGETS.ALL) {
+    return [
+      botonicNodeConfig(argv.mode),
+      botonicWebviewsConfig(argv.mode),
+      botonicWebchatConfig(argv.mode),
+    ]
+  } else if (env.target === BOTONIC_TARGETS.DEV) {
+    return [botonicDevConfig(argv.mode)]
+  } else if (env.target === BOTONIC_TARGETS.NODE) {
+    return [botonicNodeConfig(argv.mode)]
+  } else if (env.target === BOTONIC_TARGETS.WEBVIEWS) {
+    return [botonicWebviewsConfig(argv.mode)]
+  } else if (env.target === BOTONIC_TARGETS.WEBCHAT) {
+    return [botonicWebchatConfig(argv.mode)]
+  } else {
+    return null
+  }
+}