@tabula/forge
Advanced tools
@tabula/forge - npm Package Versions
Changelog
2.0.0
Major Changes
-
#57
d3c40d7Thanks @demiazz! - enablememoby default for SVGR transformations -
#60
5611eadThanks @demiazz! - update target node up to 20.x
Minor Changes
-
#62
bcd685aThanks @demiazz! - emulate Vite's environment variablesThe
vanilla-extractusesesbuildunder the hood with CJS format. In that case, if you import any code with usage ofimport.We assume usage only
import.meta.env.DEV,import.meta.env.PRODandimport.meta.env.MODEvariables in bundler user's code and emulate only it with defining constants.But this constants working only in compile time when CSS is generated and based on mode in which the
forgeis running at compilation moment.Be careful when use code which based on that variables in your
vanilla-extractstyles. -
#57
d3c40d7Thanks @demiazz! - added support of transformation of SVG component name withsvgrComponentNameoption.By default, SVGR uses
Svg<CamelCaseFileName>name for components. You can override this behaviour throughsvgrComponentNameoptions, which should be function of format(svgrName: string) => string.Example:
export default { // ... svgrComponentName(name) { return `Ui${name.slice(3)}Icon`; }, // ... };If you have a file
column.svgthen component name isSvgColumnby default. But with config from about the name will beUiColumnIcon.If you use memoization it looks like:
import { memo } from 'react'; const UiColumnIcon = (props) => { // ... }; const Memo = memo(UiColumnIcon); export { Memo as ReactComponent };This option doesn't affect named exports.
-
#57
d3c40d7Thanks @demiazz! - allow to appenddisplayNamefor SVGR components.By default, SVGR doesn't append
displayNamefor exported components. You can add this behaviour throughsvgrDisplayNameoption, which should be function of format(componentName: string) => string | { displayName: string; isDebugOnly?: boolean }.When function is returns string, then
isDebugOnlyequals tofalse.The
componentNameis name of component itself (before memoization if enabled). If you providesvgrComponentNameoption, then result of applying this function iscomponentName.The
isDebugOnlyenables wrapping the assignment in Vite compatible condition.// `isDebugOnly` = false Component.displayName = 'scope(ComponentDisplayName)'; // `isDebugOnly` = true if (import.meta.env.DEV) { Component.displayName = `scope(ComponentDisplayName)`; }If memoization is enabled, then the
displayNamewill be assigned to the memoized component:const Component = (props) => { // ... }; const Memo = memo(Component); Memo.displayName = `scope(ComponentDisplayName)`;