@kaspernj/api-maker 1.0.395 → 1.0.397

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.395",
+  "version": "1.0.397",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -35,7 +35,7 @@
     "on-location-changed": ">= 1.0.13",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": "^1.0.46",
+    "set-state-compare": "^1.0.49",
     "spark-md5": "^3.0.2",
     "stacktrace-parser": "^0.1.10",
     "strftime": ">= 0.10.0",

package/src/inputs/input.jsx

@@ -34,15 +34,18 @@ const ApiMakerInputsInput = memo(shapeComponent(class ApiMakerInputsInput extend
   }
 
   setup() {
+    const {inputProps} = this.p
+    const {defaultValue, name} = inputProps
+
     this.form = useForm()
     this.visibleInputRef = useRef()
 
     this.useStates({
-      blankInputName: digg(this, "props", "inputProps", "type") == "file"
+      blankInputName: digg(inputProps, "type") == "file"
     })
     useMemo(() => {
-      if ("defaultValue" in this.props) {
-        this.tt.form?.setValue(this.props.defaultValue)
+      if (name) {
+        this.tt.form?.setValue(name, defaultValue)
       }
     }, [])
   }

package/src/router/route.jsx

@@ -0,0 +1,224 @@
+import BaseComponent from "../base-component"
+import {createContext, useContext, useMemo} from "react"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+import Switch, {CurrentSwitchContext} from "./switch"
+
+const CurrentPathContext = createContext([])
+const ParamsContext = createContext({})
+const RequireComponentContext = createContext(null)
+const RouteContext = createContext(null)
+const useParams = () => useContext(ParamsContext)
+
+const Route = memo(shapeComponent(class Route extends BaseComponent {
+  static defaultProps = {
+    exact: false,
+    fallback: false,
+    includeInPath: true
+  }
+
+  static propTypes = propTypesExact({
+    component: PropTypes.string,
+    componentPath: PropTypes.string,
+    exact: PropTypes.bool.isRequired,
+    fallback: PropTypes.bool.isRequired,
+    includeInPath: PropTypes.bool.isRequired,
+    onMatch: PropTypes.func,
+    path: PropTypes.string
+  })
+
+  match = null
+  newParams = null
+  pathParts = null
+
+  setup() {
+    const {path} = this.props
+    const {pathsMatched, switchGroup} = useContext(CurrentSwitchContext)
+    const givenRoute = useContext(RouteContext)
+    const {pathShown} = switchGroup.s
+
+    this.requireComponent = useContext(RequireComponentContext)
+    this.currentParams = useContext(ParamsContext)
+    this.currentPath = useContext(CurrentPathContext)
+    this.switchGroup = switchGroup
+
+    this.routeParts = useMemo(() => {
+      let routeParts = givenRoute?.split("/")
+
+      return routeParts
+    }, [path, givenRoute])
+
+    this.pathParts = useMemo(() => path?.split("/"), [path])
+
+    this.newRouteParts = useMemo(
+      () => {
+        if (!path) {
+          if (givenRoute == "") {
+            return []
+          } else {
+            return this.routeParts
+          }
+        }
+
+        return this.routeParts.slice(this.pathParts.length, this.routeParts.length)
+      },
+      [givenRoute].concat(this.pathParts)
+    )
+
+    this.useStates({Component: null, componentNotFound: null, matches: false})
+
+    useMemo(() => {
+      this.loadMatches()
+    }, [givenRoute, path, pathsMatched])
+
+    useMemo(() => {
+      if (this.hasSwitchMatch() && !this.s.Component && this.s.matches) {
+        if (this.props.onMatch) {
+          this.props.onMatch()
+        }
+
+        this.loadComponent()
+      }
+    }, [path, pathShown, this.s.matches])
+  }
+
+  hasSwitchMatch = () => this.switchGroup.s.pathShown && this.switchGroup.s.pathShown == this.pathId()
+
+  pathId() {
+    const {fallback} = this.p
+    const {path} = this.props
+    let pathId
+
+    if (fallback) {
+      pathId = "[FALLBACK]"
+    } else if (!path) {
+      pathId = "[PATH-EMPTY]"
+    } else {
+      pathId = path
+    }
+
+    return pathId
+  }
+
+  loadMatches() {
+    const {newRouteParts} = this.tt
+    const {component, path} = this.props
+    const {exact, includeInPath, fallback} = this.p
+
+    let matches = true
+    const params = {}
+    const componentPathParts = [...this.currentPath]
+
+    for (const pathPartIndex in this.pathParts) {
+      const pathPart = this.pathParts[pathPartIndex]
+      const translatedPathPart = I18n.t(`routes.${pathPart}`, {defaultValue: pathPart})
+
+      if (!(pathPartIndex in this.routeParts)) {
+        matches = false
+        break
+      }
+
+      const routePart = this.routeParts[pathPartIndex]
+
+      if (pathPart.startsWith(":") && routePart) {
+        const paramName = pathPart.slice(1, pathPart.length)
+
+        params[paramName] = routePart
+      } else if (translatedPathPart != routePart) {
+        matches = false
+        break
+      } else if (!component && includeInPath) {
+        componentPathParts.push(pathPart)
+      }
+    }
+
+    if (exact && newRouteParts.length > 0) {
+      matches = false
+    } else if (matches && path) {
+      matches = true
+    } else if (this.routeParts.length == 0) {
+      matches = true
+    }
+
+    const matchId = this.pathId()
+
+    if (!matches && fallback) {
+      matches = true
+    }
+
+    if (matches) {
+      if (component && includeInPath) {
+        componentPathParts.push(component)
+      }
+
+      const newParams = Object.assign(this.currentParams, params)
+
+      this.setInstance({componentPathParts, match: {params}, newParams})
+      this.setState({matches})
+      this.switchGroup?.setPathMatched(matchId, true)
+    } else {
+      this.setInstance({componentPathParts: null, match: null, newParams: null})
+      this.setState({matches})
+      this.switchGroup?.setPathMatched(matchId, false)
+    }
+  }
+
+  async loadComponent() {
+    const actualComponentPath = this.props.componentPath || this.tt.componentPathParts.join("/")
+    let Component
+
+    try {
+      const componentImport = await this.tt.requireComponent({routeDefinition: {component: actualComponentPath}})
+
+      Component = componentImport.default
+    } catch (error) {
+      console.error(`Couldn't find component: ${actualComponentPath}`)
+
+      throw error
+    }
+
+    this.setState({Component, componentNotFound: !Component})
+  }
+
+  render() {
+    const {componentPathParts, match, newParams, newRouteParts} = this.tt
+    const {component, path} = this.props
+    const {Component, componentNotFound, matches} = this.s
+
+    if (!matches || !this.hasSwitchMatch()) {
+      // Route isn't matching and shouldn't be rendered at all.
+      return null
+    }
+
+    if (!Component && !componentNotFound) {
+      // Route is matching but hasn't been loaded yet.
+      return (
+        <div>
+          Loading {component || this.props.componentPath || componentPathParts.join("/")}
+        </div>
+      )
+    }
+
+    if (!Component && componentNotFound) {
+      // Don't render anything if the component couldn't be found.
+      return null
+    }
+
+    return (
+      <CurrentPathContext.Provider value={componentPathParts}>
+        <RouteContext.Provider value={newRouteParts.join("/")}>
+          <ParamsContext.Provider value={newParams}>
+            <Switch name={`route-group-${path}`} single={false}>
+              <Component match={match} />
+            </Switch>
+          </ParamsContext.Provider>
+        </RouteContext.Provider>
+      </CurrentPathContext.Provider>
+    )
+  }
+}))
+
+export {RequireComponentContext, RouteContext, Switch, useParams}
+export default Route

package/src/router/switch.jsx

@@ -0,0 +1,78 @@
+import BaseComponent from "../base-component"
+import {createContext} from "react"
+import memo from "set-state-compare/src/memo"
+import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
+
+const CurrentSwitchContext = createContext([])
+
+const Switch = memo(shapeComponent(class Switch extends BaseComponent {
+  static defaultProps = {
+    name: "[no name]",
+    single: true
+  }
+
+  static propTypes = propTypesExact({
+    children: PropTypes.node,
+    name: PropTypes.string,
+    single: PropTypes.bool
+  })
+
+  pathsMatchedKeys = []
+
+  setup() {
+    this.useStates({
+      lastUpdate: new Date(),
+      pathShown: undefined,
+      pathsMatched: {}
+    })
+  }
+
+  render() {
+    const {pathShown, pathsMatched} = this.s
+
+    return (
+      <CurrentSwitchContext.Provider value={{pathShown, pathsMatched, switchGroup: this}}>
+        {this.props.children}
+      </CurrentSwitchContext.Provider>
+    )
+  }
+
+  pathShown(pathsMatched) {
+    for (const pathMatched of this.tt.pathsMatchedKeys) {
+      const isPathMatched = pathsMatched[pathMatched]
+
+      if (isPathMatched) {
+        return pathMatched
+      }
+    }
+  }
+
+  setPathMatched(path, matched) {
+    const {pathsMatchedKeys} = this.tt
+    const {pathsMatched} = this.s
+
+    if (!path) throw new Error("No 'path' given")
+    if (pathsMatched[path] == matched) return
+
+    if (!pathsMatchedKeys.includes(path)) {
+      pathsMatchedKeys.push(path)
+    }
+
+    const newPathsMatched = {...this.s.pathsMatched}
+
+    newPathsMatched[path] = matched
+
+    const pathShown = this.pathShown(newPathsMatched)
+
+    this.setState({
+      lastUpdate: Math.random() + new Date().getTime(),
+      pathShown,
+      pathsMatched: newPathsMatched
+    })
+  }
+}))
+
+export {CurrentSwitchContext}
+export default Switch

package/src/router.jsx

@@ -1,38 +1,46 @@
+import BaseComponent from "./base-component"
 import PropTypes from "prop-types"
+import propTypesExact from "prop-types-exact"
 import React, {memo} from "react"
+import {shapeComponent} from "set-state-compare/src/shape-component.js"
 import {Suspense} from "react"
-import withRouter from "./with-router"
+import useRouter from "./use-router"
 
-const ApiMakerRouter = (props) => {
-  const {match, ...restProps} = props
-  const {matchingRoute} = match
+export default memo(shapeComponent(class ApiMakerRouter extends BaseComponent {
+  static propTypes = propTypesExact({
+    history: PropTypes.object,
+    notFoundComponent: PropTypes.elementType,
+    path: PropTypes.string,
+    requireComponent: PropTypes.func.isRequired,
+    routeDefinitions: PropTypes.object,
+    routes: PropTypes.object
+  })
 
-  if (!matchingRoute) {
-    if (props.notFoundComponent) {
-      const NotFoundComponent = props.notFoundComponent
+  render() {
+    const {notFoundComponent, path, requireComponent, routeDefinitions, routes} = this.props
+    const {match} = useRouter({path, routes, routeDefinitions})
+    const {matchingRoute} = match
 
-      return (
-        <Suspense fallback={<div />}>
-          <NotFoundComponent match={match} />
-        </Suspense>
-      )
-    } else {
-      return null
-    }
-  }
-
-  const Component = props.requireComponent({routeDefinition: matchingRoute.parsedRouteDefinition.routeDefinition})
+    if (!matchingRoute) {
+      if (notFoundComponent) {
+        const NotFoundComponent = notFoundComponent
 
-  return (
-    <Suspense fallback={<div />}>
-      <Component match={match} {...restProps} />
-    </Suspense>
-  )
-}
+        return (
+          <Suspense fallback={<div />}>
+            <NotFoundComponent match={match} />
+          </Suspense>
+        )
+      } else {
+        return null
+      }
+    }
 
-ApiMakerRouter.propTypes = {
-  notFoundComponent: PropTypes.elementType,
-  requireComponent: PropTypes.func.isRequired
-}
+    const Component = requireComponent({routeDefinition: matchingRoute.parsedRouteDefinition.routeDefinition})
 
-export default withRouter(memo(ApiMakerRouter))
+    return (
+      <Suspense fallback={<div />}>
+        <Component match={match} />
+      </Suspense>
+    )
+  }
+}))

package/src/super-admin/edit-page.jsx

@@ -103,8 +103,6 @@ export default memo(shapeComponent(class ApiMakerSuperAdminEditPage extends Base
       const {model} = this.tt
       const formObject = this.s.form.asObject()
 
-      console.log({formObject})
-
       model.assignAttributes(formObject)
       await model.save()
       Params.changeParams({mode: undefined, model_id: model.id()})

package/src/use-updated-event.mjs

@@ -3,7 +3,9 @@ import debounceFunction from "debounce"
 import ModelEvents from "./model-events.mjs"
 import useShape from "set-state-compare/src/use-shape.js"
 
-const apiMakerUseUpdatedEvent = (model, onUpdated, {active = true, debounce, onConnected, ...restProps}) => {
+const apiMakerUseUpdatedEvent = (model, onUpdated, props = {}) => {
+  const {active = true, debounce, onConnected, ...restProps} = props
+
   if (Object.keys(restProps).length > 0) {
     throw new Error(`Unknown props given to useUpdatedEvent: ${Object.keys(restProps).join(", ")}`)
   }