support Custom components (#88)

Author: samuelcolvin

.eslintrc.cjs

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

.github/workflows/ci.yml

@@ -49,29 +49,29 @@ jobs:
       OS: ${{ matrix.os }}
 
     steps:
-    - uses: actions/checkout@v3
+      - uses: actions/checkout@v3
 
-    - name: set up python
-      uses: actions/setup-python@v4
-      with:
-        python-version: ${{ matrix.python-version }}
+      - name: set up python
+        uses: actions/setup-python@v4
+        with:
+          python-version: ${{ matrix.python-version }}
 
-    - run: pip install -r src/python-fastui/requirements/test.txt
-    - run: pip install -r src/python-fastui/requirements/pyproject.txt
-    - run: pip install src/python-fastui
+      - run: pip install -r src/python-fastui/requirements/test.txt
+      - run: pip install -r src/python-fastui/requirements/pyproject.txt
+      - run: pip install src/python-fastui
 
-    - run: coverage run -m pytest src
+      - run: coverage run -m pytest src
 
-    # test demo on 3.11 and 3.12, these tests are intentionally omitted from coverage
-    - if: matrix.python-version == '3.11' || matrix.python-version == '3.12'
-      run: pytest demo/tests.py
+      # test demo on 3.11 and 3.12, these tests are intentionally omitted from coverage
+      - if: matrix.python-version == '3.11' || matrix.python-version == '3.12'
+        run: pytest demo/tests.py
 
-    - run: coverage xml
+      - run: coverage xml
 
-    - uses: codecov/codecov-action@v3
-      with:
-        file: ./coverage.xml
-        env_vars: PYTHON,OS
+      - uses: codecov/codecov-action@v3
+        with:
+          file: ./coverage.xml
+          env_vars: PYTHON,OS
 
   npm-build:
     runs-on: ubuntu-latest

.prettierignore

@@ -0,0 +1 @@
+htmlcov/

demo/components_list.py

@@ -184,6 +184,18 @@ class Delivery(BaseModel):
             ],
             class_name='border-top mt-3 pt-1',
         ),
+        c.Div(
+            components=[
+                c.Heading(text='Custom', level=2),
+                c.Markdown(text="""\
+Below is a custom component, in this case it implements [cowsay](https://en.wikipedia.org/wiki/Cowsay),
+but you might be able to do something even more useful with it.
+
+The statement spoken by the famous cow is provided by the backend."""),
+                c.Custom(data='This is a custom component', sub_type='cowsay'),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         title='Components',
     )
 

src/npm-fastui-bootstrap/src/index.tsx

@@ -118,5 +118,7 @@ export const classNameGenerator: ClassNameGenerator = ({ props, fullPath, subEle
             return ''
         }
       }
+    case 'Code':
+      return 'rounded'
   }
 }

src/npm-fastui-prebuilt/src/App.tsx

@@ -1,4 +1,4 @@
-import { FastUI, renderClassName } from 'fastui'
+import { CustomRender, FastUI, renderClassName } from 'fastui'
 import * as bootstrap from 'fastui-bootstrap'
 import { FC, ReactNode } from 'react'
 
