Refactor into multiple node packages (#4)

.eslintrc.cjs

@@ -8,7 +8,7 @@ module.exports = {
     'plugin:react-hooks/recommended',
     'prettier',
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'demo/vite.config.ts'],
+  ignorePatterns: ['node_modules'],
   parser: '@typescript-eslint/parser',
   plugins: ['react', '@typescript-eslint', 'react-refresh', 'simple-import-sort'],
   rules: {

.github/workflows/ci.yml

@@ -34,9 +34,23 @@ jobs:
         env:
           SKIP: no-commit-to-branch
 
+  packages-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - run: npm install
+      - run: npm run build
+      - run: tree packages-dist
+
   check: # This job does nothing and is only used for the branch protection
     if: always()
-    needs: [lint]
+    needs: [lint, packages-build]
     runs-on: ubuntu-latest
 
     steps:

.gitignore

@@ -30,3 +30,4 @@ __pycache__/
 /.logfire/
 /frontend-dist/
 /scratch/
+/packages-dist/

.pre-commit-config.yaml

@@ -22,19 +22,19 @@ repos:
         entry: make typecheck
         language: system
         pass_filenames: false
-      - id: react-prettier
-        name: react-prettier
+      - id: js-prettier
+        name: js-prettier
         types_or: [javascript, jsx, ts, tsx, css, json, markdown]
         entry: npm run prettier
         language: system
-      - id: react-lint
-        name: react-lint
+      - id: js-lint
+        name: js-lint
         types_or: [ts, tsx]
         entry: npm run lint-fix
         language: system
         pass_filenames: false
-      - id: react-typecheck
-        name: react-typecheck
+      - id: js-typecheck
+        name: js-typecheck
         types_or: [ts, tsx]
         entry: npm run typecheck
         language: system

Makefile

@@ -38,7 +38,7 @@ testcov: test
 
 .PHONY: dev
 dev:
-	uvicorn demo.server:app --reload
+	uvicorn python.demo.main:app --reload
 
 .PHONY: all
 all: testcov lint

demo/tsconfig.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": false,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "paths": {
-      "fastui": ["../react/fastui"]
-    }
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package.json

@@ -1,15 +1,14 @@
 {
-  "name": "fastui",
   "private": true,
-  "version": "0.0.0",
   "type": "module",
-  "entry": "src/index.tsx",
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
-    "dev": "vite demo",
-    "typecheck": "tsc --noEmit",
-    "build": "tsc",
-    "typewatch": "tsc --noEmit --watch",
-    "lint": "eslint react --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
+    "dev": "npm run --workspace=vanilla dev",
+    "build": "rm -rf packages-dist && npm run build --workspaces --if-present",
+    "typecheck": "npm run --workspaces typecheck",
+    "lint": "eslint packages --ext .ts,.tsx --report-unused-disable-directives --max-warnings 0",
     "lint-fix": "npm run lint -- --fix",
     "prettier": "prettier --write",
     "format": "npm run prettier -- . && npm run lint-fix"
@@ -22,18 +21,12 @@
     "printWidth": 119,
     "bracketSpacing": true
   },
-  "dependencies": {
-    "@types/node": "^20.9.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
   "devDependencies": {
+    "@types/node": "^20.9.1",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "bootstrap": "^5.3.2",
     "eslint": "^8.53.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
@@ -42,7 +35,6 @@
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "prettier": "^3.0.3",
-    "typescript": "^5.0.2",
-    "vite": "^4.4.5"
+    "typescript": "^5.0.2"
   }
 }

packages/fastui-bootstrap/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "fastui-bootstrap",
+  "version": "0.0.0",
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "typewatch": "tsc --noEmit --watch"
+  },
+  "dependencies": {
+    "bootstrap": "^5.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "sass": "^1.69.5"
+  },
+  "peerDependencies": {
+    "fastui": "0.0.0"
+  }
+}

packages/fastui-bootstrap/src/index.tsx

@@ -1,14 +1,6 @@
-import { FastUI, ClassNameGenerator, CustomRender } from 'fastui'
+import { ClassNameGenerator, CustomRender } from 'fastui'
 
-export default function App() {
-  return (
-    <div className="app">
-      <FastUI rootUrl="/api" classNameGenerator={bootstrapClassName} customRender={customRender} />
-    </div>
-  )
-}
-
-const customRender: CustomRender = (props) => {
+export const customRender: CustomRender = (props) => {
   const { type } = props
   if (type === 'DisplayPrimitive') {
     const { value } = props
@@ -18,7 +10,7 @@ const customRender: CustomRender = (props) => {
   }
 }
 
-const bootstrapClassName: ClassNameGenerator = (props) => {
+export const classNameGenerator: ClassNameGenerator = (props) => {
   const { type } = props
   switch (type) {
     case 'Page':

packages/fastui-bootstrap/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../packages-dist",
+    "paths": {
+      "fastui": ["../fastui/src"]
+    }
+  },
+  "include": ["src"]
+}

packages/fastui/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "fastui",
+  "version": "0.0.0",
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typewatch": "tsc --noEmit --watch"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

packages/fastui/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../packages-dist/fastui"
+  },
+  "include": ["src"]
+}

packages/vanilla/index.html

@@ -2,7 +2,6 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>FastUI</title>
   </head>

packages/vanilla/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc --noEmit && vite build",
+    "typecheck": "tsc --noEmit",
+    "typewatch": "tsc --noEmit --watch"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "vite": "^4.4.5"
+  }
+}

