Merge pull request #258 from amplifying-fsharp/fsharp-components

Fsharp components

.config/dotnet-tools.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {
+    "fantomas": {
+      "version": "6.3.2",
+      "commands": ["fantomas"]
+    }
+  }
+}

.editorconfig

@@ -0,0 +1,23 @@
+[*]
+end_of_line = lf
+
+# G-Research style, https://github.com/G-Research/fsharp-formatting-conventions/blob/master/.editorconfig
+
+[*.{fs,fsx,fsi}]
+fsharp_space_before_uppercase_invocation = true
+fsharp_space_before_member = true
+fsharp_space_before_colon = true
+fsharp_space_before_semicolon = true
+fsharp_newline_between_type_definition_and_members = true
+fsharp_align_function_signature_to_indentation = true
+fsharp_alternative_long_member_definitions = true
+fsharp_multi_line_lambda_closing_newline = true
+fsharp_experimental_keep_indent_in_branch = true
+fsharp_bar_before_discriminated_union_declaration = true
+fsharp_keep_max_number_of_blank_lines = 1
+fsharp_experimental_elmish = true
+fsharp_multiline_bracket_style = aligned
+fsharp_keep_max_number_of_blank_lines = 1
+
+[*.{fsproj,props}]
+indent_size = 2

.gitattributes

@@ -4,4 +4,6 @@
 *.mjs text eol=lf
 *.sass text eol=lf
 *.md text eol=lf
-*.json text eol=lf
+*.json text eol=lf
+*.jsx text eol=lf
+*.yml text eol=lf

.gitignore

@@ -20,4 +20,7 @@ pnpm-debug.log*
 # macOS-specific files
 .DS_Store
 
-.idea/
+.idea/
+
+src/obj
+src/bin

.prettierrc.mjs

@@ -9,4 +9,5 @@ export default {
       },
     },
   ],
+  endOfLine: "lf",
 };

amplifying-fsharp.github.io.sln

@@ -3,6 +3,8 @@ Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.0.31903.59
 MinimumVisualStudioVersion = 10.0.40219.1
+Project("{F2A71F9B-5D33-465A-A702-920D77279786}") = "src", "src\src.fsproj", "{F42E25A0-575A-4967-AC3D-51293284352E}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -11,4 +13,10 @@ Global
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{F42E25A0-575A-4967-AC3D-51293284352E}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{F42E25A0-575A-4967-AC3D-51293284352E}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{F42E25A0-575A-4967-AC3D-51293284352E}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{F42E25A0-575A-4967-AC3D-51293284352E}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
 EndGlobal

astro.config.mjs

@@ -1,7 +1,43 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { defineConfig } from "astro/config";
 import purgecss from "astro-purgecss";
 import react from "@astrojs/react";
 import icon from "astro-icon";
+import fable from "vite-plugin-fable";
+
+const currentDir = path.dirname(fileURLToPath(import.meta.url));
+const fsproj = path.join(currentDir, "src/src.fsproj");
+
+function fsharpMiddlewarePlugin() {
+  return {
+    name: "nojaf",
+    configureServer(server) {
+      server.middlewares.use((req, res, next) => {
+        const isFSharpUrl = /\.fs/.test(req.url);
+
+        if (isFSharpUrl && req.url.indexOf("?import") === -1) {
+          req.url += "?import";
+          res.setHeader("Content-Type", "application/javascript");
+        }
+        return next();
+      });
+    },
+    handleHotUpdate: async function ({ file, server, modules }) {
+      if (/\.fs/.test(file) && modules && modules.length === 0) {
+        const module = server.moduleGraph.getModuleById(file);
+        if (module) {
+          server.ws.send({
+            type: "custom",
+            event: "hot-update-dependents",
+            data: [module.url],
+          });
+          return [module];
+        }
+      }
+    },
+  };
+}
 
 // https://astro.build/config
 export default defineConfig({
@@ -11,7 +47,8 @@ export default defineConfig({
   },
   integrations: [
     purgecss(),
-    react(),
+    // Include fs extension for react-refresh
+    react({ include: /\.(fs|js|jsx|ts|tsx)$/ }),
     icon({
       include: {
         bi: ["github", "linkedin", "twitter", "chevron-right"],
@@ -30,5 +67,6 @@ export default defineConfig({
         usePolling: true,
       },
     },
+    plugins: [fsharpMiddlewarePlugin(), fable({ fsproj, jsx: "automatic" })],
   },
 });

package.json

@@ -44,9 +44,11 @@
   "devDependencies": {
     "@mermaid-js/mermaid-cli": "10.8.0",
     "prettier": "3.2.5",
-    "prettier-plugin-astro": "0.13.0"
+    "prettier-plugin-astro": "0.13.0",
+    "vite-plugin-fable": "^0.0.26"
   },
   "trustedDependencies": [
-    "sharp"
+    "sharp",
+    "vite-plugin-fable"
   ]
 }

src/bindings/StyledComponents.fs

@@ -0,0 +1,12 @@
+module StyledComponents
+
+open Fable.Core
+open Fable.Core.JsInterop
+
+let styled : obj = import "styled" "styled-components"
+
+let inline mkStyleComponent tag css =
+    emitJsExpr (styled, tag, css) """$0[$1]`${$2}`"""
+
+let inline styledComponent (element : JSX.ElementType) (children : JSX.Element seq) : JSX.Element =
+    JSX.create element [ "children", children ]