TakinProfit.Solid.Tests 1.0.0

dotnet add package TakinProfit.Solid.Tests --version 1.0.0
                    
NuGet\Install-Package TakinProfit.Solid.Tests -Version 1.0.0
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="TakinProfit.Solid.Tests" Version="1.0.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="TakinProfit.Solid.Tests" Version="1.0.0" />
                    
Directory.Packages.props
<PackageReference Include="TakinProfit.Solid.Tests" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add TakinProfit.Solid.Tests --version 1.0.0
                    
#r "nuget: TakinProfit.Solid.Tests, 1.0.0"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package TakinProfit.Solid.Tests@1.0.0
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=TakinProfit.Solid.Tests&version=1.0.0
                    
Install as a Cake Addin
#tool nuget:?package=TakinProfit.Solid.Tests&version=1.0.0
                    
Install as a Cake Tool

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 NuGet
TakinProfit.Solid.Ionic Complete Ionic Framework component bindings (95 components) NuGet

✨ 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

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

📞 Support


Built with ❤️ using F# and Solid.js

Product Compatible and additional computed target framework versions.
.NET net5.0 was computed.  net5.0-windows was computed.  net6.0 was computed.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 was computed.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 was computed.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 was computed.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
.NET Core netcoreapp3.0 was computed.  netcoreapp3.1 was computed. 
.NET Standard netstandard2.1 is compatible. 
MonoAndroid monoandroid was computed. 
MonoMac monomac was computed. 
MonoTouch monotouch was computed. 
Tizen tizen60 was computed. 
Xamarin.iOS xamarinios was computed. 
Xamarin.Mac xamarinmac was computed. 
Xamarin.TVOS xamarintvos was computed. 
Xamarin.WatchOS xamarinwatchos was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last Updated
1.0.0 171 12/24/2025
0.1.0-alpha 170 12/24/2025