fix: dts components path

packages/react-components/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @farmfe/plugin-react-components
 
+## 1.0.2
+
+### Patch Changes
+
+- eef1912: feat: suport filename
+- fix dts components path
+
 ## 1.0.0
 
 ### Major Changes

packages/react-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farmfe/plugin-react-components",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "main": "scripts/index.js",
   "types": "scripts/index.d.ts",

packages/react-components/playground/components.d.ts

@@ -0,0 +1,144 @@
+/* generated by farm_plugin_react_components */
+export {} 
+declare global {
+	const ComponentC: typeof import('./src/components/ComponentC')['ComponentC']
+	const ComponentA: typeof import('./src/components/ComponentA')['default']
+	const ComponentE: typeof import('./src/components/ComponentE')['default']
+	const ComponentF: typeof import('./src/components/ComponentE')['ComponentF']
+	const ComponentE: typeof import('./src/components/ComponentE')['ComponentE']
+	const ComponentD: typeof import('./src/components/ComponentD')['default']
+	const ComponentB: typeof import('./src/components/ComponentB')['ComponentB']
+	const ArcoNotification: typeof import('@arco-design/web-react')['Notification']
+	const AntDivider: typeof import('antd')['Divider']
+	const AntTree: typeof import('antd')['Tree']
+	const AntCollapse: typeof import('antd')['Collapse']
+	const AntSpin: typeof import('antd')['Spin']
+	const AntBreadcrumb: typeof import('antd')['Breadcrumb']
+	const AntApp: typeof import('antd')['App']
+	const AntUpload: typeof import('antd')['Upload']
+	const ArcoBadge: typeof import('@arco-design/web-react')['Badge']
+	const ArcoStatistic: typeof import('@arco-design/web-react')['Statistic']
+	const ArcoTreeSelect: typeof import('@arco-design/web-react')['TreeSelect']
+	const ArcoLayout: typeof import('@arco-design/web-react')['Layout']
+	const AntProgress: typeof import('antd')['Progress']
+	const ArcoCascader: typeof import('@arco-design/web-react')['Cascader']
+	const Antmessage: typeof import('antd')['message']
+	const ArcoTransfer: typeof import('@arco-design/web-react')['Transfer']
+	const AntCheckbox: typeof import('antd')['Checkbox']
+	const ArcoAnchor: typeof import('@arco-design/web-react')['Anchor']
+	const ArcoTable: typeof import('@arco-design/web-react')['Table']
+	const ArcoTimeline: typeof import('@arco-design/web-react')['Timeline']
+	const ArcoLink: typeof import('@arco-design/web-react')['Link']
+	const AntPagination: typeof import('antd')['Pagination']
+	const AntSegmented: typeof import('antd')['Segmented']
+	const AntAvatar: typeof import('antd')['Avatar']
+	const ArcoDrawer: typeof import('@arco-design/web-react')['Drawer']
+	const AntDrawer: typeof import('antd')['Drawer']
+	const ArcoPagination: typeof import('@arco-design/web-react')['Pagination']
+	const ArcoIcon: typeof import('@arco-design/web-react')['Icon']
+	const AntCol: typeof import('antd')['Col']
+	const ArcoEmpty: typeof import('@arco-design/web-react')['Empty']
+	const Antnotification: typeof import('antd')['notification']
+	const AntTable: typeof import('antd')['Table']
+	const ArcoSpin: typeof import('@arco-design/web-react')['Spin']
+	const ArcoAutoComplete: typeof import('@arco-design/web-react')['AutoComplete']
+	const ArcoCalendar: typeof import('@arco-design/web-react')['Calendar']
+	const AntResult: typeof import('antd')['Result']
+	const ArcoMenu: typeof import('@arco-design/web-react')['Menu']
+	const ArcoSelect: typeof import('@arco-design/web-react')['Select']
+	const AntGrid: typeof import('antd')['Grid']
+	const AntMentions: typeof import('antd')['Mentions']
+	const ArcoTree: typeof import('@arco-design/web-react')['Tree']
+	const ArcoCollapse: typeof import('@arco-design/web-react')['Collapse']
+	const ArcoBackTop: typeof import('@arco-design/web-react')['BackTop']
+	const ArcoGrid: typeof import('@arco-design/web-react')['Grid']
+	const AntCalendar: typeof import('antd')['Calendar']
+	const AntStatistic: typeof import('antd')['Statistic']
+	const AntSwitch: typeof import('antd')['Switch']
+	const ArcoRate: typeof import('@arco-design/web-react')['Rate']
+	const AntTabs: typeof import('antd')['Tabs']
+	const AntTransfer: typeof import('antd')['Transfer']
+	const AntRate: typeof import('antd')['Rate']
+	const ArcoImage: typeof import('@arco-design/web-react')['Image']
+	const ArcoVerificationCode: typeof import('@arco-design/web-react')['VerificationCode']
+	const AntAffix: typeof import('antd')['Affix']
+	const AntTimeline: typeof import('antd')['Timeline']
+	const AntSkeleton: typeof import('antd')['Skeleton']
+	const ArcoResizeBox: typeof import('@arco-design/web-react')['ResizeBox']
+	const ArcoBreadcrumb: typeof import('@arco-design/web-react')['Breadcrumb']
+	const ArcoMessage: typeof import('@arco-design/web-react')['Message']
+	const ArcoList: typeof import('@arco-design/web-react')['List']
+	const AntAnchor: typeof import('antd')['Anchor']
+	const AntMenu: typeof import('antd')['Menu']
+	const ArcoUpload: typeof import('@arco-design/web-react')['Upload']
+	const AntPopover: typeof import('antd')['Popover']
+	const AntTypography: typeof import('antd')['Typography']
+	const ArcoAffix: typeof import('@arco-design/web-react')['Affix']
+	const ArcoPopconfirm: typeof import('@arco-design/web-react')['Popconfirm']
+	const ArcoTypography: typeof import('@arco-design/web-react')['Typography']
+	const ArcoInput: typeof import('@arco-design/web-react')['Input']
+	const ArcoCheckbox: typeof import('@arco-design/web-react')['Checkbox']
+	const AntCarousel: typeof import('antd')['Carousel']
+	const AntDropdown: typeof import('antd')['Dropdown']
+	const ArcoTrigger: typeof import('@arco-design/web-react')['Trigger']
+	const AntModal: typeof import('antd')['Modal']
+	const ArcoProgress: typeof import('@arco-design/web-react')['Progress']
+	const AntTooltip: typeof import('antd')['Tooltip']
+	const ArcoDropdown: typeof import('@arco-design/web-react')['Dropdown']
+	const ArcoPopover: typeof import('@arco-design/web-react')['Popover']
+	const ArcoSwitch: typeof import('@arco-design/web-react')['Switch']
+	const AntAlert: typeof import('antd')['Alert']
+	const ArcoResult: typeof import('@arco-design/web-react')['Result']
+	const ArcoCarousel: typeof import('@arco-design/web-react')['Carousel']
+	const ArcoWatermark: typeof import('@arco-design/web-react')['Watermark']
+	const AntSteps: typeof import('antd')['Steps']
+	const ArcoMentions: typeof import('@arco-design/web-react')['Mentions']
+	const AntForm: typeof import('antd')['Form']
+	const AntEmpty: typeof import('antd')['Empty']
+	const ArcoInputNumber: typeof import('@arco-design/web-react')['InputNumber']
+	const ArcoForm: typeof import('@arco-design/web-react')['Form']
+	const ArcoSkeleton: typeof import('@arco-design/web-react')['Skeleton']
+	const AntRow: typeof import('antd')['Row']
+	const ArcoAlert: typeof import('@arco-design/web-react')['Alert']
+	const ArcoTabs: typeof import('@arco-design/web-react')['Tabs']
+	const AntTour: typeof import('antd')['Tour']
+	const Antversion: typeof import('antd')['version']
+	const ArcoPortal: typeof import('@arco-design/web-react')['Portal']
+	const AntBadge: typeof import('antd')['Badge']
+	const AntTag: typeof import('antd')['Tag']
+	const AntDescriptions: typeof import('antd')['Descriptions']
+	const AntWatermark: typeof import('antd')['Watermark']
+	const ArcoTooltip: typeof import('@arco-design/web-react')['Tooltip']
+	const ArcoInputTag: typeof import('@arco-design/web-react')['InputTag']
+	const ArcoPageHeader: typeof import('@arco-design/web-react')['PageHeader']
+	const AntCard: typeof import('antd')['Card']
+	const ArcoButton: typeof import('@arco-design/web-react')['Button']
+	const ArcoAvatar: typeof import('@arco-design/web-react')['Avatar']
+	const AntButton: typeof import('antd')['Button']
+	const AntPopconfirm: typeof import('antd')['Popconfirm']
+	const Anttheme: typeof import('antd')['theme']
+	const ArcoTag: typeof import('@arco-design/web-react')['Tag']
+	const ArcoConfigProvider: typeof import('@arco-design/web-react')['ConfigProvider']
+	const ArcoDatePicker: typeof import('@arco-design/web-react')['DatePicker']
+	const AntList: typeof import('antd')['List']
+	const AntSelect: typeof import('antd')['Select']
+	const ArcoCard: typeof import('@arco-design/web-react')['Card']
+	const ArcoColorPicker: typeof import('@arco-design/web-react')['ColorPicker']
+	const ArcoComment: typeof import('@arco-design/web-react')['Comment']
+	const AntLayout: typeof import('antd')['Layout']
+	const ArcoSlider: typeof import('@arco-design/web-react')['Slider']
+	const ArcoSteps: typeof import('@arco-design/web-react')['Steps']
+	const AntSpace: typeof import('antd')['Space']
+	const ArcoModal: typeof import('@arco-design/web-react')['Modal']
+	const ArcoRadio: typeof import('@arco-design/web-react')['Radio']
+	const AntCascader: typeof import('antd')['Cascader']
+	const AntFlex: typeof import('antd')['Flex']
+	const AntSlider: typeof import('antd')['Slider']
+	const ArcoSpace: typeof import('@arco-design/web-react')['Space']
+	const AntInput: typeof import('antd')['Input']
+	const ArcoDescriptions: typeof import('@arco-design/web-react')['Descriptions']
+	const AntRadio: typeof import('antd')['Radio']
+	const ArcoDivider: typeof import('@arco-design/web-react')['Divider']
+	const AntImage: typeof import('antd')['Image']
+	const ArcoTimePicker: typeof import('@arco-design/web-react')['TimePicker']
+}

