0.30.md

Upgrade 0.29 to 0.30

Change startupjs and all @startupjs/* dependencies in your package.json to ^0.30.

BREAKING CHANGES

• bundler - Instead of using general require('startupjs/bundler.cjs') you have to require a specific file you need.

  Do a global search in your project for the text startupjs/bundler.cjs and change the following:

  1. require('startupjs/bundler.cjs').webpackWebConfig

     TO:

     require('startupjs/bundler/webpack.web.config.cjs')

  2. require('startupjs/bundler.cjs').webpackServerConfig

     TO:

     require('startupjs/bundler/webpack.server.config.cjs')

  3. require('startupjs/bundler.cjs').babelConfig

     TO:

     require('startupjs/bundler/babel.config.cjs')

  4. require('startupjs/bundler.cjs').metroConfig

     TO:

     require('startupjs/bundler/metro.config.cjs')

  5. require('startupjs/bundler.cjs').rnConfig

     TO:

     require('startupjs/bundler/react-native.config.cjs')

  6. require('startupjs/bundler.cjs').viteConfig

     TO:

     require('startupjs/bundler/vite.config.cjs')

  Additionally, if you did override .js/.jsx compilation in your webpack.web.config.cjs, you might have used getJsxRule function there. In which case you should now get it from helpers:

  7. const { getJsxRule } = require('startupjs/bundler.cjs')

     TO:

     const { getJsxRule } = require('startupjs/bundler/helpers.cjs')

• sharedb-access - There was changed parameters of functions in static access properies (changed backend to model). Now they look like:

  class ItemModel {
    static access = {
      create: async (model, collection, docId, doc, session) => { your code }
      read: async (model, collection, docId, doc, session) => { your code },
      update: async (model, collection, docId, oldDoc, session, ops, newDoc) => { your code },
      delete: async (model, collection, docId, doc, session) => { your code }
    }
  }

• server-aggregation - There was changed parameters of functions in static access properies. Now they look like:

  class ItemModel {
    static aggregations = {
      openEvents: async (model, params, session) => {
        return [
          {$match: {status: 'open'}}
        ]
      }
    }
  }

  Here model - it's sharedb model; params - it's parameters from $params field in aggregation call; session - it's your session.

• DateTimePicker:

  • for Android and IOS changed deprecated libraries from react-native to DateTimePicker from @react-native-community/datetimepicker.
  • for web changed library to react-datepicker that allow use calendar in mode datetime in Safari and Firefox.

  Need to manually install a new library yarn add @react-native-community/datetimepicker with your package manager, install pod for IOS and init backend side of UI:

  • import initUi and getUiHead and connect them in the body of the startupjsServer and getHead functions in server/index.js.

  import { getUiHead, initUi } from '@startupjs/ui/server'
  
  startupjsServer({
    getHead,
    ...
  }, (ee, options) => {
    ...
    initUi(ee, options)
    ...
  })
  
  function getHead () {
    return `
      ${getUiHead()}
      other head text
    `
  }

  • add module @startupjs/ui/server to forceCompileModules in webpack.server.config.cjs

  const getConfig = require('startupjs/bundler.cjs').webpackServerConfig
  
  module.exports = getConfig(undefined, {
    forceCompileModules: ['@startupjs/ui/server']
  })

• Modal: the API of the Modal component has changed. See more

  • rename old onDismiss to onCancel
  • add onDismiss, onShow, showCross, onCrossPress, enableBackdropPress, supportedOrientations, $visible, onOrientationChange
  • Previously, Modal required useState, but now you need to use useValue and pass the $visible setter property instead of visible, also you can not use useValue and not pass $visible, but use useRef instead. See more
  • rename variant='pure' to variant='custom'

• Dropdown:

  • popoverWrapperStyle property is removed. Use style instead like:

  .wrapper
    // Drawer styles
    +tablet()
      // Popover styles

• Drawer:

  • styleContent property is removed. Use style instead
  • styleSwipe property is removed. Use swipeStyle instead
  • styleCase property is removed. Use caseStyle instead

Features

• DateTimePicker

  • add new properties disabled, format, minuteInterval, placeholder, size, timeFormat, cancelButtonText, confirmButtonText, is24Hour See more.

• Drawer:

  • add onRequestOpen property

• NumberInput:

  • onNumberChange returns undefined if NumberInput is empty

For full list of new features and bug fixes see CHANGELOG