fin

Author: jho406

docs/runtime-types.md

@@ -2,14 +2,84 @@
 
 In Superglue, there's no need to annotate your types in ruby just to regenerate
 them in typescript. Instead you write **typescript first** and let runtime type
-validation give you the developer feedback to build your '.props`.
+validation give you the developer feedback to build your `.props`.
 
 To get started, run the installation generator with the typescript flag.
 
 ```terminal
 rails g superglue:install --typescript
 ```
 
+And make use of the following esbuild plugin, deepkit plugins are also available for vite and bun:
+
+```diff
+import * as esbuild from 'esbuild'
+import svgr from 'esbuild-plugin-svgr'
++ import { DeepkitLoader } from '@deepkit/type-compiler'
+import { readFileSync } from 'fs'
+import ts from 'typescript'
+import path from 'node:path'
+
+const isWatch = process.argv.includes('--watch')
+
+// Deepkit transformation plugin for tsup/esbuild
+const deepkitLoader = new DeepkitLoader()
+
++ const deepkitPlugin = {
++   name: 'deepkit',
++   setup(build) {
++     const loaderMap = {
++       '.ts': 'ts',
++       '.tsx': 'tsx',
++       '.js': 'js',
++       '.jsx': 'jsx',
++     }
++     build.onLoad({ filter: /\.(tsx?|jsx?)$/ }, async (args) => {
++       if (args.path.includes('node_modules')) {
++         return null
++       }
++ 
++       const source = readFileSync(args.path, 'utf8')
++ 
++       const deepkitTransformed = deepkitLoader.transform(source, args.path)
++ 
++       const ext = path.extname(args.path)
++       const loader = loaderMap[ext] || 'js'
++ 
++       return {
++         contents: deepkitTransformed,
++         loader,
++       }
++     })
++   },
++ }
+
+const buildOptions = {
+  entryPoints: [
+    'app/javascript/application_superglue.tsx',
+    'app/javascript/admin/application.js',
+    'app/javascript/application.js',
+  ],
+  bundle: true,
+  sourcemap: true,
+  format: 'esm',
+  outdir: 'app/assets/builds',
+  publicPath: '/assets',
++   plugins:  process.env.NODE_ENV === 'production' ? [svgr()] : [deepkitPlugin, svgr()] ,
+  metafile: true,
++  conditions: process.env.NODE_ENV === 'production' ? ['production'] : [],
+}
+
+if (isWatch) {
+  const ctx = await esbuild.context(buildOptions)
+  await ctx.watch()
+  console.log('Watching for changes...')
+} else {
+  const result = await esbuild.build(buildOptions)
+  console.log(await esbuild.analyzeMetafile(result.metafile))
+}
+```
+
 ## How It Works
 
 Superglue uses [Deepkit](https://deepkit.io/) for runtime type validation during development:
@@ -22,7 +92,7 @@ Superglue uses [Deepkit](https://deepkit.io/) for runtime type validation during
 
 `useContent` is the generic hook used to access the props [you
 build](../docs/shaping.md). To make use of runtime types, simply pass a type
-describing your page's props: 
+describing your page's props as you normally would: 
 
 For example: 
 

mkdocs.yml

@@ -106,6 +106,7 @@ nav:
       - Rails Forms / React UI kits: forms.md
       - Shared data: shared-data.md
       - Fragments: fragments.md
+      - Working with types: runtime-types.md
 
     - Updating:
       - Super Turbo Streams: super-turbo-streams.md