@startupjs/babel-plugin-dotenv - npm Package Versions

0.45.0 (2022-06-16)

BREAKING CHANGES

• See 0.38 migration guide

0.44.16 (2022-05-13)

Bug Fixes

• babel-plugin-dotenv: return condition (#944) (bc45a02)
• react-native-gesture-handler: fix crashing of ios app because of cycle imports (#856) (1e22da0)
• ui/Content: use Div component as root instead of react-native View (#945) (212e880)

0.44.0 (2022-03-14)

RELEASE NOTES

No breaking changes

Fix multiple useValue hook initialization at each rendering. Now the hook works like useState in react.

const [value, $value] = useValue(Math.random())

return pug`
  Button(onPress=() => $value.set(value + 1)) Increment
`

In this example, the value did not increase when the button was clicked because the next initialization was performed with a new Math.random() value.

0.43.1 (2022-02-16)

Bug Fixes

• ui/NumberInput: fix bug related to set zero when value is empty string (5b6ca14)

0.43.0 (2022-02-14)

Release Notes

No breaking changes

Added automatic caching for styles and creation of scoped models during react render.

This is considered to be an experimental feature. By default it's turned OFF so nothing should break whatsoever.

To turn in ON, pass observerCache: true to the startupjs preset in babel.config.js:

    ['startupjs/babel.cjs', {
      ...,
      observerCache: true
    }]

To make sure caching is enabled, check the value of window.__startupjs__.DEBUG.cacheEnabled in browser console.

Cache will be enabled for all components. You can explicitly prohibit a specific component from using cache by passing { cache: false } to its observer():

export default observer(function Test ({ frequentlyChangedRandomColor }) {
  return pug`
    Div(style={ backgroundColor: frequentlyChangedRandomColor })
  `
}, { cache: false })

After enabling caching you must carefully test your whole application because some components might have been relying on excessive renderings to function properly. So you might have to fix some things in your codebase to account for optimized rerenders.

Examples:

1. cache pure style. This will only work if you have observer imported in the current file, this way we don't screw up the 3rd-party libraries which don't use startupjs.

   export default observer(function Test () {
     return pug`
       Div(style={ backgroundColor: 'red' })
     `
   })
   

2. cache pure styleName or any combination of part, style, *Style, *StyleName

   export default observer(function Test () {
     return pug`
       Div.div
     `
     styl`
       .div
         background-color red
     `
   })
   

3. cache scoped model created with .at() and .scope()

   export default observer(function Games () {
     const [games, $games] = useQuery('games', { active: true })
     return pug`
       each game in games
         Game($game=$games.at(game.id))
     `
   })
   const Game = observer(({ $game }) => {
     const game = $game.get()
     return pug`
       Span= game.title
     `
   })
   

The last example is especially important since writing code in this way simplifies code a lot in many places. Now you can (and should) pass models whenever possible to child components as arguments, instead of passing an id and using useDoc or useLocalDoc.

Earlier in situations when you run useQuery in the parent component and then render each item as a separate component the only way to do it easily and properly was to pass an item id and then do a useLocalDoc. And you had to use useLocalDoc, otherwise useDoc will create an additional doc-only subscription and wait for it. Now this usecase is handled for you automatically, you just create a scoped model for the item inline using $items.at(item.id) and pass it as $item into the child component.

So this change alone will save you from making extra queries in many situations and will make the code easier to follow and more performant overall.

Bug Fixes

• babel-plugin-rn-styrename-to-style: default useImport to true (c5e312e)

Features

• implement caching for styles (TODO for model). Rewrite observer loader to babel. Add debug module and debug babel plugin to debug memory leaks in observer() (#890)

0.42.0 (2022-01-17)

Release Notes

No breaking changes

Fix compilation of web mode for pure web projects

Bug Fixes

• fix compilation for mode 'web' (#876) (548bbe0)
• ui/TextInput: Click through the icon if it doesn't have a handler (d55f395)

0.41.2 (2022-01-12)

Bug Fixes

• auth-local/RegisterForm: fix bug related to not clickable submit button when error happens (1259bba)

0.41.0 (2022-01-11)

Bug Fixes

• auth-local/RegisterForm: improve 'name' field error message (370d474)

Features

• Improve TypeScript support (#871) (b1c9bf0)

DEPRECATED

1. You should not use pug function without importing it anymore. Import it from startupjs module:

   import React from 'react'
   import { pug, observer } from 'startupjs'
   import { Span } from '@startupjs/ui'
   
   export default observer(() => pug`
     Span Hello World
   `)
   

BREAKING CHANGES

1. Update linter configuration to use new babel parser module

   1. Replace babel-eslint dependency with a new one. Run:

      yarn remove babel-eslint && yarn add -D @babel/eslint-parser
      

   2. Replace "parser" in your .eslintrc.json:

      // replace line:
      "parser": "babel-eslint",
      // with the following:
      "parser": "@babel/eslint-parser",
      

2. For proper TypeScript support copy the following tsconfig.json file to the root of your project:

   startupjs/packages/startupjs/templates/simple/tsconfig.json

0.40.0 (2021-11-12)

Features

• upgrade to webpack 5 (#831) (23308c5)

BREAKING CHANGES

1. You can't use named imports from .json files anymore. Instead import the whole json file and then do the manual destructuring:

   // OLD
   import { BORDER_WIDTH, STRIPE_PUBLIC_KEY } from './constants.json'
   
   // NEW
   import CONSTANTS from './constants.json'
   const { BORDER_WIDTH, STRIPE_PUBLIC_KEY } = CONSTANTS
   

2. Webpack 5 changed the way it parses modules to use ESM modules wherever possible. Because of this some default imports from old CommonJS modules might be imported not directly but inside the .default field.

   If you receive errors from React that it can't render something because it received an object -- this probably means that you need to get your default import from .default field manually:

   // OLD
   import DrawerLayout from 'react-native-drawer-layout-polyfill'
   
   // NEW
   import DrawerLayoutModule from 'react-native-drawer-layout-polyfill'
   const DrawerLayout = DrawerLayoutModule.default || DrawerLayoutModule
   

   Same goes for errors like object is not a function when your default import is actually expected to be a function. You'll have to do the same trick as above.

0.39.11 (2021-11-12)

Bug Fixes

• ui/Checkbox: fix incorrect usage of 'readonly' property (#830) (1f65b7a)

Features

• auth-telegram: implement authentication on web (#840) (283b745)