@jseeio/jsee 0.2.1 → 0.2.5

package/dist/worker_bundle.js

@@ -0,0 +1 @@
+(()=>{var __webpack_modules__={555:()=>{eval("function getModelFuncJS(schema, target, log=console.log) {\n  switch (schema.model.type) {\n    case 'class':\n      log('Init class')\n      const modelClass = new target()\n      return (...a) => {\n        return modelClass[this.schema.model.method || 'predict'](...a)\n      }\n    case 'async-init':\n      log('Function with async init')\n      return target().then((m) => {\n        log('Async init resolved: ', m)\n        this.modelFunc = m\n      })\n    default:\n      log('Init function')\n      return target\n  }\n}\n\n\n//# sourceURL=webpack://@jseeio/jsee/./src/utils.js?")},736:(__unused_webpack_module,__unused_webpack___webpack_exports__,__webpack_require__)=>{"use strict";eval("/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(555);\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_utils_js__WEBPACK_IMPORTED_MODULE_0__);\n\n\nconsole.log('!!!', _utils_js__WEBPACK_IMPORTED_MODULE_0__.getModelFuncJS)\n\nfunction log () {\n  const args = Array.prototype.slice.call(arguments);\n  args.unshift('[Worker]')\n  console.log(args)\n  postMessage({_status: 'log', _log: args})\n}\n\nfunction initTF (model) {\n  throw new Error('Tensorflow in worker (not implemented)')\n}\n\nfunction initPython (model) {\n  throw new Error('Python in worker (not implemented)')\n}\n\nfunction initJS (model) {\n  this.container = model.container\n\n  if (model.code) {\n    log('Load code as a string')\n    // https://github.com/altbdoor/blob-worker/blob/master/blobWorker.js\n    importScripts(URL.createObjectURL(new Blob([model.code], { type: 'text/javascript' })))\n  } else if (model.url) {\n    log('Load script from URL:', model.url)\n    importScripts(model.url)\n  } else {\n    log('No script provided')\n  }\n\n  this.modelFunc = (0,_utils_js__WEBPACK_IMPORTED_MODULE_0__.getModelFuncJS)(model, this[model.name], log)\n  console.log('>>>', this.modelFunc)\n  postMessage({_status: 'loaded'})\n}\n\nonmessage = function (e) {\n\n  var data = e.data\n  log('Received message of type:', typeof data)\n\n  if ((typeof data === 'object') && ((data.url) || (data.code))) {\n    /*\n      INIT MESSAGE\n    */\n    let model = data\n    log('Init...')\n\n    switch (model.type) {\n      case 'tf':\n        initTF(model)\n        break\n      case 'py':\n        initPython(model)\n        break\n      case 'function':\n      case 'class':\n      case 'async-init':\n      case 'async-function':\n        initJS.call(this, model)\n        break\n    }\n  } else {\n    /*\n    :w\n    CALL MESSAGE\n    */\n    var res\n    if (typeof this.modelFunc === 'string') {\n      // Python model:\n      log('Calling Python model')\n      /*\n      const keys = Object.keys(data)\n      for (let key of keys) {\n        self[key] = data[key];\n      }\n      self.pyodide.runPythonAsync(this.model, () => {})\n        .then((res) => {\n          console.log('[Worker] Py results: ', typeof res, res)\n\t  postMessage(res)\n        })\n        .catch((err) => {\n          // self.postMessage({error : err.message});\n        })\n      */\n    } else {\n      // JavaScript model\n      log('Calling JavaScript model')\n      if (this.container === 'args') {\n        log('Applying inputs as arguments')\n        res = this.modelFunc.apply(null, data)\n      } else {\n        // JS object or array\n        log('Applying inputs as object/array')\n        res = this.modelFunc(data, log)\n      }\n      // Return promise value or just regular value\n      // Promise.resolve handles both cases\n      Promise.resolve(res).then(r => { postMessage(r) })\n    }\n  }\n}\n\n\n//# sourceURL=webpack://@jseeio/jsee/./src/worker.js?")}},__webpack_module_cache__={};function __webpack_require__(e){var n=__webpack_module_cache__[e];if(void 0!==n)return n.exports;var o=__webpack_module_cache__[e]={exports:{}};return __webpack_modules__[e](o,o.exports,__webpack_require__),o.exports}__webpack_require__.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return __webpack_require__.d(n,{a:n}),n},__webpack_require__.d=(e,n)=>{for(var o in n)__webpack_require__.o(n,o)&&!__webpack_require__.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},__webpack_require__.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var __webpack_exports__=__webpack_require__(736)})();