@@ -8,7 +8,7 @@ export default function App() {
       <FastUI
         rootUrl="/api"
         classNameGenerator={bootstrap.classNameGenerator}
-        customRender={bootstrap.customRender}
+        customRender={customRender}
         NotFound={NotFound}
         Spinner={Spinner}
         Transition={Transition}
@@ -38,3 +38,31 @@ const Transition: FC<{ children: ReactNode; transitioning: boolean }> = ({ child
     {children}
   </div>
 )
+
+const customRender: CustomRender = (props) => {
+  const { type } = props
+  if (type === 'Custom' && props.library === undefined && props.subType === 'cowsay') {
+    console.assert(typeof props.data === 'string', 'cowsay data must be a string')
+    const text = props.data as string
+    return () => <Cowsay text={text} />
+  } else {
+    return bootstrap.customRender(props)
+  }
+}
+
+const COWSAY = ` {above}
+< {text} >
+ {below}
+        \\   ^__^
+         \\  (oo)\\_______
+            (__)\\       )\\/\\
+                ||----w |
+                ||     ||`
+
+const Cowsay: FC<{ text: string }> = ({ text }) => {
+  const len = text.length
+  const cowsay = COWSAY.replace('{text}', text)
+    .replace('{above}', '_'.repeat(len + 2))
+    .replace('{below}', '-'.repeat(len + 2))
+  return <pre>{cowsay}</pre>
+}

src/npm-fastui/src/components/Code.tsx

@@ -9,4 +9,5 @@ export interface CodeProps {
   className?: ClassName
   codeStyle?: string
 }
+
 export const CodeComp = lazy(() => import('./CodeLazy'))

src/npm-fastui/src/components/Custom.tsx

@@ -0,0 +1,32 @@
+import { FC, useContext } from 'react'
+
+import { ClassName } from '../hooks/className'
+import { ErrorContext } from '../hooks/error'
+
+import { JsonData, JsonComp } from './Json'
+
+export interface CustomProps {
+  type: 'Custom'
+  data: JsonData
+  subType: string
+  library?: string
+  className?: ClassName
+}
+
+export const CustomComp: FC<CustomProps> = (props) => {
+  const { data, subType, library } = props
+  const { DisplayError } = useContext(ErrorContext)
+
+  const description = [`The custom component "${subType}"`]
+  if (library) {
+    description.push(`from library "${library}"`)
+  }
+  description.push(`has no implementation with this frontend app.`)
+
+  return (
+    <DisplayError title="Custom component without implementation" description={description.join(' ')}>
+      Custom component data:
+      <JsonComp type="JSON" value={data} />
+    </DisplayError>
+  )
+}

src/npm-fastui/src/components/Json.tsx

@@ -2,6 +2,8 @@ import { FC } from 'react'
 
 import { ClassName } from '../hooks/className'
 
+import { CodeComp } from './Code'
+
 export type JsonData = string | number | boolean | null | JsonData[] | { [key: string]: JsonData }
 
 export interface JsonProps {
@@ -10,16 +12,15 @@ export interface JsonProps {
   className?: ClassName
 }
 
-export const JsonComp: FC<JsonProps> = ({ value }) => {
+export const JsonComp: FC<JsonProps> = (props) => {
+  let { value, className } = props
   // if the value is a string, we assume it's already JSON, and parse it
   if (typeof value === 'string') {
-    value = JSON.parse(value)
+    try {
+      value = JSON.parse(value)
+    } catch (e) {
+      // if it's not valid JSON, we just display it as a string
+    }
   }
-  return (
-    <div className="code-block">
-      <pre>
-        <code>{JSON.stringify(value, null, 2)}</code>
-      </pre>
-    </div>
-  )
+  return <CodeComp type="Code" text={JSON.stringify(value, null, 2)} language="json" className={className} />
 }

src/npm-fastui/src/components/index.tsx

@@ -40,6 +40,7 @@ import { JsonComp, JsonProps } from './Json'
 import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
 import { ImageComp, ImageProps } from './image'
 import { IframeComp, IframeProps } from './Iframe'
+import { CustomComp, CustomProps } from './Custom'
 
 export type {
   TextProps,
@@ -67,6 +68,7 @@ export type {
   ServerLoadProps,
   ImageProps,
   IframeProps,
+  CustomProps,
 }
 
 // TODO some better way to export components
@@ -97,6 +99,7 @@ export type FastProps =
   | ServerLoadProps
   | ImageProps
   | IframeProps
+  | CustomProps
 
 export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps | PageTitleProps>
 
@@ -179,6 +182,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <ImageComp {...props} />
       case 'Iframe':
         return <IframeComp {...props} />
+      case 'Custom':
+        return <CustomComp {...props} />
       default:
         unreachable('Unexpected component type', type, props)
         return <DisplayError title="Invalid Server Response" description={`Unknown component type: "${type}"`} />