@kaspernj/api-maker 1.0.311 → 1.0.313

package/package.json

@@ -16,7 +16,7 @@
     ]
   },
   "name": "@kaspernj/api-maker",
-  "version": "1.0.311",
+  "version": "1.0.313",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -52,7 +52,7 @@
     "on-location-changed": ">= 1.0.8",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": ">= 1.0.25",
+    "set-state-compare": ">= 1.0.26",
     "spark-md5": "^3.0.2",
     "strftime": ">= 0.10.0",
     "uniqunize": "^1.0.1",

package/src/collection-loader.jsx

@@ -1,305 +1,39 @@
-import Collection from "./collection"
-import debounce from "debounce"
-import {digg, digs} from "diggerize"
-import EventCreated from "./event-created"
-import EventDestroyed from "./event-destroyed"
-import EventUpdated from "./event-updated"
-import PropTypes from "prop-types"
-import PropTypesExact from "prop-types-exact"
-import React from "react"
-import withQueryParams from "on-location-changed/src/with-query-params"
-
-class CollectionLoader extends React.PureComponent {
-  static defaultProps = {
-    destroyEnabled: true,
-    groupBy: ["id"],
-    noRecordsAvailableContent: undefined,
-    noRecordsFoundContent: undefined,
-    pagination: false,
-    preloads: [],
-    select: {}
-  }
-
-  static propTypes = PropTypesExact({
-    abilities: PropTypes.object,
-    appHistory: PropTypes.object,
-    className: PropTypes.string,
-    collection: PropTypes.instanceOf(Collection),
-    component: PropTypes.object,
-    defaultParams: PropTypes.object,
-    destroyEnabled: PropTypes.bool.isRequired,
-    groupBy: PropTypes.array,
-    modelClass: PropTypes.func.isRequired,
-    noRecordsAvailableContent: PropTypes.func,
-    noRecordsFoundContent: PropTypes.func,
-    onModelsLoaded: PropTypes.func,
-    pagination: PropTypes.bool.isRequired,
-    paginateContent: PropTypes.func,
-    preloads: PropTypes.array.isRequired,
-    queryMethod: PropTypes.func,
-    queryName: PropTypes.string,
-    queryParams: PropTypes.object,
-    select: PropTypes.object,
-    selectColumns: PropTypes.object
-  })
-
-  shape = digg(this, "props", "component", "shape")
-
-  constructor (props) {
-    super(props)
-
-    let queryName = props.queryName
-
-    if (!queryName) queryName = digg(props.modelClass.modelClassData(), "collectionKey")
-
-    this.shape.set({
-      models: undefined,
-      overallCount: undefined,
-      query: undefined,
-      queryName,
-      queryPerKey: `${queryName}_per`,
-      queryQName: `${queryName}_q`,
-      querySName: `${queryName}_s`,
-      queryPageName: `${queryName}_page`,
-      qParams: undefined,
-      result: undefined,
-      searchParams: undefined,
-      showNoRecordsAvailableContent: false,
-      showNoRecordsFoundContent: false
-    })
-  }
-
-  componentDidMount () {
-    this.loadQParams()
-    this.loadModels()
-
-    const {noRecordsAvailableContent} = digs(this.props, "noRecordsAvailableContent")
-
-    if (noRecordsAvailableContent) this.loadOverallCount()
-  }
-
-  componentDidUpdate(prevProps) {
-    const {queryPageName, queryPerKey, queryQName, querySName} = digs(this.shape, "queryPageName", "queryPerKey", "queryQName", "querySName")
-    let changed = false
-
-    // Only load models again if certain things in the URL changes
-    if (prevProps.queryParams[queryQName] != this.props.queryParams[queryQName]) {
-      changed = true
-    } else if (prevProps.queryParams[queryPageName] != this.props.queryParams[queryPageName]) {
-      changed = true
-    } else if (prevProps.queryParams[queryPerKey] != this.props.queryParams[queryPerKey]) {
-      changed = true
-    } else if (prevProps.queryParams[querySName] != this.props.queryParams[querySName]) {
-      changed = true
-    } else if (prevProps.collection != this.props.collection) {
-      changed = true
-    }
-
-    if (changed) {
-      this.loadQParams()
-      this.loadModels()
-    }
-  }
-
-  async loadOverallCount () {
-    const baseQuery = this.props.collection || this.props.modelClass.all()
-    const overallCount = await baseQuery.count()
-
-    this.shape.set({
-      overallCount,
-      showNoRecordsAvailableContent: this.showNoRecordsAvailableContent({overallCount}),
-      showNoRecordsFoundContent: this.showNoRecordsFoundContent({overallCount})
-    })
-  }
-
-  hasQParams() {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {queryQName} = digs(this.shape, "queryQName")
-
-    if (queryQName in queryParams) return true
-
-    return false
-  }
-
-  qParams() {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {queryQName} = digs(this.shape, "queryQName")
-
-    if (this.hasQParams()) return JSON.parse(digg(queryParams, queryQName))
-
-    return {}
-  }
-
-  loadQParams () {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {querySName} = digs(this.shape, "querySName")
-    const qParams = this.hasQParams() ? this.qParams() : Object.assign({}, this.props.defaultParams)
-    const searchParams = []
-
-    if (queryParams[querySName]) {
-      for (const rawSearchParam of queryParams[querySName]) {
-        const parsedSearchParam = JSON.parse(rawSearchParam)
-
-        searchParams.push(parsedSearchParam)
-      }
-    }
-
-    this.shape.set({qParams, searchParams})
-  }
-
-  loadModels = async () => {
-    const {pagination, queryParams} = digs(this.props, "pagination", "queryParams")
-    const {abilities, collection, groupBy, modelClass, onModelsLoaded, preloads, queryMethod, select, selectColumns} = this.props
-    const {
-      qParams,
-      queryPageName,
-      queryPerKey,
-      queryQName,
-      searchParams
-    } = digs(
-      this.shape,
-      "qParams",
-      "queryPageName",
-      "queryPerKey",
-      "queryQName",
-      "searchParams"
-    )
-
-    let query = collection?.clone() || modelClass.ransack()
-
-    if (pagination) {
-      const page = queryParams[queryPageName] || 1
-      let per = queryParams[queryPerKey] || 30
-
-      if (per == "all") {
-        per = 999_999_999
-      } else {
-        per = Number(per)
-      }
-
-      query.page(page).per(per)
-    }
-
-    if (groupBy) query = query.groupBy(...groupBy)
-
-    query = query
-      .ransack(qParams)
-      .search(searchParams)
-      .searchKey(queryQName)
-      .pageKey(queryPageName)
-      .perKey(queryPerKey)
-      .preload(preloads)
-      .select(select)
-
-    if (abilities) query = query.abilities(abilities)
-    if (selectColumns) query = query.selectColumns(selectColumns)
-
-    let result
-
-    if (queryMethod) {
-      result = await queryMethod({query})
-    } else {
-      result = await query.result()
-    }
-
-    const models = result.models()
-
-    if (onModelsLoaded) {
-      onModelsLoaded({
-        models,
-        qParams,
-        query,
-        result
-      })
-    }
-
-    this.shape.set({
-      query,
-      result,
-      models: result.models(),
-      showNoRecordsAvailableContent: this.showNoRecordsAvailableContent({models}),
-      showNoRecordsFoundContent: this.showNoRecordsFoundContent({models})
-    })
-  }
-
-  loadModelsDebounce = debounce(digg(this, "loadModels"))
-  onModelCreated = digg(this, "loadModels")
-
-  onModelDestroyed = (args) => {
-    const {models} = digs(this.shape, "models")
-
-    this.shape.set({
-      models: models.filter((model) => model.id() != args.model.id())
-    })
-  }
-
-  onModelUpdated = (args) => {
-    const {models} = digs(this.shape, "models")
-    const updatedModel = digg(args, "model")
-    const foundModel = models.find((model) => model.id() == updatedModel.id())
-
-    if (foundModel) this.loadModelsDebounce()
-  }
-
-  showNoRecordsAvailableContent (args) {
-    const {noRecordsAvailableContent} = digs(this.props, "noRecordsAvailableContent")
-    let models, overallCount
-
-    if (args.models !== undefined) {
-      models = args.models
-    } else if (this.shape.models !== undefined) {
-      models = this.shape.models
-    }
-
-    if (args.overallCount !== undefined) {
-      overallCount = args.overallCount
-    } else if (this.shape.overallCount !== undefined) {
-      overallCount = this.shape.overallCount
-    }
-
-    if (models === undefined || overallCount === undefined || noRecordsAvailableContent === undefined) return false
-    if (models.length === 0 && overallCount === 0 && noRecordsAvailableContent) return true
-  }
-
-  showNoRecordsFoundContent (args) {
-    const {noRecordsAvailableContent, noRecordsFoundContent} = digs(this.props, "noRecordsAvailableContent", "noRecordsFoundContent")
-    let models, overallCount
-
-    if (args.models !== undefined) {
-      models = args.models
-    } else if (this.shape.models !== undefined) {
-      models = this.shape.models
-    }
-
-    if (args.overallCount !== undefined) {
-      overallCount = args.overallCount
-    } else if (this.shape.overallCount !== undefined) {
-      overallCount = this.shape.overallCount
-    }
-
-    if (models === undefined || noRecordsFoundContent === undefined) return false
-
-    // Dont show noRecordsAvailableContent together with noRecordsAvailableContent
-    if (models.length === 0 && overallCount === 0 && noRecordsAvailableContent) return false
-    if (models.length === 0 && noRecordsFoundContent) return true
-  }
-
-  render() {
-    const {modelClass} = digs(this.props, "modelClass")
-    const {models} = digs(this.shape, "models")
-
-    return (
-      <>
-        <EventCreated modelClass={modelClass} onCreated={digg(this, "onModelCreated")} />
-        {models && models.map((model) =>
-          <React.Fragment key={model.id()}>
-            <EventDestroyed model={model} onDestroyed={digg(this, "onModelDestroyed")} />
-            <EventUpdated model={model} onUpdated={digg(this, "onModelUpdated")} />
-          </React.Fragment>
-        )}
-      </>
-    )
-  }
+import {digg} from "diggerize"
+import {memo, useEffect} from "react"
+import useCollection from "./use-collection"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const CollectionLoader = (props) => {
+  const s = useShape(props)
+  const useCollectionResult = useCollection(props)
+  const cachePartsKeys = [
+    "modelIdsCacheString",
+    "overallCount",
+    "qParams",
+    "queryName",
+    "queryPerKey",
+    "queryQName",
+    "querySName",
+    "queryPageName",
+    "searchParams",
+    "showNoRecordsAvailableContent",
+    "showNoRecordsFoundContent"
+  ]
+  const cacheParts = []
+
+  for(const cachePartsKey of cachePartsKeys) {
+    cacheParts.push(digg(useCollectionResult, cachePartsKey))
+  }
+
+  s.updateMeta({useCollectionResult})
+
+  useEffect(() => {
+    const componentShape = digg(s.p.component, "shape")
+
+    componentShape.set(s.m.useCollectionResult)
+  }, cacheParts)
+
+  return null
 }
 
-export default withQueryParams(CollectionLoader)
+export default memo(CollectionLoader)

package/src/super-admin/layout/header/index.jsx

@@ -3,7 +3,7 @@ import EventListener from "../../../event-listener"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo, useCallback, useRef, useState} from "react"
-import useShape from "set-state-compare/src/use-shape"
+import useShape from "set-state-compare/src/use-shape.js"
 
 const ApiMakerSuperAdminLayoutHeader = ({actions, onTriggerMenu, title}) => {
   const shape = useShape()

package/src/super-admin/layout/index.jsx

@@ -8,7 +8,7 @@ import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {memo, useCallback, useEffect, useState} from "react"
 import useCurrentUser from "../../use-current-user"
-import useShape from "set-state-compare/src/use-shape"
+import useShape from "set-state-compare/src/use-shape.js"
 
 const NoAccess = React.lazy(() => import("./no-access"))
 

package/src/use-can-can.mjs

@@ -0,0 +1,38 @@
+import CanCan from "./can-can.mjs"
+import {useCallback, useEffect, useState} from "react"
+import useShape from "set-state-compare/src/use-shape.js"
+
+const useCanCan = (abilitiesCallback, dependencies) => {
+  const shape = useShape({abilitiesCallback})
+  const [canCan, setCanCan] = useState()
+
+  useEffect(() => {
+    loadAbilities()
+  }, dependencies)
+
+  const loadAbilities = useCallback(async () => {
+    const canCan = CanCan.current()
+    const abilities = shape.props.abilitiesCallback()
+
+    await canCan.loadAbilities(abilities)
+
+    setCanCan(canCan)
+  }, [])
+
+  const onResetAbilities = useCallback(() => {
+    setCanCan(undefined)
+    loadAbilities()
+  }, [])
+
+  useEffect(() => {
+    CanCan.current().events.addListener("onResetAbilities", onResetAbilities)
+
+    return () => {
+      CanCan.current().events.removeListener("onResetAbilities", onResetAbilities)
+    }
+  }, [])
+
+  return canCan
+}
+
+export default useCanCan

package/src/use-collection.mjs

@@ -0,0 +1,277 @@
+import Collection from "./collection.mjs"
+import debounce from "debounce"
+import {digg} from "diggerize"
+import ModelEvents from "./model-events.mjs"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {useCallback, useEffect} from "react"
+import useShape from "set-state-compare/src/use-shape.js"
+import useQueryParams from "on-location-changed/src/use-query-params.js"
+
+const useCollection = ({
+  abilities,
+  collection,
+  defaultParams,
+  groupBy = ["id"],
+  modelClass,
+  noRecordsAvailableContent = undefined,
+  noRecordsFoundContent = undefined,
+  onModelsLoaded,
+  pagination = false,
+  preloads = [],
+  queryMethod,
+  queryName,
+  select = {},
+  selectColumns
+}) => {
+  const s = useShape({
+    abilities,
+    collection,
+    defaultParams,
+    groupBy,
+    modelClass,
+    noRecordsAvailableContent,
+    noRecordsFoundContent,
+    onModelsLoaded,
+    pagination,
+    preloads,
+    queryMethod,
+    select,
+    selectColumns
+  })
+
+  if (!queryName) queryName = digg(modelClass.modelClassData(), "collectionKey")
+
+  const setModels = s.useState("models")
+  const setOverallCount = s.useState("overallCount")
+  const setQuery = s.useState("query")
+  const setQueryName = s.useState("queryName", queryName)
+  const setQueryPerKey = s.useState("queryPerKey", `${s.s.queryName}_per`)
+  const setQueryQName = s.useState("queryQName", `${s.s.queryName}_q`)
+  const setQuerySName = s.useState("querySName", `${s.s.queryName}_s`)
+  const setQueryPageName = s.useState("queryPageName", `${s.s.queryName}_page`)
+  const setQParams = s.useState("qParams")
+  const setResult = s.useState("result")
+  const setSearchParams = s.useState("searchParams")
+  const setShowNoRecordsAvailableContent = s.useState("showNoRecordsAvailableContent", false)
+  const setShowNoRecordsFoundContent = s.useState("showNoRecordsFoundContent", false)
+  const queryParams = useQueryParams()
+  const modelIds = s.s.models?.map((model) => model.id())
+
+  let modelIdsCacheString
+
+  if (s.s.models === undefined) {
+    modelIdsCacheString = "models-undefined"
+  } else if (s.s.models.length === 0) {
+    modelIdsCacheString = "no-models"
+  } else {
+    modelIdsCacheString = modelIds?.join("---")
+  }
+
+  s.updateMeta({queryParams})
+
+  const loadOverallCount = useCallback(async () => {
+    const baseQuery = s.p.collection || s.p.modelClass.all()
+    const overallCount = await baseQuery.count()
+
+    setOverallCount(overallCount)
+    setShowNoRecordsAvailableContent(showNoRecordsAvailableContent({overallCount}))
+    setShowNoRecordsFoundContent(showNoRecordsFoundContent({overallCount}))
+  }, [])
+
+  const hasQParams = useCallback(() => {
+    if (s.s.queryQName in s.m.queryParams) return true
+
+    return false
+  }, [])
+
+  const qParams = useCallback(() => {
+    if (hasQParams()) return JSON.parse(digg(s.m.queryParams, s.s.queryQName))
+
+    return {}
+  }, [])
+
+  const loadQParams = useCallback(() => {
+    const qParamsToSet = hasQParams() ? qParams() : Object.assign({}, s.p.defaultParams)
+    const searchParams = []
+
+    if (s.m.queryParams[s.s.querySName]) {
+      for (const rawSearchParam of s.m.queryParams[s.s.querySName]) {
+        const parsedSearchParam = JSON.parse(rawSearchParam)
+
+        searchParams.push(parsedSearchParam)
+      }
+    }
+
+    setQParams(qParamsToSet)
+    setSearchParams(searchParams)
+  }, [])
+
+  const loadModels = useCallback(async () => {
+    let query = s.p.collection?.clone() || s.p.modelClass.ransack()
+
+    if (s.p.pagination) {
+      const page = s.m.queryParams[s.s.queryPageName] || 1
+      let per = s.m.queryParams[s.s.queryPerKey] || 30
+
+      if (per == "all") {
+        per = 999_999_999
+      } else {
+        per = Number(per)
+      }
+
+      query.page(page).per(per)
+    }
+
+    if (s.p.groupBy) query = query.groupBy(...s.p.groupBy)
+
+    query = query
+      .ransack(s.s.qParams)
+      .search(s.s.searchParams)
+      .searchKey(s.s.queryQName)
+      .pageKey(s.s.queryPageName)
+      .perKey(s.s.queryPerKey)
+      .preload(s.p.preloads)
+      .select(s.p.select)
+
+    if (s.p.abilities) query = query.abilities(s.p.abilities)
+    if (s.p.selectColumns) query = query.selectColumns(s.p.selectColumns)
+
+    let result
+
+    if (s.p.queryMethod) {
+      result = await s.p.queryMethod({query})
+    } else {
+      result = await query.result()
+    }
+
+    const models = result.models()
+
+    if (s.p.onModelsLoaded) {
+      s.p.onModelsLoaded({
+        models,
+        qParams: s.s.qParams,
+        query,
+        result
+      })
+    }
+
+    setQuery(query)
+    setResult(result)
+    setModels(result.models())
+    setShowNoRecordsAvailableContent(showNoRecordsAvailableContent({models}))
+    setShowNoRecordsFoundContent(showNoRecordsFoundContent({models}))
+  }, [])
+
+  const loadModelsDebounce = useCallback(debounce(loadModels), [])
+  const onModelDestroyed = useCallback((args) => {
+    setModels(s.s.models.filter((model) => model.id() != args.model.id()))
+  }, [])
+
+  const onModelUpdated = useCallback((args) => {
+    const updatedModel = digg(args, "model")
+    const foundModel = s.s.models.find((model) => model.id() == updatedModel.id())
+
+    if (foundModel) loadModelsDebounce()
+  }, [])
+
+  const showNoRecordsAvailableContent = useCallback((args) => {
+    let models, overallCount
+
+    if (args.models !== undefined) {
+      models = args.models
+    } else if (s.s.models !== undefined) {
+      models = s.s.models
+    }
+
+    if (args.overallCount !== undefined) {
+      overallCount = args.overallCount
+    } else if (s.s.overallCount !== undefined) {
+      overallCount = s.s.overallCount
+    }
+
+    if (models === undefined || overallCount === undefined || s.p.noRecordsAvailableContent === undefined) return false
+    if (models.length === 0 && overallCount === 0 && s.p.noRecordsAvailableContent) return true
+  }, [])
+
+  const showNoRecordsFoundContent = useCallback((args) => {
+    let models, overallCount
+
+    if (args.models !== undefined) {
+      models = args.models
+    } else if (s.s.models !== undefined) {
+      models = s.s.models
+    }
+
+    if (args.overallCount !== undefined) {
+      overallCount = args.overallCount
+    } else if (s.s.overallCount !== undefined) {
+      overallCount = s.s.overallCount
+    }
+
+    if (models === undefined || s.p.noRecordsFoundContent === undefined) return false
+
+    // Dont show noRecordsAvailableContent together with noRecordsAvailableContent
+    if (models.length === 0 && overallCount === 0 && s.p.noRecordsAvailableContent) return false
+    if (models.length === 0 && s.p.noRecordsFoundContent) return true
+  }, [])
+
+  useEffect(() => {
+    loadQParams()
+    loadModels()
+  }, [queryParams[s.s.queryQName], queryParams[s.s.queryPageName], queryParams[s.s.queryPerKey], queryParams[s.s.querySName], collection])
+
+  useEffect(() => {
+    if (s.p.noRecordsAvailableContent) loadOverallCount()
+  }, [])
+
+  useEffect(() => {
+    const connectCreated = ModelEvents.connectCreated(s.p.modelClass, loadModels)
+
+    return () => {
+      connectCreated.unsubscribe()
+    }
+  }, [])
+
+  useEffect(() => {
+    const connections = []
+
+    if (s.s.models) {
+      for(const model of s.s.models) {
+        connections.push(ModelEvents.connectUpdated(model, onModelUpdated))
+        connections.push(ModelEvents.connectDestroyed(model, onModelDestroyed))
+      }
+    }
+
+    return () => {
+      for(const connection of connections) {
+        connection.unsubscribe()
+      }
+    }
+  }, [modelIdsCacheString])
+
+  const result = Object.assign({}, s.state)
+
+  result.modelIdsCacheString = modelIdsCacheString
+
+  return result
+}
+
+useCollection.propTypes = PropTypesExact({
+  abilities: PropTypes.object,
+  collection: PropTypes.instanceOf(Collection),
+  defaultParams: PropTypes.object,
+  groupBy: PropTypes.array,
+  modelClass: PropTypes.func.isRequired,
+  noRecordsAvailableContent: PropTypes.func,
+  noRecordsFoundContent: PropTypes.func,
+  onModelsLoaded: PropTypes.func,
+  pagination: PropTypes.bool.isRequired,
+  preloads: PropTypes.array.isRequired,
+  queryMethod: PropTypes.func,
+  queryName: PropTypes.string,
+  select: PropTypes.object,
+  selectColumns: PropTypes.object
+})
+
+export default useCollection

package/src/with-can-can.jsx

@@ -1,16 +1,12 @@
-import CanCanLoader from "./can-can-loader"
+import useCanCan from "./use-can-can.mjs"
+import {memo} from "react"
 
-export default (WrappedComponent, abilities) => class WithCanCan extends React.PureComponent {
-  state = {
-    canCan: undefined
-  }
+export default (WrappedComponent, abilities) => {
+  const WithCanCan = (props) => {
+    const canCan = useCanCan(() => abilities)
 
-  render() {
-    return (
-      <>
-        <CanCanLoader abilities={abilities} component={this} />
-        <WrappedComponent canCan={this.state.canCan} {...this.props} />
-      </>
-    )
+    return <WrappedComponent canCan={canCan} {...props} />
   }
+
+  return memo(WithCanCan)
 }

package/src/with-collection.jsx

@@ -1,259 +1,16 @@
-import debounce from "debounce"
-import {digg, digs} from "diggerize"
-import EventCreated from "./event-created"
-import EventDestroyed from "./event-destroyed"
-import EventUpdated from "./event-updated"
-import React from "react"
-import Shape from "set-state-compare/src/shape"
-import withQueryParams from "on-location-changed/src/with-query-params"
+import {digg} from "diggerize"
+import {memo} from "react"
+import useCollection from "./use-collection"
 
-export default (WrappedComponent, withCollectionArgs) => withQueryParams(class ApiMakerWithCollection extends React.PureComponent {
-  constructor (props) {
-    super(props)
+export default (WrappedComponent, withCollectionArgs) => memo(() => {
+  const useCollectionResult = useCollection(withCollectionArgs)
+  const models = digg(useCollectionResult, "models")
+  const modelsArgName = inflection.camelize(digg(withCollectionArgs.modelClass.modelClassData(), "pluralName"), true)
+  const forwardArgs = {}
 
-    let queryName = withCollectionArgs.queryName
+  forwardArgs[modelsArgName] = models
 
-    if (!queryName) queryName = digg(withCollectionArgs.modelClass.modelClassData(), "collectionKey")
-
-    this.shape = new Shape(this, {
-      models: undefined,
-      overallCount: undefined,
-      query: undefined,
-      queryName,
-      queryPerKey: `${queryName}_per`,
-      queryQName: `${queryName}_q`,
-      querySName: `${queryName}_s`,
-      queryPageName: `${queryName}_page`,
-      qParams: undefined,
-      result: undefined,
-      searchParams: undefined,
-      showNoRecordsAvailableContent: false,
-      showNoRecordsFoundContent: false
-    })
-  }
-
-  componentDidMount () {
-    this.loadQParams()
-    this.loadModels()
-
-    const {noRecordsAvailableContent} = digs(withCollectionArgs)
-
-    if (noRecordsAvailableContent) this.loadOverallCount()
-  }
-
-  componentDidUpdate(prevProps) {
-    const {queryPageName, queryPerKey, queryQName, querySName} = digs(this.shape, "queryPageName", "queryPerKey", "queryQName", "querySName")
-    let changed = false
-
-    // Only load models again if certain things in the URL changes
-    if (prevProps.queryParams[queryQName] != this.props.queryParams[queryQName]) {
-      changed = true
-    } else if (prevProps.queryParams[queryPageName] != this.props.queryParams[queryPageName]) {
-      changed = true
-    } else if (prevProps.queryParams[queryPerKey] != this.props.queryParams[queryPerKey]) {
-      changed = true
-    } else if (prevProps.queryParams[querySName] != this.props.queryParams[querySName]) {
-      changed = true
-    }
-
-    if (changed) {
-      this.loadQParams()
-      this.loadModels()
-    }
-  }
-
-  async loadOverallCount () {
-    const baseQuery = withCollectionArgs.collection || withCollectionArgs.modelClass.all()
-    const overallCount = await baseQuery.count()
-
-    this.shape.set({
-      overallCount,
-      showNoRecordsAvailableContent: this.showNoRecordsAvailableContent({overallCount}),
-      showNoRecordsFoundContent: this.showNoRecordsFoundContent({overallCount})
-    })
-  }
-
-  hasQParams() {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {queryQName} = digs(this.shape, "queryQName")
-
-    if (queryQName in queryParams) return true
-
-    return false
-  }
-
-  qParams() {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {queryQName} = digs(this.shape, "queryQName")
-
-    if (this.hasQParams()) return JSON.parse(digg(queryParams, queryQName))
-
-    return {}
-  }
-
-  loadQParams () {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {querySName} = digs(this.shape, "querySName")
-    const qParams = this.hasQParams() ? this.qParams() : Object.assign({}, withCollectionArgs.defaultParams)
-    const searchParams = []
-
-    if (queryParams[querySName]) {
-      for (const rawSearchParam of queryParams[querySName]) {
-        const parsedSearchParam = JSON.parse(rawSearchParam)
-
-        searchParams.push(parsedSearchParam)
-      }
-    }
-
-    this.shape.set({qParams, searchParams})
-  }
-
-  loadModels = async () => {
-    const {queryParams} = digs(this.props, "queryParams")
-    const {abilities, collection, groupBy, modelClass, onModelsLoaded, preloads, select, selectColumns} = withCollectionArgs
-    const {
-      qParams,
-      queryPageName,
-      queryPerKey,
-      queryQName,
-      searchParams
-    } = digs(
-      this.shape,
-      "qParams",
-      "queryPageName",
-      "queryPerKey",
-      "queryQName",
-      "searchParams"
-    )
-    const page = queryParams[queryPageName] || 1
-    let per = queryParams[queryPerKey] || 30
-
-    if (per == "all") {
-      per = 999_999_999
-    } else {
-      per = Number(per)
-    }
-
-    let query = collection?.clone() || modelClass.ransack()
-
-    if (groupBy) query = query.groupBy(...groupBy)
-
-    query = query
-      .ransack(qParams)
-      .search(searchParams)
-      .searchKey(queryQName)
-      .page(page)
-      .pageKey(queryPageName)
-      .per(per)
-      .perKey(queryPerKey)
-      .preload(preloads)
-      .select(select)
-
-    if (abilities) query = query.abilities(abilities)
-    if (selectColumns) query = query.selectColumns(selectColumns)
-
-    const result = await query.result()
-    const models = result.models()
-
-    if (onModelsLoaded) {
-      onModelsLoaded({
-        models,
-        qParams,
-        query,
-        result
-      })
-    }
-
-    this.shape.set({
-      query,
-      result,
-      models: result.models(),
-      showNoRecordsAvailableContent: this.showNoRecordsAvailableContent({models}),
-      showNoRecordsFoundContent: this.showNoRecordsFoundContent({models})
-    })
-  }
-
-  loadModelsDebounce = debounce(digg(this, "loadModels"))
-  onModelCreated = digg(this, "loadModels")
-
-  onModelDestroyed = ({destroyedModel}) => {
-    const {models} = digs(this.shape, "models")
-
-    this.shape.set({
-      models: models.filter((model) => model.id() != destroyedModel.id())
-    })
-  }
-
-  onModelUpdated = ({model: updatedModel}) => {
-    const {models} = digs(this.shape, "models")
-    const foundModel = models.find((model) => model.id() == updatedModel.id())
-
-    if (foundModel) this.loadModelsDebounce()
-  }
-
-  showNoRecordsAvailableContent (args) {
-    const {noRecordsAvailableContent} = withCollectionArgs
-    let models, overallCount
-
-    if (args.models !== undefined) {
-      models = args.models
-    } else if (this.shape.models !== undefined) {
-      models = this.shape.models
-    }
-
-    if (args.overallCount !== undefined) {
-      overallCount = args.overallCount
-    } else if (this.shape.overallCount !== undefined) {
-      overallCount = this.shape.overallCount
-    }
-
-    if (models === undefined || overallCount === undefined || noRecordsAvailableContent === undefined) return false
-    if (models.length === 0 && overallCount === 0 && noRecordsAvailableContent) return true
-  }
-
-  showNoRecordsFoundContent (args) {
-    const {noRecordsAvailableContent, noRecordsFoundContent} = withCollectionArgs
-    let models, overallCount
-
-    if (args.models !== undefined) {
-      models = args.models
-    } else if (this.shape.models !== undefined) {
-      models = this.shape.models
-    }
-
-    if (args.overallCount !== undefined) {
-      overallCount = args.overallCount
-    } else if (this.shape.overallCount !== undefined) {
-      overallCount = this.shape.overallCount
-    }
-
-    if (models === undefined || noRecordsFoundContent === undefined) return false
-
-    // Dont show noRecordsAvailableContent together with noRecordsAvailableContent
-    if (models.length === 0 && overallCount === 0 && noRecordsAvailableContent) return false
-    if (models.length === 0 && noRecordsFoundContent) return true
-  }
-
-  render() {
-    const {modelClass} = digs(withCollectionArgs, "modelClass")
-    const {onModelCreated, onModelDestroyed, onModelUpdated} = digs(this, "onModelCreated", "onModelDestroyed", "onModelUpdated")
-    const {models} = digs(this.shape, "models")
-    const modelsArgName = inflection.camelize(digg(withCollectionArgs.modelClass.modelClassData(), "pluralName"), true)
-    const forwardArgs = {}
-
-    forwardArgs[modelsArgName] = models
-
-    return (
-      <>
-        <EventCreated modelClass={modelClass} onCreated={onModelCreated} />
-        {models && models.map((model) =>
-          <React.Fragment key={model.id()}>
-            <EventDestroyed model={model} onDestroyed={onModelDestroyed} />
-            <EventUpdated model={model} onUpdated={onModelUpdated} />
-          </React.Fragment>
-        )}
-        <WrappedComponent {...forwardArgs} {...this.props} />
-      </>
-    )
-  }
+  return (
+    <WrappedComponent {...forwardArgs} {...this.props} />
+  )
 })

package/src/can-can-loader.jsx

@@ -1,54 +0,0 @@
-import ApiMakerEventEmitterListener from "./event-emitter-listener"
-import {digg, digs} from "diggerize"
-import CanCan from "./can-can.mjs"
-import PropTypes from "prop-types"
-import propTypesExact from "prop-types-exact"
-import React from "react"
-
-export default class ApiMakerCanCanLoader extends React.PureComponent {
-  static propTypes = propTypesExact({
-    abilities: PropTypes.array.isRequired,
-    component: PropTypes.object.isRequired
-  })
-
-  componentDidMount () {
-    this.loadAbilities()
-  }
-
-  async loadAbilities () {
-    const canCan = CanCan.current()
-    const {abilities} = digs(this.props, "abilities")
-
-    await canCan.loadAbilities(abilities)
-
-    this.updateComponent({canCan})
-  }
-
-  render () {
-    const canCan = CanCan.current()
-    const events = digg(canCan, "events")
-
-    return (
-      <ApiMakerEventEmitterListener
-        event="onResetAbilities"
-        events={events}
-        onCalled={this.onResetAbilities}
-      />
-    )
-  }
-
-  onResetAbilities = () => {
-    this.updateComponent({canCan: undefined})
-    this.loadAbilities()
-  }
-
-  updateComponent (updatedState) {
-    const {component} = digs(this.props, "component")
-
-    if (component.shape) {
-      component.shape.set(updatedState)
-    } else {
-      component.setState(updatedState)
-    }
-  }
-}