TakinProfit.Solid.Primitives.Resource 0.5.0

TakinProfit.Solid

F# bindings for Solid.js and Ionic Framework using Fable

A professional .NET monorepo providing idiomatic F# bindings for building reactive web applications with Solid.js and Ionic Framework.

📦 Packages

Package	Description	NuGet
TakinProfit.Solid	Core Solid.js reactive primitives and control flow components
TakinProfit.Solid.Ionic	Complete Ionic Framework component bindings (95 components)

✨ Features

• 🎯 Type-Safe: Full F# type safety for all Solid.js and Ionic APIs
• ⚡ Reactive: Idiomatic bindings for Solid.js signals, memos, and effects
• 🧩 Modular: Use Solid.js alone or with Ionic components
• 🔄 Compatible: Targets netstandard2.1 - works with .NET 8, 9, 10+
• 📝 Computation Expressions: Fluent, declarative syntax for building UIs
• 🎨 95 Ionic Components: Complete coverage of Ionic Framework
• 🚀 Production Ready: Proper NuGet packaging with native dependency management

🚀 Quick Start

Installation

# For Solid.js only
dotnet add package TakinProfit.Solid

# For Ionic + Solid.js
dotnet add package TakinProfit.Solid.Ionic

Basic Example

open TakinProfit.Solid
open TakinProfit.Solid.Ionic

// Create reactive state
let count, setCount = Solid.createSignal 0

// Build UI with computation expressions
let app() =
    Ion.app () {
        Ion.header () {
            Ion.toolbar () {
                Ion.title () { "Counter App" }
            }
        }
        
        Ion.content () {
            Ion.button (onClick = fun _ -> setCount(count() + 1)) {
                $"Count: {count()}"
            }
        }
    }

// Render
Solid.render(app, Browser.Dom.document.getElementById("app"))

📚 Documentation

TakinProfit.Solid - Core Reactive Bindings

Provides F# bindings for Solid.js reactive primitives:

Signals & Reactivity

// Create signal
let count, setCount = Solid.createSignal 0

// Create memo (derived value)
let doubled = Solid.createMemo(fun () -> count() * 2)

// Create effect (side effect)
Solid.createEffect(fun () ->
    printfn $"Count is now: {count()}"
)

Control Flow Components

// Conditional rendering
Solid.Show(``when`` = isVisible) {
    Ion.div () { "Visible content" }
}

// With fallback
Solid.Show(``when`` = isLoading, fallback = Ion.spinner () {}) {
    Ion.div () { "Loaded!" }
}

// Array iteration
Solid.For(each = items) { fun item getIndex ->
    Ion.li () { $"{getIndex()}: {item.name}" }
}

// Switch/Match
Solid.Switch(fallback = Ion.div () { "Default" }) {
    Solid.Match(``when`` = fun () -> status() = "loading") {
        Ion.spinner () {}
    }
    Solid.Match(``when`` = fun () -> status() = "success") {
        Ion.div () { "Success!" }
    }
}

TakinProfit.Solid.Ionic - Ionic Components

95 fully-typed Ionic components:

// Button with all props
Ion.button (
    color = IonColor.Primary,
    fill = ButtonFill.Solid,
    expand = ButtonExpand.Block,
    onClick = handleClick
) {
    "Click Me"
}

// Card layout
Ion.card () {
    Ion.cardHeader () {
        Ion.cardTitle () { "Card Title" }
        Ion.cardSubtitle () { "Subtitle" }
    }
    Ion.cardContent () {
        "Card content goes here"
    }
}

// List with items
Ion.list () {
    Solid.For(each = todos) { fun todo _ ->
        Ion.item () {
            Ion.label () { todo.text }
            Ion.checkbox (``checked`` = todo.done) {}
        }
    }
}

🏗️ Project Structure

TakinProfit.Solid/
├── src/
│   ├── TakinProfit.Solid/              # Core Solid.js bindings
│   │   ├── Builder.fs                  # Computation expression builder
│   │   ├── Solid.fs                    # Reactive primitives
│   │   └── TakinProfit.Solid.fsproj
│   └── TakinProfit.Solid.Ionic/        # Ionic component bindings
│       ├── Types.fs                    # Enums and types
│       ├── Core.fs                     # Initialization
│       ├── Ionicons.g.fs               # 1,357 icon constants
│       ├── Ion.g.fs                    # 95 generated components
│       └── TakinProfit.Solid.Ionic.fsproj
├── tests/                              # 640+ unit tests
├── example/                            # Example application
├── Taskfile.yml                        # Build automation
├── Directory.Build.props               # Shared MSBuild config
└── TakinProfit.Solid.slnx             # Solution file

🛠️ Development

Prerequisites

• .NET SDK 8.0+
• Bun (for tests and example)
• Task (optional, for build automation)

Building

# Using Task (recommended)
task build

# Using dotnet directly
dotnet build TakinProfit.Solid.slnx

Running Tests

task test

# Or manually
cd tests
dotnet fable . -o fable_output -e .jsx --lang jsx
bun test --preload ./setup.ts fable_output

Running Example

task example

# Or manually
cd example
dotnet fable . -o fable_output -e .jsx --lang jsx
bunx vite --host

Available Tasks

Run task --list to see all available commands:

task build              # Build all projects
task test               # Run all tests
task pack               # Create NuGet packages
task publish            # Publish to NuGet
task generate           # Run code generators
task example            # Run example app
task clean              # Clean all outputs
task info               # Show project information

📦 Publishing

Create Packages

task pack
# Creates packages in ./nupkgs/

Publish to NuGet

export NUGET_API_KEY=your-api-key
task publish

Publish to Local Feed

task publish:local

🎯 Design Decisions

Computation Expression Pattern

All components use a consistent CE pattern:

Ion.component (prop = value) {
    // children here
}

This provides:

• ✅ Type-safe prop passing
• ✅ Fluent, declarative syntax
• ✅ Excellent IntelliSense support
• ✅ Familiar F# idioms

Accessor Functions for Reactivity

Solid.js control flow components require accessor functions (not values):

// ✅ Correct - pass accessor
Solid.Show(``when`` = isVisible) { ... }

// ❌ Wrong - don't call it
Solid.Show(``when`` = isVisible()) { ... }

This ensures SolidJS can track reactive dependencies properly.

netstandard2.1 Target

All packages target netstandard2.1 for maximum compatibility:

• Works with .NET 8, 9, 10+
• Compatible with .NET Framework 4.7.2+
• Future-proof for upcoming .NET versions

🤝 Contributing

Contributions welcome! Please:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Run task check to verify builds and tests
5. Submit a pull request

📄 License

MIT License - see LICENSE for details

🙏 Acknowledgments

• Solid.js - The reactive JavaScript library
• Ionic Framework - Mobile UI components
• Fable - F# to JavaScript compiler
• Task - Task runner used for builds

📞 Support

• 🐛 Report Issues
• 💬 Discussions
• 📖 Documentation

Built with ❤️ using F# and Solid.js