@kaspernj/api-maker 1.0.445 → 1.0.447

package/src/table/table.jsx

@@ -1,11 +1,14 @@
 import {digg, digs} from "diggerize"
-import {Pressable, StyleSheet, View} from "react-native"
+import React, {createContext, useContext, useMemo, useRef} from "react"
+import {Animated, Pressable, View} from "react-native"
 import BaseComponent from "../base-component"
 import Card from "../bootstrap/card"
 import classNames from "classnames"
 import Collection from "../collection"
-import columnVisible from "./column-visible.mjs"
+import columnVisible from "./column-visible"
 import debounce from "debounce"
+import DraggableSort from "../draggable-sort/index"
+import EventEmitter from "events"
 import Filters from "./filters"
 import FlatList from "./components/flat-list"
 import FontAwesomeIcon from "react-native-vector-icons/FontAwesome"
@@ -15,68 +18,80 @@ import HeaderColumn from "./header-column"
 import HeaderSelect from "./header-select"
 import * as inflection from "inflection"
 import memo from "set-state-compare/src/memo"
-import modelClassRequire from "../model-class-require.mjs"
+import modelClassRequire from "../model-class-require"
 import ModelRow from "./model-row"
 import Paginate from "../bootstrap/paginate"
 import Params from "../params"
 import PropTypes from "prop-types"
-import React, {createContext, useContext, useMemo, useRef} from "react"
 import Row from "./components/row"
 import selectCalculator from "./select-calculator"
 import Select from "../inputs/select"
-import Settings from "./settings"
+import Settings from "./settings/index"
 import {shapeComponent} from "set-state-compare/src/shape-component"
 import TableSettings from "./table-settings"
 import Text from "../utils/text"
 import uniqunize from "uniqunize"
 import useBreakpoint from "../use-breakpoint"
 import useCollection from "../use-collection"
-import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
-import useModelEvent from "../use-model-event.js"
-import useQueryParams from "on-location-changed/src/use-query-params.js"
+import useI18n from "i18n-on-steroids/src/use-i18n"
+import useEventEmitter from "../use-event-emitter"
+import useModelEvent from "../use-model-event"
+import useQueryParams from "on-location-changed/src/use-query-params"
 import Widths from "./widths"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
 const TableContext = createContext()
 
-const ListHeaderComponent = memo(() => {
-  const {mdUp} = useBreakpoint()
-  const tableContextValue = useContext(TableContext)
-  const table = tableContextValue.table
-  const {collection, queryWithoutPagination, t} = table.tt
-  const {query} = digs(collection, "query")
-
-  return (
-    <Row dataSet={{class: "api-maker/table/header-row"}} style={table.styleForRowHeader()}>
-      {table.p.workplace && table.s.currentWorkplace &&
-        <Header style={table.styleForHeader({style: {width: mdUp ? 41 : undefined}})}>
-          <WorkerPluginsCheckAllCheckbox
-            currentWorkplace={table.s.currentWorkplace}
-            query={queryWithoutPagination}
-            style={{marginHorizontal: "auto"}}
-          />
-          {!mdUp &&
-            <Text style={{marginLeft: 3}}>
-              {t(".select_all_found", {defaultValue: "Select all found"})}
-            </Text>
-          }
-        </Header>
-      }
-      {!mdUp &&
-        <Header style={table.styleForHeader({style: {}})}>
-          <HeaderSelect preparedColumns={table.s.preparedColumns} query={query} table={table} />
-        </Header>
-      }
-      {mdUp &&
-        <>
-          {table.headersContentFromColumns()}
-          <Header style={table.styleForHeader({style: {}, type: "actions"})} />
-        </>
-      }
-    </Row>
-  )
-})
+const ListHeaderComponent = memo(shapeComponent(class ListHeaderComponent extends BaseComponent {
+  setup() {
+    this.useStates({
+      lastUpdate: new Date()
+    })
+  }
+
+  render() {
+    const {mdUp} = useBreakpoint()
+    const tableContextValue = useContext(TableContext)
+    const table = tableContextValue.table
+    const {collection, events, queryWithoutPagination, t} = table.tt
+    const {query} = digs(collection, "query")
+
+    useEventEmitter(events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated)
+
+    return (
+      <Row dataSet={{class: "api-maker/table/header-row"}} style={table.styleForRowHeader()}>
+        {table.p.workplace && table.s.currentWorkplace &&
+          <Header style={table.styleForHeader({style: {width: mdUp ? 41 : undefined}})}>
+            <WorkerPluginsCheckAllCheckbox
+              currentWorkplace={table.s.currentWorkplace}
+              query={queryWithoutPagination}
+              style={{marginHorizontal: "auto"}}
+            />
+            {!mdUp &&
+              <Text style={{marginLeft: 3}}>
+                {t(".select_all_found", {defaultValue: "Select all found"})}
+              </Text>
+            }
+          </Header>
+        }
+        {!mdUp &&
+          <Header style={table.styleForHeader({style: {}})}>
+            <HeaderSelect preparedColumns={table.s.preparedColumns} query={query} table={table} />
+          </Header>
+        }
+        {mdUp &&
+          <>
+            {table.headersContentFromColumns()}
+            <Header style={table.styleForHeader({style: {}, type: "actions"})} />
+          </>
+        }
+      </Row>
+    )
+  }
+
+  onColumnVisibilityUpdated = () => this.setState({lastUpdate: new Date()})
+}))
 
 export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   static defaultProps = {
@@ -132,7 +147,9 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     workplace: PropTypes.bool.isRequired
   }
 
