TakinProfit.Vitest 3.3.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

✨ 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 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