@mapples/render 1.6.0-beta.20260930095028 → 1.6.0-beta.20261001084831
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -1
- package/dist/components/MapplesElement.d.ts +37 -0
- package/dist/components/MapplesElement.d.ts.map +1 -0
- package/dist/components/MapplesElement.js +45 -0
- package/dist/components/MapplesElement.js.map +1 -0
- package/dist/components/RenderComponent.d.ts.map +1 -1
- package/dist/components/RenderComponent.js +4 -51
- package/dist/components/RenderComponent.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/index.js.map +1 -1
- package/dist/hooks/useElementBindings.d.ts +34 -0
- package/dist/hooks/useElementBindings.d.ts.map +1 -0
- package/dist/hooks/useElementBindings.js +74 -0
- package/dist/hooks/useElementBindings.js.map +1 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,19 @@
|
|
|
1
1
|
# @mapples/render
|
|
2
2
|
|
|
3
|
-
## 1.6.0-beta.
|
|
3
|
+
## 1.6.0-beta.20261001084831
|
|
4
4
|
|
|
5
5
|
### Minor Changes
|
|
6
6
|
|
|
7
|
+
- 35e9ba6: Creator behaviour runs in the exported app.
|
|
8
|
+
- `@mapples/app`: `MapplesApp` mounts the behaviour runtime (`MapplesRuntime`) — action bus, project variables (`vars.*`) with the `mapples:setState` handler, the API runtime (`api.*`, real requests via `fetch` with secrets from `EXPO_PUBLIC_MAPPLES_SECRET_<NAME>`, or a custom `transport`) with the `mapples:request` handler, the focused route's params, and `RouterActionHandler`, which drives expo-router with the same `toNavigationCommand` semantics as Play (navigate pushes; guard redirects, `replace` and sign-in into a guarded area reset the history). It reads `mapples/navigation.ts`, `mapples/api.ts` and `mapples/variables.ts` through `mapplesResolver` (new `mapples::navigation|api|variables` modules). CLI-generated layouts wrap screens with `mapplesScreens(...)` (`MapplesScreen`: params, on-enter action, guard + fallback, page-scoped variables; `RouteGuard` for a route entering a nested navigator) and render tab/drawer icons with `RouteIcon`. New peers: `@mapples/action`, `@mapples/navigation`, `@mapples/request`, `@mapples/state`, `rxjs`; `expo-router` is no longer optional.
|
|
9
|
+
- `@mapples/render`: `useElementBindings` / `useActionHandlers` — the one implementation of data bindings, `_visible`, asset refs and actions — shared by `RenderComponent` and the new `MapplesElement`, which `babel-plugin-mapples-sid` renders every element carrying `$data` / `$actions` / `$refs` through.
|
|
10
|
+
- `@mapples/navigation`: exports `RouteScreen` / `RouteGuard`; a screen's blur no longer wipes the params the next focused screen already published (on-enter requests reading `route.*` could stall); Play's navigators take header visibility, titles and tab/drawer labels from the shared `routeHeaderVisible` / `routeTitle` / `routeItemLabel` (a route entering a nested navigator no longer draws a second header); `entersGuardFromFallback` also counts the guards on the nested initial route chain a navigate lands on, so signing in to a route whose nested area is guarded resets the history in Play and the exported app.
|
|
11
|
+
- `@mapples/state`: `ActiveRouteState.releaseParams`.
|
|
12
|
+
- `@mapples/types`: `routeHeaderVisible`, `routeTitle`, `routeItemLabel` — the header/title/label rules the canvas frame chrome and the generated layouts share (a route entering a nested navigator draws no header of its own).
|
|
13
|
+
- `@mapples/style`: styled styles accept a `boxShadow` object `{ x, y, radius, color }` in their types, as the styler already rendered it.
|
|
14
|
+
- `@mapples/sid-ast`: a newly added attribute (a binding's `$data`) goes right after the last attribute — no double space, and the space before `/>` stays.
|
|
15
|
+
- `@mapplesorg/canvas`: frame chrome follows the shared header rule (no `Auth`/`Auth` double header); switching an action's type drops the previous type's `staticData` keys (no stale `pageUuid` on a set-variable action).
|
|
16
|
+
|
|
7
17
|
- 7339399: Designed navigator chrome. A tabs navigator's `TabBarOptions.componentUuid` and a drawer's `DrawerOptions.componentUuid` name a saved component that renders the bar or the drawer content, and `TabBarOptions.native` asks the exported app for expo-router's `NativeTabs`. `@mapples/render` carries the contract (`NavigatorChromeContext`, `useNavigatorChrome`): the navigator's routes as items with a label, an active flag and an icon renderer, plus `select`, `close` and the safe-area insets. Two new `@mapples/components` elements read it — `TabBarItems` (one tab per route, pill, labels, badges' tones) and `DrawerItems` (one row per route) — and show a notice when the component is not a navigator's design yet; `@mapples/components` now peers on `@mapples/render`. `@mapples/navigation` mounts a design through `TabBarHost` / `DrawerContentHost` (React Navigation's `tabBar` / `drawerContent`, reading only their props so an exported app uses them as-is) when `MapplesNavigation` is given the `chrome` map, and keeps `visible: false` working for a custom bar. The Creator canvas draws a designed tab bar on every screen frame with its measured height as the bottom inset, a platform-styled placeholder for a native bar, frames a chrome master on the components surface at the chrome's shape with the navigator's routes flowing in, and labels storyboard sections with their design. `create_navigator_chrome` creates and assigns a starter design; `set_navigator_options` accepts the new fields.
|
|
8
18
|
- a6c5872: All `@mapples/*` runtime packages now share one version and are versioned and published together from `mapplesorg/mapples-kit`; `mapples-open-kit` is a read-only mirror of the source.
|
|
9
19
|
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { ElementType } from 'react';
|
|
2
|
+
import { DataProps } from '@mapples/types';
|
|
3
|
+
import { ActionPropsMap, RefPropsMap } from '../types';
|
|
4
|
+
/**
|
|
5
|
+
* Props of {@link MapplesElement}: the element it renders and the Creator
|
|
6
|
+
* sidecars of a synced file, as the `$data` / `$actions` / `$refs` JSX
|
|
7
|
+
* attributes carry them. Every other prop is the element's own.
|
|
8
|
+
*/
|
|
9
|
+
export interface MapplesElementProps {
|
|
10
|
+
/** The component the element renders (`Button`, a Creator component, …). */
|
|
11
|
+
$as: ElementType;
|
|
12
|
+
/** Data bindings per prop — the canvas node's `dataProps`. */
|
|
13
|
+
$data?: DataProps;
|
|
14
|
+
/** Actions per event — the canvas node's `actionProps`. */
|
|
15
|
+
$actions?: ActionPropsMap;
|
|
16
|
+
/** Asset references per prop — the canvas node's `refProps`. */
|
|
17
|
+
$refs?: RefPropsMap;
|
|
18
|
+
[prop: string]: unknown;
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* An element of a synced page or component file that carries Creator
|
|
22
|
+
* behaviour. `babel-plugin-mapples-sid` rewrites
|
|
23
|
+
* `<Button $data={…} $actions={…} label="Go" />` into
|
|
24
|
+
* `<MapplesElement $as={Button} $data={…} $actions={…} label="Go" />` at
|
|
25
|
+
* build time, so the file itself keeps the attributes the two-way sync reads
|
|
26
|
+
* and writes, while the running app resolves them exactly as the canvas does
|
|
27
|
+
* (`useElementBindings`): bound values over the element's own props, a falsy
|
|
28
|
+
* `_visible` hides it, each action emits onto the app's action bus.
|
|
29
|
+
*
|
|
30
|
+
* An authored action replaces a code handler for the same event — the
|
|
31
|
+
* canvas never runs the code one — and says so once, so a duplicate
|
|
32
|
+
* `onPress` (an old habit of writing `router.push` next to a navigate
|
|
33
|
+
* action) is visible rather than silently doubled.
|
|
34
|
+
*/
|
|
35
|
+
declare const MapplesElement: import("react").ForwardRefExoticComponent<Omit<MapplesElementProps, "ref"> & import("react").RefAttributes<unknown>>;
|
|
36
|
+
export default MapplesElement;
|
|
37
|
+
//# sourceMappingURL=MapplesElement.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MapplesElement.d.ts","sourceRoot":"","sources":["../../src/components/MapplesElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAyB,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvD;;;;GAIG;AACH,MAAM,WAAW,mBAAmB;IAClC,4EAA4E;IAC5E,GAAG,EAAE,WAAW,CAAC;IACjB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,gEAAgE;IAChE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;CACzB;AAUD;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,cAAc,sHA2CnB,CAAC;AAGF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { forwardRef, useEffect } from 'react';
|
|
2
|
+
import { useElementBindings } from '../hooks/useElementBindings';
|
|
3
|
+
/** A readable name for the wrapped component, for diagnostics. */
|
|
4
|
+
const elementName = (As) => typeof As === 'string'
|
|
5
|
+
? As
|
|
6
|
+
: (As.displayName ??
|
|
7
|
+
As.name ??
|
|
8
|
+
'element');
|
|
9
|
+
/**
|
|
10
|
+
* An element of a synced page or component file that carries Creator
|
|
11
|
+
* behaviour. `babel-plugin-mapples-sid` rewrites
|
|
12
|
+
* `<Button $data={…} $actions={…} label="Go" />` into
|
|
13
|
+
* `<MapplesElement $as={Button} $data={…} $actions={…} label="Go" />` at
|
|
14
|
+
* build time, so the file itself keeps the attributes the two-way sync reads
|
|
15
|
+
* and writes, while the running app resolves them exactly as the canvas does
|
|
16
|
+
* (`useElementBindings`): bound values over the element's own props, a falsy
|
|
17
|
+
* `_visible` hides it, each action emits onto the app's action bus.
|
|
18
|
+
*
|
|
19
|
+
* An authored action replaces a code handler for the same event — the
|
|
20
|
+
* canvas never runs the code one — and says so once, so a duplicate
|
|
21
|
+
* `onPress` (an old habit of writing `router.push` next to a navigate
|
|
22
|
+
* action) is visible rather than silently doubled.
|
|
23
|
+
*/
|
|
24
|
+
const MapplesElement = forwardRef((elementProps, ref) => {
|
|
25
|
+
// `forwardRef` strips the named members of an index-signature props
|
|
26
|
+
// type; read them through the declared shape.
|
|
27
|
+
const { $as: As, $data, $actions, $refs, ...props } = elementProps;
|
|
28
|
+
const { hidden, dataProps, refProps, actionHandlers } = useElementBindings($data, $actions, $refs);
|
|
29
|
+
const sid = props.$sid;
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
const shadowed = Object.keys($actions ?? {}).filter((event) => typeof props[event] === 'function');
|
|
32
|
+
if (shadowed.length === 0)
|
|
33
|
+
return;
|
|
34
|
+
console.warn(`[mapples] <${elementName(As)}${sid ? ` $sid="${String(sid)}"` : ''}>: the Creator action on ${shadowed.join(', ')} ` +
|
|
35
|
+
'replaces the handler written in code — remove one of them.');
|
|
36
|
+
// Once per mount: the warning is about the file, not about renders.
|
|
37
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
38
|
+
}, []);
|
|
39
|
+
if (hidden)
|
|
40
|
+
return null;
|
|
41
|
+
return (<As ref={ref} {...props} {...dataProps} {...refProps} {...actionHandlers}/>);
|
|
42
|
+
});
|
|
43
|
+
MapplesElement.displayName = 'MapplesElement';
|
|
44
|
+
export default MapplesElement;
|
|
45
|
+
//# sourceMappingURL=MapplesElement.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MapplesElement.js","sourceRoot":"","sources":["../../src/components/MapplesElement.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAoBjE,kEAAkE;AAClE,MAAM,WAAW,GAAG,CAAC,EAAe,EAAU,EAAE,CAC9C,OAAO,EAAE,KAAK,QAAQ;IACpB,CAAC,CAAC,EAAE;IACJ,CAAC,CAAC,CAAE,EAA8C,CAAC,WAAW;QAC3D,EAAwB,CAAC,IAAI;QAC9B,SAAS,CAAC,CAAC;AAEjB;;;;;;;;;;;;;;GAcG;AACH,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,YAAY,EAAE,GAAG,EAAE,EAAE;IACpB,oEAAoE;IACpE,8CAA8C;IAC9C,MAAM,EACJ,GAAG,EAAE,EAAE,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,GAAG,YAAmC,CAAC;IACxC,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,kBAAkB,CACxE,KAAK,EACL,QAAQ,EACR,KAAK,CACN,CAAC;IAEF,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC;IACvB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAC,CAAC,MAAM,CACjD,CAAC,KAAK,EAAE,EAAE,CAAC,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,UAAU,CAC9C,CAAC;QACF,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QAClC,OAAO,CAAC,IAAI,CACV,cAAc,WAAW,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,UAAU,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,4BAA4B,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG;YACnH,4DAA4D,CAC/D,CAAC;QACF,oEAAoE;QACpE,uDAAuD;IACzD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,IAAI,MAAM;QAAE,OAAO,IAAI,CAAC;IAExB,OAAO,CACL,CAAC,EAAE,CACD,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,IAAI,KAAK,CAAC,CACV,IAAI,SAAS,CAAC,CACd,IAAI,QAAQ,CAAC,CACb,IAAI,cAAc,CAAC,EACnB,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC;AAE9C,eAAe,cAAc,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RenderComponent.d.ts","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"RenderComponent.d.ts","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAQ,MAAM,OAAO,CAAC;AAOjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,QAAA,MAAM,eAAe,EAAE,EAAE,CAAC,mBAAmB,CA4C5C,CAAC;AAQF,eAAe,eAAe,CAAC"}
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import { memo
|
|
2
|
-
import {
|
|
3
|
-
import { isThis, parseThis } from '@mapples/inlang';
|
|
4
|
-
import { useDataProps, useDataState } from '@mapples/state';
|
|
5
|
-
import { isPlainObject, map, mapValues } from 'lodash';
|
|
1
|
+
import { memo } from 'react';
|
|
2
|
+
import { map } from 'lodash';
|
|
6
3
|
import { useRender } from '../hooks';
|
|
7
4
|
import useConditionalStyled from '../hooks/useConditionalStyled';
|
|
8
|
-
import
|
|
5
|
+
import { useElementBindings } from '../hooks/useElementBindings';
|
|
9
6
|
/**
|
|
10
7
|
* Default implementation of a renderable component.
|
|
11
8
|
*
|
|
@@ -42,52 +39,8 @@ import useRefProps from '../hooks/useRefProps';
|
|
|
42
39
|
*/
|
|
43
40
|
const RenderComponent = ({ type, props, dataProps, actionProps, children, refProps, childComponents, }) => {
|
|
44
41
|
const { components } = useRender();
|
|
45
|
-
const
|
|
46
|
-
const resolvedRefProps = useRefProps(refProps);
|
|
47
|
-
// Reserved binding: `dataProps._visible` conditionally shows the element.
|
|
48
|
-
// Only an ACTIVE binding participates (inactive/absent → always visible);
|
|
49
|
-
// a resolved falsy value (incl. the string 'false') hides the subtree.
|
|
50
|
-
const { _visible: visibleValue, ...visibleDataProps } = propsWithData;
|
|
51
|
-
const hidden = '_visible' in propsWithData &&
|
|
52
|
-
(visibleValue == null ||
|
|
53
|
-
visibleValue === false ||
|
|
54
|
-
visibleValue === 'false' ||
|
|
55
|
-
visibleValue === 0 ||
|
|
56
|
-
visibleValue === '');
|
|
42
|
+
const { hidden, dataProps: visibleDataProps, refProps: resolvedRefProps, actionHandlers: mappedActionProps, } = useElementBindings(dataProps, actionProps, refProps);
|
|
57
43
|
const propsWithConditional = useConditionalStyled(props);
|
|
58
|
-
const { getValue } = useDataState();
|
|
59
|
-
const actionStore = useActionStore();
|
|
60
|
-
// Turn each `actionProps` entry into a handler that emits onto the action
|
|
61
|
-
// store. `dataProp` resolves from state (or an event arg for `"this"`);
|
|
62
|
-
// `staticData` is a literal payload merged in last so author-time config —
|
|
63
|
-
// e.g. a navigation target — survives regardless of state.
|
|
64
|
-
const mappedActionProps = useMemo(() => mapValues(actionProps, (actionProp) => {
|
|
65
|
-
return (...originalEventData) => {
|
|
66
|
-
const dataProp = actionProp?.dataProp || '';
|
|
67
|
-
let resolved;
|
|
68
|
-
if (isThis(dataProp)) {
|
|
69
|
-
const [, indexStr] = parseThis(dataProp);
|
|
70
|
-
const index = indexStr ? parseInt(indexStr) : 0;
|
|
71
|
-
resolved = originalEventData[!isNaN(index) ? index : 0];
|
|
72
|
-
}
|
|
73
|
-
else if (dataProp) {
|
|
74
|
-
resolved = getValue({ key: dataProp, active: true });
|
|
75
|
-
}
|
|
76
|
-
const data = actionProp?.staticData
|
|
77
|
-
? {
|
|
78
|
-
...(isPlainObject(resolved)
|
|
79
|
-
? resolved
|
|
80
|
-
: {}),
|
|
81
|
-
...actionProp.staticData,
|
|
82
|
-
}
|
|
83
|
-
: resolved;
|
|
84
|
-
actionStore.next({
|
|
85
|
-
time: Date.now(),
|
|
86
|
-
type: actionProp?.type,
|
|
87
|
-
payload: { originalEventData, data },
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
}), [actionProps, actionStore, getValue]);
|
|
91
44
|
const Component = components[type].Component;
|
|
92
45
|
if (!Component || hidden) {
|
|
93
46
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RenderComponent.js","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"RenderComponent.js","sourceRoot":"","sources":["../../src/components/RenderComponent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAM,IAAI,EAAE,MAAM,OAAO,CAAC;AAEjC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,oBAAoB,MAAM,+BAA+B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAGjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,eAAe,GAA4B,CAAC,EAChD,IAAI,EACJ,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,eAAe,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,UAAU,EAAE,GAAG,SAAS,EAAE,CAAC;IACnC,MAAM,EACJ,MAAM,EACN,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,gBAAgB,EAC1B,cAAc,EAAE,iBAAiB,GAClC,GAAG,kBAAkB,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC;IACzD,MAAM,oBAAoB,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAG,UAAU,CAAC,IAA+B,CAAC,CAAC,SAAS,CAAC;IAExE,IAAI,CAAC,SAAS,IAAI,MAAM,EAAE,CAAC;QACzB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,cAAc,GAAG,CAAC,KAAa,EAAE,EAAE;QACvC,MAAM,oBAAoB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;QACpD,OAAO,CACL,CAAC,wBAAwB,CACvB,IAAI,oBAAoB,CAAC,CACzB,GAAG,CAAC,CAAC,oBAAoB,CAAC,EAAE,CAAC,EAC7B,CACH,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,SAAS,CACR,IAAI,oBAAoB,CAAC,CACzB,IAAI,gBAAgB,CAAC,CACrB,IAAI,gBAAgB,CAAC,CACrB,IAAI,iBAAiB,CAAC,CAEtB;MAAA,CAAC,GAAG,CAAC,QAAQ,EAAE,cAAc,CAAC,CAChC;IAAA,EAAE,SAAS,CAAC,CACb,CAAC;AACJ,CAAC,CAAC;AAEF;;;GAGG;AACH,MAAM,wBAAwB,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;AAEvD,eAAe,eAAe,CAAC"}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
export { default as Render } from './Render';
|
|
2
2
|
export { default as RenderComponent } from './RenderComponent';
|
|
3
3
|
export { default as RenderProvider } from './RenderProvider';
|
|
4
|
+
export { default as MapplesElement } from './MapplesElement';
|
|
5
|
+
export type { MapplesElementProps } from './MapplesElement';
|
|
4
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/components/index.js
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { default as Render } from './Render';
|
|
2
2
|
export { default as RenderComponent } from './RenderComponent';
|
|
3
3
|
export { default as RenderProvider } from './RenderProvider';
|
|
4
|
+
export { default as MapplesElement } from './MapplesElement';
|
|
4
5
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC"}
|
package/dist/hooks/index.d.ts
CHANGED
|
@@ -2,4 +2,6 @@ export { default as useRender } from './useRender';
|
|
|
2
2
|
export { default as useConditionalStyled } from './useConditionalStyled';
|
|
3
3
|
export { default as useNavigatorChrome } from './useNavigatorChrome';
|
|
4
4
|
export * from './useNavigatorChrome';
|
|
5
|
+
export { default as useElementBindings, useActionHandlers, } from './useElementBindings';
|
|
6
|
+
export type { ElementBindings } from './useElementBindings';
|
|
5
7
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC;AACrC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,iBAAiB,GAClB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC"}
|
package/dist/hooks/index.js
CHANGED
|
@@ -2,4 +2,5 @@ export { default as useRender } from './useRender';
|
|
|
2
2
|
export { default as useConditionalStyled } from './useConditionalStyled';
|
|
3
3
|
export { default as useNavigatorChrome } from './useNavigatorChrome';
|
|
4
4
|
export * from './useNavigatorChrome';
|
|
5
|
+
export { default as useElementBindings, useActionHandlers, } from './useElementBindings';
|
|
5
6
|
//# sourceMappingURL=index.js.map
|
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AACrE,cAAc,sBAAsB,CAAC;AACrC,OAAO,EACL,OAAO,IAAI,kBAAkB,EAC7B,iBAAiB,GAClB,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import { DataProps } from '@mapples/types';
|
|
2
|
+
import { ActionPropsMap, AnyObject, RefPropsMap } from '../types';
|
|
3
|
+
/**
|
|
4
|
+
* Turn each `actionProps` entry into a handler that emits onto the action
|
|
5
|
+
* store. `dataProp` resolves from state (or an event arg for `"(this)"`);
|
|
6
|
+
* `staticData` is a literal payload merged in last so author-time config —
|
|
7
|
+
* e.g. a navigation target — survives regardless of state.
|
|
8
|
+
*/
|
|
9
|
+
export declare const useActionHandlers: (actionProps: ActionPropsMap | undefined) => Record<string, (...originalEventData: unknown[]) => void>;
|
|
10
|
+
/** What an element's bindings resolve to. */
|
|
11
|
+
export interface ElementBindings {
|
|
12
|
+
/**
|
|
13
|
+
* The reserved `_visible` binding resolved to a falsy value: the element
|
|
14
|
+
* (and its subtree) does not render.
|
|
15
|
+
*/
|
|
16
|
+
hidden: boolean;
|
|
17
|
+
/** Resolved data props (without `_visible`), to spread over the element's own props. */
|
|
18
|
+
dataProps: AnyObject;
|
|
19
|
+
/** Resolved `ref(…)` asset props. */
|
|
20
|
+
refProps: AnyObject;
|
|
21
|
+
/** One emitting handler per authored action. */
|
|
22
|
+
actionHandlers: Record<string, (...originalEventData: unknown[]) => void>;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Resolve an element's Creator bindings — data bindings (`dataProps`, with
|
|
26
|
+
* the reserved `_visible`), asset references (`refProps`) and actions
|
|
27
|
+
* (`actionProps`) — against the surrounding state, render and action
|
|
28
|
+
* contexts. The single implementation behind the canvas render pipeline
|
|
29
|
+
* (`RenderComponent`) and the exported app's `MapplesElement`, so a binding
|
|
30
|
+
* behaves the same on the canvas, in Play and in the built app.
|
|
31
|
+
*/
|
|
32
|
+
export declare const useElementBindings: (dataProps: DataProps | undefined, actionProps: ActionPropsMap | undefined, refProps: RefPropsMap | undefined) => ElementBindings;
|
|
33
|
+
export default useElementBindings;
|
|
34
|
+
//# sourceMappingURL=useElementBindings.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useElementBindings.d.ts","sourceRoot":"","sources":["../../src/hooks/useElementBindings.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAG3C,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAIlE;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,GAC5B,aAAa,cAAc,GAAG,SAAS,KACtC,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,OAAO,EAAE,KAAK,IAAI,CAoC1D,CAAC;AAEF,6CAA6C;AAC7C,MAAM,WAAW,eAAe;IAC9B;;;OAGG;IACH,MAAM,EAAE,OAAO,CAAC;IAChB,wFAAwF;IACxF,SAAS,EAAE,SAAS,CAAC;IACrB,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,gDAAgD;IAChD,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,GAAG,iBAAiB,EAAE,OAAO,EAAE,KAAK,IAAI,CAAC,CAAC;CAC3E;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,kBAAkB,GAC7B,WAAW,SAAS,GAAG,SAAS,EAChC,aAAa,cAAc,GAAG,SAAS,EACvC,UAAU,WAAW,GAAG,SAAS,KAChC,eAyBF,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { useActionStore } from '@mapples/action';
|
|
3
|
+
import { isThis, parseThis } from '@mapples/inlang';
|
|
4
|
+
import { useDataProps, useDataState } from '@mapples/state';
|
|
5
|
+
import { isPlainObject, mapValues } from 'lodash';
|
|
6
|
+
import useRefProps from './useRefProps';
|
|
7
|
+
/**
|
|
8
|
+
* Turn each `actionProps` entry into a handler that emits onto the action
|
|
9
|
+
* store. `dataProp` resolves from state (or an event arg for `"(this)"`);
|
|
10
|
+
* `staticData` is a literal payload merged in last so author-time config —
|
|
11
|
+
* e.g. a navigation target — survives regardless of state.
|
|
12
|
+
*/
|
|
13
|
+
export const useActionHandlers = (actionProps) => {
|
|
14
|
+
const { getValue } = useDataState();
|
|
15
|
+
const actionStore = useActionStore();
|
|
16
|
+
return useMemo(() => mapValues(actionProps ?? {}, (actionProp) => {
|
|
17
|
+
return (...originalEventData) => {
|
|
18
|
+
const dataProp = actionProp?.dataProp || '';
|
|
19
|
+
let resolved;
|
|
20
|
+
if (isThis(dataProp)) {
|
|
21
|
+
const [, indexStr] = parseThis(dataProp);
|
|
22
|
+
const index = indexStr ? parseInt(indexStr) : 0;
|
|
23
|
+
resolved = originalEventData[!isNaN(index) ? index : 0];
|
|
24
|
+
}
|
|
25
|
+
else if (dataProp) {
|
|
26
|
+
resolved = getValue({ key: dataProp, active: true });
|
|
27
|
+
}
|
|
28
|
+
const data = actionProp?.staticData
|
|
29
|
+
? {
|
|
30
|
+
...(isPlainObject(resolved)
|
|
31
|
+
? resolved
|
|
32
|
+
: {}),
|
|
33
|
+
...actionProp.staticData,
|
|
34
|
+
}
|
|
35
|
+
: resolved;
|
|
36
|
+
actionStore.next({
|
|
37
|
+
time: Date.now(),
|
|
38
|
+
type: actionProp?.type,
|
|
39
|
+
payload: { originalEventData, data },
|
|
40
|
+
});
|
|
41
|
+
};
|
|
42
|
+
}), [actionProps, actionStore, getValue]);
|
|
43
|
+
};
|
|
44
|
+
/**
|
|
45
|
+
* Resolve an element's Creator bindings — data bindings (`dataProps`, with
|
|
46
|
+
* the reserved `_visible`), asset references (`refProps`) and actions
|
|
47
|
+
* (`actionProps`) — against the surrounding state, render and action
|
|
48
|
+
* contexts. The single implementation behind the canvas render pipeline
|
|
49
|
+
* (`RenderComponent`) and the exported app's `MapplesElement`, so a binding
|
|
50
|
+
* behaves the same on the canvas, in Play and in the built app.
|
|
51
|
+
*/
|
|
52
|
+
export const useElementBindings = (dataProps, actionProps, refProps) => {
|
|
53
|
+
const propsWithData = useDataProps(dataProps);
|
|
54
|
+
const resolvedRefProps = useRefProps(refProps);
|
|
55
|
+
const actionHandlers = useActionHandlers(actionProps);
|
|
56
|
+
// Reserved binding: `dataProps._visible` conditionally shows the element.
|
|
57
|
+
// Only an ACTIVE binding participates (inactive/absent → always visible);
|
|
58
|
+
// a resolved falsy value (incl. the string 'false') hides the subtree.
|
|
59
|
+
const { _visible: visibleValue, ...visibleDataProps } = propsWithData;
|
|
60
|
+
const hidden = '_visible' in propsWithData &&
|
|
61
|
+
(visibleValue == null ||
|
|
62
|
+
visibleValue === false ||
|
|
63
|
+
visibleValue === 'false' ||
|
|
64
|
+
visibleValue === 0 ||
|
|
65
|
+
visibleValue === '');
|
|
66
|
+
return {
|
|
67
|
+
hidden,
|
|
68
|
+
dataProps: visibleDataProps,
|
|
69
|
+
refProps: resolvedRefProps,
|
|
70
|
+
actionHandlers,
|
|
71
|
+
};
|
|
72
|
+
};
|
|
73
|
+
export default useElementBindings;
|
|
74
|
+
//# sourceMappingURL=useElementBindings.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useElementBindings.js","sourceRoot":"","sources":["../../src/hooks/useElementBindings.ts"],"names":[],"mappings":"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"}
|