Version Packages (next)

[github-actions]

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

main is currently in pre mode so this branch has prereleases rather than normal releases. If you want to exit prereleases, run changeset pre exit on main.

⚠️⚠️⚠️⚠️⚠️⚠️

Releases

@tabula/[email protected]

Major Changes

• #57 d3c40d7 Thanks @demiazz! - enable memo by default for SVGR transformations

Minor Changes

• #57 d3c40d7 Thanks @demiazz! - added support of transformation of SVG component name with svgrComponentName option.

  By default, SVGR uses Svg<CamelCaseFileName> name for components. You can override this behaviour through
  svgrComponentName options, 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.svg then component name is SvgColumn by default. But with config from about the name
  will be UiColumnIcon.

  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 d3c40d7 Thanks @demiazz! - allow to append displayName for SVGR components.

  By default, SVGR doesn't append displayName for exported components. You can add this behaviour through svgrDisplayName
  option, which should be function of format (componentName: string) => string | { displayName: string; isDebugOnly?: boolean }.

  When function is returns string, then isDebugOnly equals to false.

  The componentName is name of component itself (before memoization if enabled). If you provide svgrComponentName option,
  then result of applying this function is componentName.

  The isDebugOnly enables 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 displayName will be assigned to the memoized component:

  const Component = (props) => {
    // ...
  };
  
  const Memo = memo(Component);
  
  Memo.displayName = `scope(ComponentDisplayName)`;

Patch Changes

• #57 d3c40d7 Thanks @demiazz! - add typings and exports config type

• #57 d3c40d7 Thanks @demiazz! - add @babel/types dependency