-  tableSetting = null
+  draggableSortEvents = new EventEmitter()
+  events = new EventEmitter()
+  tableSettings = null
 
   setup() {
     const {t} = useI18n({namespace: "js.api_maker.table"})
@@ -151,14 +168,15 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
     if (!queryName) queryName = collectionKey
 
-    const columnsAsArray = this.columnsAsArray()
     const querySName = `${queryName}_s`
 
     this.useStates({
-      columns: columnsAsArray,
+      columns: () => this.columnsAsArray(),
       currentWorkplace: undefined,
       currentWorkplaceCount: null,
       filterForm: null,
+      columnsToShow: null,
+      draggedColumn: null,
       identifier: () => this.props.identifier || `${collectionKey}-default`,
       lastUpdate: () => new Date(),
       preload: undefined,
@@ -181,9 +199,10 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       () => ({
         cacheKey: this.s.tableSettingFullCacheKey,
         lastUpdate: this.s.lastUpdate,
+        resizing: this.s.resizing,
         table: this
       }),
-      [this.s.lastUpdate, this.s.tableSettingFullCacheKey]
+      [this.s.lastUpdate, this.s.resizing, this.s.tableSettingFullCacheKey]
     )
 
     useMemo(() => {
@@ -195,7 +214,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     }, [this.p.currentUser?.id()])
 
     useMemo(() => {
-      if (!this.tt.tableSetting && this.s.width) {
+      if (!this.tt.tableSettings && this.s.width) {
         this.loadTableSetting()
       }
     }, [this.p.currentUser?.id(), this.s.width])
@@ -235,8 +254,16 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       () => this.collection?.query?.clone()?.except("page"),
       [this.collection.query]
     )
+
+    useEventEmitter(this.tt.draggableSortEvents, "onDragStart", this.tt.onDragStart)
+    useEventEmitter(this.tt.draggableSortEvents, "onDragEndAnimation", this.tt.onDragEndAnimation)
+    useEventEmitter(this.tt.events, "columnVisibilityUpdated", this.tt.onColumnVisibilityUpdated)
   }
 
+  onColumnVisibilityUpdated = () => this.setState({columnsToShow: this.getColumnsToShow(this.s.columns), lastUpdate: new Date()})
+  onDragStart = ({item}) => item.animatedZIndex.setValue(9999)
+  onDragEndAnimation = ({item}) => item.animatedZIndex.setValue(0)
+
   async loadCurrentWorkplace() {
     const Workplace = modelClassRequire("Workplace")
     const result = await Workplace.current()
@@ -257,6 +284,12 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     this.setState({currentWorkplaceCount})
   }
 
+  getColumnsToShow(columns) {
+    return columns
+      .filter(({column, tableSettingColumn}) => columnVisible(column, tableSettingColumn))
+      .sort((a, b) => a.tableSettingColumn.position() - b.tableSettingColumn.position())
+  }
+
   async loadTableSetting() {
     this.tableSettings = new TableSettings({table: this})
 
@@ -264,8 +297,11 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     const {columns, preload} = this.tableSettings.preparedColumns(tableSetting)
     const {width} = this.s
     const widths = new Widths({columns, table: this, width})
+    const columnsToShow = this.getColumnsToShow(columns)
 
     this.setState({
+      columns,
+      columnsToShow,
       preparedColumns: columns,
       preload: this.mergedPreloads(preload),
       tableSetting,
@@ -450,7 +486,11 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       <TableContext.Provider value={this.tt.tableContextValue}>
         <FlatList
           data={models}
-          dataSet={{class: classNames("api-maker--table", className), cacheKey: this.s.tableSettingFullCacheKey}}
+          dataSet={{
+            class: classNames("api-maker--table", className),
+            cacheKey: this.s.tableSettingFullCacheKey,
+            lastUpdate: this.s.lastUpdate
+          }}
           extraData={this.s.lastUpdate}
           keyExtractor={this.tt.keyExtrator}
           ListHeaderComponent={ListHeaderComponent}
@@ -575,8 +615,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
   }
 
   renderItem = ({index, item: model}) => {
-    const {preparedColumns, tableSettingFullCacheKey} = this.s
-
     if (!this.s.tableSettingLoaded) {
       return (
         <View>
@@ -590,13 +628,14 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return (
       <ModelRow
         cacheKey={model.cacheKey()}
+        columns={this.s.columnsToShow}
         columnWidths={this.columnWidths()}
+        events={this.tt.events}
         index={index}
         key={model.id()}
         model={model}
-        preparedColumns={preparedColumns}
         table={this}
-        tableSettingFullCacheKey={tableSettingFullCacheKey}
+        tableSettingFullCacheKey={this.s.tableSettingFullCacheKey}
       />
     )
   }
@@ -611,7 +650,7 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
 
     if (styleUI) {
       Object.assign(defaultStyle, {
-        backgroundColor: even ? "#f5f5f5" : undefined
+        backgroundColor: even ? "#f5f5f5" : "#fff"
       })
     }
 
@@ -648,10 +687,6 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
       defaultStyle.borderRight = "1px solid #dbdbdb"
     }
 
-    if (mdUp) {
-
-    }
-
     const actualStyle = Object.assign(
       defaultStyle,
       style
@@ -798,17 +833,60 @@ export default memo(shapeComponent(class ApiMakerTable extends BaseComponent {
     return columnWidths
   }
 
-  headersContentFromColumns = () => this.s.preparedColumns?.map(({column, tableSettingColumn, width}) => columnVisible(column, tableSettingColumn) &&
-    <HeaderColumn
-      column={column}
-      key={tableSettingColumn.identifier()}
-      resizing={this.s.resizing}
-      table={this}
-      tableSettingColumn={tableSettingColumn}
-      width={width}
-      widths={this.s.widths}
-    />
-  )
+  headersContentFromColumns = () => {
+    return (
+      <DraggableSort
+        data={this.s.columnsToShow}
+        events={this.tt.draggableSortEvents}
+        horizontal
+        keyExtractor={this.tt.dragListkeyExtractor}
+        onItemMoved={this.tt.onItemMoved}
+        onReordered={this.tt.onReordered}
+        renderItem={this.tt.dragListRenderItemContent}
+      />
+    )
+  }
+
+  dragListCacheKeyExtractor = (item) => `${item.tableSettingColumn.identifier()}-${this.s.resizing}`
+  dragListkeyExtractor = (item) => item.tableSettingColumn.identifier()
+
+  onItemMoved = ({animationArgs, itemIndex, x, y}) => {
+    const animatedPosition = digg(this, "s", "columnsToShow", itemIndex, "animatedPosition")
+
+    if (animationArgs) {
+      Animated.timing(animatedPosition, animationArgs).start()
+    } else {
+      animatedPosition.setValue({x, y})
+    }
+  }
+
+  onReordered = async ({fromItem, fromPosition, toItem, toPosition}) => {
+    if (fromPosition == toPosition) return // Only do requests and queries if changed
+
+    const TableSettingColumn = fromItem.tableSettingColumn.constructor
+    const toColumn = await TableSettingColumn.find(toItem.tableSettingColumn.id()) // Need to load latest position because ActsAsList might have changed it
+
+    await fromItem.tableSettingColumn.update({position: toColumn.position()})
+  }
+
+  dragListRenderItemContent = ({isActive, item, touchProps}) => {
+    const {animatedWidth, animatedZIndex, column, tableSettingColumn} = item
+
+    return (
+      <HeaderColumn
+        active={isActive}
+        animatedWidth={animatedWidth}
+        animatedZIndex={animatedZIndex}
+        column={column}
+        key={tableSettingColumn.identifier()}
+        resizing={this.s.resizing}
+        table={this}
+        tableSettingColumn={tableSettingColumn}
+        touchProps={touchProps}
+        widths={this.s.widths}
+      />
+    )
+  }
 
   headerClassNameForColumn(column) {
     const classNames = []

package/src/table/{use-sorting.mjs → use-sorting.js}

@@ -1,5 +1,5 @@
 import {camelize} from "inflection"
-import useQueryParams from "on-location-changed/src/use-query-params.js"
+import useQueryParams from "on-location-changed/src/use-query-params"
 
 const calculateQParams = (defaultParams, queryParams, searchKey) => {
   if (searchKey in queryParams) {

package/src/table/{widths.mjs → widths.jsx}

@@ -1,3 +1,4 @@
+import {Animated, Easing} from "react-native"
 import {digg} from "diggerize"
 
 export default class TableWidths {
@@ -19,7 +20,15 @@ export default class TableWidths {
       const column = this.columns[columnIndex]
       const tableSettingColumn = column.tableSettingColumn
 
+      if (column.animatedPosition) throw new Error("Column already had an animated position")
+
+      column.animatedPosition = new Animated.ValueXY()
+      column.animatedZIndex = new Animated.Value(0)
+
       if (tableSettingColumn.hasWidth()) {
+        if (column.animatedWidth) throw new Error("Column already had an animated width")
+
+        column.animatedWidth = new Animated.Value(tableSettingColumn.width())
         column.width = tableSettingColumn.width()
 
         widthLeft -= tableSettingColumn.width()
@@ -44,6 +53,7 @@ export default class TableWidths {
 
         if (newWidth < 200) newWidth = 200
 
+        column.animatedWidth = new Animated.Value(newWidth)
         column.width = newWidth
 
         updateData << {
@@ -72,7 +82,6 @@ export default class TableWidths {
     if (!column) throw new Error(`No such column: ${identifier}`)
 
     column.width = width
-
-    this.table.setState({lastUpdate: new Date()})
+    column.animatedWidth.setValue(width)
   }
 }

package/src/table/worker-plugins-check-all-checkbox.jsx

@@ -1,13 +1,13 @@
 import {useEffect, useMemo, useRef} from "react"
 import BaseComponent from "../base-component"
 import classNames from "classnames"
-import Collection from "../collection.mjs"
+import Collection from "../collection"
 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"
 import {simpleObjectDifferent} from "set-state-compare/src/diff-utils"
-import useModelEvent from "../use-model-event.js"
+import useModelEvent from "../use-model-event"
 
 const Checkbox = memo(shapeComponent(class Checkbox extends BaseComponent {
   render() {

package/src/table/worker-plugins-checkbox.jsx

@@ -2,12 +2,12 @@ import BaseComponent from "../base-component"
 import classNames from "classnames"
 import {digg} from "diggerize"
 import memo from "set-state-compare/src/memo"
-import modelClassRequire from "../model-class-require.mjs"
+import modelClassRequire from "../model-class-require"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
 import {useMemo} from "react"
 import {shapeComponent} from "set-state-compare/src/shape-component"
-import useModelEvent from "../use-model-event.js"
+import useModelEvent from "../use-model-event"
 
 const Workplace = modelClassRequire("Workplace")
 

package/src/{translated-collections.mjs → translated-collections.js}

@@ -1,5 +1,5 @@
 import {digg} from "diggerize"
-import translatedCollectionsData from "./translated-collections-data.mjs.erb"
+import translatedCollectionsData from "../src/translated-collections-data.js.erb"
 
 export default class ApiMakerTranslatedCollections {
   static get (modelClass, collectionName) {

package/src/updated-attribute.jsx

@@ -1,5 +1,5 @@
 import {digg} from "diggerize"
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import React from "react"

package/src/{use-breakpoint.mjs → use-breakpoint.js}

@@ -1,7 +1,7 @@
 import {useCallback, useLayoutEffect} from "react"
-import apiMakerConfig from "@kaspernj/api-maker/src/config.mjs"
+import apiMakerConfig from "@kaspernj/api-maker/build/config"
 import {Dimensions} from "react-native"
-import useShape from "set-state-compare/src/use-shape.js"
+import useShape from "set-state-compare/src/use-shape"
 
 const calculateBreakPoint = (window) => {
   const windowWidth = window.width

package/src/use-can-can.js

@@ -0,0 +1,55 @@
+import CanCan from "./can-can"
+import {useCallback, useMemo, useState} from "react"
+import useCurrentUser from "./use-current-user"
+import useEventEmitter from "./use-event-emitter"
+import useShape from "set-state-compare/src/use-shape"
+
+const useCanCan = (abilitiesCallback, dependencies) => {
+  const currentUser = useCurrentUser()
+  const s = useShape({abilitiesCallback})
+
+  s.useStates({
+    canCan: null,
+    lastUpdate: new Date()
+  })
+
+  if (!dependencies) {
+    dependencies = [currentUser?.id()]
+  }
+
+  const loadAbilities = useCallback(async () => {
+    const canCan = CanCan.current()
+    const abilities = s.p.abilitiesCallback()
+
+    await canCan.loadAbilities(abilities)
+
+    s.set({canCan, lastUpdate: new Date()})
+  }, [])
+
+  const onResetAbilities = useCallback(async () => {
+    s.set({canCan: null}, {silent: true})
+    await loadAbilities()
+  }, [])
+
+  const loadAbilitiesOnNew = useCallback(async () => {
+    const canCan = s.s.canCan
+
+    s.set({canCan: null}, {silent: true})
+
+    if (canCan) {
+      await canCan?.resetAbilities()
+    } else {
+      await loadAbilities()
+    }
+  }, [])
+
+  useMemo(() => {
+    loadAbilitiesOnNew()
+  }, dependencies)
+
+  useEventEmitter(CanCan.current().events, "onResetAbilities", onResetAbilities)
+
+  return s.s.canCan
+}
+
+export default useCanCan

package/src/{use-collection.mjs → use-collection.js}

@@ -1,11 +1,11 @@
 import debounce from "debounce"
 import {digg} from "diggerize"
 import * as inflection from "inflection"
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import {useCallback, useLayoutEffect, useMemo} from "react"
-import useCreatedEvent from "./use-created-event.mjs"
-import useShape from "set-state-compare/src/use-shape.js"
-import useQueryParams from "on-location-changed/src/use-query-params.js"
+import useCreatedEvent from "./use-created-event"
+import useShape from "set-state-compare/src/use-shape"
+import useQueryParams from "on-location-changed/src/use-query-params"
 
 const useCollection = (props, cacheKeys = []) => {
   const {

package/src/{use-created-event.mjs → use-created-event.js}

@@ -1,9 +1,9 @@
 import debounceFunction from "debounce"
-import ModelEvents from "./model-events.mjs"
+import ModelEvents from "./model-events"
 import PropTypes from "prop-types"
 import propTypesExact from "prop-types-exact"
 import {useCallback, useLayoutEffect} from "react"
-import useShape from "set-state-compare/src/use-shape.js"
+import useShape from "set-state-compare/src/use-shape"
 
 const ApiMakerUseCreatedEvent = (modelClass, onCreated, args = {}) => {
   const {active = true, debounce} = args

package/src/{use-current-user.mjs → use-current-user.js}

@@ -1,10 +1,11 @@
 import {useCallback, useMemo} from "react"
 import {camelize} from "inflection"
-import Devise from "./devise.mjs"
-import Logger from "./logger.mjs"
-import Services from "./services.mjs"
-import useEventEmitter from "./use-event-emitter.mjs"
-import useShape from "set-state-compare/src/use-shape.js"
+import Devise from "./devise"
+import {digg} from "diggerize"
+import Logger from "./logger"
+import Services from "./services"
+import useEventEmitter from "./use-event-emitter"
+import useShape from "set-state-compare/src/use-shape"
 
 const logger = new Logger({name: "ApiMaker / useCurrentUser"})
 

package/src/{use-destroyed-event.mjs → use-destroyed-event.js}

@@ -1,7 +1,7 @@
 import {useCallback, useLayoutEffect, useMemo} from "react"
 import debounceFunction from "debounce"
-import ModelEvents from "./model-events.mjs"
-import useShape from "set-state-compare/src/use-shape.js"
+import ModelEvents from "./model-events"
+import useShape from "set-state-compare/src/use-shape"
 
 const apiMakerUseDestroyedEvent = (model, onDestroyed, props) => {
   const {active = true, debounce, onConnected, ...restProps} = props || {}

package/src/{use-input.mjs → use-input.js}

@@ -1,10 +1,10 @@
 import {dig, digg} from "diggerize"
 import {useCallback, useEffect, useMemo} from "react"
-import idForComponent from "./inputs/id-for-component.mjs"
-import nameForComponent from "./inputs/name-for-component.mjs"
+import idForComponent from "./inputs/id-for-component"
+import nameForComponent from "./inputs/name-for-component"
 import strftime from "strftime"
-import useShape from "set-state-compare/src/use-shape.js"
-import useValidationErrors from "./use-validation-errors.mjs"
+import useShape from "set-state-compare/src/use-shape"
+import useValidationErrors from "./use-validation-errors"
 
 const useInput = ({props, wrapperOptions, ...useInputRestProps}) => {
   const useInputRestPropsKeys = Object.keys(useInputRestProps)
@@ -47,7 +47,7 @@ const useInput = ({props, wrapperOptions, ...useInputRestProps}) => {
   const inputDefaultChecked = useCallback(() => {
     if ("defaultChecked" in s.props) {
       return s.props.defaultChecked
-    } else if (s.props.model) {
+    } else if (s.props.attribute && s.props.model) {
       if (!s.props.model[s.props.attribute])
         throw new Error(`No such attribute: ${s.props.attribute}`)
 

package/src/use-model-event.js

@@ -1,7 +1,7 @@
 import {useCallback, useLayoutEffect, useMemo} from "react"
 import debounceFunction from "debounce"
-import ModelEvents from "./model-events.mjs"
-import useShape from "set-state-compare/src/use-shape.js"
+import ModelEvents from "./model-events"
+import useShape from "set-state-compare/src/use-shape"
 
 const apiMakerUseModelEvent = (model, event, onCallback, props) => {
   const {active = true, debounce, onConnected, ...restProps} = props || {}

package/src/{use-model.mjs → use-model.js}

@@ -1,9 +1,9 @@
 import {useCallback, useLayoutEffect, useMemo} from "react"
-import Devise from "./devise.mjs"
+import Devise from "./devise"
 import * as inflection from "inflection"
-import ModelEvents from "./model-events.mjs"
-import useQueryParams from "on-location-changed/src/use-query-params.js"
-import useShape from "set-state-compare/src/use-shape.js"
+import ModelEvents from "./model-events"
+import useQueryParams from "on-location-changed/src/use-query-params"
+import useShape from "set-state-compare/src/use-shape"
 
 const useModel = (modelClassArg, argsArg = {}) => {
   const queryParams = useQueryParams()

package/src/{use-resize-observer.mjs → use-resize-observer.js}

@@ -1,5 +1,5 @@
 import {useCallback, useLayoutEffect, useMemo} from "react"
-import useShape from "set-state-compare/src/use-shape.js"
+import useShape from "set-state-compare/src/use-shape"
 
 const useResizeObserver = (element, callback) => {
   const s = useShape({callback})

package/src/use-router.jsx

@@ -1,9 +1,9 @@
-import config from "./config.mjs"
+import config from "./config"
 import escapeStringRegexp from "escape-string-regexp"
 import * as inflection from "inflection"
 import PropTypes from "prop-types"
 import {useCallback, useMemo} from "react"
-import useShape from "set-state-compare/src/use-shape.js"
+import useShape from "set-state-compare/src/use-shape"
 
 const useRouter = (props) => {
   const s = useShape(props)