samples/extensions/ClockExtension.ipynb

{
 "cells": [
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# The `ClockExtension` Sample\n",
    "\n",
    "The `ClockExtension` sample walks you through how to create a simple .NET Interactive extension and then package it using NuGet.\n",
    "\n",
    "## 1. Build the project\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "dotnet_interactive": {
     "language": "pwsh"
    }
   },
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "  Determining projects to restore...\n",
      "  All projects are up-to-date for restore.\n",
      "  ClockExtension -> C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\\net8.0\\ClockExtension.dll\n",
      "\n",
      "Build succeeded.\n",
      "    0 Warning(s)\n",
      "    0 Error(s)\n",
      "\n",
      "Time Elapsed 00:00:00.88\n",
      "  Determining projects to restore...\n",
      "  All projects are up-to-date for restore.\n",
      "  ClockExtension -> C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\\net8.0\\ClockExtension.dll\n",
      "\n",
      "    Directory: C:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\n",
      "\n",
      "\u001b[32;1mMode   \u001b[0m\u001b[32;1m              LastWriteTime\u001b[0m\u001b[32;1m         Length\u001b[0m\u001b[32;1m Name\u001b[0m\n",
      "\u001b[32;1m----   \u001b[0m \u001b[32;1m             -------------\u001b[0m \u001b[32;1m        ------\u001b[0m \u001b[32;1m----\u001b[0m\n",
      "-a---           9/25/2024  1:40 PM           9673 \u001b[31;1mClockExtension.1.0.0.nupkg\u001b[0m\n",
      "\n"
     ]
    }
   ],
   "source": [
    "# 1. Build the project\n",
    "dotnet build ClockExtension\n",
    "\n",
    "# Clear any older versions of this extension package from your NuGet cache\n",
    "rm ~/.nuget/packages/ClockExtension -Force -Recurse -ErrorAction Ignore\n",
    "\n",
    "# Pack up the NuGet package. \n",
    "dotnet pack ClockExtension /p:PackageVersion=1.0.0 -c Debug\n",
    "\n",
    "# 3. Check that the package is there\n",
    "Get-ChildItem -Recurse ClockExtension*.nupkg\n"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 2. Load the NuGet package \n",
    "\n",
    "Now we're ready to install the extension that's packed in the NuGet package we just built.\n",
    "\n",
    "First, let's make sure the file is there like we expect after the build.\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/plain": [
       "✅ The package is there!"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "using System.IO;\n",
    "\n",
    "// Create an absolute path since #i doesn't like \n",
    "var debugOutputFolder = new DirectoryInfo(@\".\\ClockExtension\\bin\\Debug\\\").FullName;\n",
    "\n",
    "if (File.Exists(Path.Combine(debugOutputFolder, \"ClockExtension.1.0.0.nupkg\")))\n",
    "{\n",
    "    \"✅ The package is there!\".Display();\n",
    "} \n",
    "else\n",
    "{\n",
    "    \"❌ Something must have gone wrong with the build. The package isn't there.\".Display();\n",
    "}"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "If the package is there, we can include its location as a NuGet source using the `AddPackageSource` command."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    },
    "polyglot_notebook": {
     "kernelName": "csharp"
    }
   },
   "outputs": [],
   "source": [
    "using Microsoft.DotNet.Interactive;\n",
    "using Microsoft.DotNet.Interactive.Commands;\n",
    "\n",
    "await Kernel.Root.FindKernelByName(\"csharp\").SendAsync(new AddPackageSource(debugOutputFolder));"
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Now that the package source is added, we can use `#r` to install the package. "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div><div><strong>Restore sources</strong><ul><li><span>c:\\dev\\interactive\\samples\\extensions\\ClockExtension\\bin\\Debug\\</span></li></ul></div><div></div><div><strong>Installed Packages</strong><ul><li><span>ClockExtension, 1.0.0</span></li></ul></div></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/plain": [
       "Loading extension script from `C:\\Users\\josequ\\.nuget\\packages\\clockextension\\1.0.0\\interactive-extensions\\dotnet\\extension.dib`"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div><code>ClockExtension</code> is loaded. It adds visualizations for <code><span><a href=\"https://docs.microsoft.com/dotnet/api/system.datetime?view=net-7.0\">System.DateTime</a></span></code> and <code><span><a href=\"https://docs.microsoft.com/dotnet/api/system.datetimeoffset?view=net-7.0\">System.DateTimeOffset</a></span></code>. Try it by running: <code>DateTime.Now</code></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#r \"nuget:ClockExtension,1.0.0\""
   ]
  },
  {
   "attachments": {},
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Try the extension\n",
    "\n",
    "As you can see from the output above, when loading the extension is able to explain a bit about what it does. So now we can try it out.\n",
    "\n",
    "It adds a custom formatter for `System.DateTime`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"clockExtensionbbff0ff472ee4afd93f929c34ea63ece\"><svg viewBox=\"0 0 40 40\"><defs><radialGradient id=\"grad1\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\"><stop offset=\"0%\" style=\"stop-color:#512bd4;stop-opacity:0\"></stop><stop offset=\"100%\" style=\"stop-color:#512bd4;stop-opacity:.5\"></stop></radialGradient></defs><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"#dedede\"></circle><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"url(#grad1)\"></circle><g class=\"marks\"><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line></g><text x=\"0\" y=\"0\" class=\"text\">.NET Interactive</text><line x1=\"0\" y1=\"0\" x2=\"9\" y2=\"0\" class=\"hour\"></line><line x1=\"0\" y1=\"0\" x2=\"13\" y2=\"0\" class=\"minute\"></line><line x1=\"0\" y1=\"0\" x2=\"16\" y2=\"0\" class=\"seconds\"></line><circle cx=\"20\" cy=\"20\" r=\"0.7\" class=\"pin\"></circle></svg><style type=\"text/css\">\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece svg {\r\n",
       "  width: 400px;\r\n",
       "  fill: white;\r\n",
       "  stroke: black;\r\n",
       "  stroke-width: 1;\r\n",
       "  stroke-linecap: round;\r\n",
       "  transform: rotate(-90deg);\r\n",
       "  --start-seconds: 19;\r\n",
       "  --start-minutes: 57;\r\n",
       "  --start-hours: 1;\r\n",
       "}\r\n",
       "\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks {\r\n",
       "  transform: translate(20px, 20px);\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(1) {\r\n",
       "  transform: rotate(30deg); \r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(2) {\r\n",
       "  transform: rotate(calc(2 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(3) {\r\n",
       "  transform: rotate(calc(3 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(4) {\r\n",
       "  transform: rotate(calc(4 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(5) {\r\n",
       "  transform: rotate(calc(5 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(6) {\r\n",
       "  transform: rotate(calc(6 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(7) {\r\n",
       "  transform: rotate(calc(7 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(8) {\r\n",
       "  transform: rotate(calc(8 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(9) {\r\n",
       "  transform: rotate(calc(9 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(10) {\r\n",
       "  transform: rotate(calc(10 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(11) {\r\n",
       "  transform: rotate(calc(11 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .marks > line:nth-child(12) {\r\n",
       "  transform: rotate(calc(12 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .seconds,\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .minute,\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .hour\r\n",
       "{\r\n",
       "  transform: translate(20px, 20px) rotate(0deg);\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .seconds {\r\n",
       "  stroke-width: 0.3;\r\n",
       "  stroke: #d00505;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));\r\n",
       "\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .minute {\r\n",
       "  stroke-width: 0.6;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .hour {\r\n",
       "  stroke: #512bd4;\r\n",
       "  stroke-width: 1;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .pin {\r\n",
       "  stroke: #d00505;\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtensionbbff0ff472ee4afd93f929c34ea63ece .text {\r\n",
       "  font-size: 2px;\r\n",
       "  font-family: \"Segoe UI\",Helvetica,Arial,sans-serif;\r\n",
       "  transform: rotate(90deg) translate(13.5px, -12px);\r\n",
       "  fill: #512bd4;\r\n",
       "  stroke: none;\r\n",
       "}</style><script>\r\n",
       "let svg = document.querySelector(&#39;svg&#39;);\r\n",
       "</script></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "DateTime.Now"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {
    "dotnet_interactive": {
     "language": "csharp"
    }
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div id=\"clockExtensiona3876410e2e0412bb676d124b87611ee\"><svg viewBox=\"0 0 40 40\"><defs><radialGradient id=\"grad1\" cx=\"50%\" cy=\"50%\" r=\"50%\" fx=\"50%\" fy=\"50%\"><stop offset=\"0%\" style=\"stop-color:#512bd4;stop-opacity:0\"></stop><stop offset=\"100%\" style=\"stop-color:#512bd4;stop-opacity:.5\"></stop></radialGradient></defs><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"#dedede\"></circle><circle cx=\"20\" cy=\"20\" r=\"19\" fill=\"url(#grad1)\"></circle><g class=\"marks\"><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line><line x1=\"15\" y1=\"0\" x2=\"16\" y2=\"0\"></line></g><text x=\"0\" y=\"0\" class=\"text\">.NET Interactive</text><line x1=\"0\" y1=\"0\" x2=\"9\" y2=\"0\" class=\"hour\"></line><line x1=\"0\" y1=\"0\" x2=\"13\" y2=\"0\" class=\"minute\"></line><line x1=\"0\" y1=\"0\" x2=\"16\" y2=\"0\" class=\"seconds\"></line><circle cx=\"20\" cy=\"20\" r=\"0.7\" class=\"pin\"></circle></svg><style type=\"text/css\">\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee svg {\r\n",
       "  width: 400px;\r\n",
       "  fill: white;\r\n",
       "  stroke: black;\r\n",
       "  stroke-width: 1;\r\n",
       "  stroke-linecap: round;\r\n",
       "  transform: rotate(-90deg);\r\n",
       "  --start-seconds: 56;\r\n",
       "  --start-minutes: 34;\r\n",
       "  --start-hours: 12;\r\n",
       "}\r\n",
       "\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks {\r\n",
       "  transform: translate(20px, 20px);\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(1) {\r\n",
       "  transform: rotate(30deg); \r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(2) {\r\n",
       "  transform: rotate(calc(2 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(3) {\r\n",
       "  transform: rotate(calc(3 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(4) {\r\n",
       "  transform: rotate(calc(4 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(5) {\r\n",
       "  transform: rotate(calc(5 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(6) {\r\n",
       "  transform: rotate(calc(6 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(7) {\r\n",
       "  transform: rotate(calc(7 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(8) {\r\n",
       "  transform: rotate(calc(8 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(9) {\r\n",
       "  transform: rotate(calc(9 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(10) {\r\n",
       "  transform: rotate(calc(10 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(11) {\r\n",
       "  transform: rotate(calc(11 * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .marks > line:nth-child(12) {\r\n",
       "  transform: rotate(calc(12 * 30deg));\r\n",
       "  stroke-width: 0.5;\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .seconds,\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .minute,\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .hour\r\n",
       "{\r\n",
       "  transform: translate(20px, 20px) rotate(0deg);\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .seconds {\r\n",
       "  stroke-width: 0.3;\r\n",
       "  stroke: #d00505;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-seconds) * 6deg));\r\n",
       "\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .minute {\r\n",
       "  stroke-width: 0.6;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-minutes) * 6deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .hour {\r\n",
       "  stroke: #512bd4;\r\n",
       "  stroke-width: 1;\r\n",
       "  transform: translate(20px, 20px) rotate(calc(var(--start-hours) * 30deg));\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .pin {\r\n",
       "  stroke: #d00505;\r\n",
       "  stroke-width: 0.2;\r\n",
       "}\r\n",
       "#clockExtensiona3876410e2e0412bb676d124b87611ee .text {\r\n",
       "  font-size: 2px;\r\n",
       "  font-family: \"Segoe UI\",Helvetica,Arial,sans-serif;\r\n",
       "  transform: rotate(90deg) translate(13.5px, -12px);\r\n",
       "  fill: #512bd4;\r\n",
       "  stroke: none;\r\n",
       "}</style><script>\r\n",
       "let svg = document.querySelector(&#39;svg&#39;);\r\n",
       "</script></div>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "#!clock --hour 12 --minute 34 --second 56"
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": ".NET (C#)",
   "language": "C#",
   "name": ".net-csharp"
  },
  "language_info": {
   "name": "polyglot-notebook"
  },
  "polyglot_notebook": {
   "kernelInfo": {
    "defaultKernelName": "csharp",
    "items": [
     {
      "aliases": [],
      "name": ".NET"
     },
     {
      "aliases": [
       "C#",
       "c#"
      ],
      "languageName": "C#",
      "name": "csharp"
     },
     {
      "aliases": [
       "F#",
       "f#"
      ],
      "languageName": "F#",
      "name": "fsharp"
     },
     {
      "aliases": [],
      "languageName": "HTML",
      "name": "html"
     },
     {
      "aliases": [],
      "languageName": "KQL",
      "name": "kql"
     },
     {
      "aliases": [],
      "languageName": "Mermaid",
      "name": "mermaid"
     },
     {
      "aliases": [
       "powershell"
      ],
      "languageName": "PowerShell",
      "name": "pwsh"
     },
     {
      "aliases": [],
      "languageName": "SQL",
      "name": "sql"
     },
     {
      "aliases": [],
      "name": "value"
     },
     {
      "aliases": [
       "frontend"
      ],
      "name": "vscode"
     }
    ]
   }
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}