feat: add SVGR support improvements

.changeset/long-cows-give.md

@@ -0,0 +1,39 @@
+---
+'@tabula/forge': minor
+---
+
+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:
+
+```js
+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:
+
+```js
+import { memo } from 'react';
+
+const UiColumnIcon = (props) => {
+  // ...
+};
+
+const Memo = memo(UiColumnIcon);
+
+export { Memo as ReactComponent };
+```
+
+This option doesn't affect named exports.

.changeset/pre.json

@@ -0,0 +1,8 @@
+{
+  "mode": "pre",
+  "tag": "next",
+  "initialVersions": {
+    "@tabula/forge": "1.3.5"
+  },
+  "changesets": []
+}

.changeset/purple-terms-know.md

@@ -0,0 +1,5 @@
+---
+'@tabula/forge': patch
+---
+
+add typings and exports config type

.changeset/red-days-scream.md

@@ -0,0 +1,5 @@
+---
+'@tabula/forge': major
+---
+
+enable `memo` by default for SVGR transformations

.changeset/tasty-socks-join.md

@@ -0,0 +1,5 @@
+---
+'@tabula/forge': patch
+---
+
+add `@babel/types` dependency

.changeset/twenty-items-rescue.md

@@ -0,0 +1,39 @@
+---
+'@tabula/forge': minor
+---
+
+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.
+
+```js
+// `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:
+
+```js
+const Component = (props) => {
+  // ...
+};
+
+const Memo = memo(Component);
+
+Memo.displayName = `scope(ComponentDisplayName)`;
+```

.changeset/wet-students-sing.md

@@ -0,0 +1,4 @@
+---
+---
+
+update development dependencies

.forgerc

@@ -2,7 +2,7 @@
   "$schema": "https://github.com/ReTable/forge/blob/main/schemas/forgerc.json",
   "target": "node",
   "check": true,
-  "typings": false,
+  "typings": true,
   "build": {
     "production": true
   },

README.md

@@ -188,6 +188,8 @@ We resolve option in following order:
 
 You can look at the [JSON Schema](https://github.com/ReTable/forge/blob/main/schemas/forgerc.json) for configuration file.
 
+Not all options are available through static files. For example, `svgrComponentName` is available only in JS/TS files.
+
 ## Entries
 
 By default, the `forge` looking for `<packageRoot>/src/index.tsx` or `<packageRoot/src/index.ts` file, and bundles it
@@ -361,6 +363,78 @@ import iconUrl, { ReactComponent as IconUrl } from './icon.svg';
 
 An SVG file already exports React component as `ReactComponent`.
 
+#### SVGR Component Name
+
+By default, SVGR uses `Svg<CamelCaseFileName>` name for components. You can override this behaviour through
+`svgrComponentName` option, which should be function of format `(svgrName: string) => string`.
+
+Example:
+
+```js
+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:
+
+```js
+import { memo } from 'react';
+
+const UiColumnIcon = (props) => {
+  // ...
+};
+
+const Memo = memo(UiColumnIcon);
+
+export { Memo as ReactComponent };
+```
+
+This option doesn't affect named exports.
+
+#### SVGR Display Name
+
+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.
+
+```js
+// `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:
+
+```js
+const Component = (props) => {
+  // ...
+};
+
+const Memo = memo(Component);
+
+Memo.displayName = `scope(ComponentDisplayName)`;
+```
+
 ### React
 
 We use automatic runtime only for React.

package.json

@@ -6,6 +6,13 @@
   "bin": {
     "forge": "lib/index.js"
   },
+  "typings": "./typings/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./typings/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
   "keywords": [
     "tabula.io",
     "tomat.ai",
@@ -50,9 +57,10 @@
     "@changesets/cli": "^2.27.1",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@svgr/babel-plugin-transform-svg-component": "^8.0.0",
     "@tabula/eslint-config": "^0.1.1",
     "@tabula/prettier-config": "^0.1.4",
-    "@tabula/typescript-config": "^0.2.0",
+    "@tabula/typescript-config": "^0.2.1",
     "@tabula/vitest-config": "^0.2.0",
     "@types/convert-source-map": "^2.0.3",
     "@types/node": "^20.10.5",
@@ -67,6 +75,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.23.6",
+    "@babel/types": "^7.23.6",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
     "@vanilla-extract/esbuild-plugin": "^2.3.1",