Merge pull request #5 from gadget-inc/change-widgets-location-default

Change widgets location default

Author: infiton

AGENTS.md

@@ -44,7 +44,7 @@ This plugin solves these problems by:
 
 ```
 your-project/
-├── web/chatgpt-widgets/          # Widget components directory (configurable)
+├── web/chatgpt/                  # Widget components directory (configurable)
 │   ├── root.tsx                  # Optional: Root layout wrapper for all widgets
 │   ├── MyWidget.tsx              # Individual widget components
 │   └── AnotherWidget.tsx
@@ -126,8 +126,8 @@ import { getWidgets } from "vite-plugin-chatgpt-widgets";
 // Determine mode and get widgets
 const widgets =
   process.env.NODE_ENV === "production"
-    ? await getWidgets("web/chatgpt-widgets", { manifestPath: "dist/.vite/manifest.json" })
-    : await getWidgets("web/chatgpt-widgets", { devServer: viteDevServerInstance });
+    ? await getWidgets("web/chatgpt", { manifestPath: "dist/.vite/manifest.json" })
+    : await getWidgets("web/chatgpt", { devServer: viteDevServerInstance });
 
 // Register each as an MCP resource
 for (const widget of widgets) {
@@ -153,7 +153,7 @@ for (const widget of widgets) {
 ### Widget Component Pattern
 
 ```tsx
