Examples with node v20

.github/workflows/templates-tests.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Setting up node
         uses: actions/setup-node@v1
         with:
-          node-version: '12'
+          node-version: '20'
       - name: Setting up cache
         uses: actions/cache@v1
         with:
@@ -39,7 +39,7 @@ jobs:
         env:
           BOTONIC_DISABLE_MIXPANEL: 1
           TEST_PATH: custom-webchat
-        run: (cd $TEST_PATH && npm install -D && npm run build && npm run test)
+        run: (cd $TEST_PATH && npm install -D --legacy-peer-deps && npm run build && npm run test)
       - name: dynamic-carousel build & test
         env:
           BOTONIC_DISABLE_MIXPANEL: 1
@@ -60,11 +60,6 @@ jobs:
           BOTONIC_DISABLE_MIXPANEL: 1
           TEST_PATH: intent
         run: (cd $TEST_PATH && npm install -D && npm run build && npm run test)
-      - name: nlu build & test
-        env:
-          BOTONIC_DISABLE_MIXPANEL: 1
-          TEST_PATH: nlu
-        run: (cd $TEST_PATH && npm install -D && npm run build && npm run test)
       - name: tutorial build & test
         env:
           BOTONIC_DISABLE_MIXPANEL: 1

blank-typescript/babel.config.js

@@ -24,8 +24,7 @@ module.exports = {
     '@babel/typescript',
   ],
   plugins: [
-    '@babel/plugin-proposal-object-rest-spread',
-    '@babel/plugin-proposal-class-properties',
-    '@babel/plugin-transform-runtime',
+    require('@babel/plugin-transform-modules-commonjs'),
+    require('@babel/plugin-transform-runtime'),
   ],
 }

blank-typescript/jest.config.js

@@ -0,0 +1,17 @@
+const path = require('path')
+
+module.exports = {
+    rootDir: "tests",
+    transform: {
+        "^.+\\.[j|t]sx?$": [
+            "ts-jest",
+          ],
+    },
+    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"
+    }
+}

blank-typescript/package.json

@@ -3,61 +3,50 @@
   "version": "1.0.0",
   "scripts": {
     "build": "webpack --env target=all --mode=production",
-    "start": "webpack serve --env target=dev --mode=development",
-    "test": "jest",
-    "train:ner": "ts-node src/nlp/tasks/ner/train.ts",
-    "train:intent-classification": "ts-node src/nlp/tasks/intent-classification/train.ts"
-  },
-  "jest": {
-    "rootDir": "tests",
-    "transformIgnorePatterns": [
-      "/node_modules/(?!@botonic).+\\.(js|jsx|ts|tsx|mjs)$"
-    ],
-    "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"
-    }
+    "start": "webpack-dev-server --env target=dev --mode=development",
+    "deploy": "botonic deploy -c build",
+    "test": "jest"
   },
   "dependencies": {
-    "@babel/runtime": "^7.12.5",
-    "@botonic/react": "~0.21.0"
+    "@babel/runtime": "^7.23.9",
+    "@botonic/react": "0.25.0-alpha.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/plugin-proposal-class-properties": "^7.12.1",
-    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@babel/preset-react": "^7.12.10",
-    "@babel/preset-typescript": "^7.12.7",
-    "@hot-loader/react-dom": "^17.0.1",
-    "analytics-node": "^3.4.0-beta.3",
-    "babel-jest": "^26.6.3",
-    "babel-loader": "^8.2.2",
-    "chokidar": "^3.4.3",
-    "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "^5.0.1",
+    "@babel/core": "^7.23.9",
+    "@babel/plugin-transform-modules-commonjs": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.9",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@hot-loader/react-dom": "^16.14.0",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "chokidar": "^3.6.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.10.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.0.0-alpha.17",
-    "imagemin-gifsicle": "^6.0.0",
-    "imagemin-jpegtran": "^6.0.0",
-    "imagemin-optipng": "^7.0.0",
-    "imagemin-svgo": "^7.0.0",
-    "imagemin-webpack": "^5.0.0",
-    "jest": "^26.6.3",
-    "node-sass": "^8.0.0",
+    "html-webpack-plugin": "^5.6.0",
+    "image-minimizer-webpack-plugin": "^4.0.0",
+    "imagemin": "^8.0.1",
+    "imagemin-gifsicle": "^7.0.0",
+    "imagemin-jpegtran": "^7.0.0",
+    "imagemin-optipng": "^8.0.0",
+    "imagemin-svgo": "^10.0.1",
+    "jest": "^29.7.0",
     "null-loader": "^4.0.1",
     "process": "^0.11.10",
-    "react-hot-loader": "^4.13.0",
-    "sass": "^1.30.0",
-    "sass-loader": "^10.1.0",
-    "style-loader": "^2.0.0",
-    "terser": "^5.5.1",
-    "terser-webpack-plugin": "^5.0.3",
-    "ts-node": "^10.4.0",
-    "typescript": "^4.4.4",
-    "webpack": "^5.10.3",
-    "webpack-cli": "^4.2.0",
-    "webpack-dev-server": "4.13.3"
+    "react-hot-loader": "4.12.21",
+    "sass": "^1.71.1",
+    "sass-loader": "^14.1.1",
+    "style-loader": "^3.3.4",
+    "svgo": "^3.2.0",
+    "terser": "^5.27.2",
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
+    "typescript": "^4.9.5",
+    "webpack": "^5.90.3",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "5.0.2"
   }
 }