packages/vanilla/src/App.tsx

@@ -0,0 +1,10 @@
+import { FastUI } from 'fastui'
+import * as bootstrap from 'fastui-bootstrap'
+
+export default function App() {
+  return (
+    <div className="app">
+      <FastUI rootUrl="/api" classNameGenerator={bootstrap.classNameGenerator} customRender={bootstrap.customRender} />
+    </div>
+  )
+}

packages/vanilla/src/main.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 
 import App from './App'
-import './main.scss'
+import 'fastui-bootstrap/main.scss'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

packages/vanilla/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "paths": {
+      "fastui": ["../fastui/src"],
+      "fastui-bootstrap": ["../fastui-bootstrap/src"]
+    }
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

packages/vanilla/vite.config.ts

@@ -13,14 +13,19 @@ export default () => {
   }
 
   return defineConfig({
+    // @ts-expect-error - no need to type check this file
     plugins: [react()],
     resolve: {
       alias: {
         '@': path.resolve(__dirname, './src'),
-        fastui: path.resolve(__dirname, '../react/fastui'),
+        fastui: path.resolve(__dirname, '../fastui/src'),
+        'fastui-bootstrap': path.resolve(__dirname, '../fastui-bootstrap/src'),
       },
     },
     server: serverConfig,
     preview: serverConfig,
+    build: {
+      outDir: '../../packages-dist/vanilla',
+    },
   })
 }

python/demo/main.py

@@ -4,14 +4,13 @@ from datetime import date
 from enum import StrEnum
 from typing import Annotated, Literal
 
-from fastapi import FastAPI, UploadFile
-from pydantic import BaseModel, Field
-
+from fastapi import UploadFile
+from fastui import AnyComponent, FastUI, dev_fastapi_app
 from fastui import components as c
-from fastui import FastUI, AnyComponent, dev_fastapi_app
-from fastui.forms import fastui_form, FormResponse, FormFile
 from fastui.display import Display
-from fastui.events import PageEvent, GoToEvent
+from fastui.events import GoToEvent, PageEvent
+from fastui.forms import FormFile, FormResponse, fastui_form
+from pydantic import BaseModel, Field
 
 # app = FastAPI()
 app = dev_fastapi_app()
@@ -22,12 +21,14 @@ def read_root() -> AnyComponent:
     return c.Page(
         children=[
             c.Heading(text='Hello World'),
-            c.Row(children=[
-                c.Col(children=[c.Text(text='Hello World')]),
-                c.Col(children=[c.Button(text='Show Modal', on_click=PageEvent(name='modal'))]),
-                c.Col(children=[c.Button(text='View Table', on_click=GoToEvent(url='/table'))]),
-                c.Col(children=[c.Button(text='Form', on_click=GoToEvent(url='/form'))]),
-            ]),
+            c.Row(
+                children=[
+                    c.Col(children=[c.Text(text='Hello World')]),
+                    c.Col(children=[c.Button(text='Show Modal', on_click=PageEvent(name='modal'))]),
+                    c.Col(children=[c.Button(text='View Table', on_click=GoToEvent(url='/table'))]),
+                    c.Col(children=[c.Button(text='Form', on_click=GoToEvent(url='/form'))]),
+                ]
+            ),
             c.Modal(
                 title='Modal Title',
                 body=[c.Text(text='Modal Content')],
@@ -35,7 +36,7 @@ def read_root() -> AnyComponent:
                 open_trigger=PageEvent(name='modal'),
             ),
         ],
-        class_name='+ mt-4'
+        class_name='+ mt-4',
     )
 
 
@@ -61,8 +62,8 @@ def table_view() -> AnyComponent:
                     c.TableColumn(field='name', on_click=GoToEvent(url='/more/{id}/')),
                     c.TableColumn(field='dob', display=Display.date),
                     c.TableColumn(field='enabled'),
-                ]
-            )
+                ],
+            ),
         ]
     )
 
@@ -107,7 +108,7 @@ def form_view() -> AnyComponent:
                 #     c.Button(text='Cancel', on_click=GoToEvent(url='/')),
                 #     c.Button(text='Submit', html_type='submit'),
                 # ]
-            )
+            ),
         ]
     )
     debug(f)

tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "outDir": "./react-dist",
     "target": "ES2020",
     "useDefineForClassFields": true,
     "lib": ["ES2020", "DOM", "DOM.Iterable"],
@@ -20,6 +19,5 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
     "noUncheckedIndexedAccess": true
-  },
-  "include": ["react"]
+  }
 }