package/jest-puppeteer.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  launch: {
+    dumpio: false, // dump browser errors to jest
+    headless: process.env.HEADLESS !== 'false',
+    product: 'chrome',
+  },
+  // server: {
+  //   command: 'http-server',
+  //   port: 8081,
+  // },
+  browserContext: 'default',
+}

package/jest.config.js

@@ -0,0 +1,7 @@
+const config = {
+  preset: 'jest-puppeteer',
+  verbose: true,
+}
+
+module.exports = config
+

package/load.html

@@ -13,11 +13,15 @@
     <script src="dist/jsee.js" type="text/javascript"></script>
     <script>
       var params = new URLSearchParams(window.location.search)
-      var schema = params.get('s')
-      if (schema) {
-        if (typeof schema === 'string') {
-          schema = schema.includes('/') ? schema : '/apps/' + schema + '/schema.json'
+      var schemaStr = params.get('s')
+      if (schemaStr) {
+        let schema
+        try {
+          schema = JSON.parse(schemaStr);
+        } catch (e) {
+          schema = schemaStr.includes('/') ? schemaStr : '/apps/' + schemaStr + '/schema.json'
         }
+        console.log('[Loader] Schema:', schemaStr, schema)
         const env = new JSEE({
           container: document.getElementById('jsee-container'),
           schema: schema

package/main.js

@@ -1,6 +1,8 @@
 import { createVueApp } from './src/app'
 import Worker from './src/worker.js'
 
+const utils = require('./src/utils')
+
 const { Notyf } = require('notyf')
 const notyf = new Notyf({
   types: [
@@ -25,8 +27,11 @@ require('notyf/notyf.min.css')
 const fetch = window['fetch']
 const Blob = window['Blob']
 
+let verbose = true
 function log () {
-  console.log(`[JSEE v${VERSION}]`, ...arguments)
+  if (verbose) {
+    console.log(`[JSEE v${VERSION}]`, ...arguments)
+  }
 }
 
 // const Worker = window['Worker']
@@ -42,6 +47,12 @@ function isObject (item) {
   return (typeof item === 'object' && !Array.isArray(item) && item !== null)
 }
 
+function getName (code) {
+  const words = code.split(' ')
+  const functionIndex = words.findIndex((word) => word == 'function')
+  return words[numberIndex + 1]
+}
+
 // Return input value
 function getValue (input) {
   if (input.type === 'group') {
@@ -55,14 +66,60 @@ function getValue (input) {
   }
 }
 
+function getType (model) {
+  if (model.code && typeof model.code === 'string' && model.code.split(' ').map(v => v.trim()).includes('def')) {
+    return 'py'
+  } else if (model.url) {
+    return 'post'
+  }
+  return 'function'
+}
+
+// Nice trick to get a function parameters by Jack Allan
+// From: https://stackoverflow.com/a/9924463/2998960
+const STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg
+const ARGUMENT_NAMES = /([^\s,]+)/g
+function getParamNames (func) {
+  const fnStr = func.toString().replace(STRIP_COMMENTS, '')
+  let result = fnStr.slice(fnStr.indexOf('(')+1, fnStr.indexOf(')')).match(ARGUMENT_NAMES)
+  if (result === null)
+    result = []
+  return result
+}
+
+function getInputs (model) {
+  if (model.code) {
+    const params = getParamNames(model.code)
+    return params.map(p => ({
+      'name': p,
+      'type': 'string'
+    }))
+  }
+  return []
+}
+
+function getFunctionContainer (target) {
+  // Check if the number of parameters is > 1, then 'args'
+}
+
 export default class JSEE {
-  constructor (params) {
+  constructor (params, alt) {
+    // Check if JSEE was initialized with 2 args rather than 1 obj
+    if (('model' in params) || !(typeof alt === 'undefined')) {
+      params = {
+        'schema': params,
+        'container': alt
+      }
+    }
+
+    verbose = !(params.verbose === false)
+
     log('Initializing JSEE with parameters: ', params)
     params.schema = params.schema || params.config
     this.params = params
     this.__version__ = VERSION
 
-    // Get schema then initialize a model
+    // Get schema then initialize a new environment
     if (params.schema) {
       if (typeof params.schema === 'object') {
         log('Received schema as object')
@@ -87,186 +144,143 @@ export default class JSEE {
     notyf.success(txt)
   }
 
-  // Initialize model from schema
   init (schema) {
-    log('Initializing schema', schema)
+    this.loadCode(schema).then((code) => { // -> code
+      this.initSchema(schema, code) // -> this.schema
+      this.initVue() // -> this.app, this.data
+      this.initWorker() // -> this.worker
+      this.initRender() // -> this.renderFunc
+      this.initModel() // -> this.modelFunc (depends on this.worker)
+    })
+  }
 
-    // Convert JS code to string
-    if (schema.model.code && (typeof schema.model.code !== 'string')) {
-      log('Convert code in schema to string')
-      schema.model.code = schema.model.code.toString()
-    }
+  loadCode (schema) {
+    const initPromise = new Promise((resolve, reject) => {
+      // Unwind this ball of possible cases
+      let url = schema.model.url
+      if (url && (url.includes('.js') || url.includes('.py'))) {
+        // Update model URL if needed
+        if (!url.includes('/') && this.schemaUrl && this.schemaUrl.includes('/')) {
+          url = window.location.protocol + '//' + window.location.host + this.schemaUrl.split('/').slice(0, -1).join('/') + '/' + url
+          log(`Changed the old model URL to ${url} (based on the schema URL)`)
+        }
+        fetch(url)
+          .then(res => res.text())
+          .then(res => {
+            log('Loaded code from:', url)
+            resolve(res)
+          })
+      } else if (typeof schema === 'function') {
+        log('Code is: schema')
+        resolve(schema)
+      } else if (typeof schema.model === 'function') {
+        log('Code is: schema.model')
+        resolve(schema.model)
+      } else if (!(typeof schema.model.code === 'undefined')) {
+        log('Code is: schema.model.code')
+        resolve(schema.model.code)
+      } else {
+        log('No code. Probably API...')
+        resolve(undefined)
+      }
+    })
+
+    return initPromise
+  }
+
+  initSchema (schema, code) {
+    log('Initializing schema')
 
-    // Update model URL if needed
-    if (schema.model.url && !schema.model.url.includes('/') && this.schemaUrl && this.schemaUrl.includes('/')) {
-      let oldModelUrl = schema.model.url
-      log('Schema URL:', this.schemaUrl)
-      schema.model.url = window.location.protocol + '//' + window.location.host + this.schemaUrl.split('/').slice(0, -1).join('/') + '/' + oldModelUrl
-      log('Changed the old model URL to absolute one:', oldModelUrl, schema.model.url)
+    // Check for empty model block
+    if (typeof schema.model === 'undefined') {
+      schema.model = {}
     }
 
+    schema.model.code = code
+
+    // Check for super minimal config
     // Check for worker flag
     if (typeof schema.model.worker === 'undefined') {
       schema.model.worker = true
     }
 
-    // Check if name is present, if not - get name from the file
-    if (typeof schema.model.name === 'undefined') {
-      // Two options here
-      if (schema.model.url) {
-        // 1. Get the name from the file name
-        schema.model.name = schema.model.url.split('/').pop().split('.')[0]
-        log('Use name from url: ', schema.model.name)
-      } else if (schema.model.code) {
-        // 2. Get the name from the url
-        schema.model.name = schema.model.code.name
-        log('Use name from code: ', schema.model.name)
+    // Check inputs
+    // Relies on model.code
+    // So run after possible fetching
+    if (typeof schema.inputs === 'undefined') {
+      schema.model.container = 'args'
+      schema.inputs = getInputs(schema.model)
+    }
+
+    // Relies on input check
+    // Set default input type
+    schema.inputs.forEach(input => {
+      if (typeof input.type === 'undefined') {
+        input.type = 'string'
       }
+    })
+
+    // Infer model type
+    if (typeof schema.model.type === 'undefined') {
+      schema.model.type = getType(schema.model)
+    }
+
+    // Update model name if absent
+    if ((typeof schema.model.name === 'undefined') && (schema.model.url) && (schema.model.url.includes('.js'))) {
+      schema.model.name = schema.model.url.split('/').pop().split('.')[0]
+      log('Use model name from url: ', schema.model.name)
     }
 
+    // At this point we have all code in model.code or api
     this.schema = clone(schema)
+  }
 
-    // Init Vue app
-    this.app = createVueApp(this, this.schema, (container) => {
+  initVue () {
+    log('Initializing VUE')
+    this.app = createVueApp(this, (container) => {
       // Called when the app is mounted
       // FYI "this" here refers to port object
       this.outputsContainer = container.querySelector('#outputs')
       this.inputsContainer = container.querySelector('#inputs')
       this.modelContainer = container.querySelector('#model')
-
       // Init overlay
-      this.overlay = new Overlay(this.inputsContainer)
-    })
+      this.overlay = new Overlay(this.inputsContainer ? this.inputsContainer : this.outputsContainer)
+    }, log)
     this.data = this.app.$data
+  }
 
-    // Init Model
-    // ----------
-    if (this.schema.model.type === 'py') {
-      // Add loading indicator
-      this.overlay.show()
-      let script = document.createElement('script')
-      script.src = 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js'
-      script.onload = async () => {
-        this.pyodide = await loadPyodide({ indexURL : "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/" });
-        notyf.success('Loaded: Python')
-        const resRaw = await fetch(this.schema.model.url)
-        const res = await resRaw.text()
-        this.pymodel = res
-        log('Loaded python code:', res)
-        // Check if micropip is used
-        if (res.includes('micropip')) {
-          await this.pyodide.loadPackage('micropip')
-          log('Loaded micropip')
-        }
-        // Import packages if defined
-        if ('packages' in this.schema.model) {
-          await this.pyodide.loadPackage(this.schema.model.packages)
-          log('Loaded packages from schema')
-        } else {
-          await this.pyodide.loadPackagesFromImports(res)
-          log('Loaded packages from Python code')
-        }
+  initWorker () {
+    if (this.schema.model.worker) {
+      log('Initializing Worker')
+      this.worker = new Worker()
+      this.worker.onmessage = (e) => {
         this.overlay.hide()
-      }
-      document.head.appendChild(script)
-    } else if (['function', 'class', 'async-init', 'async-function'].includes(this.schema.model.type)) {
-      // Initialize worker with the model
-      if (this.schema.model.worker) {
-        // this.worker = new Worker(new URL('./src/worker.js', import.meta.url))
-        this.worker = new Worker()
-        if (this.schema.model.url) {
-          fetch(this.schema.model.url)
-            .then(res => res.text())
-            .then(res => {
-              log('Loaded js code for worker')
-              this.schema.model.code = res
-              this.worker.postMessage(this.schema.model)
-            })
-        } else if (typeof this.schema.model.code !== 'undefined') {
-          this.worker.postMessage(this.schema.model)
-        } else {
-          notyf.error('No code provided')
-        }
-
-        this.worker.onmessage = (e) => {
-          this.overlay.hide()
-          const res = e.data
-          if ((typeof res === 'object') && (res._status)) {
-            switch (res._status) {
-              case 'loaded':
-                notyf.success('Loaded: JS model (in worker)')
-                break
-              case 'log':
-                log(...res._log)
-                break
-            }
-          } else {
-            log('Response from worker:', res)
-            this.output(res)
-          }
-        }
-        this.worker.onerror = (e) => {
-          this.overlay.hide()
-          notyf.error(e.message)
-          log('Error from worker:', e)
-        }
-      } else {
-        // Initialize model in main window
-        log('Init model in window')
-        let script = document.createElement('script')
-        script.src = this.schema.model.url
-        script.onload = () => {
-          notyf.success('Loaded: JS model')
-          this.overlay.hide()
-          log('Loaded JS model in main window')
-
-          // Initializing the model (same in worker)
-          if (this.schema.model.type === 'class') {
-            log('Init class')
-            const modelClass = new window[this.schema.model.name]()
-            this.modelFunc = (...a) => {
-              return modelClass[this.schema.model.method || 'predict'](...a)
-            }
-          } else if (this.schema.model.type === 'async-init') {
-            log('Init function with promise')
-            window[this.schema.model.name]().then((m) => {
-              log('Async init resolved: ', m)
-              this.modelFunc = m
-            })
-          } else {
-            log('Init function')
-            this.modelFunc = window[this.schema.model.name]
+        const res = e.data
+        if ((typeof res === 'object') && (res._status)) {
+          switch (res._status) {
+            case 'loaded':
+              notyf.success('Loaded: JS model (in worker)')
+              break
+            case 'log':
+              log(...res._log)
+              break
           }
+        } else {
+          log('Response from worker:', res)
+          this.output(res)
         }
-        document.head.appendChild(script)
       }
-    } else if (this.schema.model.type === 'tf') {
-      // Initialize TF
-      let script = document.createElement('script')
-      script.src = 'dist/tf.min.js'
-      script.onload = () => {
-        log('Loaded TF.js')
+      this.worker.onerror = (e) => {
         this.overlay.hide()
-        window['tf'].loadLayersModel(this.schema.model.url).then(res => {
-          log('Loaded Tensorflow model')
-        })
-      }
-      document.head.appendChild(script)
-    } else if (this.schema.model.type === 'get') {
-      this.overlay.hide()
-      this.modelFunc = (data) => {
-        const query = new window['URLSearchParams'](data).toString()
-        log('Generated query string:', query)
-        const resPromise = fetch(this.schema.model.url +'?' + query)
-          .then(response => response.json())
-        return resPromise
+        notyf.error(e.message)
+        log('Error from worker:', e)
       }
     }
+  }
 
-    // Init render
-    // -----------
+  initRender () {
     if (this.schema.render && this.schema.render.url) {
-      log('Init render in window')
+      log('Initializing a render function')
       let script = document.createElement('script')
       script.src = this.schema.render.url
       script.onload = () => {
@@ -295,6 +309,130 @@ export default class JSEE {
     }
   }
 
+  initModel () {
+    log('Initializing a model function')
+    switch (this.schema.model.type) {
+      case 'py':
+        this.initPython()
+        break
+      case 'tf':
+        this.initTF()
+        break
+      case 'function':
+      case 'class':
+      case 'async-init':
+      case 'async-function':
+        this.initJS()
+        break
+      case 'get':
+      case 'post':
+        this.initAPI()
+        break
+      default:
+        notyf.error('No type information')
+        break
+    }
+  }
+
+  initPython () {
+    // Add loading indicator
+    this.overlay.show()
+    let script = document.createElement('script')
+    script.src = 'https://cdn.jsdelivr.net/pyodide/v0.18.1/full/pyodide.js'
+    script.onload = async () => {
+      this.pyodide = await loadPyodide({ indexURL : "https://cdn.jsdelivr.net/pyodide/v0.18.1/full/" });
+      notyf.success('Loaded: Python')
+      log('Loaded python code:', res)
+      // Check if micropip is used
+      if (res.includes('micropip')) {
+        await this.pyodide.loadPackage('micropip')
+        log('Loaded micropip')
+      }
+      // Import packages if defined
+      if ('packages' in this.schema.model) {
+        await this.pyodide.loadPackage(this.schema.model.packages)
+        log('Loaded packages from schema')
+      } else {
+        await this.pyodide.loadPackagesFromImports(res)
+        log('Loaded packages from Python code')
+      }
+      this.overlay.hide()
+    }
+    document.head.appendChild(script)
+  }
+
+  initJS () {
+    // 1. String input <- loaded from url or code(string)
+    // 2. Target object (can be function, class or a function with async init <- code(object)
+    // 3. Model function
+
+    // We always start from 1 or 2
+    // For window execution we go: [1 ->] 2 -> 3
+    // For worker: [2 ->] 1 -> Worker
+
+    if (this.schema.model.worker) {
+      // Worker: Initialize worker with the model
+      if (typeof this.schema.model.code !== 'string') {
+        // 2 -> 1
+        log('Convert code in schema to string for WebWorker')
+        this.schema.model.code = this.schema.model.code.toString()
+      }
+      this.worker.postMessage(this.schema.model)
+    } else {
+      // Main: Initialize model in main window
+
+      // Target here represents raw JS object (e.g. class), not the final callable function
+      let target
+      if (typeof this.schema.model.code === 'string') {
+        // 1 -> 2
+        // Danger zone
+        if (this.schema.model.name) {
+          log('Evaluating code from string (has name)')
+          target = Function(
+            `${this.schema.model.code} ;return ${this.schema.model.name}`
+          )()
+        } else {
+          log('Evaluating code from string (no name)')
+          target = eval(`(${this.schema.model.code})`) // ( ͡° ͜ʖ ͡°) YEAHVAL
+        }
+      } else {
+        target = this.schema.model.code
+      }
+
+      // Need promise here in case of async init
+      Promise.resolve(utils.getModelFuncJS(this.schema.model, target, log))
+        .then(m => {
+          this.overlay.hide()
+          notyf.success('Loaded: JS model')
+          this.modelFunc = m 
+        })
+    }
+  }
+
+  initAPI () {
+    this.overlay.hide()
+    if (this.schema.model.worker) {
+      // Worker:
+      this.worker.postMessage(this.schema.model)
+    } else {
+      // Main:
+      this.modelFunc = utils.getModelFuncAPI(model, log)
+    }
+  }
+
+  initTF () {
+    let script = document.createElement('script')
+    script.src = 'dist/tf.min.js'
+    script.onload = () => {
+      log('Loaded TF.js')
+      this.overlay.hide()
+      window['tf'].loadLayersModel(this.schema.model.url).then(res => {
+        log('Loaded Tensorflow model')
+      })
+    }
+    document.head.appendChild(script)
+  }
+
   run () {
     const schema = this.schema
     const data = this.data
@@ -306,7 +444,7 @@ export default class JSEE {
       log('Pass inputs as function arguments')
       inputValues = data.inputs.map(input => getValue(input))
     } else {
-      log('Pass inputs in an object')
+      log('Pass inputs as object')
       inputValues = {}
       data.inputs.forEach(input => {
         if (input.name) {
@@ -326,7 +464,7 @@ export default class JSEE {
         data.inputs.forEach(input => {
           this.pyodide.globals.set(input.name, input.value);
         })
-        this.pyodide.runPythonAsync(this.pymodel, () => {})
+        this.pyodide.runPythonAsync(this.schema.model.code, () => {})
           .then((res) => {
             if (schema.outputs && schema.outputs.length) {
               const resultObj = {}
@@ -349,6 +487,7 @@ export default class JSEE {
       case 'async-init':
       case 'async-function':
       case 'get':
+      case 'post':
         if (this.schema.model.worker) {
           this.worker.postMessage(inputValues)
         } else {
@@ -364,8 +503,6 @@ export default class JSEE {
           Promise.resolve(res).then(r => { this.output(r) })
         }
         break
-      case 'api':
-        break
     }
   }
 

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@jseeio/jsee",
-  "version": "0.2.1",
+  "version": "0.2.5",
   "description": "",
   "main": "dist/jsee.js",
   "private": false,
   "scripts": {
-    "build-dev": "webpack --mode=development --progress",
+    "build-dev": "webpack --mode=development --progress --stats-children",
     "build": "webpack --mode=production --progress && npx webpack --mode=production --progress --env RUNTIME",
-    "watch": "nodemon --watch . --ignore dist --ext vue,js,css,html --exec 'npm run build-dev'",
-    "prepublishOnly": "npm run build",
-    "test": "tape test.js | faucet"
+    "watch": "nodemon --watch . --ignore dist --ext vue,js,css,html --exec 'npm run build-dev && npm test'",
+    "prepublishOnly": "npm run build && npm test",
+    "test": "jest test.js --detectOpenHandles",
+    "test-head": "HEADLESS=false npm test"
   },
   "author": "Anton Zemlyansky",
   "license": "MIT",
@@ -31,10 +32,14 @@
     "@babel/preset-env": "^7.16.5",
     "babel-loader": "^8.2.3",
     "css-loader": "^6.5.1",
+    "http-server": "^14.0.0",
+    "jest": "^27.4.5",
+    "jest-puppeteer": "^6.0.3",
     "node-sass": "^7.0.0",
     "nodemon": "^2.0.15",
-    "puppeteer": "^1.12.2",
+    "puppeteer": "^1.20.0",
     "sass-loader": "^12.4.0",
+    "source-map-loader": "^3.0.0",
     "style-loader": "^3.3.1",
     "tape": "^4.9.1",
     "terser-webpack-plugin": "^5.3.0",