blank-typescript/src/plugins.ts

@@ -1,3 +1,3 @@
-import { PluginConfig } from '@botonic/core'
+import type { PluginConfig } from '@botonic/core'
 
 export const plugins: PluginConfig<any>[] = []

blank-typescript/tests/app.test.js

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

blank-typescript/tsconfig.json

@@ -7,16 +7,17 @@
     //ERROR in [at-loader] ./node_modules/@botonic/react/node_modules/@types/react/index.d.ts:2814:14
     //TS2300: Duplicate identifier 'LibraryManagedAttributes'.
     "sourceMap": true,
-    "target": "es2015",
-    "module": "commonjs",
+    "target": "ES2015",
+    "module": "Node16",
+    "moduleResolution": "Node16",
     "baseUrl": "src",
     "paths": {
       "*": ["src/*", "lib/*", "types/*"]
     },
     "outDir": "lib",
-    "jsx": "react",
+    "jsx": "react-jsx",
     "allowJs": true,
-    "lib": ["dom", "es2017"],
+    "lib": ["DOM", "ES2022"],
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true
   },

blank-typescript/webpack.config.js

@@ -1,34 +1,15 @@
 const path = require('path')
 const webpack = require('webpack')
-const CopyPlugin = require('copy-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const ImageminPlugin = require('imagemin-webpack')
+const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin')
 
 const ROOT = path.resolve(__dirname, 'src')
-const NLP_DIRNAME = 'nlp'
 const ASSETS_DIRNAME = 'assets'
-const MODELS_DIRNAME = 'models'
-const TASKS_DIRNAME = 'tasks'
 
-const INTENT_CLASSIFICATION_DIRNAME = 'intent-classification'
 const OUTPUT_PATH = path.resolve(__dirname, 'dist')
 const WEBVIEWS_PATH = path.resolve(OUTPUT_PATH, 'webviews')
-const TASKS_PATH = path.join(ROOT, NLP_DIRNAME, TASKS_DIRNAME)
-
-const INTENT_CLASSIFICATION_MODELS_PATH = path.join(
-  NLP_DIRNAME,
-  TASKS_DIRNAME,
-  INTENT_CLASSIFICATION_DIRNAME,
-  MODELS_DIRNAME
-)
-const INTENTS_ASSETS_MODELS_PATH = path.join(
-  ASSETS_DIRNAME,
-  TASKS_DIRNAME,
-  INTENT_CLASSIFICATION_DIRNAME,
-  MODELS_DIRNAME 
-)
 
 const BOTONIC_PATH = path.resolve(
   __dirname,
@@ -122,8 +103,6 @@ const babelTypescriptLoaderConfig = {
         '@babel/typescript',
       ],
       plugins: [
-        '@babel/plugin-proposal-object-rest-spread',
-        '@babel/plugin-proposal-class-properties',
         '@babel/plugin-transform-runtime',
       ],
     },
@@ -166,16 +145,17 @@ const stylesLoaderConfig = {
   ],
 }
 
-const imageminPlugin = new ImageminPlugin({
-  bail: false,
-  cache: false,
-  imageminOptions: {
-    plugins: [
-      ['imagemin-gifsicle', { interlaced: true }],
-      ['imagemin-jpegtran', { progressive: true }],
-      ['imagemin-optipng', { optimizationLevel: 5 }],
-      ['imagemin-svgo', { removeViewBox: true }],
-    ],
+const imageminPlugin = new ImageMinimizerPlugin({
+  minimizer: {
+    implementation: ImageMinimizerPlugin.imageminMinify,
+    options: {
+      plugins: [
+        "imagemin-gifsicle",
+        "imagemin-jpegtran",
+        "imagemin-optipng",
+        "imagemin-svgo",
+      ],
+    },
   },
 })
 
@@ -201,7 +181,7 @@ function botonicDevConfig(mode) {
     },
     resolve: resolveConfig,
     devServer: {
-      static: [OUTPUT_PATH, TASKS_PATH],
+      static: [OUTPUT_PATH],
       liveReload: true,
       historyApiFallback: true,
       hot: true,
@@ -334,14 +314,6 @@ function botonicNodeConfig(mode) {
         IS_NODE: true,
         HUBTYPE_API_URL: JSON.stringify(process.env.HUBTYPE_API_URL),
       }),
-      new CopyPlugin({
-        patterns: [
-          {
-            from: INTENT_CLASSIFICATION_MODELS_PATH,
-            to: INTENTS_ASSETS_MODELS_PATH,
-          },
-        ],
-      }),
     ],
   }
 }

blank/babel.config.js

@@ -23,8 +23,7 @@ module.exports = {
     ],
   ],
   plugins: [
-    require('@babel/plugin-proposal-object-rest-spread'),
-    require('@babel/plugin-proposal-class-properties'),
+    require('@babel/plugin-transform-modules-commonjs'),
     require('@babel/plugin-transform-runtime'),
   ],
 }

blank/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"
+    }
+}