-// web/chatgpt-widgets/DataDisplay.tsx
+// web/chatgpt/DataDisplay.tsx
 export default function DataDisplay() {
   // Access tool output from ChatGPT
   const data = window.openai?.tool_output;
@@ -165,7 +165,7 @@ export default function DataDisplay() {
 ### Root Layout Pattern
 
 ```tsx
-// web/chatgpt-widgets/root.tsx
+// web/chatgpt/root.tsx
 import { ThemeProvider } from "./theme";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

Readme.md

@@ -23,7 +23,7 @@ import { chatGPTWidgetPlugin } from "vite-plugin-chatgpt-widgets";
 export default defineConfig({
   plugins: [
     chatGPTWidgetPlugin({
-      widgetsDir: "web/chatgpt-widgets", // default: 'web/chatgpt-widgets'
+      widgetsDir: "web/chatgpt", // default: 'web/chatgpt'
       baseUrl: "https://example.com", // if not using a vite `base`, this is required because the chatgpt iframe is sandboxed and absolute URL links are required
     }),
   ],
@@ -44,12 +44,12 @@ export default defineConfig({
 Create React components in your widgets directory:
 
 ```tsx
-// in web/chatgpt-widgets/Hello.tsx
+// in web/chatgpt/Hello.tsx
 export default function Hello() {
   return <div>Hello from ChatGPT Widget!</div>;
 }
 
-// in web/chatgpt-widgets/ListFoobars.tsx
+// in web/chatgpt/ListFoobars.tsx
 export default function ListFoobars() {
   return (
     <ul>
@@ -66,7 +66,7 @@ export default function ListFoobars() {
 You can optionally create a root layout component that will wrap all widgets. If a file named `root.tsx` (or `root.ts`, `root.jsx`, `root.js`) exists in the widgets directory, it will automatically wrap all other widget components:
 
 ```tsx
-// web/chatgpt-widgets/root.tsx
+// web/chatgpt/root.tsx
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <SomeProvider>
@@ -91,10 +91,10 @@ After setting up the plugin and writing some widgets, you need to expose the wid
 import { getWidgets } from "vite-plugin-chatgpt-widgets";
 
 // In development, pass the Vite dev server instance from wherever you can get it
-const widgets = await getWidgets("web/chatgpt-widgets", viteDevServer);
+const widgets = await getWidgets("web/chatgpt", viteDevServer);
 
 // In production, pass a path to the vite manifest, where we'll load precompiled versions from
-const widgets = await getWidgets("web/chatgpt-widgets", {
+const widgets = await getWidgets("web/chatgpt", {
   manifestPath: "dist/.vite/manifest.json",
 });
 
@@ -184,7 +184,7 @@ The Vite plugin.
 
 **Options:**
 
-- `widgetsDir` (string, optional): Directory containing widget components. Default: `'web/chatgpt-widgets'`
+- `widgetsDir` (string, optional): Directory containing widget components. Default: `'web/chatgpt'`
 - `baseUrl` (string, optional): Base URL for widget assets. Required if Vite's `base` config is not an absolute URL and you need fully qualified URLs for sandboxed iframes. Should include protocol and domain (e.g., `"https://example.com"`). Note: Does not require trailing slash.
 
 ### `getWidgets(widgetsDir, viteHandle)`

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-chatgpt-widgets",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "files": [
     "Readme.md",
     "dist/**/*"

spec/fixtureDirs.ts

@@ -1,18 +1,18 @@
 import * as path from "path";
 
 export const FIXTURE_DIR = path.resolve(__dirname, "fixtures/test-project");
-export const WIDGETS_DIR = path.join(FIXTURE_DIR, "web/chatgpt-widgets");
+export const WIDGETS_DIR = path.join(FIXTURE_DIR, "web/chatgpt");
 export const BUILD_DIR = path.join(FIXTURE_DIR, "dist");
 export const MANIFEST_PATH = path.join(BUILD_DIR, ".vite/manifest.json");
 export const FIXTURE_WITH_ROOT_DIR = path.resolve(__dirname, "fixtures/test-project-with-root");
-export const WIDGETS_WITH_ROOT_DIR = path.join(FIXTURE_WITH_ROOT_DIR, "web/chatgpt-widgets");
+export const WIDGETS_WITH_ROOT_DIR = path.join(FIXTURE_WITH_ROOT_DIR, "web/chatgpt");
 export const BUILD_WITH_ROOT_DIR = path.join(FIXTURE_WITH_ROOT_DIR, "dist");
 export const MANIFEST_WITH_ROOT_PATH = path.join(BUILD_WITH_ROOT_DIR, ".vite/manifest.json");
 export const FIXTURE_REACT_ROUTER_DIR = path.resolve(__dirname, "fixtures/test-project-react-router");
-export const WIDGETS_REACT_ROUTER_DIR = path.join(FIXTURE_REACT_ROUTER_DIR, "web/chatgpt-widgets");
+export const WIDGETS_REACT_ROUTER_DIR = path.join(FIXTURE_REACT_ROUTER_DIR, "web/chatgpt");
 export const BUILD_REACT_ROUTER_DIR = path.join(FIXTURE_REACT_ROUTER_DIR, "build/client");
 export const MANIFEST_REACT_ROUTER_PATH = path.join(BUILD_REACT_ROUTER_DIR, ".vite/manifest.json");
 export const FIXTURE_PLAIN_REACT_DIR = path.resolve(__dirname, "fixtures/test-project-plain-react");
-export const WIDGETS_PLAIN_REACT_DIR = path.join(FIXTURE_PLAIN_REACT_DIR, "web/chatgpt-widgets");
+export const WIDGETS_PLAIN_REACT_DIR = path.join(FIXTURE_PLAIN_REACT_DIR, "web/chatgpt");
 export const BUILD_PLAIN_REACT_DIR = path.join(FIXTURE_PLAIN_REACT_DIR, "dist");
 export const MANIFEST_PLAIN_REACT_PATH = path.join(BUILD_PLAIN_REACT_DIR, ".vite/manifest.json");

spec/fixtures/test-project-plain-react/vite.config.ts

@@ -9,7 +9,7 @@ export default defineConfig({
   plugins: [
     react(),
     chatGPTWidgetPlugin({
-      widgetsDir: "web/chatgpt-widgets",
+      widgetsDir: "web/chatgpt",
       baseUrl: "https://example.com",
     }),
   ],

spec/fixtures/test-project-plain-react/web/chatgpt-widgets/CounterWidget.tsx renamed to spec/fixtures/test-project-plain-react/web/chatgpt/CounterWidget.tsx

@@ -9,7 +9,7 @@ export default defineConfig({
   plugins: [
     reactRouter(),
     chatGPTWidgetPlugin({
-      widgetsDir: "web/chatgpt-widgets",
+      widgetsDir: "web/chatgpt",
       baseUrl: "https://example.com",
     }),
   ],