jaxs 0.9.8 → 0.10.1

package/dist/jaxs.d.ts

@@ -65,22 +65,28 @@ declare type AttributeInstructionData = {
   isSvg?: boolean
 }
 
-export declare const bind: <ATTRIBUTES, STATE_MAP>({
+export declare const bind: <
+  TemplateProps extends ComponentProps,
+  StateMap extends ComponentProps,
+  BoundProps extends ComponentProps = Partial<TemplateProps>,
+>({
   Template,
-  viewModel,
   subscriptions,
-}: BindParams<ATTRIBUTES, STATE_MAP>) => (
-  attributes: Partial<Props<ATTRIBUTES>>,
-) => Bound<unknown, unknown>
+  viewModel,
+}: BindArguments<TemplateProps, StateMap, BoundProps>) => (
+  attributes: Props<BoundProps>,
+) => Bound<ComponentProps, ComponentProps, Partial<ComponentProps>>
 
-declare type BindParams<T, U> = {
-  Template: Template<T>
-  viewModel?: ViewModel<T, U>
-  subscriptions?: BindSubscriptionList
+declare type BindArguments<
+  TemplateProps extends ComponentProps,
+  StateMap extends ComponentProps,
+  BoundProps extends ComponentProps = Partial<TemplateProps>,
+> = {
+  Template: Template<TemplateProps>
+  viewModel: ViewModel<TemplateProps, BoundProps, StateMap>
+  subscriptions: string[]
 }
 
-declare type BindSubscriptionList = string[]
-
 export declare const BooleanStore: {
   toggle: (store: Store<boolean>) => void
   setTrue: (store: Store<boolean>) => void
@@ -90,11 +96,15 @@ export declare const BooleanStore: {
   isFalse: (store: Store<boolean>) => boolean
 }
 
-declare class Bound<ATTRIBUTES, STATE_MAP> {
-  Template: Template<ATTRIBUTES>
-  viewModel: ViewModel<ATTRIBUTES, STATE_MAP>
-  attributes: Partial<Props<ATTRIBUTES>>
-  subscriptions: BindSubscriptionList
+declare class Bound<
+  TemplateProps extends ComponentProps,
+  StateMap extends ComponentProps,
+  BoundProps extends ComponentProps = Partial<TemplateProps>,
+> {
+  Template: Template<TemplateProps & BoundProps>
+  viewModel: ViewModel<TemplateProps, BoundProps, StateMap>
+  attributes: Props<BoundProps>
+  subscriptions: string[]
   dom: JaxsNode[]
   parentElement: JaxsElement | null
   renderKit?: RenderKit
@@ -164,6 +174,8 @@ declare type CompileChildren = (
   parent: JaxsElement,
 ) => ChangeInstructions
 
+declare type ComponentProps = Record<string, unknown>
+
 export declare const createApp: (
   domEnvironment?: CreateAppBuilderArguments,
 ) => App
@@ -353,10 +365,12 @@ export declare namespace JaxsTypes {
     TypedTemplate,
     Template,
     RenderableCollection,
-    StoreMap,
     ViewModel,
-    BindSubscriptionList,
-    BindParams,
+    ViewModelResult,
+    ComponentProps,
+    BindArguments,
+    SimpleViewModel,
+    WithViewModelArguments,
     ChangeInstructionTypes,
     RemoveInstructionData,
     AttributeInstructionData,
@@ -621,12 +635,12 @@ declare class Root {
 declare const routeChangeEvent = 'navigation:route-change'
 
 export declare const routedView: (routes: RenderedRoute[]) => (
-  attributes: Partial<
-    Props<{
+  attributes: Props<
+    Partial<{
       route: RouteState
     }>
   >,
-) => Bound<unknown, unknown>
+) => Bound<ComponentProps, ComponentProps, Partial<ComponentProps>>
 
 export declare type RouteMatcher = (routeState: RouteState) => boolean
 
@@ -640,6 +654,10 @@ export declare namespace routing {
   export { exactPathMatch, catchAll, buildRouter }
 }
 
+declare type SimpleViewModel<ViewModelProps, TemplateProps> = (
+  props: ViewModelProps,
+) => Partial<TemplateProps>
+
 declare interface SourceMap {
   __source?: ReactSourceObject
 }
@@ -707,10 +725,6 @@ declare type StoreInitializationOptions<T> = {
 
 declare type StoreListSorterFunction<T> = (left: T, right: T) => number
 
-declare type StoreMap = {
-  [key: string]: any
-}
-
 declare type StoresCollection = Record<string, Store_2<any>>
 
 declare type StoreUpdater<T> =
@@ -805,13 +819,36 @@ declare type UpdateEventInstructionData = {
 
 declare type UpdaterValue<T> = boolean | T | T[]
 
-declare type ViewModel<ATTRIBUTES, STORE_MAP> = (
-  storeMap: STORE_MAP,
-) => Partial<ATTRIBUTES>
+declare type ViewModel<TemplateProps, BoundProps, StateMap> = (
+  StateMap: StateMap,
+  props?: Props<BoundProps>,
+) => Partial<TemplateProps>
+
+declare type ViewModelResult<TemplateProps, BoundProps, StateMap> =
+  | Partial<TemplateProps>
+  | (StateMap & Props<BoundProps>)
 
 declare type WithTimeoutOptions<T> = {
   timeout: number
   payload?: T
 }
 
+export declare const withViewModel: <
+  TemplateProps extends ComponentProps,
+  ViewModelProps extends ComponentProps,
+>({
+  Template,
+  viewModel,
+}: WithViewModelArguments<TemplateProps, ViewModelProps>) => (
+  viewModelProps: ViewModelProps & Partial<TemplateProps>,
+) => Renderable
+
+declare type WithViewModelArguments<
+  TemplateProps extends ComponentProps,
+  ViewModelProps extends ComponentProps,
+> = {
+  Template: Template<TemplateProps>
+  viewModel: SimpleViewModel<ViewModelProps, TemplateProps>
+}
+
 export {}

package/dist/jaxs.js

@@ -1,4 +1,4 @@
-const M = (e, t) => {
+const O = (e, t) => {
     for (let s = e.length - 1; s >= 0; s--) e[s] === t && e.splice(s, 1)
     return e
   },
@@ -8,8 +8,8 @@ const M = (e, t) => {
   },
   $ = (e, t, s) => (e.splice(t, 0, s), e),
   D = (e, t) => (e.includes(t) || e.push(t), e),
-  ze = {
-    remove: M,
+  Le = {
+    remove: O,
     removeBy: k,
     insertAt: $,
     appendIfUnique: D,
@@ -57,7 +57,7 @@ class ht {
   }
 }
 const f = (e) => new ht(e),
-  Ke = {
+  ze = {
     toggle: (e) => f(e).toggle(),
     setTrue: (e) => f(e).setTrue(),
     setFalse: (e) => f(e).setFalse(),
@@ -70,7 +70,7 @@ const f = (e) => new ht(e),
   P = (e) => typeof e == 'string',
   v = (e) => Array.isArray(e),
   E = (e) => e !== null && !v(e) && typeof e == 'object',
-  Re = {
+  Ke = {
     boolean: dt,
     number: pt,
     string: P,
@@ -95,7 +95,7 @@ const f = (e) => new ht(e),
           return g(s, n)
         }),
   g = (e, t) => (E(e) ? B(e, t) : v(e) ? F(e, t) : mt(e, t)),
-  Ue = {
+  Re = {
     objects: B,
     arrays: F,
     equal: g,
@@ -140,7 +140,7 @@ class bt {
     $(r, t, s), this.update(r)
   }
   remove(t) {
-    const s = M(this.value, t)
+    const s = O(this.value, t)
     this.update(s)
   }
   removeBy(t) {
@@ -164,7 +164,7 @@ class bt {
   }
 }
 const m = (e) => new bt(e),
-  Ie = {
+  Ue = {
     push: (e, t) => m(e).push(t),
     pop: (e) => m(e).pop(),
     unshift: (e, t) => m(e).unshift(t),
@@ -219,7 +219,7 @@ class vt {
   }
 }
 const b = (e) => new vt(e),
-  qe = {
+  Ie = {
     reset: (e) => b(e).reset(),
     resetAttribute: (e, t) => b(e).resetAttribute(t),
     updateAttribute: (e, t, s) => b(e).updateAttribute(t, s),
@@ -342,9 +342,9 @@ class Tt {
   }
 }
 const jt = (e) => typeof e == 'string' || typeof e == 'number',
-  Ot = (e) => new Tt(e),
-  Mt = (e) => (jt(e) ? Ot(e) : e),
-  V = (e) => kt(e).map(Mt).flat(),
+  Mt = (e) => new Tt(e),
+  Ot = (e) => (jt(e) ? Mt(e) : e),
+  V = (e) => kt(e).map(Ot).flat(),
   kt = (e) => (Array.isArray(e) ? e.flat() : e ? [e] : []),
   L = (e, t = {}) => V(e || t.children || []),
   $t = (e, t = '') => {
@@ -601,7 +601,7 @@ class Z {
     Y(this)
   }
 }
-const Je = /* @__PURE__ */ Object.freeze(
+const qe = /* @__PURE__ */ Object.freeze(
   /* @__PURE__ */ Object.defineProperty(
     {
       __proto__: null,
@@ -783,7 +783,7 @@ const rt = (e) => {
       subscribe: s,
     }
   },
-  He = /* @__PURE__ */ Object.freeze(
+  Je = /* @__PURE__ */ Object.freeze(
     /* @__PURE__ */ Object.defineProperty(
       {
         __proto__: null,
@@ -887,7 +887,7 @@ class it {
   }
 }
 const ot = (e) => new it(e),
-  Ge = /* @__PURE__ */ Object.freeze(
+  He = /* @__PURE__ */ Object.freeze(
     /* @__PURE__ */ Object.defineProperty(
       {
         __proto__: null,
@@ -952,7 +952,7 @@ class Ht {
     }
   }
 }
-const We = (e = {}) => {
+const Ge = (e = {}) => {
   const s = new Ht(e).setup()
   return s.startNavigation(), s
 }
@@ -970,7 +970,7 @@ var c = /* @__PURE__ */ ((e) => (
   (e[(e.changeText = 10)] = 'changeText'),
   e
 ))(c || {})
-const Ce = /* @__PURE__ */ Object.freeze(
+const We = /* @__PURE__ */ Object.freeze(
     /* @__PURE__ */ Object.defineProperty(
       {
         __proto__: null,
@@ -1083,7 +1083,7 @@ class re {
     return Object.values(this.map).flat()
   }
 }
-const O = (e) => {
+const M = (e) => {
     const t = new re()
     return t.populate(e), t
   },
@@ -1216,8 +1216,8 @@ const O = (e) => {
   at = (e, t, s) => {
     const r = [],
       n = de(e, t),
-      i = O(e),
-      o = O(t),
+      i = M(e),
+      o = M(t),
       a = []
     let u = 0
     for (; u < n; u++) {
@@ -1353,12 +1353,12 @@ const O = (e) => {
     const r = $e[e.type]
     r && r(e, t, s)
   },
-  Oe = (e, t) => {
+  Me = (e, t) => {
     const { source: s } = e,
       r = t.indexOf(s)
     r >= 0 && t.splice(r, 1)
   },
-  Me = (e, t, s) => {
+  Oe = (e, t, s) => {
     const { target: r } = e,
       n = e.data,
       { index: i, parent: o } = n
@@ -1370,8 +1370,8 @@ const O = (e) => {
     n >= 0 && (t[n] = s)
   },
   $e = {
-    [c.removeNode]: Oe,
-    [c.insertNode]: Me,
+    [c.removeNode]: Me,
+    [c.insertNode]: Oe,
     [c.replaceNode]: ke,
   }
 class De {
@@ -1393,12 +1393,16 @@ class De {
     )
   }
   generateDom(t) {
-    const s = {
+    const s = this.viewModel(
+        t.state.getAll(this.subscriptions),
+        this.attributes,
+      ),
+      r = {
         ...this.attributes,
-        ...this.viewModel(t.state.getAll(this.subscriptions)),
+        ...s,
       },
-      r = this.Template(s)
-    return r ? r.render(t) : []
+      n = this.Template(r)
+    return n ? n.render(t) : []
   }
   rerender() {
     if (!this.parentElement && this.dom[0]) {
@@ -1419,18 +1423,24 @@ class De {
     return `${S}:${t}`
   }
 }
-const Pe = (e) => e,
-  Be = ({ Template: e, viewModel: t, subscriptions: s }) => (
-    (s = s || []),
-    (t = t || Pe),
+const Pe =
+    ({ Template: e, subscriptions: t, viewModel: s }) =>
     (r) =>
-      new De({ Template: e, viewModel: t, subscriptions: s, attributes: r })
-  ),
-  Fe =
+      new De({ Template: e, viewModel: s, subscriptions: t, attributes: r }),
+  Ce =
+    ({ Template: e, viewModel: t }) =>
+    (s) => {
+      const r = {
+        ...s,
+        ...t(s),
+      }
+      return e(r)
+    },
+  Be =
     (e) =>
     ({ path: t }) =>
       t === e,
-  Ve = () => !0,
+  Fe = () => !0,
   lt =
     (e) =>
     ({ route: t }) => {
@@ -1442,20 +1452,21 @@ const Pe = (e) => e,
       {
         __proto__: null,
         buildRouter: lt,
-        catchAll: Ve,
-        exactPathMatch: Fe,
+        catchAll: Fe,
+        exactPathMatch: Be,
       },
       Symbol.toStringTag,
       { value: 'Module' },
     ),
   ),
-  Le = () => ({
+  Ve = () => ({
     render: (e, t) => [],
   }),
   Xe = (e) => {
     const t = lt(e)
-    return Be({
-      Template: ({ route: r }) => (t({ route: r }) || Le)(),
+    return Pe({
+      Template: ({ route: r }) => (t({ route: r }) || Ve)(),
+      viewModel: ({ route: r }) => ({ route: r }),
       subscriptions: ['route'],
     })
   },
@@ -1477,20 +1488,21 @@ const Pe = (e) => e,
     ),
   )
 export {
-  ze as ArrayModifiers,
-  Ke as BooleanStore,
-  Ue as Equality,
-  Re as Is,
-  Ce as JaxsTypes,
-  Ie as ListStore,
-  qe as RecordStore,
-  Je as appBuilding,
-  Be as bind,
-  We as createApp,
+  Le as ArrayModifiers,
+  ze as BooleanStore,
+  Re as Equality,
+  Ke as Is,
+  We as JaxsTypes,
+  Ue as ListStore,
+  Ie as RecordStore,
+  qe as appBuilding,
+  Pe as bind,
+  Ge as createApp,
   Lt as jsx,
-  He as messageBus,
+  Je as messageBus,
   Ye as navigation,
   Xe as routedView,
   Qe as routing,
-  Ge as state,
+  He as state,
+  Ce as withViewModel,
 }

package/dist/jaxs.umd.cjs

@@ -11,16 +11,16 @@
       for (let s = e.length - 1; s >= 0; s--) e[s] === t && e.splice(s, 1)
       return e
     },
-    O = (e, t) => {
+    M = (e, t) => {
       for (let s = e.length - 1; s >= 0; s--) t(e[s]) && e.splice(s, 1)
       return e
     },
-    M = (e, t, s) => (e.splice(t, 0, s), e),
+    O = (e, t, s) => (e.splice(t, 0, s), e),
     k = (e, t) => (e.includes(t) || e.push(t), e),
     ft = {
       remove: b,
-      removeBy: O,
-      insertAt: M,
+      removeBy: M,
+      insertAt: O,
       appendIfUnique: k,
       push: (e, t) => e.push(t),
       pop: (e) => e.pop(),
@@ -130,14 +130,14 @@
     }
     insertAt(t, s) {
       const r = this.value
-      M(r, t, s), this.update(r)
+      O(r, t, s), this.update(r)
     }
     remove(t) {
       const s = b(this.value, t)
       this.update(s)
     }
     removeBy(t) {
-      const s = O(this.value, t)
+      const s = M(this.value, t)
       this.update(s)
     }
     includes(t) {
@@ -231,7 +231,7 @@
           $(r) && r.trim() === '' ? e.removeAttribute(s) : e.setAttribute(s, r)
       }
     },
-    Ot = (e, t, s) => {
+    Mt = (e, t, s) => {
       const r = {}
       for (const n in t) {
         const i = t[n],
@@ -241,9 +241,9 @@
       }
       e.eventMaps = r
     },
-    Mt = (e, t, s, r) => {
+    Ot = (e, t, s, r) => {
       const n = Tt(e, r.document)
-      return jt(n, t), Ot(n, s, r.publish), n
+      return jt(n, t), Mt(n, s, r.publish), n
     },
     N = 'http://www.w3.org/2000/svg',
     kt = {
@@ -427,7 +427,7 @@
       return this.isSvg ? this.generateSvgDom(t) : this.generateHtmlDom(t)
     }
     generateHtmlDom(t) {
-      const s = Mt(this.type, this.attributes, this.events, t)
+      const s = Ot(this.type, this.attributes, this.events, t)
       return (s.__jsx = this.jsxKey()), s
     }
     generateSvgDom(t) {
@@ -1118,11 +1118,11 @@
       ;(ze[e.type] || je)(e)
     },
     je = (e) => {},
-    Oe = (e) => {
+    Me = (e) => {
       const { source: t, target: s } = e
       t.nodeValue = s.textContent
     },
-    Me = (e) => {
+    Oe = (e) => {
       const { source: t } = e
       t.remove()
     },
@@ -1174,8 +1174,8 @@
       s.value = r
     },
     ze = {
-      [a.changeText]: Oe,
-      [a.removeNode]: Me,
+      [a.changeText]: Me,
+      [a.removeNode]: Oe,
       [a.insertNode]: ke,
       [a.replaceNode]: $e,
       [a.removeAttribute]: De,
@@ -1240,12 +1240,13 @@
       )
     }
     generateDom(t) {
-      const s = {
-          ...this.attributes,
-          ...this.viewModel(t.state.getAll(this.subscriptions)),
-        },
-        r = this.Template(s)
-      return r ? r.render(t) : []
+      const s = this.viewModel(
+          t.state.getAll(this.subscriptions),
+          this.attributes,
+        ),
+        r = { ...this.attributes, ...s },
+        n = this.Template(r)
+      return n ? n.render(t) : []
     }
     rerender() {
       if (!this.parentElement && this.dom[0]) {
@@ -1266,13 +1267,16 @@
       return `${T}:${t}`
     }
   }
-  const Ge = (e) => e,
-    dt = ({ Template: e, viewModel: t, subscriptions: s }) => (
-      (s = s || []),
-      (t = t || Ge),
+  const dt =
+      ({ Template: e, subscriptions: t, viewModel: s }) =>
       (r) =>
-        new He({ Template: e, viewModel: t, subscriptions: s, attributes: r })
-    ),
+        new He({ Template: e, viewModel: s, subscriptions: t, attributes: r }),
+    Ge =
+      ({ Template: e, viewModel: t }) =>
+      (s) => {
+        const r = { ...s, ...t(s) }
+        return e(r)
+      },
     We =
       (e) =>
       ({ path: t }) =>
@@ -1296,6 +1300,7 @@
       const t = pt(e)
       return dt({
         Template: ({ route: r }) => (t({ route: r }) || Xe)(),
+        viewModel: ({ route: r }) => ({ route: r }),
         subscriptions: ['route'],
       })
     },
@@ -1332,5 +1337,6 @@
     (l.routedView = Ye),
     (l.routing = Qe),
     (l.state = se),
+    (l.withViewModel = Ge),
     Object.defineProperty(l, Symbol.toStringTag, { value: 'Module' })
 })

package/package.json

@@ -2,7 +2,7 @@
   "name": "jaxs",
   "description": "Modular J/TSX application framework",
   "private": false,
-  "version": "0.9.8",
+  "version": "0.10.1",
   "type": "module",
   "scripts": {
     "build": "vite build; npm run lint",