@weaverse/generator

A powerful, visual tool for creating and managing section components for Weaverse projects. Generate React components, TypeScript definitions, and schemas with an intuitive web interface.

✨ Features

• 🎨 Visual Schema Editor - Intuitive interface for defining component schemas
• ⚡ Automatic Code Generation - React components, TypeScript types, and schemas
• 📦 Export Ready - Generated code is ready to use with Weaverse projects
• 🎯 TypeScript First - Full TypeScript support out of the box

🚀 Quick Start

Prerequisites

⚠️ Important: This tool requires Bun to be installed on your system.

# Install Bun globally
brew install oven-sh/bun/bun
# or
curl -fsSL https://bun.sh/install | bash # for macOS and Linux
# for Window
powershell -c "irm bun.sh/install.ps1 | iex" # for window
# or
npm install -g bun

Usage

Navigate to your weaverse project directory and run:

# If installed globally (with Bun installed)
bunx @weaverse/generator

The generator will start on http://localhost:9797 and automatically open in your browser.

⚙️ Configuration

Create a weaverse.config.json file in your project root to customize the generator:

{
  "host": "https://weaverse.io",
  "apiKey": "your-weaverse-api-key",
  "sectionsPath": "./src/generated-sections",
  "projectBaseUrl": "."
}

Configuration Options

| Option | Type | Default | Description | |-------------------|---------|---------------------------|------------------------------------------------------------------| | sectionsPath | string | "./generated-sections" | Directory where generated sections will be saved | | port | number | 9797 | Port number for the development server | | apiKey | string | "" | Your Weaverse API key (required for AI features) | | host | string | "https://weaverse.io" | The Weaverse API host | | projectBaseUrl | string | "." | Base directory for resolving relative paths |

Note: The apiKey is required to enable AI-powered features in the generator. You can obtain your API key from your Weaverse account.

📋 How It Works

1. Create - Use the visual editor to create section schemas
2. Configure - Define inputs, properties, and component structure
3. Generate - Automatically generates React components and TypeScript definitions
4. Export - Ready-to-use components for your Weaverse project

📁 Generated File Structure

The generator creates a well-organized structure for your sections:

/sections
├── /hero-section
│   ├── index.tsx         # React component
│   ├── index.d.ts        # TypeScript definitions
│   ├── loader.ts         # server-side load shopify resources 
│   ├── schema.json       # Component schema
│   └── /hero-button      # Child component
│       ├── index.tsx
│       ├── index.d.ts
│       └── schema.json
├── /feature-section
│   ├── index.tsx
│   ├── index.d.ts
│   └── schema.json
└── index.ts             # Exports all sections

🐛 Support & Issues

For technical support or questions about using the generator, please contact the Weaverse team.

🙏 Acknowledgments

• Built with Bun for high performance
• Powered by React and TypeScript
• Designed for Weaverse projects

Made with ❤️ by the Weaverse team