packages/react-components/playground/farm.config.ts

@@ -15,7 +15,7 @@ export default defineConfig({
     ["@farmfe/plugin-react-components", {
       dts: true,
       local: true,
-      filename: "src/types/components.d.ts",
+      filename: "./src/types/components.d.ts",
       resolvers: [
         {
           module: "antd",

packages/react-components/playground/src/components/ComponentA.tsx

@@ -0,0 +1,5 @@
+const ComponentA = () => {
+  return <button>ComponentA</button>
+}
+
+export default ComponentA

packages/react-components/playground/src/components/ComponentB.tsx

@@ -0,0 +1,3 @@
+export const ComponentB = () => {
+  return <button>ComponentB</button>
+}

packages/react-components/playground/src/components/ComponentC.tsx

@@ -0,0 +1,7 @@
+const ComponentC = () => {
+  return <button>ComponentC</button>
+}
+
+export {
+  ComponentC
+}

packages/react-components/playground/src/components/ComponentD.tsx

@@ -0,0 +1,3 @@
+export default () => {
+  return <button>ComponentD</button>
+}

packages/react-components/playground/src/components/ComponentE.tsx

@@ -0,0 +1,14 @@
+const ComponentE = () => {
+  return <button>ComponentE</button>
+}
+
+const ComponentF = () => {
+  return <button>ComponentF</button>
+}
+
+export {
+  ComponentE,
+  ComponentF
+}
+
+export default ComponentE

packages/react-components/playground/src/main.tsx

@@ -2,6 +2,7 @@ import { useState } from "react";
 import "./main.css";
 import FarmLogo from "./assets/logo.png";
 import reactLogo from "./assets/react.svg";
+// import TestButton from "./components/buttton"
 export function Main() {
   const [count, setCount] = useState(0);
   console.log("rendering Main component")
@@ -18,7 +19,12 @@ export function Main() {
       <h1>Farm + React</h1>
       count is {count}
       <div className="card">
-
+        <ComponentA></ComponentA>
+        <ComponentB></ComponentB>
+        <ComponentC></ComponentC>
+        <ComponentD></ComponentD>
+        <ComponentE></ComponentE>
+        <ComponentF></ComponentF>
         <AntSpace>
           <ArcoButton type="primary" onClick={() => setCount((count) => count + 1)}>arco button</ArcoButton>
           <AntButton type="primary" onClick={() => setCount((count) => count + 1)}>antd button</AntButton>

packages/react-components/playground/src/test.tsx

@@ -0,0 +1,28 @@
+import{useState}from"react";import"./main.css";import FarmLogo from"./assets/logo.png";import reactLogo from"./assets/react.svg";import{Space as AntSpace}from"antd";import{Button as AntButton}from"antd";export function Main(){const[count,setCount]=useState(0);console.log("rendering Main component");return(<>
+      <div>
+        <a href="https://farmfe.org/"target="_blank">
+          <img src={FarmLogo}className="logo"alt="Farm logo"/>
+        </a>
+        <a href="https://react.dev"target="_blank">
+          <img src={reactLogo}className="logo react"alt="React logo"/>
+        </a>
+      </div>
+      <h1>Farm + React</h1>
+      count is {count}
+      <div className="card">
+      <TestButton></TestButton>
+        <AntSpace>
+          <ArcoButton type="primary"onClick={()=>setCount(count=>count+1)}>arco button</ArcoButton>
+          <AntButton type="primary"onClick={()=>setCount(count=>count+1)}>antd button</AntButton>
+          <button onClick={()=>setCount(count=>count+1)}>
+            button
+          </button>
+        </AntSpace>
+        <p>
+          Edit <code>src/main.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Farm and React logos to learn more
+      </p>
+    </>);}