feat: add hrm example

.vscode/settings.json

@@ -15,6 +15,7 @@
     "apps/desktop/tailwind.config.ts": "apps/desktop/**",
     "apps/web/tailwind.config.ts": "apps/web/**",
     "examples/basic/tailwind.config.ts": "examples/basic/**",
+    "examples/hrm/tailwind.config.ts": "examples/hrm/**",
     "examples/with-loaders/tailwind.config.ts": "examples/with-loaders/**",
     "examples/with-query-string/tailwind.config.ts": "examples/with-query-string/**",
     "examples/with-multiple-windows/tailwind.config.ts": "examples/with-multiple-windows/**"

examples/hmr/.eslintrc.js

@@ -0,0 +1,8 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@repo/eslint-config/library.js"],
+  parserOptions: {
+    project: true,
+  },
+};

examples/hmr/components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/renderer/global.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "renderer/components",
+    "utils": "renderer/utils"
+  }
+}

examples/hmr/electron-builder.yml

@@ -0,0 +1,26 @@
+appId: com.daltonmenezes.electronrouterdom
+productName: Electron Router DOM basic example
+electronVersion: 21.2.3
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintignore,.eslintrc.cjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+asarUnpack:
+  - '**/*.{node,dll}'
+win:
+  executableName: electron-router-dom-basic-example
+mac:
+  category: public.app-category.developer-tools
+  target:
+    - dir
+linux:
+  target:
+    - deb
+  maintainer: daltonmenezes.com
+  synopsis: ${description}
+  category: Utility
+npmRebuild: false

examples/hmr/electron.vite.config.ts

@@ -0,0 +1,35 @@
+import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
+import tsconfigPathsPlugin from 'vite-tsconfig-paths'
+import react from '@vitejs/plugin-react'
+import tailwindcss from 'tailwindcss'
+import { resolve } from 'path'
+
+import { settings } from './src/lib/electron-router-dom'
+
+const tsconfigPaths = tsconfigPathsPlugin({
+  projects: [resolve('tsconfig.json')],
+})
+
+export default defineConfig({
+  main: {
+    plugins: [tsconfigPaths, externalizeDepsPlugin()],
+  },
+
+  renderer: {
+    plugins: [tsconfigPaths, react()],
+
+    css: {
+      postcss: {
+        plugins: [
+          tailwindcss({
+            config: './tailwind.config.ts',
+          }),
+        ],
+      },
+    },
+
+    server: {
+      port: settings.port,
+    },
+  },
+})

examples/hmr/index.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

examples/hmr/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "hmr-example",
+  "productName": "Electron Router DOM Example",
+  "description": "An Electron Router DOM HRM example",
+  "version": "0.0.0",
+  "private": true,
+  "main": "./out/main/index.js",
+  "homepage": "https://daltonmenezes.githubio./electron-router-dom",
+  "license": "MIT",
+  "author": {
+    "name": "Dalton Menezes",
+    "email": "daltonmenezes@outlook.com",
+    "url": "https://daltonmenezes.com"
+  },
+  "scripts": {
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev --watch",
+    "build": "electron-vite build",
+    "predist": "pnpm build",
+    "dist": "electron-builder"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "workspace:*",
+    "@repo/typescript-config": "workspace:*",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "@vitejs/plugin-react": "^2.2.0",
+    "electron": "^21.2.3",
+    "electron-builder": "^23.6.0",
+    "electron-vite": "^1.0.12",
+    "eslint": "8.57.0",
+    "postcss": "^8.4.41",
+    "rollup-plugin-inject-process-env": "^1.3.1",
+    "tailwindcss": "^3.4.10",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5",
+    "vite": "^3.2.3",
+    "vite-tsconfig-paths": "^3.5.2"
+  },
+  "dependencies": {
+    "@repo/ui": "workspace:*",
+    "@electron-toolkit/preload": "^1.0.2",
+    "@electron-toolkit/utils": "^1.0.2",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-scroll-area": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "electron-router-dom": "workspace:*",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.3",
+    "tailwind-merge": "^2.4.0"
+  },
+  "eslintIgnore": [
+    "dist",
+    "out"
+  ]
+}

examples/hmr/postcss.config.mjs

@@ -0,0 +1,3 @@
+import { config } from '@repo/ui/postcss.config.mjs'
+
+export default config

examples/hmr/src/lib/electron-router-dom.ts

@@ -0,0 +1,7 @@
+import { createElectronRouter } from 'electron-router-dom'
+
+export const { Router, registerRoute, settings } = createElectronRouter({
+  types: {
+    ids: ['main'],
+  },
+})

examples/hmr/src/main/index.ts

@@ -0,0 +1,37 @@
+import { app, BrowserWindow } from 'electron'
+import path from 'node:path'
+
+import { registerRoute } from 'lib/electron-router-dom'
+
+async function createMainWindow() {
+  const mainWindow = new BrowserWindow({
+    width: 650,
+    height: 300,
+    show: false,
+    resizable: false,
+    alwaysOnTop: true,
+  })
+
+  registerRoute({
+    id: 'main',
+    browserWindow: mainWindow,
+    devServerUrl: process.env['ELECTRON_RENDERER_URL'],
+    htmlFile: path.join(__dirname, '../renderer/index.html'),
+  })
+
+  mainWindow.on('ready-to-show', mainWindow.show)
+}
+
+app.whenReady().then(() => {
+  createMainWindow()
+
+  app.on('activate', () => {
+    if (BrowserWindow.getAllWindows().length === 0) createMainWindow()
+  })
+})
+
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})

examples/hmr/src/renderer/components/ui/separator.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react'
+import * as SeparatorPrimitive from '@radix-ui/react-separator'
+
+import { cn } from 'renderer/utils'
+
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+  (
+    { className, orientation = 'horizontal', decorative = true, ...props },
+    ref
+  ) => (
+    <SeparatorPrimitive.Root
+      ref={ref}
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'shrink-0 bg-border',
+        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
+        className
+      )}
+      {...props}
+    />
+  )
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }