Releases: kaliberjs/build
v0.0.147
Warning; this release can break applications, make sure to test thoroughly and monitor runtime errors.
- Result of @kaliber/config is no longer included in the compiled node application files. This prevents secrets from landing unencrypted on disk. In order to prevent errors
@kaliber/configshould be excluded from babel compilation. - When copying files the timestamps are preserver, this can speed up builds significantly.
- Helmet is upgraded ensuring more modern defaults. This can break features at runtime, so make sure to test.
What's Changed
- Various stylelint updates by @EECOLOR in #255
- Remove config from packaged node application by @EECOLOR in #254
- Preserve timestamps by @EECOLOR in #259
- Upgrade helmet by @EECOLOR in #257
Full Changelog: v0.0.146...v0.0.147
Contributors
Assets 2
v0.0.143 React 18 🥳
This release update React to version 18. While testing in our own projects we've encountered some bugs:
🚨 @kaliber/build removes content of root container
The build triggers a warning when hot-reloading:
Warning: render(...): It looks like the React-rendered content of the root container was removed without using React. This is not supported and will cause errors. Instead, call root.unmount() to empty a root's container.
We probably won't be able to fix this warning, but the removal is intentional and doesn't happen in production.
Fix: just ignore this message when it only occurs during hot reloading
🚨 react-player breaks
react-player renders differently on server vs the client. It relies on the window object to distinguish between the server and the client environment.
cookpete/react-player#1474.
Fix: fall back to client side rendering using @kaliber/use-render-on-mount (or something similar) environments.
🚨 react-spring causes a warning about a prop difference on server vs client
You get a warning about a prop difference on server vs client when you use an empty string to reset a style:
const animatedProps = useSpring({
pointerEvents: visible ? '' : 'none',
})Fix:
const animatedProps = useSpring({
pointerEvents: visible ? 'auto' : 'none',
})v0.0.142 Route-based templates
This PR allows you to re-route visitors to different entry points of your application. @kaliber/build serves all javascript used in the entry point, also for routes which might not need all functionality. Splitting your app into different entry points allows you to create smaller chunks of JavaScript.
You should determine which templates to create, based on similar functionality.
In the following example:
- visiting the url
/routeBasedTemplate/test1serves the page found in/src/routeBasedTemplate/template1/index.html.js - visiting the url
/routeBasedTemplate/test2serves the page found in/src/routeBasedTemplate/template2/index.html.js - visiting any other url falls back to the
index.html.jsfile containing theresolveIndexfunction.
Index.routes = {
resolveIndex(location, req) {
const { pathname } = location
return (
pathname === '/routeBasedTemplate/test1' ? 'routeBasedTemplate/template1' :
pathname === '/routeBasedTemplate/test2' ? 'routeBasedTemplate/template2' :
null
)
},
async match({ pathname }, request) {
return { status: 200, data: { hostname: request.hostname, pathname } }
}
}
export default function Index({ data }) {
return (
<html lang='en'>
{head('Fallback')}
<body>
Fallback
</body>
</html>
)
}v0.0.141 Linting rules
2c4f81d
AlbertSmit
Albert Smit
Backwards compatible changes
stylelintnow allowsinset-shorthand for absolute positioning.ESLintnow allowslayoutClassNameon@floating-ui'sFloatingOverlay.
v0.0.139 Native CSS Custom Properties
Breaking changes
Support for the css color-mod function is dropped. This gap will be filled by CSS Color Module Level 5 (doesn't have support yet!). The reason support for color-mod has been dropped is to enable the transition to native CSS custom properties. color-mod(var(--color) alpha(10%)) proved to be problematic, because with native CSS custom properties, the value of this property is not known at compile time.
A good strategy to work around the removal of this plugin is to replace the occurences of color-mod with new custom properties. To find the value for these properties, run your project without updating and find all occurences of color-mod. You can find the calculated value by checking the color value in the inspector.
Backwards compatible changes
Support for native css custom properties is added. To enable this behaviour, pass your @kaliber/config the following option:
module.exports = {
kaliber: {
cssNativeCustomProperties: true,
// ...
},
// ...
}As a consequence, your custom properties are no longer automatically picked up from your cssGlobal folder. Explicitly include them in entry point, like so:
index.html.js
import '/reset.css'
import '/index.css'
import './cssGlobal/colors.css'
import './cssGlobal/media.css'
import stylesheet from '@kaliber/build/lib/stylesheet'
import javascript from '@kaliber/build/lib/javascript'
import polyfill from '@kaliber/build/lib/polyfill'
// ...Please note that native custom properties cascade like any other css property, in contrast to the previous behaviour that replaced the custom properties with their corresponding values.
Pitfalls
If you export custom property values from your css files using :export, this wil return the custom property as a string not its value (since that's not known at compile time). Take the following example:
Component.css
export {
size: var(--size);
}Depending on how you use this value, this might be an issue. E.g. parsing the exported value will break:
import styles from './Component.css'
const size = parseInt(styles.size, 10)This evaluates as parseInt('var(--size)', 10), which will return NaN.
v0.0.138 Add .cjs support
Add support for javascript files ending in .cjs (common js)
v0.0.137 Removed babel plugins
Some babel plugins related to the use of async/await have been removed. Also, babel-preset-env was replaced by plugins enabling some specific functionality. For the complete list of additions and removals please refer to https://github.com/kaliberjs/build/pull/242/files.
Rollbar
Keep an eye out for errors related to syntax. If you're using Rollbar, you probably want to add this check to your rollbarConfig.enabled to filter out errors from older browsers that do not support these changes:
enabled = typeof Object.entries === 'function';kaliber-higgins-old-browser
If you're using kaliber-higgins-old-browser, make sure you're on the latest version so IE11 users get an old browser notification.
Updated linting rules
Updated/new linting rules
.relativeToParentrequirement has been removed when setting a direct child toposition: static;. It was added to make sure that the receiver ofposition: staticis aware of a breach of containment by its child. This should be clear from the fact that you're settingposition: statictherefore we opted to remove the signalling class. https://github.com/kaliberjs/build/tree/master/library/stylelint-plugins/rules/parent-child-policy#escape-stacking-context-with-absolute-children- New layout class naming rules. Layout classes must now end in the suffix
Layout. E.g.styles.childLayoutor'childLayout'. Classes ending inLayout, must be styled with a direct child selector. This combo allows us to enforce you're only passing layout properties to layout classes (a common feedback point in PRs). https://github.com/kaliberjs/build/tree/master/eslint-plugin/rules/layout-class-name
Updated Webpack's `splitChunk` settings
maxInitialRequests was increased to 100. This could potentially mean the amount of files increasing excessively if you're not using universal correctly, keep an eye on this.
Removed defer attribute from polyfill script
Loading the polyfill script with defer can cause it to load too late for some scripts.